footer

en/index.html

@@ -166,7 +166,18 @@
           </div>
 
           <div class="right_banners">
-            <div class="right-slider"></div>
+            <div class="right-slider">
+              <h2>
+                Featured <br />
+                Glass
+              </h2>
+              <button id="btn">Check it Out</button>
+            </div>
+            <div class="slider-circle">
+              <div id="circle" class="active"></div>
+              <div id="circle"></div>
+              <div id="circle"></div>
+            </div>
 
             <div class="email"></div>
           </div>
@@ -174,6 +185,25 @@
       </div>
     </div>
 
+    <footer>
+      <div class="shipping-call-us">
+        <div class="container">
+          <div class="delivery">
+            <a href="#">
+              <div class="icon-car"></div>
+              <p>Free shipping on orders over $100</p>
+            </a>
+          </div>
+          <div class="call-us">
+            <a href="#">
+              <div class="icon-phone"></div>
+              <p>call us! toLl free- 409-8888-0099</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+
     <script src="/js/index.js"></script>
   </body>
 </html>

style/style.css

@@ -47,9 +47,19 @@ a {
 }
 .icon-car:before {
   content: "\e902";
+  font-size: 40px;
+  padding: 10px;
+  border-radius: 50%;
+  color: #4baec7;
+  background: white;
 }
 .icon-phone:before {
   content: "\e901";
+  font-size: 40px;
+  padding: 10px;
+  border-radius: 50%;
+  color: #4baec7;
+  background: white;
 }
 .icon-cart:before {
   content: "\e900";
@@ -293,4 +303,66 @@ a {
   background-size: cover;
   height: 453px;
   width: 241px;
-}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.right-slider > h2 {
+  text-transform: uppercase;
+  font-size: 24px;
+  text-align: center;
+  padding-top: 30px;
+}
+
+#btn {
+  margin: 0 auto 30px;
+  color: white;
+  background: #4baec7;
+  border: 1px solid #4baec7;
+  font-size: 14px;
+  padding: 15px 25px;
+  cursor: pointer;
+}
+
+.slider-circle {
+  box-shadow: 0 0 4px #a3a3a3;
+  padding: 10px 0;
+  max-width: 232px;
+  margin-left: 4px;
+  text-align: center;
+}
+
+#circle {
+  background: green;
+  padding: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* FOOTER */
+.shipping-call-us {
+  background: #4cb1ca;
+  font-size: 21px;
+  padding: 20px 0;
+  text-transform: uppercase;
+}
+
+.shipping-call-us > .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.delivery > a,
+.call-us > a {
+  display: flex;
+  align-items: center;
+}
+
+.delivery > a > p,
+.call-us > a > p {
+  color: white;
+  padding-left: 20px;
+}