짱짱해커가 되고 싶은 나

[HTML/CSS] 쇼핑몰 구현 본문

Web

[HTML/CSS] 쇼핑몰 구현

동로시 2021. 3. 9. 20:38

프로젝트 계획

- 네비게이션 바

- 헤더이미지

- 아이템 메뉴 (3 * 3)

- 푸터

 

<index.html>

<!DOCTYPE html>
<html>
  <head>
    <title>SimpleShop</title>
    <meta charset="utf-8" />
    <link href="css/styles.css" rel="stylesheet" />
  </head>

  <body>
    <div class="navbar">
      <a class="logo" href="#">
        <img src="images/logo.png" height="20px">
      </a>
      <ul>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Cart</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </div>
    
    <img class="hero_header" src="images/hero_header.jpg">
    <h1>Our new Products</h1>
    <div class="products">
      <a href="#">
        <img src="images/sunglasses.jpg">
        <p>Sunglasses</p>
        <p class="price">49,000</p>
      </a>
      <a href="#">
        <img src="images/tassel_loafer.jpg">
        <p>Tassel Loafer</p>
        <p class="price">89,000</p>
      </a>
      <a href="#">
        <img src="images/beige_bag.jpg">
        <p>Begie Bag</p>
        <p class="price">69,000</p>
      </a>
      <a href="#">
        <img src="images/sneakers.jpg">
        <p>Sneakers</p>
        <p class="price">79,000</p>
      </a>
      <a href="#">
        <img src="images/slippers.jpg">
        <p>Slippers</p>
        <p class="price">29,000</p>
      </a>
      <a href="#">
        <img src="images/wrist_watch.jpg">
        <p>Wrist Watch</p>
        <p class="price">99,000</p>
      </a>
      <a href="#">
        <img src="images/fedora_hat.jpg">
        <p>Fedora Hat</p>
        <p class="price">39,000</p>
      </a>
      <a href="#">
        <img src="images/classic_loafer.jpg">
        <p>Classic Loafer</p>
        <p class="price">99,000</p>
      </a>
      <a href="#">
        <img src="images/pink_bag.jpg">
        <p>Pink Bag</p>
        <p class="price">79,000</p>
      </a>
      <div class="clearfix"></div>
    </div>
    
    <div class="footer">
      <a href="#"><img src="images/facebook.png"></a>
      <a href="#"><img src="images/instagram.png"></a>
      <a href="#"><img src="images/twitter.png"></a>
    </div>
  </body>
</html>

<styles.css>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 992px;
  font-family: "Helvetica";
}

.navbar{
  height: 60px;
  padding-left: 30px;
}

.logo{
  line-height: 60px;
  float: left;
}

.logo img{
  vertical-align: middle;
}

.navbar ul{
  float: right;
}

.navbar li{
  list-style-type: none;
  float: left;
  margin-right: 30px;
}

.navbar a{
  text-decoration: none;
  color: black;
  font-style: bold;
  font-size: 13px;
}

.hero_header{
  height: 450px;
  width: 100%;
}

body h1{
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
  font-size: 24px;
  font-style: bold;
  color: #545454;
}

.products {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 740px;
  text-align: center;
}

.products img{
  width: 225px;
  height: 225px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.products a{
  text-decoration: none;
  color: black;
  float: left;
  font-size: 16px;
}

.price{
  margin-top: 4px;
  margin-bottom: 80px;
}

.clearfix{
  clear: both;
}

.footer{
  text-align: center;
}

.footer img{
  margin-top: 40px;
  height: 20px;
  margin-bottom: 80px;
  margin-left: 10px;
  margin-right: 10px;
}

 

 

 

 

'Web' 카테고리의 다른 글

02. GitHub  (0) 2021.03.26
01. Git  (0) 2021.03.25
[HTML/CSS] 포지션  (0) 2021.03.09
[HTML/CSS] Display  (0) 2021.03.09
[웹 프론트엔드]  (0) 2021.03.07
'Web' Related Articles more
Comments