웹 개발 - CSS 연습(2)

개발/프론트엔드 개발

by oVeron 2023. 1. 12. 22:47

728x90

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>You Are Awesome!</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.14.0/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <header class="header">
      <span class="header__icon"><i class="fas fa-bars fa-2x"></i></span>
      <span class="header__title">library</span>
      <span class="header__icon"
        ><i class="fas fa-shopping-bag fa-2x"></i
      ></span>
    </header>

    <div class="searchbar">
      <input class="searchbar__input" placeholder="Search books...." />
      <button class="searchbar__icon"><i class="fas fa-search"></i></button>
    </div>

    <main class="contents">
      <span class="titles">Game of the day</span>
      <div class="Gotd">
        <img
          class="Gotd__img"
          src="https://w.namu.la/s/aff5c7f83f3a42eec6505693f4f54efcc271b8ef57874e6494695646a7026f33171e8def8482e4dae208865bfc61246d4dcabb60a655838c274266e30954593c0ec76b41ee302b2ef1632930c63689ff8517cf96cccce84d9253680460c112a088d41b7f86f97598dd71f57934e02169"
        />
        <div class="Gotd__info">
          <span class="Gotd__title">Hollow Knight</span>
          <span class="Gotd__producer">Team Cherry</span>
          <span class="Gotd__stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </span>
          <div class="Gotd__tag">
            <div class="Gotd__tag__info">platformer</div>
            <div class="Gotd__tag__info">metroidvania</div>
          </div>
          <div class="Gotd__book">
            <div class="Gotd__book__icon">
              <i class="fas fa-bookmark fa-lg"></i>
            </div>
            <button class="Gotd__book__button">Book Now</button>
          </div>
        </div>
      </div>

      <span class="titles">Top Games</span>
      <div class="TopGames">
        <div class="TopGames__game">
          <img
            src="https://w.namu.la/s/96bd18a9bb3f75cacb499d66f2e8d70cdab2f2ac927167fa55fa266ce954a3e722afeaf6c0bc68aca7fcd1355d2eed29f94ca47b40f76f4eb76b28581e90adbe983d2827e0eecc17b34134b693e5ae73c64871ef094a8d1ab035822fd667a4b4206090218d411112b73b09e6472ae28b"
          />
          <div class="TopGames__game__stars">
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
          </div>
        </div>
        <div class="TopGames__game">
          <img
            src="https://w.namu.la/s/5372b6a2db3e49c62a12b29d27c113b5ba91fd77a9efb2e79f49a4a2e2b1f3ed88dc2e865bfbf802e3cfe50a1f246877efff843285eb2f636ac678a43259de35a0c1988d511e913d211c67e6fca8f091e60240d9dc2ab5bc67e0cc2c405d3e8be7141bc6833206c41163a4efcb2b6f44"
          />
          <div class="TopGames__game__stars">
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="far fa-star fa-sm"></i>
          </div>
        </div>
        <div class="TopGames__game">
          <img
            src="https://w.namu.la/s/495d9cc1e5a23d24efbeae0006cd3b7f5be03bacffb53f90936801d21048bcbd7ae18326c7c031fcdd167d1b391626db8b6cf5f5691b648c30f804ff7bd957829a2c254f15a3f8e03d43c094c2d15f42dd48f6fa06054f306ee5e0c5c083a242f6964ab847f649413a3e667c80b82c95"
          />
          <div class="TopGames__game__stars">
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star-half-alt fa-sm"></i>
          </div>
        </div>
        <div class="TopGames__game">
          <img
            src="https://w.namu.la/s/65b1f65306be2a15979ae4c1ab8c40bd2fd84e9eae120f6067aa223826e97512a94249553377012e8f8c8d6c2fcf3b1195ee96a61185b41bad98880f02f688d6f32f176359509783593aa04dc776f1cba634b12b9369b60bb820445b25908a6843e794efe5525d065f7ae00f02f0525a"
          />
          <div class="TopGames__game__stars">
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star fa-sm"></i>
            <i class="fas fa-star-half-alt fa-sm"></i>
          </div>
        </div>
      </div>

      <span class="titles">Popular Games</span>
      <div class="PopGames">
        <img
          src="https://w.namu.la/s/f9d0322b9a295949cdce7d8f62bfb28d3e0fd378f9d8ddb5214e7790a8982cfc1bed8c529aaa3c78706c05e90a8a7cd5b84ed52ac7a197401d7c0959032121db7f7d74784497c5b9b0330deb59973357d77861bbc881179ba46b8e697a1aa6e72cef218004201b5d5468ed0d1f5b671b"
        />
        <div class="PopGames__info">
          <span class="PopGames__info__title"
            >Ori and the Will of the Wisps</span
          >
          <p class="PopGames__info__intro">
            Play the critically acclaimed masterpiece. Embark on a new journey
            in a vast, exotic world where you’ll encounter towering enemies and
            challenging puzzles on your quest to unravel Ori’s destiny.
          </p>
        </div>
      </div>
    </main>
  </body>
