가오리의 코딩일기

[5주차] 2022 여름방학 HTML & CSS 세미나 본문

HTML+CSS+JavaScript/세미나

[5주차] 2022 여름방학 HTML & CSS 세미나

류경혜 2022. 9. 23. 18:35

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
'HTML+CSS+JavaScript/세미나' Related Articles more