Merge pull request #4 from claire-fletcher/claire/adjust-css-nav-bar-…

…scroll-and-cards-responsive Feat: Responsive cards, CSS theme, additional photos page, contact template
claire-fletcher · Aug 11, 2024 · 5fde0f2 · 5fde0f2
2 parents 9c08e3c + 1d95328
commit 5fde0f2
Show file tree

Hide file tree

Showing 10 changed files with 406 additions and 181 deletions.
diff --git a/assets/cumbria.jpg b/assets/cumbria.jpg
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="./styles/theme.css">
     <link rel="stylesheet" href="./styles/index.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -15,27 +16,41 @@
       rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Travel Blog</title>
-    <style>
-      body {
-        font-family: 'Montserrat';
-      }
-    </style>
   </head>
 
   <!-- body -->
   <body>
 
     <!-- header -->
     <header>
-      <!-- nav bar-->
-      <nav class="navbar navbar-light navbar-expand-sm justify-content-center" style="background-color: #283a2c;">
-        <div class="navbar-nav">
-          <a class="nav-item nav-link mx-2 active" href="#"> Home </a>
-          <a class="nav-item nav-link mx-2" href="#"> Photos </a>
-          <a class="nav-item nav-link mx-2" href="#"> Blog </a>
-          <a class="nav-item nav-link mx-2" href="#"> Social Media </a>
-          <a class="nav-item nav-link mx-2" href="#"> Countries </a>
-          <a class="nav-item nav-link mx-2" href="#"> Contact us </a>
+      <!-- this is the mobile nav bar-->
+      <nav class="navbar navbar-light navbar-expand-sm justify-content-center">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="https://codefirstgirls.com/">CFG</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="collapsibleNavbar">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link mx-2 active" href="#">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="pages/photos.html">Photos</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="#blogs">Blog</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="#social-media">Social Media</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="#blogs">Countries</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="./pages/contact.html">Contact us</a>
+              </li>
+            </ul>
         </div>
       </nav>
     </header>
@@ -58,7 +73,7 @@
             <div class="container carousel-overlay">
               <h1 class="h1-carousel">SEE THE WORLD</h1>
               <h6>HTML-Heroines travel blog</h6>
-              <button type="button" class="btn btn-light btn-sm">EXPLORE NOW</button>
+              <button type="button" class="exploreNow btn btn-light btn-sm">EXPLORE NOW</button>
             </div>
           </div>
           <div class="carousel-item" data-bs-interval="4500"> 
@@ -67,7 +82,7 @@ <h6>HTML-Heroines travel blog</h6>
             <div class="container carousel-overlay">
               <h1 class="h1-carousel">SEE THE WORLD</h1>
               <h6>HTML-Heroines travel blog</h6>
-              <button type="button" class="btn btn-light btn-sm">EXPLORE NOW</button>
+              <button type="button" class="exploreNow btn btn-light btn-sm">EXPLORE NOW</button>
             </div>
           </div>
           <div class="carousel-item" data-bs-interval="4500">
@@ -76,7 +91,7 @@ <h6>HTML-Heroines travel blog</h6>
             <div class="container carousel-overlay">
               <h1 class="h1-carousel">SEE THE WORLD</h1>
               <h6>HTML-Heroines travel blog</h6>
-              <button type="button" class="btn btn-light btn-sm">EXPLORE NOW</button>
+              <button type="button" class="exploreNow btn btn-light btn-sm">EXPLORE NOW</button>
             </div>
           </div>
         </div>
@@ -91,50 +106,49 @@ <h6>HTML-Heroines travel blog</h6>
       </div>
 
       <!-- Heading for the Blogs -->
-      <div class="container">
+      <div id="blogs" class="container">
         <div class="row">
           <div class="col text-center mt-5">
             <h2> Read our most recent blogs </h2>
           </div>
         </div>
       </div>
 
-      <!-- TODO: make these phone responsive -->
       <!-- Cards -->
       <div class="container my-5">
         <div class="row">
-          <div class="col-4 d-flex align-items-stretch">
+          <div class="col-md-4 d-flex p-2">
             <div class="card">
               <img src="./assets/cumbria.jpg" class="card-img-top" alt="Python">
-              <div class="card-body">
-                <h5 class="card-title">Blog 1</h5>
-                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+              <div class="card-body d-flex flex-column justify-content-center align-items-stretch">
+                <h5 class="card-title">Into the Wild</h5>
+                <p class="card-text">Making the most of the sunny weather, Tiegen and her partner explore the Lake District. Camping, hiking and swimming- all the good stuff!</p>
                 <div class="d-flex justify-content-center">
-                  <button> Click Here </button>
+                  <button class="readMore"> Read more </button>
                 </div>
               </div>
             </div>
           </div>
-          <div class="col-4 d-flex align-items-stretch">
+          <div class="col-md-4 d-flex p-2">
             <div class="card">
               <img src="./assets/kyoto.jpg" class="card-img-top" alt="Python">
-              <div class="card-body">
-                <h5 class="card-title">Blog 2</h5>
-                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+              <div class="card-body d-flex flex-column justify-content-center align-items-stretch">
+                <h5 class="card-title">A Tour of Japan</h5>
+                <p class="card-text flex-grow-1">Come with us on a whirlwind trip across the island of Japan. Hop from Osaka to Tokyo, Kyoto to Sendai, this trip has everything. </p>
                 <div class="d-flex justify-content-center">
