가오리의 코딩일기

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

HTML+CSS+JavaScript/세미나

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

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

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>HALLOWEEN</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="wrapper">
      <!-- header start -->
      <header>
        <img src="./images/halloween-profile.png" alt="" class="profile" />
        <h1>Jack-O'-Lantern</h1>
        <p>
          A jack-o-lantern is a carved pumpkin, turnip,or other root vegetable lantern associated with Halloween. Its name comes from the phenomenon of a
          strange light flickering over peat bogs, call will-o'-the-wisp or jack-o'-lantern.
        </p>
      </header>
      <!-- header end -->
      <div class="contents">
        <div class="section">
          <h2>Information</h2>
          <ul>
            <li>1234@gmail.com</li>
            <li>000-3234-2344</li>
            <li>Seoul, Korea</li>
          </ul>
        </div>
        <!-- section end -->
        <div class="section skills">
          <h2>Skills</h2>
          <ul>
            <li>Photoshop</li>
            <li>Web Front-End</li>
            <li>Education</li>
          </ul>
        </div>
        <!-- section, skills end -->
      </div>
      <!-- contents end -->
      <footer>
        <h4>HAPPY HALLOWEEN</h4>
      </footer>
    </div>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
/* 스크롤바 넓이 */
::-webkit-scrollbar {
  width: 10px;
}
/* 배경 색 */
::-webkit-scrollbar-track {
  background-color: #2b302f;
}
/* 바 색상, 둥근 정도 */
::-webkit-scrollbar-thumb {
  background-color: #6a121d;
  border-radius: 5px;
}
/* hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #a14743;
}
.wrapper {
  /* height: 100vh; */
  height: 1300px;
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: url(./images/halloween-background.gif) no-repeat;
  background-size: cover;
}
header {
  height: 400px;
  width: 100vw;
  background: url(./images/halloween-header-bg.png) no-repeat center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
img {
  width: 200px;
}
h1 {
  color: rgb(248, 112, 255);
}
p {
  background-color: black;
  color: gray;
  width: 400px;
  border-radius: 10px;
  text-align: center;
}
li {
  list-style-type: none;
}
.contents {
  background-color: gray;
}
.section {
  background: url(./images/icon-information.png) no-repeat;
  background-position: 90% center;
  width: 720px;
  height: 180px;
  background-color: white;
  margin: 20px;
  padding: 20px;
}
.section li {
  background: url(./images/icon-jack2.png) no-repeat;
  padding: 10px 50px 10px;
}
.section li:hover {
  background: url(./images/icon-jack.png) no-repeat;
  color: rgb(255, 123, 0);
}
.skills {
  background-image: url(./images/icon-skills.png);
  background-repeat: no-repeat;
}
h2 {
  color: rgb(255, 123, 0);
  margin-bottom: 10px;
}
footer {
  width: 800px;
  height: 40px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
h4 {
  color: rgb(248, 112, 255);
}

 

 

 

 

저작자표시

'HTML+CSS+JavaScript > 세미나' 카테고리의 다른 글

[6주차] 2022 여름방학 HTML & CSS 세미나  (0) 2022.09.23
[5주차] 2022 여름방학 HTML & CSS 세미나  (0) 2022.09.23
[3주차] 2022 여름방학 HTML & CSS 세미나 과제  (0) 2022.09.23
[3주차] 2022 여름방학 HTML & CSS 세미나  (0) 2022.09.23
[2주차] 2022 여름방학 HTML & CSS 세미나 정리  (0) 2022.07.21
'HTML+CSS+JavaScript/세미나' Related Articles more