From 03f88d52849ed8a403af4cfc2b6c2f717681b347 Mon Sep 17 00:00:00 2001
From: kandyy9 <a.kandy.sk@gmail.com>
Date: Sun, 14 Apr 2024 23:44:06 +0300
Subject: [PATCH 1/2] span fixing

---
 src/css/advertisement.css | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/css/advertisement.css b/src/css/advertisement.css
index 49e5498..0d3ee09 100644
--- a/src/css/advertisement.css
+++ b/src/css/advertisement.css
@@ -15,16 +15,13 @@
 }
 
 .adv-text-span {
-    display: block;
+    display: inline-block;
     color: #fbfbfb;
     border-radius: 12px;
     max-width: 355px;
-    height: 102px;
     background-color: #576f35;
-    position: relative;
-    left: -10px;
-    right: 10px;
-    padding: 3px 10px;
+    padding: 0 10px;
+    margin: 0 -10px;
 }
 
 @media screen and (min-width:768px) {
@@ -38,14 +35,13 @@
         font-size: 64px;
         line-height: 1.09;
 
-    }
+    }   
 
     .adv-text-span {
-        left: -16px;
-        right: 16px;
+        display: block;
+        margin: 0 -16px;
         padding: 8px 16px;
         max-width: 736px;
-        height: 86px;
     }
 
 }
@@ -55,17 +51,14 @@
     .adv-text {
         font-size: 76px;
         line-height: 1.05;
-        padding-left: 13px;
-        padding-right: 13px;
+        padding: 0 13px;
     }
 
     .adv-text-span {
         display: inline-block;
-        max-width: 808px;
-        height: 86px;
-        left: -13px;
-        right: 13px;
-        padding: 0 0 0 13px;
+        max-width: none; 
+        padding: 0 13px;
+        margin:0 0 0 -13px;
     }
 
-}
+}
\ No newline at end of file

From 90209719ea1b6878266aca87ae9c114628e110f2 Mon Sep 17 00:00:00 2001
From: Serhii Reshetniak <reshet@lozovaya.org.ua>
Date: Mon, 15 Apr 2024 04:32:49 +0300
Subject: [PATCH 2/2] Fix Adv position

---
 src/css/advertisement.css       | 117 +++++++++++++++++++-------------
 src/partials/advertisement.html |   6 +-
 2 files changed, 75 insertions(+), 48 deletions(-)

diff --git a/src/css/advertisement.css b/src/css/advertisement.css
index 0d3ee09..6e09d48 100644
--- a/src/css/advertisement.css
+++ b/src/css/advertisement.css
@@ -1,64 +1,89 @@
 /* Styles for Advertisement section */
 .advertisement {
-    padding-top: 80px;
-    padding-bottom: 80px;
-    background: #fbfbfb;
+  padding-top: 80px;
+  padding-bottom: 80px;
+  background: #fbfbfb;
+}
+
+.advertisement .container {
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .adv-text {
-    font-weight: 600;
-    font-size: 48px;
-    line-height: 1.04;
-    letter-spacing: -0.01em;
-    text-transform: uppercase;
-    color: #141414;
+  display: block;
+  font-size: 48px;
+  line-height: 1.04;
+  letter-spacing: -0.01em;
+  text-transform: uppercase;
+  color: #141414;
 }
 
-.adv-text-span {
-    display: inline-block;
-    color: #fbfbfb;
-    border-radius: 12px;
-    max-width: 355px;
-    background-color: #576f35;
-    padding: 0 10px;
-    margin: 0 -10px;
+.adv-text-title {
+  display: block;
+  color: #fbfbfb;
+  border-style: solid;
+  border-color: #576f35;
+  border-left-width: 10px;
+  border-right-width: 10px;
+  border-radius: 12px;
+  background-color: #576f35;
+  padding-left: 0;
 }
 
-@media screen and (min-width:768px) {
+.adv-text-descr {
+  display: block;
+  padding-left: 10px;
+}
 
-    .advertisement {
-        padding-top: 100px;
-        padding-bottom: 100px;
-    }
+@media screen and (min-width: 768px) {
+  .advertisement {
+    padding-top: 100px;
+    padding-bottom: 100px;
+  }
 
-    .adv-text {
-        font-size: 64px;
-        line-height: 1.09;
+  .advertisement .container {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 
-    }   
+  .adv-text {
+    font-size: 64px;
+    line-height: 1.09;
+  }
 
-    .adv-text-span {
-        display: block;
-        margin: 0 -16px;
-        padding: 8px 16px;
-        max-width: 736px;
-    }
+  .adv-text-title {
+    border-left-width: 16px;
+    border-right-width: 16px;
+  }
 
+  .adv-text-descr {
+    padding-left: 16px;
+  }
 }
 
-@media screen and (min-width:1280px) {
-   
-    .adv-text {
-        font-size: 76px;
-        line-height: 1.05;
-        padding: 0 13px;
-    }
+@media screen and (min-width: 1280px) {
+  .advertisement .container {
+    padding-left: 100px;
+    padding-right: 100px;
+  }
 
-    .adv-text-span {
-        display: inline-block;
-        max-width: none; 
-        padding: 0 13px;
-        margin:0 0 0 -13px;
-    }
+  .adv-text {
+    font-size: 76px;
+    line-height: 1.05;
+  }
 
-}
\ No newline at end of file
+  .adv-text-title {
+    display: inline;
+    border-left-width: 13px;
+    border-right-width: 13px;
+    position: relative;
+    left: -13px;
+  }
+
+  .adv-text-descr {
+    display: inline;
+    padding-left: 0;
+    padding-right: 13px;
+  }
+}
diff --git a/src/partials/advertisement.html b/src/partials/advertisement.html
index acff614..854211b 100644
--- a/src/partials/advertisement.html
+++ b/src/partials/advertisement.html
@@ -2,8 +2,10 @@
   <div class="container">
     <h2 class="visually-hidden">advertisement</h2>
     <p class="adv-text">
-      <span class="adv-text-span">Discount up to 40%!</span>Taste the vitamins
-      and keep your health
+      <span class="adv-text-title">Discount up to 40%!</span
+      ><span class="adv-text-descr"
+        >Taste the vitamins and keep your health</span
+      >
     </p>
   </div>
 </section>