diff --git a/src/css/advertisement.css b/src/css/advertisement.css index 49e5498..6e09d48 100644 --- a/src/css/advertisement.css +++ b/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; + } } 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 @@

advertisement

- Discount up to 40%!Taste the vitamins - and keep your health + Discount up to 40%!Taste the vitamins and keep your health