비전공자 개발일기

HTML_CSS GRID 본문

HTML _CSS

HTML_CSS GRID

HiroDaegu 2021. 8. 8. 00:07
728x90
SMALL
<!DOCTYPE html>
<html>

<head>
  <title>IN'O</title>
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="navbar col">
    <span>IN'O</span>
  </div>
  <div class="banner col"></div>
  <div class="info col">
    <div class="helper"></div><div class="info_container">
      <div class="label">Portfolio</div>
      <h2>Make Hardware Soft</h2>
      <p>IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features. It naturally blends into your life through lean UX and minimal design.</p>
    </div>    
  </div>
  <div class="image1 col"></div>
  <div class="image2 col">
    <div class="helper"></div>
    <a href="#">VIEW MORE</a>
  </div>
  <div class="image3 col"></div>
</body>

</html>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.navbar {
  background-color: #353535;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-left: 30px;
  padding-right: 30px;
}

.navbar span {
  font-size: 20px;
  color: #fff;
}

.banner {
  background-image: url("../images/main_img.jpg");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 350px;
}

.info {
  background-color: #fff;
  width: 100%;
  height: 320px;
}

.info .helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info .info_container {
  display: inline-block;
  vertical-align: middle;
  padding-left: 30px;
  padding-right: 30px;
}

.info label {
  font-size: 16px;
  color: #4a4a4a;
}

.info h2 {
  font-size: 20px;
  color: #1b1b1b;
  margin-top: 10px;
  margin-bottom: 30px;
}

.info p {
  font-size: 16px;
  color: #7a7a7a;
  margin: 0;
}

.image1 {
  background-image: url("../images/img1.jpg");
  background-size: cover;
  background-position: center top;
  width: 100%;
  height: 385px;
}

.image2 {
  background-image: url("../images/img2.jpg");
  background-size: cover;
  background-position: center top;
  width: 100%;
  height: 200px;
  text-align: center;
}

.image2 .helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.image2 a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border: 4px solid #fff;
  padding: 9px 40px;
  vertical-align: middle;
}

.image3 {
  background-image: url("../images/img3.jpg");
  background-size: cover;
  background-position: center top;
  width: 100%;
  height: 200px;
}

@media (min-width: 768px) {
  .col {
    float: left;
  }

  .banner {
    height: 562px;
  }
  
  .info {
    height: 282px;
  }

  .info .info_container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .image1 {
    width: 50%;
    height: 360px; 
  }

  .image2 {
    width: 50%;
    height: 180px;
  }

  .image3 {
    width: 50%;
    height: 180px;
  }
}

@media (min-width: 992px) {
  .banner {
    width: 50%;
    height: 700px;
  }
  
  .info {
    width: 50%;
    height: 350px;
  }

  .image1 {
    width: 25%;
    height: 350px;
  }

  .image2 {
    width: 25%;
    height: 175px;
  }

  .image3 {
    width: 25%;
    height: 175px;
  }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

HTML  (0) 2021.08.19
HTML  (0) 2021.08.16
HTML_CSS GRID  (0) 2021.08.07
CSS - SCSS  (0) 2021.08.01
CSS - BootStrap  (0) 2021.07.31
'HTML _CSS' Related Articles more