inserção de favicon

Author: Wagner3UB

cart.html

@@ -5,6 +5,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <link rel="icon" href="/img/icon.png" type="image/png" />
+  <link rel="shortcut icon" href="/img/favicon.ico" />
+
   <link rel="stylesheet" type="text/css" href="css/reset.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">
 
@@ -35,6 +38,33 @@ <h1><a href="/"><img src="img/logo.png" alt="Brand Logo"></a></h1>
     </div>
   </header>
   <main class="cart">
+    <section class="top">
+      <h2>Your cart items</h2>
+      <a href="">Back to shopping</a>
+    </section>
+    <article class="cart-display container">
+      <section class="row-1">
+        <h2>Product</h2>
+        <h3>Price</h3>
+        <h3>Quantity</h3>
+        <h3>Total</h3>
+      </section>
+      <section class="row-2">
+        <figure>
+          <img src="img/img-details-product1.png" alt="product image">
+          <h2>Spiced Mint Candleaf®</h2>
+          <span>Remove</span>
+        </figure>
+        <p>$ 9.99</p>
+        <div class="counter">
+          <p>-</p>
+          <p>1</p>
+          <p>+</p>
+        </div>
+        <p class="alert-negative">Attention:<br>Quantity can't be negative!</p>
+        <p class="alert-out">No more items can be added.</p>
+      </section>
+    </article>
 
   </main>
 

css/style.css

@@ -449,7 +449,7 @@ main.product figure h3{
 .left-column .quantity{
   width: 75px;
 }
-.left-column .counter{
+.counter{
   display: flex;
   justify-content: space-evenly;
   font-size: 18px;
@@ -459,7 +459,7 @@ main.product figure h3{
   height: 30px;
   border: 1px solid var(--green);
 }
-.left-column .counter p:first-child, .left-column .counter p:last-child{
+.counter p:first-child, .counter p:last-child{
   color: var(--green);
   cursor: pointer;
 }
@@ -808,9 +808,54 @@ main.p-details form label.error{
   100%{left: 0;}
 }
 
+/* CART */
+main.cart .top{
+  margin-top: 77px;
+  padding: 60px 0;
+}
+main.cart .top h2{
+  font-size: 26px;
+  line-height: 57.6px;
+  letter-spacing: -.9px;
+  text-align: center;
+}
+main.cart .top a{
+  display: block;
+  width: 100%;
+  color: var(--green);
+  font-size: 18px;
+  line-height: 25.6px;
+  letter-spacing: -.9px;
+  text-decoration: underline;
+  text-align: center;
+}
+.cart-display .row-1{
+  display: flex;
+  border-bottom: 1px solid #E5E5E5;
+  padding: 15px 0;
+}
+.cart-display .row-1 h2{
+  width: 50%;
+  font-family: "Roboto", Helvetica,  Arial, sans-serif;
+  font-size: 16px;
+  line-height: 25.6px;
+  letter-spacing: -.9px;
+}
+.cart-display .row-1 h3{
+  width: 16.6%;
+  font-size: 16px;
+  line-height: 25.6px;
+  letter-spacing: -.9px;
+}
+.cart-display .row-1 h3:last-child{
+  text-align: right;
+}
+
 
 
+/*****************/
 /* MEDIA QUERIES */
+/*****************/
 
 @media screen and (max-width: 376px){
   .mobile_only{

img/favicon.ico

@@ -18,9 +18,9 @@
 
   <meta property="og:type" content="website">
 
-  <link rel="icon" href="/images/favicon.png" type="image/png" /><!-- 32x32px -->
+  <link rel="icon" href="/img/icon.png" type="image/png" /><!-- 32x32px -->
 
-  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="shortcut icon" href="/img/favicon.ico" />
 
   <link rel="stylesheet" type="text/css" href="css/reset.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">

img/icon.png

@@ -5,6 +5,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <link rel="icon" href="/img/icon.png" type="image/png" />
+  <link rel="shortcut icon" href="/img/favicon.ico" />
+
   <link rel="stylesheet" type="text/css" href="css/reset.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">
 

img/open-graph.png

@@ -5,6 +5,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <link rel="icon" href="/img/icon.png" type="image/png" />
+  <link rel="shortcut icon" href="/img/favicon.ico" />
+
   <link rel="stylesheet" type="text/css" href="css/reset.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">