email-status이메일이 올바르지 않을 때 사용자에게 경고하기 위해 뷰포트 크기에 관계없이 이메일 입력 필드 바로 아래에 ID가있는 스팬을 배치하려고 합니다.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,600,700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Ping coming soon page</title>
<script defer src="https://friconix.com/cdn/friconix.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<object type="image/svg+xml" data="images/logo.svg" class="logo">
<p class="warning">Your browser does not support SVG. Please update!</p>
</object>
<h1>We are launching <span>soon!</span></h1>
<p>Subscribe and get notified</p>
<form action="#" method="#" class="email-newsletter-form">
<input type="email" name="email" id="email" placeholder="Your email address...">
<span id="email-status">Please enter a valid email</span>
<button type="submit">Notify Me</button>
</form>
<img class="dashboard" src="images/illustration-dashboard.png" alt="Picture of dashboard" />
<footer>
<div class="social-icons">
<a href="#"><i class="fi-xnsuxl-facebook"></i></a>
<a href="#"><i class="fi-xnsuxl-twitter"></i></a>
<a href="#"><i class="fi-xnsuxl-instagram"></i></a>
</div>
<p>© Copyright Ping. All rights reserved.</p>
</footer>
</div>
</div>
</body>
</html>
CSS :
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Libre Franklin", sans-serif;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 1000px) {
html {
font-size: 20px;
}
}
/* Container */
.container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 5vh 0 0 0;
}
.container .content {
max-width: 640px;
max-height: 640px;
}
.container h1 {
font-weight: 300;
color: #969696;
}
.container h1 span {
color: #151f29;
font-weight: 700;
}
.container .dashboard {
width: 100%;
}
/* Form */
form {
display: flex;
margin: 30px 0 0 0;
}
input[type=email] {
width: 63%;
border-radius: 40px;
border: 1px solid #c2d3ff;
color: #c2d3ff;
text-indent: 20px;
}
input[type=email]::placeholder {
color: #c2d3ff;
}
input[type=email]:focus {
outline: none;
}
button[type=submit] {
background-color: #4f7df3;
color: #fff;
padding: 0.8rem 3.5rem;
border-radius: 40px;
border: none;
font-weight: bold;
width: 34%;
margin-left: auto;
box-shadow: 5px 8px 15px #c2d3ff;
}
button[type=submit]:focus {
outline: none;
}
button[type=submit]:hover {
opacity: 0.7;
cursor: pointer;
}
@media screen and (max-width: 630px) {
form {
display: block;
margin-bottom: 20px;
}
form input[type=email] {
width: 100%;
padding: 0.8rem 0;
margin-bottom: 20px;
}
form button[type=submit] {
width: 100%;
}
}
@media screen and (max-width: 320px) {
form {
width: 80%;
margin: auto;
padding: 10% 0 20% 0;
}
}
@media screen and (max-width: 229px) {
button[type=submit] {
padding: 0.3rem 3.5rem;
}
}
.dashboard {
margin-top: 10%;
}
.error {
border-color: #a94442;
}
/* Footer */
footer {
color: #969696;
}
footer i {
border-radius: 50%;
border: 1px solid #c2d3ff;
padding: 8px;
width: 16px;
height: 16px;
text-align: center;
font-size: 17px;
}
footer i:hover {
color: #fff;
background-color: #4f7df3;
border: 1px solid #4f7df3;
}
footer a {
color: #4f7df3;
margin-right: 0.7em;
}
버튼에 ID를 부여하고 다음과 같이 #button사용 flex하십시오.
.email-newsletter-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#button #email {
flex: 1 1 0;
}
#email-status {
order: 3;
}
모바일 장치 및 더 작은 뷰포트의 경우 다음 media queries과 같이 사용 하십시오.
@media screen and (max-width: 600px) {
#email-status {
order: 0;
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다