-                  <button> Click Here </button>
+                  <button class= "readMore"> Read more </button>
                 </div>
               </div>
             </div>
           </div>
-          <div class="col-4 d-flex align-items-stretch">
+          <div class="col-md-4 d-flex p-2">
             <div class="card">
               <img src="./assets/puglia.jpg" class="card-img-top" alt="Python">
-              <div class="card-body">
-                <h5 class="card-title">Blog 3</h5>
-                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+              <div class="card-body d-flex flex-column justify-content-center align-items-stretch">
+                <h5 class="card-title">An Italian Summer</h5>
+                <p class="card-text">With captivating sunsets along the beaches of Puglia to the rustic streets of Bari- Claires trip to the south of Italy was filled with picture-perfect moments .</p>
                 <div class="d-flex justify-content-center">
-                  <button> Click Here </button>
+                  <button class="readMore"> Read more </button>
                 </div>
               </div>
             </div>
@@ -143,19 +157,19 @@ <h5 class="card-title">Blog 3</h5>
       </div>
 
       <!-- Text preview -->
-       <!-- TODO: center and add padding and more text-->
-       <div class="container">
+      <div class="container">
         <div class="row">
           <div class="col text-center my-5">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p> Welcome to the HTML-heroines travel blog. Here you will find the adventures of Claire, Holly and Tiegen- a group of explorers from the UK.</p>
+            <p> From solo travelling across Asia to couples trips in Italy, our travel blog features anything and everything the moment we step off our little Island and start a new adventure. So why not start now and click one of the links above to hear more, or to get in touch find us on social media below! Love- C, H, T x</p>
           </div>
         </div>
       </div>
 
     </main>
 
     <!-- Footer -->
-    <footer class="text-center" style="background-color: #283a2c">
+    <footer class="text-center">
       <div class="container-fluid">
         <div class="container-fluid pt-2">
           <!-- Section: Links to other information -->
@@ -164,7 +178,7 @@ <h2> Catch us in the wild! </h2>
           </section>
 
           <!-- Section: Social -->
-          <section class="text-center mb-5 p-2">
+          <section id="social-media" class="text-center mb-5 p-2">
             <a href="https://facebook.com" class="me-4"><i class="fa-brands fa-facebook footer-icons"></i></a>
             <a href="https://x.com" class="me-4"><i class="fa-brands fa-x-twitter footer-icons"></i></a>
             <a href="https://instagram.com" class="me-4"><i class="fa-brands fa-instagram footer-icons"></i></a>
@@ -173,12 +187,12 @@ <h2> Catch us in the wild! </h2>
           </section>
         </div>
         <hr class="my-5" />
-        <div class="text-center p-3" style="background-color: #283a2c">
+        <div class="text-center p-3">
           © 2024 Copyright: <a>HTML-Heroines</a>
         </div>
       </div>
     </footer>
-    
+
     <!-- scripts -->
     <script src="./scripts/button.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"

diff --git a/pages/bakery-blog.html b/pages/bakery-blog.html
diff --git a/pages/contact.html b/pages/contact.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="../styles/theme.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Anton+SC&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Travel Blog</title>
+  </head>
+
+  <!-- body -->
+  <body>
+
+    <!-- header -->
+    <header>
+      <!-- this is the mobile nav bar-->
+      <nav class="navbar navbar-light navbar-expand-sm justify-content-center">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="https://codefirstgirls.com/">CFG</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="collapsibleNavbar">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="../index.html">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="photos.html">Photos</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="blog-landing.html">Blog</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="#social-media">Social Media</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2" href="../index.html#blogs">Countries</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-2 active" href="#">Contact us</a>
+              </li>
+            </ul>
+        </div>
+      </nav>
+    </header>
+
+    <!-- main -->
+    <main>
+
+
+
+    </main>
+
+    <!-- Footer -->
+    <footer class="text-center">
+      <div class="container-fluid">
+        <div class="container-fluid pt-2">
+          <!-- Section: Links to other information -->
+          <section class="mt-5">
+            <h2> Catch us in the wild! </h2>
+          </section>
+
+          <!-- Section: Social -->
+          <section id="social-media" class="text-center mb-5 p-2">
+            <a href="https://facebook.com" class="me-4"><i class="fa-brands fa-facebook footer-icons"></i></a>
+            <a href="https://x.com" class="me-4"><i class="fa-brands fa-x-twitter footer-icons"></i></a>
+            <a href="https://instagram.com" class="me-4"><i class="fa-brands fa-instagram footer-icons"></i></a>
+            <a href="https://linkedin.com" class="me-4"><i class="fa-brands fa-linkedin footer-icons"></i></a>
+            <a href="https://github.com/claire-fletcher/travel-blog" class="me-4"><i class="fa-brands fa-github footer-icons"></i></a>
+          </section>
+        </div>
+        <hr class="my-5" />
+        <div class="text-center p-3">
+          © 2024 Copyright: <a>HTML-Heroines</a>
+        </div>
+      </div>
+    </footer>
+
+    <!-- scripts -->
+    <script src="./scripts/button.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"></script>
+  </body>
+</html>