Web design with dark landing page

index.html

<div class='page'>
	<nav>
		<a href='#'>Browse</a>
		<a href='#'>Support</a>
		<a href='#'>Blog</a>
		<a href='#'>Sign in</a>
		<a href='#'>
			<div class='button'>
				Sign up
			</div>
		</a>
	</nav>
	<div class='banner-wrapper'>
		<div class='app-form'>
			<h1>Exclusive deals in your inbox</h1>
			<p>We'll send you the hottest deals straight to your inbox so you are always on on the best-kept pet secrets.</p>
			<div class='input-container'>
				<input placeholder='Enter your email here '></input>
				<div class='button'>Sign up</div>
			</div>
		</div>
		<img class='app-image' width="50%" src="https://assets.codepen.io/1839803/good_doggy.svg" />
	</div>
</div>

style.scss

$space-cadet: #343047;
$roman-silver: #777787;
$medium-slate-blue: #7a6de3;
$french-liliac: #6c5884;
$periwinkle-crayola: #b9bddc;
$lavender-floral: #a687e5;
$medium-slate-blue: #6c63ff;
$supreme-white: #ffffff;

* {
	// Just a switch to turn off all the borders on the elements,
	// which have been added for better visualization of positioning

	border: none !important; // comment/uncomment me to see/unsee the elements in the full grid
}

body {
	background-color: $space-cadet;
}

.page {
	border: 2px red solid;
	height: 100%;

	.button {
		border: 3px purple solid;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background: $medium-slate-blue;
		border-radius: 10px;
		width: 90px;
		height: 30px;
	}

	nav {
		width: 95%;
		margin: 20px auto;
		border: 2px blue solid;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;

		:last-child {
			margin: 0 15px;
		}

		a {
			text-decoration: none;
			display: flex;
			align-items: center;
			border: 2px green solid;
			margin: 20px;
			font-size: 1rem;
			font-weight: bold;
			font-family: "Varela Round", sans-serif;
			color: $supreme-white;
		}
	}

	.banner-wrapper {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		border: 2px magenta solid;

		.app-form {
			display: flex;
			align-self: center;
			flex-direction: column;
			border: 2px yellow solid;
			max-width: 600px;
			margin: 0 20px;

			h1 {
				border: 2px yellow solid;
				font-family: "Varela Round", sans-serif;
				color: $supreme-white;
				font-size: 2rem;
				padding: 5px;
			}

			p {
				border: 2px cyan solid;
				display: flex;
				font-size: 1.1rem;
				color: $supreme-white;
				font-family: "Varela Round", sans-serif;
				padding: 5px;
			}

			.input-container {
				display: flex;
				border: 2px red solid;
				justify-content: space-between;
				padding: 5px;

				input {
					display: flex;
					width: 280px;
					border: 2px gray solid;
					border-radius: 5px;

					:placeholder {
						font-family: "Varela Round", sans-serif;
						font-size: 1rem;
					}
				}

				.button {
					display: flex;
					border: 2px yellow solid;
					font-size: 1rem;
					color: $supreme-white;
					font-family: "Varela Round", sans-serif;
					font-weight: bold;
				}
			}
		}

		.app-image {
			border: 2px gray solid;
			display: flex;
			align-self: flex-end;
			max-width: 600px;
			height: 500px;
		}
	}
}

web-design-with-dark-landing-page.markdown

Web design with dark landing page

A Pen by George Gabriel on CodePen.

License.