Merge pull request #30 from ReshetS/bugfix/advertisment-section

Fix positions in advertisment section

src/css/advertisement.css

@@ -1,71 +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: block;
-    color: #fbfbfb;
-    border-radius: 12px;
-    max-width: 355px;
-    height: 102px;
-    background-color: #576f35;
-    position: relative;
-    left: -10px;
-    right: 10px;
-    padding: 3px 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 {
-        left: -16px;
-        right: 16px;
-        padding: 8px 16px;
-        max-width: 736px;
-        height: 86px;
-    }
+  .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-left: 13px;
-        padding-right: 13px;
-    }
+@media screen and (min-width: 1280px) {
+  .advertisement .container {
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+
+  .adv-text {
+    font-size: 76px;
+    line-height: 1.05;
+  }
 
-    .adv-text-span {
-        display: inline-block;
-        max-width: 808px;
-        height: 86px;
-        left: -13px;
-        right: 13px;
-        padding: 0 0 0 13px;
-    }
+  .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;
+  }
 }

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>