first

css/styles.css

@@ -1,27 +1,42 @@
 body {
-  font-family: 'Montserrat', sans-serif;
+    font-family: 'Montserrat', sans-serif;
-  text-align: center;
+    text-align: center;
 }
 
+
 /* Headings */
+
 .big-heading {
-  font-family: 'Montserrat-Black';
+    font-family: 'Montserrat-Black';
-  font-size: 3.5rem;
+    font-size: 3.5rem;
-  line-height: 1.5;
+    line-height: 1.5;
+}
+
+.big-heading-2 {
+    font-family: 'Montserrat-Black';
+    font-size: 2.0rem;
+    line-height: 1.5;
+    padding-top: 80px;
 }
 
 .container-fluid {
-  padding: 7% 15%;
+    padding: 7% 15%;
 }
 
+
 /* Sections */
+
+.colored-section#title {
+    background-image: url("images/biking.jpg");
+}
+
 .colored-section {
-  background-color: #ff4c68;
+    background-color: #ff4c68;
-  color: #ffffff;
+    color: #ffffff;
 }
 
 .white-section {
-  background-color: #ffffff;
+    background-color: #ffffff;
 }
 
 h1,
@@ -30,144 +45,165 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Montserrat-Bold';
+    font-family: 'Montserrat-Bold';
 }
 
 h3 {
-  font-size: 1.5rem;
+    font-size: 1.5rem;
 }
 
 p {
-  color: #8f8f8f;
+    color: #8f8f8f;
 }
 
+
 /* navigation bar */
+
 .navbar {
-  padding: 0 0 4.5rem;
+    padding: 0 0 4.5rem;
 }
 
 .section-heading {
-  font-size: 3rem;
+    font-size: 3rem;
-  line-height: 1.5;
+    line-height: 1.5;
 }
 
 .navbar-brand {
-  font-family: 'Ubuntu', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
-  font-size: 2.5rem;
+    font-size: 2.5rem;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .navbar-item {
-  padding: 0px 18px;
+    padding: 0px 18px;
 }
 
 .navbar-link {
-  font-size: 1.2rem;
+    font-size: 1.2rem;
-  font-family: 'Montserrat-light', sans-serif;
+    font-family: 'Montserrat-light', sans-serif;
 }
 
+
 /* Download Buttons */
+
 .download-btn {
-  margin: 5% 3% 5% 0;
+    margin: 5% 3% 5% 0;
 }
 
+
 /* Title Section */
+
 #title .container-fluid {
-  padding: 3% 15% 7%;
+    padding: 3% 15% 7%;
-  text-align: left;
+    text-align: left;
 }
 
+
 /* Title Image */
+
 .title-image {
-  width: 60%;
+    width: 60%;
-  transform: rotate(25deg);
+    transform: rotate(25deg);
-  position: absolute;
+    position: absolute;
-  right: 30%;
+    right: 30%;
 }
 
+
 /* Features section */
+
 #features {
-  position: relative;
+    position: relative;
-  z-index: 1;
+    z-index: 1;
 }
 
 .feature-title {
-  font-size: 1.5rem;
+    font-size: 1.5rem;
 }
 
 .feature-box {
-  padding: 4%;
+    padding: 4%;
 }
 
 .feature-icon {
-  color: #ef8172;
+    color: #ef8172;
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
 }
 
 .feature-icon:hover {
-  color: #ff4c68;
+    color: #ff4c68;
 }
 
+
 /* testimonial section */
+
 #testimonials {
-  background-color: #ef8172;
+    background-color: #ef8172;
 }
+
 .testimonial-text {
-  font-size: 3rem;
+    font-size: 3rem;
-  line-height: 1.5;
+    line-height: 1.5;
 }
 
 .testimonial-img {
-  width: 10%;
+    width: 10%;
-  border-radius: 100%;
+    border-radius: 100%;
-  margin: 20px;
+    margin: 20px;
 }
 
-.carousel-item {
+.carousel-item {}
-}
+
 
 /* Press section */
+
 #press {
-  background-color: #ef8172;
+    background-color: #ef8172;
-  padding-bottom: 3%;
+    padding-bottom: 3%;
 }
 
 .press-img {
-  width: 15%;
+    width: 15%;
-  margin: 20px 20px 50px;
+    margin: 20px 20px 50px;
 }
 
+
 /* Pricing Section */
+
 #pricing {
-  padding: 100px;
+    padding: 100px;
 }
 
 .price-text {
-  font-size: 3rem;
+    font-size: 3rem;
-  line-height: 1.5;
+    line-height: 1.5;
 }
 
 .pricing-col {
-  padding: 3% 2%;
+    padding: 3% 2%;
 }
 
