My Favoraite Color

코드보기

HTML

style.html


<!DOCTYPE html>
<html>
  <head>
    <link href="scss/style.css" rel="stylesheet" >
    <title></title>
  </head>
  <body>
    <div class="wrapper">
      <div class="nav">
        <div class="upper">
          I LOVE GREEN
        </div>
        <div class="middle">
          <h2>
            my favoraite color
          </h2>
          <ul>
            <li>HOME</li>
            <li>SERVECES</li>
            <li>SPACES</li>
            <li>TEAM</li>
            <li>ADVICE</li>
            <li>CONTACT</li>
          </ul>
        </div>
        <div class="footer">
          <div>
            1300 726 566<br>
            saza@green.com
          </div>
          <div>
            <h4>Melbourne</h4>
            1374 North Road<br>
            Huntingdale VIC 3166
          </div>
          <div>
            <h4>Melbourne</h4>
            1374 North Road<br>
            Huntingdale VIC 3166
          </div>
          <div>
            <span>EN</span> | <span>中</span>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="upper">HOME</div>
        <div class="middle">
          <h1>
            <span class="greenText">GREEN</span><br>makes me<br>comportable.
          </h1>
          <article>
            녹색(green, 綠色) 또는 초록은 식물의 잎과 같은 색이며, 굴절률이 파랑 다음으로 큰 색이다.<br> 1931년 국제조명위원회는 초록의 파장을 546.1nm으로 정의했다. 
          </article>
        </div>
      </div>
      <div class="mainPic">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="aside">
        <div class="upper">SERVICES</div>
        <div class="middle">
          <h3>Also I like cat...</h3>
        </div>
      </div>
      <div class="asidePic">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </body>
</html>

HTML

CSS(SASS)

style.css


@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  height: 100vh;
  padding: 10px;
}

* {
  box-sizing: border-box;
}

.wrapper { 
  width:100%; 
  height:100%;
  background-color: rgb(45, 63, 39);

  display: grid;
  gap: 5px;
  padding: 5px;

  grid-template-columns: 1fr 1.2fr 3fr;
  grid-template-rows: 3.3fr 1fr;
}

.nav {
  grid-row-start: span 2;
  background-color: white;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.upper {
  padding: 10px;
  font-size: 12px;
}

.nav .middle {
  margin-bottom: 10%;
}

.middle h1 {
  margin: 10px 10px 15px 10px;
  font-size: 190%;
  font-weight: 500;
}
.middle h2 {
  margin: 10px 10px 15px 10px;
  font-size: 180%;
  font-weight: 500;
}
.middle h3 {
  margin: 10px;
  font-size: 160%;
  font-weight: 500;
}
.middle article {
  line-height: 150%;
  margin: 10px;
}

ul {
  border-top: solid 2px rgb(45, 63, 39);
}
li {
  border-bottom: solid 2px rgb(45, 63, 39);
  padding: 5px 10px 5px 10px;
}
li:hover {
  background-color: rgb(131, 216, 168);
}

.footer {
  height: 35%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.footer h4 { font-weight: 500; }

.main {
  background-color: rgba(255, 255, 255, 0.5);
}

.mainPic {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.item {
  background-size: cover;
  background-position: center;
}

.mainPic .item:nth-child(1) {
  background-image: url("https://i.imgur.com/gDEzyEB.jpg");
  grid-column: span 3;
  grid-row: span 8;
}
.mainPic .item:nth-child(2) {
  background-image: url("https://i.imgur.com/bjUcLZ9.jpg");
  grid-column: span 3;
  grid-row: span 4;
}
.mainPic .item:nth-child(3) {
  background-image: url("https://i.imgur.com/e53WjVE.jpg");
  grid-column: span 2;
  grid-row: span 2;
}
.mainPic .item:nth-child(4) {
  background-image: url("https://i.imgur.com/qAQ36GM.jpg");
}
.mainPic .item:nth-child(5) {
  background-image: url("https://i.imgur.com/Vyom3zx.jpg");
}
.mainPic .item:nth-child(6) {
  background-image: url("https://i.imgur.com/ccs8Py5.jpg");
  grid-row: span 2;
  background-position: left;
}
.mainPic .item:nth-child(7) {
  background-image: url("https://i.imgur.com/zKJLxFA.jpg");
  grid-column: span 2;
  grid-row: span 2;
  background-size: auto;
}

.aside {
  background-color: rgba(255, 255, 255, 0.5);;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.asidePic {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.asidePic .item:nth-child(1) {
  background-image: url("https://i.imgur.com/JbGaMOy.jpg");
  grid-row: span 2;
}
.asidePic .item:nth-child(2) {
  background-image: url("https://i.imgur.com/rHwGOYG.jpg");
  grid-area: 2/2;
}
.asidePic .item:nth-child(3) {
  background-image: url("https://i.imgur.com/KGYtZDo.jpg");
}
.asidePic .item:nth-child(4) {
  background-image: url("https://i.imgur.com/zInuy8i.jpg");
  grid-column: span 4;
  grid-row: span 2;
}

CSS