From d7477a39f0b013f6003830c97affb1001d6a8230 Mon Sep 17 00:00:00 2001
From: mim chowdhury <umac3333@gmail.com>
Date: Tue, 9 Jan 2024 13:54:38 +0600
Subject: [PATCH] bestgiftadd

---
 index.html       | 204 ++++++++++++++++++++++++++++++-----------------
 styles/style.css |  94 ++++++++++++++++++++--
 2 files changed, 216 insertions(+), 82 deletions(-)

diff --git a/index.html b/index.html
index b403aea..fa6e9b4 100644
--- a/index.html
+++ b/index.html
@@ -112,6 +112,61 @@ <h2 class="offer">
 
         </section>
 
+        <!-- Best offer section -->
+        <section
+            class="best-offer-container">
+            <div
+                class="best-offer-text">
+                <h3>NEW BEST
+                    OFFER</h3>
+                <h1>Coming
+                    Soon</h1>
+                <p>In this
+                    year of
+                    2024, we
+                    are about
+                    to
+                    <br>introduce
+                    so many
+                    items
+                    within
+                    your
+                    budget.
+                    <br> Also
+                    there will
+                    be so many
+                    discount
+                    with <br>
+                    exciting
+                    gift
+                    and many
+                    more. Just
+                    keep <br>
+                    an eye on
+                    our
+                    website
+                </p>
+            </div>
+            <div
+                class="best-offer-img">
+                <img src="images/Ellipse 1.png"
+                    alt="">
+            </div>
+            <div
+                class="best-offer-year">
+                <h1>2024</h1>
+                <p>So without
+                    any
+                    further
+                    due <br>
+                    lets
+                    shopping
+                    with us.
+                </p>
+                <img src="images/Group 96.png" alt="">
+            </div>
+
+        </section>
 
         <!-- portfolio section -->
         <section
@@ -221,93 +276,92 @@ <h2 class="offer">
             </div>
         </section>
 
-        <footer>
-            <section
-                class="footer">
-                <div
-                    class="footer-top">
-                    <div
-                        class="top-left">
-                        <p>44,
-                            Big
-                            Building
-                            Roosevelt
-                            Street
-                            <br>
-
-                            Beach
-                            Gardens
-                            Florida
-                            33410
-                        </p>
-                    </div>
-                    <div
-                        class="top-right">
-
-                        <p><img src="images/Call.png"
-                                alt=""
-                                width="24px"
-                                height="24px">+00
-                            123
-                            584
-                            124
-                        </p>
-
-                        <p><img src="images/Website.png"
-                                alt=""
-                                width="24px"
-                                height="24px">
-                            www.website.com
-                        </p>
-                    </div>
-                </div>
-                <!-- hr tag -->
 
-                <hr
-                    style="width: 1000px; background: rgba(255, 255, 255, 0.15);">
 
+    </main>
+
+    <!-- footer section -->
+    <footer>
+        <section
+            class="footer">
+            <div
+                class="footer-top">
+                <div
+                    class="top-left">
+                    <p>44,
+                        Big
+                        Building
+                        Roosevelt
+                        Street
+                        <br>
+
+                        Beach
+                        Gardens
+                        Florida
+                        33410
+                    </p>
+                </div>
                 <div
-                    class="footer-middle">
-                    <div
-                        class="footer-img">
-                        <img src="images/Facebook.png"
-                            alt="">
-                        <img src="images/Instagram.png"
-                            alt="">
-                        <img src="images/Twitter.png"
-                            alt="">
-                        <img src="images/Linkedin.png"
-                            alt="">
-                    </div>
+                    class="top-right">
+
+                    <p><img src="images/Call.png"
+                            alt=""
+                            width="24px"
+                            height="24px">+00
+                        123
+                        584
+                        124
+                    </p>
 
+                    <p><img src="images/Website.png"
+                            alt=""
+                            width="24px"
+                            height="24px">
+                        www.website.com
+                    </p>
                 </div>
+            </div>
+            <!-- hr tag -->
 
-                <hr
-                    style="width: 1000px; background: rgba(255, 255, 255, 0.15);">
+            <hr
+                style="width: 1000px; background: rgba(255, 255, 255, 0.15);">
 