+
 /* CTA Section */
 
+
 /* Footer section */
-#footer {
+
-}
+#footer {}
 
 .social-icon {
-  margin: 20px 10px;
+    margin: 20px 10px;
 }
 
 @media (max-width: 1028px) {
-  #title {
+    #title {
-    text-align: center;
+        text-align: center;
-  }
+    }
-
+    .title-image {
-  .title-image {
+        position: static;
-    position: static;
+        transform: rotate(0);
-    transform: rotate(0);
+    }
-  }
+}
+
+.colored-section#title {
+    background-image: url("images/biking.jpg");
 }

index.html

@@ -21,11 +21,12 @@
 <body>
 
   <section class="colored-section" id="title">
+
     <div class="container-fluid">
 
       <!-- Nav Bar -->
       <nav class="navbar navbar-expand-lg navbar-dark">
-        <a class="navbar-brand" href="#">tindog</a>
+        <a class="navbar-brand" href="#">Batuhan's Bikes</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
@@ -38,7 +39,7 @@
               <a class="nav-link" href="#pricing">Pricing</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#cta">Download</a>
+              <a class="nav-link" href="#cta">Book an Appointment</a>
             </li>
           </ul>
         </div>
@@ -48,9 +49,8 @@
 
       <div class="row">
         <div class="col-lg-6">
-          <h1 class="big-heading">Meet new and interesting dogs nearby.</h1>
+          <h1 class="big-heading">Nothing beats the high of a good bike ride. </h1>
-          <button type="button" class="btn btn-lg btn-dark download-btn"><i class="fab fa-apple"></i> Download</button>
+          <button type="button" class="btn btn-lg btn-dark download-btn"><i class="fab fa-apple"></i> Book an Appointment</button>
-          <button type="button" class="btn btn-lg btn-outline-light download-btn"><i class="fab fa-google-play"></i> Download</button>
         </div>
 
         <div class="col-lg-6">
@@ -98,17 +98,33 @@
   <section class="colored-section" id="testimonials">
     <div id="testimonial-carousel" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner">
+      
         <div class="carousel-item active container-fluid">
-          <h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
+          <h2 class="testimonial-text"> "Strong 10 from me. The service here is phenomenal." </h2>
-          <img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
+          <img class="testimonial-img" src="images\customers\Anthony.png" alt="dog-profile">
-          <em>Pebbles, New York</em>
+          <em>Anthony Green</em>
         </div>
+
         <div class="carousel-item container-fluid">
-          <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
+          <h2 class="testimonial-text">"Thanks to the folks over at Batuhan's Bikes, I just upgraded my old bike to a new mountain bike. Love it!" </h2>
-          <img class="testimonial-img" src="images/lady-img.jpg" alt="lady-profile">
+          <img class="testimonial-img" src="images\customers\elizabeth.jpg" alt="lady-profile">
-          <em>Beverly, Illinois</em>
+          <em>Ellie Bean</em>
         </div>
+
+        <div class="carousel-item container-fluid">
+          <h2 class="testimonial-text">"Most people don't know me. If you ask any of my friends they will say I bike. And the only place I trust to get my bikes are Batuhan's Bikes"</h2>
+          <img class="testimonial-img" src="images\customers\bobby.jpg" alt="lady-profile">
+          <em>Bob </em>
+        </div>
+
+        <div class="carousel-item container-fluid">
+          <h2 class="testimonial-text">"The squeeze has not squoze." </h2>
+          <img class="testimonial-img" src="images\customers\keith.png" alt="lady-profile">
+          <em>Keith Value</em>
+        </div>
+
       </div>
+      
       <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
@@ -124,7 +140,7 @@
 
 
   <!-- Press -->
-
+  <!---
   <section class="colored-section" id="press">
     <img class="press-img" src="images/techcrunch.png" alt="tc-logo">
     <img class="press-img" src="images/tnw.png" alt="tnw-logo">
@@ -132,29 +148,28 @@
     <img class="press-img" src="images/mashable.png" alt="mashable-logo">
 
   </section>
-
+  -->
 
   <!-- Pricing -->
 
   <section class="white-section" id="pricing">
 
-    <h2 class="section-heading">A Plan for Every Dog's Needs</h2>
+    <h2 class="section-heading">Our Bike Repair Plans</h2>
-    <p>Simple and affordable price plans for your and your dog.</p>
+    <p>Simple and affordable price plans for your bike.</p>
 
 
     <div class="row">
       <div class="pricing-col col-lg-4 col-md-6">
         <div class="card">
           <div class="card-header">
