Continuação página produto

Author: Wagner3UB

css/style.css

@@ -9,7 +9,7 @@
   transition: all .3s ease-in;
   scroll-behavior: smooth;
 }
-p,a,span{
+p,a,span, label{
   font: 500 16px/28px "Roboto", Helvetica, Arial, sans-serif;
 }
 h1,h2,h3,h4,h5,h6, blockquote, figcaption {
@@ -391,35 +391,125 @@ footer figcaption{
 }
 
 /* PAGINA PRODUTO */
+main.product{
+  padding-bottom: 114px;
+}
 main.product article.container{
   display: flex;
   margin-top: 130px;
 }
 main.product figure, .add-to-cart{
-  width: 50%;
+  width: 49%;
+}
+main.product figure{
+  margin-right: 2%;
+}
+
+main.product figure img{
+  width: 100%;
+}
+main.product figure img:hover{
+  filter: saturate(200%) contrast(110%);;
+}
+.add-to-cart h2, .add-to-cart h3{
+  font-size: 26px;
+  line-height: 57.6px;
+  letter-spacing: -.9px;
+}
+.add-to-cart h3{
+  color: var(--green);  
+}
+.add-to-cart h4{
+  font: 400 18px/25.6px "Roboto", Helvetica, Arial, sans-serif;
+  letter-spacing: -.9px;
+  text-align: center;
 }
 .add-to-cart input{
   width: 16px;
   height: 16px;
   margin-right: 20px;
 }
+main.product figcaption, main.product figure h3{
+  font-size: 20px;
+  line-height: 25.6px;
+  letter-spacing: -.9px;
+  text-align: center;
+  margin-top: 22px;
+}
+main.product figure h3{
+  color: var(--green);
+}
 .left-column{
   width: 190px;
   float: left;
 }
+.left-column .quantity{
+  width: 75px;
+}
+.left-column .counter{
+  display: flex;
+  justify-content: space-evenly;
+  height: 30px;
+  border: 1px solid var(--green);
+}
 .right-column{
   width: 350px;
   float: left;
 }
 .right-column div{
+  margin-top: 15px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  border: 1px solid var(--green);
+  border-radius: 4px;
+  padding: 20px 10px 20px 20px ;
+}
+.right-column div p, .right-column div p a{
+  font: 400 14px/15.6px "Helvetica", Arial, sans-serif;
+  color: #818181;
+  margin-top: 10px;
+}
+.right-column div p a{
+  color: var(--green);
+}
+.right-column label{
+  font-weight: 400;
+  line-height: 15.6px;
+  letter-spacing: -.9px;
+  width: 60%;
+}
+.right-column select{
+  width: 25%;
+  float: right;
+  border: 1px solid var(--black);
 }
 .add-to-cart button{
   width: 350px;
+  margin-top: 67px;
   margin-left: 190px;
+  font-size: 20px;
+  line-height: 23px;
+}
+.add-to-cart button span{
+  font-size: 20px;
+  line-height: 23px;
+}
+.add-to-cart .product-description{
+  padding: 20px;
+  border: 1px solid #e6e6e6;
+  border-radius: 7px;
+  margin-top: 40px;
+
+}
+.add-to-cart .product-description p{
+  font-weight: 400;
+  color: #818181;
 }
+.add-to-cart .product-description span{
+  color: #1D252C;
+}
+
 
 
 

product_1.html

@@ -46,28 +46,40 @@ <h3>🚚 FREE SHIPPING</h3>
         <h2>Spiced Mint Candleaf®</h2>
         <div class="left-column">
           <h3>$ 9.99</h3>
-          <h4>Quantity</h4>
-          <div class="counter">
-
+          <div class="quantity">
+            <h4>Quantity</h4>
+            <div class="counter">
+              <p>-</p>
+              <p>0</p>
+              <p>+</p>
+            </div>
           </div>
         </div>
         <div class="right-column">
           <div>
-            <input type="radio" name="radio" id="one" checked>
+            <input type="radio" name="radio" id="one" >
             <label for="one">One time purchase</label>
           </div>
           <div>
-            <input type="radio" name="radio" id="always">
+            <input type="radio" name="radio" id="always" checked>
             <label for="always">Subscribe and delivery every</label>
+            <select>
+                <option value="1 week">1 week</option>
+                <option value="1 week">2 weeks</option>
+                <option value="1 week">3 weeks</option>
+                <option value="1 week">4 weeks</option>
+              </select>
             <p>Subscribe now and get the 10% of discount on every recurring order.  The discount will be applied at checkout. <a href="#">See details</a></p>
-          </div>
+          </div> 
         </div>
         <div class="clear"></div>
-        <button class="btn"></button>
-        <div>
-          <p></p>
-          <p></p>
-          <p></p>
+        <button class="btn"><span class="material-icons-outlined">shopping_cart</span> + Add to cart</button>
+        <div class="product-description">
+          <p><span>Wax:</span> Top grade Soy wax that delivers a smoke less,  consistent burn</p>
+          <p><span>Fragrance:</span> Premium quality ingredients with natural essential oils </p>
+          <p><span>Burning Time:</span> 70-75 hours
+            <span>Dimension:</span> 10cm x 5cm 
+              <span>Weight:</span> 400g </p>
         </div>
       </article>
     </article>