Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
	<div class="form-wrapper">
		<form action="" class="notify-form">
			<div class="field">
				<input type="email" name="email" placeholder="Your Email Please..." autofocus="">
				<div class="message">Notify me</div>
				<div class="message message-end">Thank You</div>
				<div class="btn-send">Send</div>
			</div>
		</form>
	</div>

	<footer class="author-bar">
		<div class="author">
			<div class="my-pic">
			</div>
			<span>Amaury</span>
		</div>
		<div class="fb-profile">
			I am on facebook <a href="https://www.facebook.com/amaurydiallo" target="_blank">@amaurydiallo</a>
		</div>
		<div class="fb-page">
			My facebook page <a href="https://www.facebook.com/amaury224" target="_blank">@amaury224</a>
		</div>
		<div class="twt-profile">
			I am on twitter too <a href="https://www.twitter.com/amaury-diall0" target="_blank">@amaury-diall0</a>
		</div>
	</footer>
</body>
              
            
!

CSS

              
                
$border-radius-value: 50px;
$primary-color: #FF8871;

*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
	font-family: "Trebuchet MS", "apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: $primary-color;
	display: flex;
	justify-content: center;
	align-items: center;
}

.form-wrapper {
	width: 90%;
	max-width: 400px;
	border-radius: 8px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.notify-form {
	.field {
		position: relative;

		input, .message{
			width: 300px;
			height: 70px;
			border: none;
			padding: 1.2em 2em;
			background-color: #fff;
			border-radius: $border-radius-value;
			font-family: inherit;
			font-size: 1.4em;
			color: $primary-color;
			transition: .5s cubic-bezier(.77,-0.59,.21,1.36);
		}
		input {
			padding-right: 4.2em;
		}

		.message{
			position: absolute;
			z-index: 2;
			top: 0;
			font-weight: bold;
			font-size: 1.7em;
			padding-top: 18px;
			text-align: center;
			-moz-user-select: none;
			-webkit-user-select: none;
			user-select: none;
			transition: transform .8s ease-in-out,  opacity .9s .2s ease-out, ;

			&.message-end {
				z-index: 1;
				opacity: 0;
			}
			&.message-end.active {
				z-index: 3;
				opacity: 1;
			}
		}

		.btn-send{
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%) scale(0);
			opacity: 0;
			font-weight: 400;
			text-align: center;
			-moz-user-select: none;
			-webkit-user-select: none;
			user-select: none;
			padding: 0.375rem 0.75rem;
			background-color: rgba($primary-color, .7);
			border-radius: $border-radius-value;
			color: rgba(#fff, .5);
			font-size: 1.6em;
			line-height: 1.6;
			transition: .5s cubic-bezier(.77,-0.59,.21,1.36);
			
			&:not(.active) {
				pointer-events: none;
			}

			&.active {
				color: #fff;
				background-color: $primary-color;
			}
		}
	}

	&.active {
		.field {

			.btn-send {
				transform:  translateY(-50%) scale(1);
				opacity: 1;
			}
			input{
				width: 400px;
				&:focus {
					box-shadow: 1px 1px 15px 1px rgba(#000, .6);
          border: none;
          outline: none;
				}
			}
			.message {
				transform:  translateY(-400%);
				opacity: 0;
			}
		}
	}
}

.author-bar {
	position: fixed;
	bottom: 0;
	min-height: 70px;
	width: 100vw;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	background: linear-gradient(-120deg, skyblue 30%, darkviolet 90%);
	color: #fff;

	a {
		color: #000;
	}

	>div {
		margin: 0 15px;
	}

	.author {
		display: flex;
		justify-content: center;
		align-items: center;

		.my-pic {
			width: 50px;
			height: 50px;
			margin-right: 10px;
			border-radius: 50%;
			border: 1px solid #fff;
			background: url('data:image/jpeg;base64,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') center no-repeat;
			background-size: cover;
		}
	}
}
              
            
!

JS

              
                
		$('.message:not(.message-end)').click(function (event) {
			$('.notify-form').addClass('active')
			$('.field input').focus()
		})

		$('.field input').keyup(function(event) {

			if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(event.target.value)) {
				$('.btn-send').addClass('active')				
			}
			else {
				$('.btn-send').removeClass('active')
			}
		})

		$('.btn-send').click(function (event) {
			$('.notify-form').removeClass('active')
			$('.message-end').addClass('active')

			setTimeout( function (event) {
				$('.message-end').removeClass('active')
				$('.btn-send').removeClass('active')
				$('.field input').val("")
			}, 2000)
		})
              
            
!
999px

Console