main

en/index.html

@@ -55,16 +55,125 @@
             <li><a href="#">purchase</a></li>
           </ul>
 
-          <input id="search" type="search" placeholder="Search.." />
+          <div class="search">
+            <input id="search" type="search" placeholder="Search.." />
+            <a href="#" class="icon-search"></a>
+          </div>
 
           <div class="buy">
-            <div class="icon"></div>
-            <div class="cart">cart (0)</div>
+            <div class="icon"><a href="#" class="icon-cart1"></a></div>
+            <div class="cart"><a href="#">cart (0)</a></div>
           </div>
         </div>
       </div>
     </header>
 
+    <div class="main">
+      <div class="banner">
+        <div class="container">
+          <div class="text-banner">
+            <p>ALUMINUM CLUB</p>
+            <br />
+            <p>Experience Ray-Ban</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="product-right_banners">
+          <div class="product">
+            <h1>Featured product</h1>
+
+            <div class="featured-product">
+              <div class="box">
+                <a href="#">
+                  <img src="../images/sunglasses1.png" alt="" />
+                  <div class="description">
+                    <div class="description-money">
+                      <h2>Ray Ban Original 8279</h2>
+                      <span>$388.00</span>
+                    </div>
+                    <div class="icon-cart"></div>
+                  </div>
+                </a>
+              </div>
+
+              <div class="box">
+                <a href="#">
+                  <img src="../images/sunglasses2.png" alt="" />
+                  <div class="description">
+                    <div class="description-money">
+                      <h2>Ray Ban Wayfarer 8316</h2>
+                      <span>$90.00</span>
+                    </div>
+                    <div class="icon-cart"></div>
+                  </div>
+                </a>
+              </div>
+
+              <div class="box">
+                <a href="#">
+                  <img src="../images/sunglasses3.png" alt="" />
+                  <div class="description">
+                    <div class="description-money">
+                      <h2>Ray Ban Original 8320</h2>
+                      <span>$300.00</span>
+                    </div>
+                    <div class="icon-cart"></div>
+                  </div>
+                </a>
+              </div>
+
+              <div class="box">
+                <a href="#">
+                  <img src="../images/sunglasses4.png" alt="" />
+                  <div class="description">
+                    <div class="description-money">
+                      <h2>Ray Ban Original 8445</h2>
+                      <span>$180.00</span>
+                    </div>
+                    <div class="icon-cart"></div>
+                  </div>
+                </a>
+              </div>
+
+              <div class="box">
+                <a href="#">
+                  <img src="../images/sunglasses5.png" alt="" />
+                  <div class="description">
+                    <div class="description-money">
+                      <h2>Ray Ban Original 8340</h2>
+                      <span>$278.00</span>
+                    </div>
+                    <div class="icon-cart"></div>
+                  </div>
+                </a>
+              </div>
+
+              <div class="box">
+                <a href="#">
+                  <img src="../images/sunglasses6.png" alt="" />
+                  <div class="description">
+                    <div class="description-money">
+                      <h2>Ray Ban Original 8460</h2>
+                      <span>$378.00</span>
+                    </div>
+                    <div class="icon-cart"></div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div class="right_banners">
+            <div class="right-slider"></div>
+
+            <div class="email"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script src="/js/index.js"></script>
   </body>
 </html>

style/style.css

@@ -14,8 +14,83 @@ a {
   text-decoration: none;
 }
 
+@font-face {
+  font-family: "icomoon";
+  src: url("../fonts/icomoon.eot?4oli75");
+  src: url("../fonts/icomoon.eot?4oli75#iefix") format("embedded-opentype"),
+    url("../fonts/icomoon.ttf?4oli75") format("truetype"),
+    url("../fonts/icomoon.woff?4oli75") format("woff"),
+    url("../fonts/icomoon.svg?4oli75#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "icomoon" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-instagram:before {
+  content: "\e903";
+}
+.icon-car:before {
+  content: "\e902";
+}
+.icon-phone:before {
+  content: "\e901";
+}
+.icon-cart:before {
+  content: "\e900";
+  font-size: 25px;
+  color: white;
+  background: green;
+  padding: 10px;
+  border-radius: 50%;
+}
+.icon-cart1:before {
+  content: "\e93a";
+  font-size: 20px;
+  color: white;
+  background: green;
+  padding: 10px;
+  border-radius: 50%;
+}
+.icon-search:before {
+  content: "\e986";
+  font-size: 15px;
+  margin-right: 15px;
+  vertical-align: middle;
+}
+.icon-circle-right:before {
+  content: "\ea42";
+}
+.icon-circle-left:before {
+  content: "\ea44";
+}
+.icon-google:before {
+  content: "\ea8b";
+}
+.icon-facebook:before {
+  content: "\ea90";
+}
+.icon-twitter:before {
+  content: "\ea96";
+}
+
 .container {
-  padding: 0 190px;
+  padding: 0 160px;
   width: 100%;
 }
 
@@ -100,8 +175,122 @@ a {
   padding-left: 25px;
 }
 
+.menu > li > a:hover {
+  color: #4cb1ca;
+  transition: all 0.3s;
+}
+
+.search {
+  border: 1px solid black;
+}
+
 #search {
-    padding: 10px 115px 10px 10px;
-    font-size: 13px;
-    border: 1px solid #c6c6c6;
+  padding: 10px 10px 10px 10px;
+  font-size: 13px;
+  border: none;
+  outline: none;
+}
+
+.buy {
+  display: flex;
+  align-items: center;
+}
+
+.cart > a {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #444444;
+  padding-left: 10px;
+}
+
+/* MAIN */
+.banner {
+  background: url(../images/banner.png) no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 475px;
+  margin-bottom: 50px;
+}
+
+.text-banner {
+  padding-top: 190px;
+}
+
+.text-banner > p {
+  text-transform: uppercase;
+  font-size: 30px;
+  color: white;
+  background: black;
+  display: inline-block;
+  padding: 12px 15px;
+  opacity: 0.7;
+}
+
+.text-banner > p:last-child {
+  margin-top: 3px;
+  font-weight: bold;
+}
+
+.product-right_banners {
+  display: flex;
+}
+
+.product > h1 {
+  font-size: 24px;
+  text-transform: uppercase;
+  color: #444444;
+}
+
+.featured-product {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 25px 0 25px;
+}
+
+.description {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.box {
+  display: inline-block;
+  box-shadow: 1px 1px 8px gray;
+  padding: 10px 10px 30px;
+  margin-bottom: 25px;
+}
+
+.box:hover {
+  transform: scale(1.1);
+}
+
+.description-money {
+  font-size: 15px;
+  padding-top: 15px;
+}
+
+.description-money > h2 {
+  padding-bottom: 10px;
+  max-width: 160px;
+}
+
+.description-money > span {
+  color: green;
+  font-size: 20px;
+}
+
+.icon-cart {
+  margin-top: 15px;
+}
+
+.right_banners {
+  margin-left: 25px;
+}
+
+.right-slider {
+  background: url(../images/right_banner.png) no-repeat;
+  background-size: cover;
+  height: 453px;
+  width: 241px;
 }