-            <h3>Chihuahua</h3>
+            <h3>Regular Tune Up</h3>
           </div>
           <div class="card-body">
-            <h3>Chihuahua</h3>
+            <h2 class="price-text">$47.95</h2>
-            <h2 class="price-text">Free</h2>
             <p>5 Matches Per Day</p>
             <p>10 Messages Per Day</p>
             <p>Unlimited App Usage</p>
-            <button type="button" class="btn btn-block btn-outline-dark btn-lg">Sign Up</button>
+            <button type="button" class="btn btn-block btn-outline-dark btn-lg">Buy</button>
           </div>
         </div>
       </div>
@@ -162,14 +177,14 @@
       <div class="pricing-col col-lg-4 col-md-6">
         <div class="card">
           <div class="card-header">
-            <h3>Labrador</h3>
+            <h3>"Tired Bike" Tune Up</h3>
           </div>
           <div class="card-body">
-            <h2 class="price-text">$49 / mo</h2>
+            <h2 class="price-text">$59.95</h2>
             <p>Unlimited Matches</p>
             <p>Unlimited Messages</p>
             <p>Unlimited App Usage</p>
-            <button type="button" class="btn btn-block btn-dark btn-lg">Sign Up</button>
+            <button type="button" class="btn btn-block btn-outline-dark btn-lg">Buy</button>
           </div>
         </div>
       </div>
@@ -178,15 +193,15 @@
       <div class="pricing-col col-lg-4 ">
         <div class="card">
           <div class="card-header">
-            <h3>Mastiff</h3>
+            <h3>"Roadie" Tune Up</h3>
           </div>
           <div class="card-body">
-            <h2 class="price-text">$99 / mo</h2>
+            <h2 class="price-text">$79.95</h2>
             <p>Pirority Listing</p>
             <p>Unlimited Matches</p>
             <p>Unlimited Messages</p>
             <p>Unlimited App Usage</p>
-            <button type="button" class="btn btn-block btn-dark btn-lg">Sign Up</button>
+            <button type="button" class="btn btn-block btn-outline-dark btn-lg">Buy</button>
           </div>
         </div>
       </div>
@@ -197,11 +212,46 @@
   <!-- Call to Action -->
 
   <section class="colored-section" id="cta">
-    <div class="container-fluid">
+  <h2 class="big-heading">Contact Us</h2>
-      <h3 class="big-heading">Find the True Love of Your Dog's Life Today.</h3>
+          <p style="color:white;">5 Hawthorne Avenue <br>
-      <button type="button" class="btn btn-lg btn-dark download-btn"><i class="fab fa-apple"></i> Download</button>
+          Ottawa, Ontario    <br>
-      <button type="button" class="btn btn-lg btn-outline-light download-btn"><i class="fab fa-google-play"></i> Download</button>
+          Phone: (613) 567-8180 <br>
-    </div>
+          Email: info@cycosport.ca
+          </p>
+      <div class="row"> 
+        <div class="col-8"> 
+          <div id="googleMap" style="width:70%;height:400px;margin-left:auto; margin-right:auto;"></div>
+        </div>
+
+        <div class="col-3-4"> 
+        <h2 class="big-heading-2">Opening Hours</h2>
+        <p style="color:white;text-align:left;padding-left:30px;">
+        Mon: 8:30 to 22:00<br>
+        Tue: 8:30 to 22:00<br>
+        Wed: 8:30 to 22:00<br>
+        Thu: 8:30 to 22:00<br>
+        Fri: 8:30 to 22:00<br>
+        Sat: 10:00 to 20:00<br>
+        Sun: 10:00 to 20:00<br>
+        </p>
+      </div>
+      <script>
+        function myMap() {
+        var mapProp= {
+          center:new google.maps.LatLng(45.412085720162494, -75.68236814266143),
+          zoom:18,
+        };
+        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
+        }
+        </script>
+        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I&callback=myMap"></script>
+        
+  </section>
+      
+    
+  <!--- Book an Appointment -->
+  <section class="colored-section" id="cta">
+
   </section>
   
 
@@ -213,11 +263,10 @@
       <i class="social-icon fab fa-facebook"></i>
       <i class="social-icon fab fa-instagram"></i>
       <i class="social-icon fas fa-envelope"></i>
-      <p>© Copyright 2020 TinDog</p>
+      <p>© Copyright SEG3125 - Group5</p>
     </div>
   </footer>
 
-
 </body>
 
 </html>