Merge branch 'main' of https://github.com/Sizo04/group-project-1

Sizo04 · Feb 2, 2024 · a3fd7d5 · a3fd7d5
2 parents b266f31 + a9d34b8
commit a3fd7d5
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 87 deletions.
diff --git a/images/up-arrow.png b/images/up-arrow.png
diff --git a/index.html b/index.html
@@ -17,14 +17,16 @@
   <body>
     <!-- NAV BAR -->
     <header class="navbar">
-      <a href="#">
-        <h1>
-          <img src="./images/plane.png" alt="plane icon" />
-          Branko Travels
-        </h1>
-      </a>
+      <div class="navbar-logo">
+        <a href="#">
+          <h1>
+            <img src="./images/plane.png" alt="plane icon" />
+            Branko Travels
+          </h1>
+        </a>
+      </div>
 
-      <nav class="nav_links">
+      <nav>
         <a class="links" href="./pages/about-us.html">About us</a>
         <a class="links" href="./pages/destinations.html">Travel Plans</a>
         <a class="links" href="./pages/activites.html">Activities</a>
@@ -128,35 +130,34 @@ <h2>Check our travels!</h2>
     <footer>
       <div class="footer-info-container">
         <section class="footer-info">
-          <div class="logo">
+          <figure class="logo">
             <img src="./images/plane.png" alt="Branko Travel Logo" />
-            <span class="logo-text">BRANKO TRAVEL</span>
-          </div>
-
+            <figcaption class="logo-text">BRANKO TRAVEL</figcaption>
+          </figure>
           <p>
-            Lorem Ipsum è un testo segnaposto utilizzato nel settore della
-            tipografia e della stampa. Lorem Ipsum è considerato il testo
-            segnaposto standard.
+            Your gateway to unforgettable journeys. We craft seamless group
+            travels, curated packages, and great experiences. Join us in
+            redefining travel
           </p>
         </section>
         <hr class="mobile" />
         <section class="newsletter">
           <h2>NEWSLETTER</h2>
           <p>
-            Lorem Ipsum è un testo segnaposto utilizzato nel settore della
-            tipografia.
+            Subscribe to our newsletter for exclusive travel insights, offers,
+            and the latest updates
           </p>
           <div class="newsletter-btn">
             <input type="text" placeholder="Your Email" />
-            <button class="primary-btn">Subcribe</button>
+            <button class="primary-btn">Join</button>
           </div>
         </section>
         <hr class="mobile" />
         <section class="social">
           <h2>SOCIAL</h2>
           <ul>
             <li>
-              <img src="./images/instagram.png" alt="" />
+              <img src="./images//instagram.png" alt="" />
             </li>
             <li>
               <img src="./images//facebook.png" alt="" />
@@ -171,12 +172,10 @@ <h2>SOCIAL</h2>
           <h2>CONTACTS</h2>
           <ul>
             <li>
-              <b>Tel: &nbsp;</b>
-              <span> +01 123456789</span>
+              <span> <b>Tel: &nbsp;</b>+01 123456789 </span>
             </li>
             <li>
-              <b>Email: &nbsp;</b>
-              <span> [email protected]</span>
+              <span> <b>Mail: &nbsp;</b>[email protected] </span>
             </li>
           </ul>
         </section>

diff --git a/pages/about-us.html b/pages/about-us.html
@@ -8,13 +8,16 @@
     <title>About Us</title>
   </head>
   <body>
+
     <header class="navbar">
-      <a href="../index.html">
-        <h1>
-          <img src="../images/plane.png" alt="plane icon" />
-          Branko Travels
-        </h1>
-      </a>
+      <div class="navbar-logo">
+        <a href="../index.html">
+          <h1>
+            <img src="../images/plane.png" alt="plane icon" />
+            Branko Travels
+          </h1>
+        </a>
+      </div>
 
       <nav class="nav_links">
         <a class="links active" href="./about-us.html">About us</a>
@@ -181,6 +184,19 @@ <h2>24H/7 ASSISTANCE</h2>
           </article>
         </div>
       </section>
+
+      <section class="dest_call">
+        <div class="call_box">
+            <h3>Do you want to join our team?</h3>
+            <p>See now the open positions in our agency and start a new career</p>
+          <button class="secondary-btn">Join Us</button>
+        </div>
+      </section>
+
+        <a href="#" class="back-to-top-btn">
+          <img src="../images/up-arrow.png" alt="Back To Top">
+        </a>
+
     </main>
 
     <footer>
@@ -205,7 +221,7 @@ <h2>NEWSLETTER</h2>
           </p>
           <div class="newsletter-btn">
             <input type="text" placeholder="Your Email" />
-            <button class="primary-btn">Subcribe</button>
+            <button class="primary-btn">Join</button>
           </div>
         </section>
         <hr class="mobile" />

diff --git a/pages/activites.html b/pages/activites.html
@@ -10,12 +10,14 @@
   <body>
     <!-- NAV BAR -->
     <header class="navbar">
-      <a href="../index.html">
-        <h1>
-          <img src="../images/plane.png" alt="plane icon" />
-          Branko Travels
-        </h1>
-      </a>
+      <div class="navbar-logo">
+        <a href="../index.html">
+          <h1>
+            <img src="../images/plane.png" alt="plane icon" />
+            Branko Travels
+          </h1>
+        </a>
+      </div>
 
       <nav class="nav_links">
         <a class="links" href="./about-us.html">About us</a>
@@ -272,7 +274,7 @@ <h2>Food</h2>
               </p>
             </div>
           </section>
-        </article> 
+        </article>
         <!-- Nature -->
         <article class="activity-section activity-gray-bg" id="nature">
           <section class="intro-container">
@@ -511,7 +513,6 @@ <h2>Family</h2>
             </div>
           </section>
         </article>
