Email Form responsive with CSS



DevForum chia sẻ các bạn cách code Email Form có Responsive với CSS đơn giản.
 

1. HTML

<header class="hero">
		<div class="hero-inner">
			<div class="hero-text">
				<h1>DevForum.Info</h1>
				<h2>Forum Web Frontend and Testing</h2>
				<p>Diễn đàn chia sẻ miễn phí code mẫu về Giao diện Admin, Template Frontend Free, HTML , CSS , JavaScript , Selenium và Automation Testing.</p>
				<form class="hero-form" action="/">
					<div class="hero-form-input">
						<input class="hero-email-input" type="email" , placeholder="Email Address" required>
						<input class="hero-form-submit" type="submit" , value="Sign Up">
					</div>
				</form>
			</div>

			<div class="hero-image">
				<img src="https://assets.codepen.io/495197/undraw_Newsletter_re_wrob.svg" />
			</div>
		</div>
	</header>

2. CSS

.hero {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2rem;
			background-color: #636efd;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}

		@media (min-width: 700px) {
			.hero {
				padding: 3rem;
			}
		}

		@media (min-width: 1200px) {
			.hero {
				padding: 6rem;
			}
		}

		.hero-inner {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			max-width: 900px;
			margin: auto;
		}

		@media (min-width: 800px) {
			.hero-inner {
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: center;
				gap: 2rem;
			}
		}
		
		h1 {
			font-size: 30pt;
			color: yellow;
			font-weight: bold;
		}

		.hero-inner p,
		.hero h2 {
			color: #fff;
		}

		.hero-button {
			background: #fff;
			color: #444;
			border: 0;
			padding: 1rem 2rem;
			display: inline-block;
			margin-top: 1rem;
		}

		@media (min-width: 700px) {
			.hero-button {
				margin-top: 2rem;
			}
		}

		.hero-image {
			order: -1;
			justify-items: center;
		}

		@media (min-width: 800px) {
			.hero-image {
				order: initial;
			}
		}

		.hero-image img {
			width: 100%;
		}

		.hero-form {
			margin-top: 1rem;
		}

		@media (min-width: 700px) {
			.hero-form {
				margin-top: 2rem;
			}
		}

		.hero-form-input {
			display: grid;
			grid-template-columns: 1fr;
		}

		@media (min-width: 400px) {
			.hero-form-input {
				display: grid;
				grid-template-columns: 1fr auto;
			}
		}

		.hero-email-input {
			padding: 1rem;
			box-sizing: border-box;
		}

		.hero-form-submit {
			background-color: #f50057;
			color: #fff;
			border: none;
			padding: 1rem 2rem;
			margin-top: 0.5rem;
		}

		@media (min-width: 400px) {
			.hero-form-submit {
				margin-top: 0;
			}
		}

3. JAVASCRIPT


 


Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.