added popular tour section

xyryc · Jul 29, 2024 · c0841ff · c0841ff
1 parent 7ac2674
commit c0841ff
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
       crossorigin="anonymous"
     ></script>
   </head>
+
   <body class="mulish-font">
     <header>
       <!-- Navbar -->
@@ -52,7 +53,42 @@ <h3>Explore Your Travel</h3>
       </section>
     </header>
 
-    <main></main>
+    <main>
+      <!-- Our Popular Tours -->
+      <section class="container popular-section">
+        <div class="text-content">
+          <h3>Our Popular Tours</h3>
+          <p>
+            Dolor sit amet consectetur. Diam volutpat neque habitasse pharetra
+            odio sit massa. Sodales dictumst nec nibh pellentesque.
+          </p>
+          <ul>
+            <li>
+              Tempus euismod lacus mauris dignissim quis in ultrices. Magna
+              nullam odio neque diam. Sociis erat at .
+            </li>
+            <li>
+              Adipiscing ornare pellentesque mauris volutpat tortor vitae platea
+              porta lacus. Lectus suspendisse nullam.
+            </li>
+            <li>
+              Accumsan eget et turpis praesent lorem egestas enim elit bibendum.
+              Risus at in.
+            </li>
+          </ul>
+          <p>
+            Amet consectetur. Vulputate commodo felis molestie risus ornare
+            nulla amet et. Libero commodo sagittis dignissim adipiscing quis.
+            Habitant adipiscing risus natoque aliquet. Id bibendum nunc senectus
+            semper tincidunt.
+          </p>
+          <button class="btn-primary">Read More</button>
+        </div>
+        <div class="image">
+          <img src="images/Rectangle 4.png" alt="" />
+        </div>
+      </section>
+    </main>
 
     <footer></footer>
   </body>

diff --git a/styles/style.css b/styles/style.css
@@ -16,6 +16,7 @@
   width: 90%;
   margin: 5rem auto;
   border-radius: 1rem;
+  border: 2px solid red;
 }
 
 /* section {
@@ -137,4 +138,34 @@ select {
   background-color: rgba(255, 84, 0, 1);
   border: none;
   border-radius: 8px;
+  font-weight: 800;
+}
+
+/* Popular section */
+.popular-section {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 3rem;
+}
+
+.text-content {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.text-content p,
+.text-content li {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
 }
+
+.text-content p,
+.text-content li {
+  text-align: left;
+}
+
+