news-letter-section done

Razib2019 · Mar 3, 2024 · d007274 · d007274
1 parent 7eff354
commit d007274
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -190,6 +190,30 @@ <h3 class="card-title secondary-color">Best Price Guarantee</h3>
         </div>
       </section>
       <!-- Why Choose Us Section Start From Here -->
+
+      <!-- News Letter Section Start From Here -->
+      <section class="news-letter-section-container">
+        <div class="news-letter-left">
+          <h1 class="card-title secondary-color">Newsletter</h1>
+          <p class="card-description additional-color1">
+            Get your daily dose of travel news & tips. Sign up today!
+          </p>
+          <hr />
+          <div class="news-letter-input-btn">
+            <input type="text" placeholder="Enter Your Name" />
+            <input type="text" placeholder="Enter Your Email" />
+            <button class="btn-primary">Subscribe</button>
+          </div>
+        </div>
+        <div class="news-letter-right">
+          <img src="./Images/14.png" alt="" />
+          <div class="offer-container">
+            <h3 class="domain-name">BDTravel.com</h3>
+            <h1 class="offer">Save up to 70%</h1>
+          </div>
+        </div>
+      </section>
+      <!-- News Letter Section End Here -->
     </main>
     <!-- Main Section End Here -->
 
@@ -199,7 +223,7 @@ <h3 class="card-title secondary-color">Best Price Guarantee</h3>
         <div class="footer-img-container">
           <img src="./Images/1.png" alt="" />
           <h1 class="footer-title secondary-color">
-            Hero <span class="primary-color">Travel</span>
+            BD <span class="primary-color">Travel</span>
           </h1>
         </div>
         <p class="footer-description additional-color1">

diff --git a/styles/bd_travel.css b/styles/bd_travel.css
@@ -58,6 +58,18 @@ body {
   font-weight: 400;
   line-height: 26px;
 }
+
+.card-title {
+  font-size: 24px;
+  font-weight: 800;
+  margin-bottom: 16px;
+}
+
+.card-description {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+}
 /* Shared Styles End Here */
 
 /* Header Section Style Start From Here */
@@ -302,18 +314,71 @@ main {
   width: 64px;
   margin-bottom: 32px;
 }
-.card .card-title {
-  font-size: 24px;
-  font-weight: 800;
-  margin-bottom: 16px;
-}
+/* Why Choose Us Section Style End Here */
 
-.card .card-description {
+/* News Letter Section Style Start From Here */
+.news-letter-section-container {
+  margin: 0px 20px 100px;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+.news-letter-left {
+  width: 40%;
+  border-radius: 16px;
+  border: 1px solid #ff5400;
+  padding: 40px;
+}
+.news-letter-left hr {
+  margin: 24px 0;
+}
+.news-letter-input-btn {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.news-letter-input-btn > input {
+  color: rgba(19, 19, 24, 0.3);
   font-size: 16px;
   font-weight: 400;
-  line-height: 26px;
+  padding: 16px 20px;
+  border-radius: 8px;
+  background-color: rgba(19, 19, 24, 0.05);
+  border: none;
+  margin-bottom: 16px;
 }
-/* Why Choose Us Section Style End Here */
+.news-letter-input-btn > button {
+  margin-top: 8px;
+}
+.news-letter-right {
+  width: 60%;
+  position: relative;
+}
+.news-letter-right img {
+  width: 100%;
+}
+.offer-container {
+  color: white;
+  border-radius: 16px;
+  background: #ff5400;
+  text-align: center;
+  max-width: 325px;
+  padding: 20px;
+  position: absolute;
+  transform: rotate(-19.628deg);
+  bottom: 18%;
+  right: 2%;
+}
+.offer-container .domain-name {
+  font-size: 24px;
+  font-weight: 400;
+}
+.offer-container .offer {
+  font-size: 32px;
+  font-weight: 800;
+}
+/* News Letter Section Style End Here */
+
 /* Main Section Style End Here */
 
 /* Footer Section Start From Here */

diff --git a/styles/responsive.css b/styles/responsive.css
@@ -10,6 +10,14 @@
     font-weight: 400;
     line-height: 24px;
   }
+  .card-title {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+  .card-description {
+    font-size: 14px;
+    line-height: 24px;
+  }
   /* Shared Style End Here */
 
   /* Nav Section Style Start From Here */
@@ -143,16 +151,49 @@
     width: 48px;
     margin-bottom: 16px;
   }
+  /* Why Choose Us Section Style End Here */
 
-  .card .card-title {
-    font-size: 20px;
+  /* News Letter Section Style Start From Here */
+  .news-letter-section-container {
+    margin: 24px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+  .news-letter-left {
+    width: 100%;
+    padding: 24px;
+  }
+
+  .news-letter-left hr {
+    margin: 16px 0;
   }
 
-  .card .card-description {
+  .news-letter-input-btn > input {
     font-size: 14px;
-    line-height: 24px;
   }
-  /* Why Choose Us Section Style End Here */
+
+  .news-letter-right {
+    width: 100%;
+  }
+
+  .offer-container {
+    border-radius: 10px;
+    max-width: 214px;
+    padding: 10px;
+    position: absolute;
+    transform: rotate(-19.628deg);
+    bottom: 15%;
+    right: 2%;
+  }
+  .offer-container .domain-name {
+    font-size: 14px;
+  }
+  .offer-container .offer {
+    font-size: 18px;
+  }
+  /* News Letter Section Style End Here */
 
   /* Footer Section Start From Here */
   .footer-container {