반응형
이메일 광고
처음에는 'Send' 버튼이 회색(#9E9E9E)으로 비활성화되어 있다가, 방문자가 올바른 형태의 이메일을 입력하면 파란색(#4D79C2)으로 활성화되어야 합니다.
- 이메일에는 @가 포함되어 있어야 한다.
- @ 뒤에는 최소 1개 이상의 .이 포함되어 있어야 한다.
<!DOCTYPE html>
<html>
<head>
<title>Consulting Market</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="hero-header">
<div class="navbar">
<a href="#" id="logo">
<img src="logo.png" width="230">
</a>
<ul class="menu menu-left">
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">BLOG</a></li>
</ul>
<ul class="menu menu-right">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LOGIN</a></li>
</ul>
</div>
<div class="container">
<div class="left">
<h2>더 많은 <b>정보와 이벤트</b> 등을<br> 받아보고 싶으면 <b>이메일을 입력해주세요!</b></h2>
<input id="email-input" type="email" placeholder="이메일">
<input id="submit-btn" type="submit" value="Send">
</div>
<img id="main-img" src="desk.png" width="400">
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$('#email-input').on('input', checkInput);
function checkInput() {
var atPos = $('#email-input').val().indexOf('@');
var email = $('#email-input').val().substr(atPos);
if (atPos !== -1 && email.indexOf('.') !== -1) {
$('#submit-btn').css('background-color', '#4d79c2');
} else {
$('#submit-btn').css('background-color', '#9e9e9e');
}
}
</script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
min-width: 992px;
}
/* Navigation Bar */
.navbar {
position: absolute;
top: 0;
left: 0;
min-width: 992px;
width: 100%;
padding-left: 23px;
padding-right: 23px;
}
.navbar {
height: 80px;
line-height: 80px;
}
.navbar #logo {
float: left;
margin: 0 17px;
}
.navbar #logo img {
vertical-align: middle;
}
.navbar .menu {
padding: 0;
margin: 0;
list-style: none;
font-size: 16px;
}
.navbar .menu li {
float: left;
margin: 0 17px;
}
.navbar .menu li a {
color: #817C92;
text-decoration: none;
vertical-align: middle;
}
.navbar .menu-left {
float: left;
}
.navbar .menu-right {
float: right;
}
/* Hero Header */
.hero-header {
height: 100vh;
background-image: linear-gradient(-1deg, rgba(77,121,194,0.22) 0%, rgba(77,121,194,0.00) 100%);
}
.container {
text-align: center;
line-height: 100vh;
}
.left {
width: 500px;
display: inline-block;
vertical-align: middle;
line-height: normal;
text-align: left;
}
.left h2 {
font-weight: normal;
font-size: 24px;
color: #323966;
line-height: 45px;
margin: 0;
margin-bottom: 20px;
}
.left #email-input {
background: #FFFFFF;
box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.20);
border-radius: 5px;
font-size: 18px;
padding: 18px 24px;
padding-right: 118px;
border: none;
width: 400px;
}
.left #submit-btn {
margin-left: -100px;
width: 88px;
background: #9E9E9E;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
border-radius: 5px;
border: none;
color: white;
padding: 10px 0;
font-size: 16px;
cursor: pointer;
}
.container #main-img {
vertical-align: middle;
}
본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
|---|---|
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 01. HTML, CSS와의 콜라보레이션 (0) | 2021.02.16 |