added newsletter section

xyryc · Jul 31, 2024 · d122ef0 · d122ef0
1 parent 904002d
commit d122ef0
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -266,7 +266,6 @@ <h4>Tour To Baros</h4>
           <div class="all-packages">
             <button class="btn-primary">See All Packages</button>
           </div>
-
         </div>
       </section>
 
@@ -294,8 +293,40 @@ <h3>A Simple Perfect Place To Get Lost</h3>
           <img src="images/Group 40089.png" alt="" />
         </div>
       </section>
+
+      <!-- Newsletter section -->
+      <section class="container newsletter">
+        <div class="text-content">
+          <h3>Newsletter</h3>
+          <p>Get your daily dose of travel news & tips. Sign up today!</p>
+          <hr />
+          <form action="">
+            <input
+              type="text"
+              name=""
+              id="name"
+              placeholder="Enter your name"
+            /><br />
+            <input
+              type="email"
+              name=""
+              id="email"
+              placeholder="Enter your email"
+            />
+            <button class="btn-primary">Subscribe</button>
+          </form>
+        </div>
+        <div class="image">
+          <img src="images/Rectangle 8 (1).png" alt="" />
+          <div class="discount-tag">
+            <p>code: travelvibe</p>
+            <h2>Save up to 70%</h2>
+          </div>
+        </div>
+      </section>
     </main>
 
+    <!-- Footer section -->
     <footer class="footer-section">
       <div class="container">
         <div class="logo">
@@ -313,7 +344,7 @@ <h3>Travel <span class="span">Vibe</span></h3>
           <i class="fa-brands fa-twitter"></i>
           <i class="fa-brands fa-facebook-f"></i>
           <i class="fa-brands fa-instagram"></i>
-          <a href="https://github.com/xyryc"
+          <a href="https://github.com/xyryc" target="_blank"
             ><i class="fa-brands fa-github"></i>
           </a>
         </div>

diff --git a/styles/style.css b/styles/style.css
@@ -352,6 +352,64 @@ h4 {
   max-width: 80%;
 }
 
+/* Newsletter section styles */
+.newsletter {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+.newsletter .text-content {
+  border: 2px solid rgba(255, 84, 0, 1);
+  border-radius: 1rem;
+  padding: 40px;
+}
+
+.newsletter p {
+  width: 80%;
+}
+
+.newsletter hr {
+  border: 1px solid rgba(19, 19, 24, 0.1);
+  margin: 0 auto;
+  width: 100%;
+}
+
+.newsletter form {
+  width: 100%;
+}
+
+.newsletter input {
+  background-color: rgba(19, 19, 24, 0.05);
+  margin: 0;
+  width: 96%;
+  margin-bottom: 16px;
+}
+
+.newsletter button {
+  width: 100%;
+}
+
+.newsletter .image {
+  position: relative;
+}
+
+.newsletter .discount-tag {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: rgba(255, 84, 0, 1);
+  border-radius: 16px;
+  padding: 35px 55px;
+  color: #ffffff;
+  transform: translate(10%, 30%) rotate(-20deg);
+}
+.discount-tag p,
+.discount-tag h2 {
+  margin: 0 auto;
+  text-align: center;
+}
+
 /* Footer section */
 .footer-section {
   background: rgba(19, 19, 24, 0.05);