가오리의 코딩일기
[5주차] 2022 여름방학 HTML & CSS 세미나 본문
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Best Colors</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>The Best Colors</h1>
<div class="wrapper">
<div class="container">
<div class="tomato color">
<div class="color_bg"></div>
<div class="color_info">
<h3>Tomato</h3>
<h5>#FF6347</h5>
</div>
</div>
<!-- tomato-->
<div class="teal color">
<div class="color_bg"></div>
<div class="color_info">
<h3>Teal</h3>
<h5>##008080</h5>
</div>
</div>
</div>
<!-- Teal-->
<div class="container">
<div class="burlywood color">
<div class="color_bg"></div>
<div class="color_info">
<h3>Burlywood</h3>
<h5>#DE8887</h5>
</div>
</div>
<!-- Burlywood-->
<div class="thistle color">
<div class="color_bg"></div>
<div class="color_info">
<h3>Thistle</h3>
<h5>#D78FD7</h5>
</div>
</div>
</div>
<!-- Thistle-->
</div>
</body>
</html>
style.css
body {
margin: 0;
height: calc(100vh - 20px);
background-color: lightgray;
}
h1 {
text-align: center;
margin-bottom: 50px;
margin-top: 20px;
}
.wrapper {
width: 450px;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
.color {
width: 200px;
position: relative;
margin-bottom: 20px;
}
.tomato .color_bg {
background-color: tomato;
}
.teal .color_bg {
background-color: teal;
}
.burlywood .color_bg {
background-color: burlywood;
}
.thistle .color_bg {
background-color: thistle;
}
.color_bg {
height: 300px;
border: 5px solid white;
}
.color_info {
position: absolute;
width: 100%;
background-color: white;
top: 20px;
padding: 0px 10px;
box-sizing: border-box;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LOGIN</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="login_form">
<div class="login_form_headfer">
<span class="menu">SIGN IN</span>
<span class="menu">SIGN UP</span>
</div>
<form action="#" method="get">
<input type="text" name="user_name" placeholder="UserName" />
<input type="email" name="user_email" placeholder="Email ID" />
<input type="password" name="user_password" placeholder="Password" />
<div class="checkbox">
<input type="checkbox" name="checkbox" />
<label for="checkbox">I agree to terms and conditions</label>
</div>
<input type="submit" value="REGISTER" />
</form>
</div>
</body>
</html>
style.css
@import url("<https://fonts.googleapis.com/css2?family=DynaPuff&display=swap>");
body {
width: 100vw;
height: 100vh;
margin: 0;
background: url("./minions.jpg") no-repeat center/cover;
display: flex;
justify-content: center;
align-items: center;
color: rgb(249, 223, 72);
font-family: "DynaPuff", cursive;
font-weight: 400;
}
.login_form {
width: 500px;
height: 400px;
padding: 20px 30px;
background: url("./minions.jpg") no-repeat center/cover;
background-size: 1800px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 19px 38px, rgba(0, 0, 0, 0.52) 0px 15px 12px;
}
.login_form_header {
margin: 10px 0 40px;
font-size: 20px;
font-weight: 600;
}
.login_form span:hover {
padding-bottom: 5px;
border-bottom: 4px solid rgb(255, 204, 0);
cursor: pointer;
}
.login_form_header:first-child {
margin-right: 30px;
}
form {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
input {
color: rgb(249, 223, 72);
margin-top: 10px;
}
input::placeholder {
color: rgb(255, 204, 0);
}
input:focus {
outline: none;
}
form > input:not(input[type="submit"]) {
width: 100%;
height: 30px;
border: none;
border-bottom: 4px solid rgb(255, 204, 0);
background-color: transparent;
font-size: 20px;
}
.checkbox {
width: 100%;
}
input[type="checkbox"],
label {
cursor: pointer;
}
input[type="submit"] {
width: 150px;
height: 30px;
padding-top: 2px;
border: none;
background-color: rgb(255, 204, 0);
border-radius: 20px;
color: white;
cursor: pointer;
font-family: "DynaPuff", cursive;
font-weight: 400;
}
'HTML+CSS+JavaScript > 세미나' 카테고리의 다른 글
[6주차] 2022 여름방학 HTML & CSS 세미나 과제 (0) | 2022.09.23 |
---|---|
[6주차] 2022 여름방학 HTML & CSS 세미나 (0) | 2022.09.23 |
[4주차] 2022 여름방학 HTML & CSS 세미나 (0) | 2022.09.23 |
[3주차] 2022 여름방학 HTML & CSS 세미나 과제 (0) | 2022.09.23 |
[3주차] 2022 여름방학 HTML & CSS 세미나 (0) | 2022.09.23 |