From 228a3bf7cd63cf9fee9ee19a0d8dd4ea2a4b4e92 Mon Sep 17 00:00:00 2001
From: Nikotro <senyanekit@gmail.com>
Date: Mon, 18 Apr 2022 20:18:07 +0300
Subject: [PATCH] add buttons

---
 css/style.css | 81 ++++++++++++++++++++++++++++++++++-----------------
 index.html    | 39 +++++++++++++++----------
 2 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7587253..e4c4b6b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -46,10 +46,7 @@ a {
     text-transform: uppercase;
 }
 
-
-
 /*logo line*/
-
 .header-line {
     height: 97px;
     text-transform: uppercase;
@@ -142,7 +139,7 @@ a:focus:after {
 
 .icon {
     
-    font-size: 16px;
+    font-size: 18px;
 
 }
 
@@ -194,20 +191,20 @@ a:focus:after {
 
 /*Container text*/ 
 
-.container-text 
+.container-description 
 {
     margin-left: 29px;
     font-size: 14px;
 }
 
-.container-text__product_name h2
+.container-description__product_name h2
 {
     line-height: 36px;
     font-size: 24px;
     margin-bottom: 0;
 }
 
-.container-text__review
+.container-description__review
 {
     line-height: 25px;
     font-size: 14px;
@@ -219,45 +216,45 @@ a:focus:after {
     color: #ded3aa;
 }
 
-.container-text__review a
+.container-description__review a
 {
     font-size: 12px;
     color: #000;
 }
 
-.container-text__price {
+.container-description__price {
     margin-top: 15px;
     font-size: 24px;
     color: #68899a;
 }
 
-.container-text__inform {
+.container-description__inform {
     font-size: 14px;
     line-height: 24px;
     margin-top: 18px;
 }
 
-.container-text__inform p 
+.container-description__inform p 
 {
     margin: 0 0;
 }
 
-.container-text__inform a {
+.container-description__inform a {
     color: #68899a;
 }
 
-.container-text__about {
+.container-description__about {
     margin-top: 30px;
     font-size: 14px;
     color: #555555;
 }
 
-.container-text__about ul {
+.container-description__about ul {
     padding-left: 0;
     list-style-position: inside;
 }
 
-.container-text-selectors {
+.container-description-selectors {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -268,11 +265,11 @@ a:focus:after {
 
 }
 
-.container-text-selectors__selector {
+.container-description-select__select {
     width: 196px;
 }
 
-.container-text-selectors__selector select {
+.container-description-select__select select {
     font-size: 13px;
     color: #707070;
     width: 168px;
@@ -315,13 +312,13 @@ input {
     text-align: center;
 }
 
-.container-text-selectors__counter {
+.container-description-selectors__counter {
     display: flex;
     align-items: center;
 
 }
 
-.container-text-selectors__counter input {
+.container-description-selectors__counter input {
     padding: 5px;
     font-size: 13px;
     color: #707070;
@@ -333,7 +330,7 @@ input {
 }
 
 
-.container-text-selectors__buttons {
+.container-description-selectors__buttons {
     display: flex;
     flex-direction: column;
     border-radius: 0;
@@ -341,19 +338,19 @@ input {
     border-left: none;
 }
 
-.container-text-selectors__buttons button {
+.container-description-selectors__buttons button {
     border-radius: 0;
     border: 0px;
     background-color: #fff;
     height: 16.5px;
 }
 
-.container-text-selectors__buttons button:first-child {
+.container-description-selectors__buttons button:first-child {
 
     border-bottom: 0.5px solid #e1e1e1;
 }
 
-.container-text-selectors__buttons button:last-child {
+.container-description-selectors__buttons button:last-child {
 
     border-top: 0.5px solid #e1e1e1;
 }
@@ -376,6 +373,39 @@ input {
     border-top: 2px solid #cccccc;
 }
 
+.container-select__clear
+{
+    text-transform: uppercase;
+    font-size: 12px;
+    line-height: 90px;
+}
+
+.button_big
+{
+    height: 55px;
+    width: 216px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid;
+    border-radius: 0;
+    text-transform: uppercase;
+    font-family: 'Lato';
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.button__add-to-cart
+{
+    background-color: #111111;
+    color:#ffffff;
+}
+
+.button__add-to-wl
+{
+    border-color: #e1e1e1;
+    margin-left: 20px;
+}
+
 
 
 
@@ -391,7 +421,6 @@ footer {
 
 @media screen and (max-width: 1420px) {
 
-
     .container {
         padding-left: 5px;
         padding-right: 5px;
@@ -456,7 +485,7 @@ footer {
         margin-right: 0;
     }
 
-    .container-text {
+    .container-description {
         padding-top: 25px;
         display: flex;
         flex-direction: column;
@@ -464,7 +493,7 @@ footer {
         margin-left: 7px;
     }
 
-    .container-text-selectors {
+    .container-description-selectors {
         display: flex;
         flex-direction: column;
 
diff --git a/index.html b/index.html
index 5efe20c..2fd5712 100644
--- a/index.html
+++ b/index.html
@@ -51,16 +51,16 @@
                 <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604287.jpg" alt="" class="container__alt-img">
             </div>
         </div>
-        <div class="container-text">
+        <div class="container-description">
             <a href="#">Back to Woman</a>
-            <div class="container-text__product_name"><h2>The Atelier Tailored Coat</h2></div>
-            <div class="container-text__review"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> 3 Review(s) | <b><u><a href="#">ADD A REVIEV</a></u></b></div>
-            <div class="container-text__price"><b>$499.00</b></div>
-            <div class="container-text__inform">
+            <div class="container-description__product_name"><h2>The Atelier Tailored Coat</h2></div>
+            <div class="container-description__review"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> 3 Review(s) | <b><u><a href="#">ADD A REVIEV</a></u></b></div>
+            <div class="container-description__price"><b>$499.00</b></div>
+            <div class="container-description__inform">
                 <p><b>Availability :</b> <a href="#">In stock</a></p>
                 <p><b>Product Code :</b> <a href="#">#4657</a></p>
                 <p><b>Tags :</b> <a href="#">Fashion, Hood, Classic</a></p>
-                <div class="container-text__about">Sleek, polished, and boasting an impeccably modern fit, this blue, 2-but-
+                <div class="container-description__about">Sleek, polished, and boasting an impeccably modern fit, this blue, 2-but-
                     ton Lazio suit features a notch lapel, flap pockets, and accompanying flat
                     front trousers—all in pure wool by Vitale Barberis Canonico.
                     <ul>
@@ -71,9 +71,9 @@
                     </ul>
                 </div>
             </div>
-            <div class="container-text-selectors">
+            <div class="container-description-selectors">
 
-                <div class="container-text-selectors__selector"><b>color</b>
+                <div class="container-description-select__select"><b>color</b>
                     <p><select name="color">
                         <option value="" selected hidden>Select Color</option>
                         <option value="gray">Gray</option>
@@ -81,7 +81,7 @@
                         <option value="yellow">Yellow</option>
                     </select></p>
                 </div>
-                <div class="container-text-selectors__selector"><b>size</b>
+                <div class="container-description-select__select"><b>size</b>
                     <p><select name="size">
                         <option selected hidden value="">Select Size</option>
                         <option value="51">51</option>
@@ -90,10 +90,10 @@
                     </select>
                     </p>
                 </div>
-                <div class="container-text-selectors__selector"><b>qty</b>
-                    <div class="container-text-selectors__counter">
+                <div class="container-description-select__select"><b>qty</b>
+                    <div class="container-description-selectors__counter">
                         <p><input type="number" name="qty" min="1" max="10" value="1">
-                        <div class="container-text-selectors__buttons">
+                        <div class="container-description-selectors__buttons">
                             <button>
                                 <div class="count_up"></div>
                             </button>
@@ -105,10 +105,17 @@
                     </div>
                 </div>
             </div>
-            <div class="container-text-buttons">
-                <div class="buttons">
-                    button.button
-                </div>
+            <div class="container-select__clear">
+                <u>clear selection</u>
+            </div>
+            <div class="container-description-buttons">
+                    <button class="button__add-to-cart button_big">
+                        add to cart
+                    </button>
+                    <button class="button__add-to-wl button_big">
+                        <i class="fa-regular fa-heart"></i>add to wishlist
+                    </button>
+
             </div>
             <div class="share"></div>
         </div>