-
       </section>
       <section class="signup">
         <div class="container">
@@ -530,19 +531,20 @@ <h2>
         </div>
       </section>
       <!-- back to the top sticky button -->
-      <!-- <div class="scroll-top">
-        <a href="#" class="scroll-top__link">Back to top</a>
-      </div> -->
+        <a class="back-to-top-btn" href="#">
+          <img src="../images/up-arrow.png" alt="Back To Top">
+        </a>
+
     </main>
 
     <footer>
-      <nav class="activity-links-footer">
+      <!-- <nav class="activity-links-footer">
         <a href="#adventure">Adventure</a>
         <a href="#food">Food</a>
         <a href="#nature">Nature</a>
         <a href="#culture">Culture</a>
         <a href="#family">Family</a>
-      </nav>
+      </nav> -->
       <div class="footer-info-container">
         <section class="footer-info">
           <div class="logo">
@@ -565,7 +567,7 @@ <h2>NEWSLETTER</h2>
           </p>
           <div class="newsletter-btn">
             <input type="text" placeholder="Your Email" />
-            <button class="primary-btn">Subcribe</button>
+            <button class="primary-btn">Join</button>
           </div>
         </section>
         <hr class="mobile" />

diff --git a/pages/destinations.html b/pages/destinations.html
@@ -9,12 +9,14 @@
   </head>
   <body>
     <header class="navbar">
-      <a href="../index.html">
-        <h1>
-          <img src="../images/plane.png" alt="plane icon" />
-          Branko Travels
-        </h1>
-      </a>
+      <div class="navbar-logo">
+        <a href="../index.html">
+          <h1>
+            <img src="../images/plane.png" alt="plane icon" />
+            Branko Travels
+          </h1>
+        </a>
+      </div>
 
       <nav class="nav_links">
         <a class="links" href="./about-us.html">About us</a>
@@ -229,16 +231,6 @@ <h2 class="dest_titles" id="asia">Asia</h2>
         </div>
       </section>
 
-      <section class="dest_call">
-        <div class="call_box">
-          <div>
-            <h3>Can't decide?</h3>
-            <p>We’ll find something for you! Give us a call a 555-444.</p>
-          </div>
-          <button>Call us</button>
-        </div>
-      </section>
-
       <section class="dest_testimonials">
         <h2>Testimonials</h2>
 
@@ -264,9 +256,20 @@ <h4 class="testi_name">Omar A.</h4>
         </div>
       </section>
 
-      <div class="scroll-top">
-        <a href="#" class="scroll-top__link">Back to top</a>
-      </div>
+      <section class="dest_call">
+        <div class="call_box">
+          <div>
+            <h3>Can't decide?</h3>
+            <p>We’ll find something for you! Give us a call a 555-444.</p>
+          </div>
+          <button>Call us</button>
+        </div>
+      </section>
+
+        <a href="#" class="back-to-top-btn">
+          <img src="../images/up-arrow.png" alt="Back To Top">
+        </a>
+
     </main>
 
     <footer>
@@ -292,7 +295,7 @@ <h2>NEWSLETTER</h2>
           </p>
           <div class="newsletter-btn">
             <input type="text" placeholder="Your Email" />
-            <button class="primary-btn">Subcribe</button>
+            <button class="primary-btn">Join</button>
           </div>
         </section>
         <hr class="mobile" />

diff --git a/styles/about-us.css b/styles/about-us.css
@@ -178,6 +178,38 @@ p {
    width: 7em;
    height: auto;
 }
+
+.dest_call {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+   margin: 3em 0;
+ }
+
+ .call_box {
+   width: 70vw;
+   min-height: var(--section_height);
+   background: var(--cta);
+   text-align: center;
+   display: flex;
+   align-items: center;
+   justify-content: space-evenly;
+   color: var(--main_text);
+   border-radius: 5px;
+   padding: 2em;
+ }
+
+ .call_box h3 {
+   margin-bottom: 40px;
+   font-family: "Roboto", sans-serif;
+   font-size: 1.5em;
+ }
+
+ .call_box p {
+   font-size: 1.2em;
+   max-width: 250px;
+   line-height: 2em;
+ }
 
 /*  Smartphones  */
 @media (max-width: 768px) {
@@ -266,4 +298,9 @@ p {
     .service {
         width: auto;
     }
+
+    .call_box {
+      justify-content: center;
+      flex-direction: column;
+    }
 }
diff --git a/styles/activities.css b/styles/activities.css
@@ -1,7 +1,4 @@
 
-body {
-  width: 100vw;
-}
 main {
   position: relative;
 }
@@ -41,8 +38,7 @@ figcaption {
   border-radius: 10px;
 }
 
-
-/* .scroll-top {
+.scroll-top {
   position: absolute;
   top: 120vh;
   bottom: 3rem;
@@ -60,17 +56,16 @@ figcaption {
   text-decoration: none;
 }
 
-*/
 .activities-page {
   font-family: "Roboto", sans-serif;
-  width: 100vw;
+  width: 100%;
   display: flex;
   flex-direction: column;
 }
 
 .header-container {
   position: relative;
-  width: 100vw;
+  width: 100%;
   height: 350px;
   background-image: url(../images/activities/header-img.jpg);
   display: flex;
@@ -93,7 +88,7 @@ figcaption {
   color: white;
   font-size: 2.5em;
   text-align: center;
-} 
+}
 
 .image-index-container {
   margin: 0;
@@ -162,10 +157,8 @@ figcaption {
   font-weight: bold;
 }
 
-/*
-
 .activity-section {
-  width: 100vw;
+  width: 100%;
   margin: 0;
   padding: 30px 0;
   display: flex;
@@ -276,5 +269,3 @@ figcaption {
     margin: 1em;
   }
 }
-
-