</html>

* {
    box-sizing: border-box;
}

.header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 45px;
    padding-bottom: 90px;
    background-color: #FFCE33;
}
.header__icon{
    width: 33.3%;
}
.header__icon:first-child i{
    margin-left: 16px;
}
.header__icon:last-child{
    display: flex;
    justify-content: flex-end;
}
.header__icon:last-child i{
    margin-right: 16px;
}
.header__title{
    width: 33.3%;
    text-align: center;
    font-size: 26px;
    font-weight: 400;
    opacity: 0.9;
}

.searchbar{
    background-color: #FFFFFF;
    height: 80px;
    position: absolute;
    top: 135px;
    left: 20px;
    right: 20px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 10px 1px #F7F7F7;
}
.searchbar__input{
    border: none;
    opacity: 0.2;
    margin-left: 55px;
}
.searchbar__icon{
    border: none;
    opacity: 0.2;
    margin-right: 30px;
}

.contents{
    margin-top: 95px;
    margin-left: 30px;
    margin-bottom: 30px;
}

.titles{
    display: block;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
}
.Gotd{
    display: flex;
    margin-bottom: 46px;
}
.Gotd__img{
    height: 280px;
    width: 180px;
    border-radius: 10px;
    margin-right: 32px;
}
.Gotd__title{
    display: block;
    font-size: 24px;
    font-weight: bold;
    opacity: 0.8;
    margin-bottom: 20px;
}
.Gotd__producer{
    display: block;
    font-size: 18px;
    opacity: 0.2;
    margin-bottom: 22px;
}
.Gotd__stars{
    display: block;
    color: #FFCE33;
    margin-bottom: 36px;
}
.Gotd__tag{
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}
.Gotd__tag__info{
    background-color: #F7F7F7;
    height: 40px;
    width: 120px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
}
.Gotd__book{
    display: flex;
}
.Gotd__book__icon{
    background-color: #FFCE33;
    height: 56px;
    width: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 66px;
}
.Gotd__book__button{
    background-color: black;
    color: white;
    height: 56px;
    width: 176px;
    border: none;
    border-radius: 10px;
}

.TopGames{
    display: flex;
    margin-bottom: 36px;
    margin-right: 30px;
}
.TopGames__game{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 42px;
}
.TopGames__game img{
    height: 185px;
    width: 120px;
    border-radius: 10px;
    margin-bottom: 28px;
}
.TopGames__game__stars{
    color: #FFCE33;
}

.PopGames{
    display: flex;
}
.PopGames__info{
    margin-right: 30px;
}
.PopGames img{
    height: 222px;
    width: 180px;
    border-radius: 10px;
    margin-right: 42px;
}

.PopGames__info__title{
    display: block;
    font-size: 26px;
    font-weight: 700;
    opacity: 0.7;
    margin-bottom: 32px;
    line-height: 25px;
}
.PopGames__info__intro{
    font-size: 18px;
    opacity: 0.2;
    line-height: 25px;
}

https://replit.com/@emeralhedgehog/WeLoveYouBlueprint-5#index.html

WeLoveYouBlueprint (5)

Run HTML, CSS, JS code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.

replit.com

728x90

'개발 > 프론트엔드 개발' 카테고리의 다른 글

웹 개발 - JavaScript(3) (0)	2023.01.15
웹 개발 - CSS 연습(3) (0)	2023.01.13
웹 개발 - JavaScript(2) (0)	2023.01.12
웹 개발 - CSS 연습(1) (0)	2023.01.11
웹 개발 - JavaScript(1) (0)	2023.01.11