가오리의 코딩일기

Easy Full Screen Loading Page 본문

HTML+CSS+JavaScript/만들기

Easy Full Screen Loading Page

류경혜 2022. 6. 27. 21:00

https://www.youtube.com/watch?v=qEkjC6GCrg4&list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg&index=8 

<!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>Easy Full Screen Loading Page</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Questrial&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="main">
      <div id="contents">
        <h1>Simple, One Page Design</h1>
        <p>A free landing page theme with video background</p>
        <a href="#">Get Started</a>
      </div>
    </div>
  </body>
</html>

 

html,
body {
  margin: 0;
  padding: 0;
}
h1,
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
#main {
  background: url(./bg-img.jpeg) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  font-family: "Questrial", sans-serif;
}
#contents {
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%; /* 시작점이 50% 지점이라는거지 전체가 중앙이다!는 아님 */
  transform: translateY(-50%);
}
#contents h1 {
  font-family: "Dancing Script", cursive;
  font-size: 70px;
  margin-bottom: 16px;
}
#contents p {
  font-size: 23px;
  margin-bottom: 16px;
}
#contents a {
  display: inline-block;
  border: 2px solid white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: bold;
  transition: all 0.5s;
}
#contents a:hover {
  background-color: gray;
}
@media (max-width: 769px) {
  #contents h1 {
    font-size: 50px;
  }
  #contents p {
    font-size: 20px;
  }
  #contents a {
    font-size: 14px;
  }
}

 

저작자표시

'HTML+CSS+JavaScript > 만들기' 카테고리의 다른 글

HTML5와 CSS3를 사용해서 웹 페이지 하나 만들어보기  (0) 2022.06.04
Flexbox Defense  (0) 2022.06.02
CSS DINER(3)  (0) 2022.06.01
CSS DINER(2)  (0) 2022.06.01
CSS DINER(1)  (0) 2022.06.01
'HTML+CSS+JavaScript/만들기' Related Articles more