+            <div
+                class="footer-middle">
                 <div
-                    class="footer-bottom">
-                    <div
-                        class="bottom-left">
-                        <p>2017,
-                            All
-                            Rights
-                            Reserved.
-                        </p>
-                    </div>
-                    <div
-                        class="bottom-right">
-                        <p>Unsubscribe
-                        </p>
-                    </div>
+                    class="footer-img">
+                    <img src="images/Facebook.png"
+                        alt="">
+                    <img src="images/Instagram.png"
+                        alt="">
+                    <img src="images/Twitter.png"
+                        alt="">
+                    <img src="images/Linkedin.png"
+                        alt="">
                 </div>
-            </section>
-        </footer>
 
-    </main>
+            </div>
 
-    <footer>
+            <hr
+                style="width: 1000px; background: rgba(255, 255, 255, 0.15);">
 
+            <div
+                class="footer-bottom">
+                <div
+                    class="bottom-left">
+                    <p>2017,
+                        All
+                        Rights
+                        Reserved.
+                    </p>
+                </div>
+                <div
+                    class="bottom-right">
+                    <p>Unsubscribe
+                    </p>
+                </div>
+            </div>
+        </section>
     </footer>
 </body>
 
diff --git a/styles/style.css b/styles/style.css
index 4e832aa..625693f 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,8 +1,9 @@
 body {
-    /* margin: auto; */
-    /* margin: 0 140px; */
+    /* max-width: 1250px;
+    margin: 0 auto; */
 }
 
+
 .header-container {
 
     background-image: linear-gradient(180deg, #070211, rgba(7, 2, 17, 0.00)100%), url('../images/Banner\ Image.png');
@@ -23,7 +24,9 @@ body {
 
 .banner-title {
     padding-top: 177px;
-    color: blue;
+    color: #FFF;
+
+
     text-align: center;
     font-size: 32px;
     font-weight: 400;
@@ -32,7 +35,9 @@ body {
 .banner-topic {
     /* padding-top: 5px; */
     padding-bottom: 177px;
-    color: blue;
+    color: #FFF;
+
+
     text-align: center;
     font-size: 72px;
     font-weight: 900;
@@ -40,6 +45,80 @@ body {
     /* 131.944% */
 }
 
+.best-offer-text h3 {
+    color: #F00;
+    /* text-align: center; */
+    font-family: Inter;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.best-offer-text h1 {
+    color: #070211;
+    font-family: Merriweather;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: normal;
+    text-transform: capitalize;
+}
+
+.best-offer-text p {
+    color: rgba(7, 2, 17, 0.60);
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    /* 160% */
+}
+
+.best-offer-img {
+    width: 364.844px;
+    height: 364.844px;
+    border-radius: 50%;
+    padding: 25px;
+    border: 15px solid #F00;
+    /* width: 463px;
+    height: 463px; */
+    flex-shrink: 0;
+}
+
+
+.best-offer-container {
+    padding-top: 120px;
+
+    display: flex;
+    justify-content: space-between;
+}
+
+.best-offer-year h1 {
+    color: #F00;
+    font-family: Inter;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+.best-offer-year p {
+    color: rgba(7, 2, 17, 0.60);
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    /* 160% */
+}
+
+.best-offer-year img {
+    width: 140px;
+    height: 140px;
+    flex-shrink: 0;
+}
+
 .offer {
     font-family: 'Inter', sans-serif;
     color: #F00;
@@ -361,7 +440,7 @@ body {
 
 .bottom-left {
     padding-left: 140px;
-padding-bottom: 120px;
+    padding-bottom: 120px;
     color: #FFF;
     font-family: Inter;
     font-size: 24px;
@@ -372,7 +451,7 @@ padding-bottom: 120px;
 
 .bottom-right {
     padding-left: 140px;
-padding-right: 140px;
+    padding-right: 140px;
     color: #FFF;
     font-family: Inter;
     font-size: 24px;
@@ -380,7 +459,8 @@ padding-right: 140px;
     font-weight: 500;
     line-height: normal;
 }
-.footer-bottom{
+
+.footer-bottom {
     display: flex;
     justify-content: space-between;
 }
\ No newline at end of file