calender, payment
This commit is contained in:
ruchi
commit
7d06202348
1 changed files with 98 additions and 98 deletions
196
index.html
196
index.html
|
|
@ -8,7 +8,7 @@
|
|||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300;400;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<!-- CSS stylesheet -->.
|
||||
<!-- CSS stylesheet -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
|
||||
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
<section class="colored-section2" id="title">
|
||||
|
||||
<div class="container-fluid">
|
||||
<img src="images/logo2.png" style="float:left;width:42px;height:42px; margin-right:20px; margin-top:10px">
|
||||
<img src="images/logo2.png" style="float:left;width:42px;height:42px; margin-right:20px; margin-top:10px">
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pricing" id="test">Repair Plans</a>
|
||||
<a class="nav-link" href="#pricing" id="test"> Repair Plans <i class="fas fa-toolbox"></i> </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#cta" id="test">Contact Us</a>
|
||||
<a class="nav-link" href="#cta" id="test"> Contact Us <i class="fas fa-map-signs"></i> </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#appointment" id="test">Appointment</a>
|
||||
<a class="nav-link" href="#appointment" id="test"> Appointment <i class="far fa-clock"></i> </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,8 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="big-heading">Nothing beats the high of a good bike ride. </h1>
|
||||
<button type="button" onclick="toAppointment()" class="btn btn-lg btn-dark download-btn"><i class="fas fa-bicycle"></i> Book an
|
||||
<button type="button" onclick="toAppointment()" class="btn btn-lg btn-dark download-btn"><i
|
||||
class="fas fa-bicycle"></i> Book an
|
||||
Appointment</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -90,77 +91,72 @@
|
|||
|
||||
<div class="container-fluid">
|
||||
|
||||
<h1 style="font-weight: bold;">Meet the Team</h1>
|
||||
<br>
|
||||
<br>
|
||||
<h1 style="font-weight: bold;"><i class="fas fa-users"></i> Meet the Team</h1>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="row">
|
||||
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images\owner_pic.jpg" alt="" class="profile">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title ">Batuhan</h5>
|
||||
<p class="card-text">Hey, I'm the store owner. Ever since I was a child, it was my dream to own
|
||||
a bike shop. I specialize in brake repair.</p>
|
||||
<p class="card-text"><small class="text-muted">Availability: Monday-Friday</small></p>
|
||||
<div class="col-lg-4 col-12">
|
||||
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images\owner_pic.jpg" alt="" class="profile">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title "><i class="fas fa-id-card"></i> Batuhan</h5>
|
||||
<p class="card-text">Hey, I'm the store owner. Ever since I was a child, it was my dream to own
|
||||
a bike shop. I specialize in brake repair.</p>
|
||||
<p class="card-text"><small class="text-muted">Availability: Monday-Friday</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-12">
|
||||
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images\mumen.jpg" alt="" class="profile">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="fas fa-id-card"></i> Mumem</h5>
|
||||
<p class="card-text">Without biking, my life has no meaning. I am
|
||||
the best at fixing punctures in town.</p>
|
||||
<p class="card-text"><small class="text-muted">Availability: Tuesday-Wednesday</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-12">
|
||||
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images\mumen.jpg" alt="" class="profile">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Mumen</h5>
|
||||
<p class="card-text">Without biking, my life has no meaning. I am
|
||||
the best at fixing punctures in town.</p>
|
||||
<p class="card-text"><small class="text-muted">Availability: Tuesday-Wednesday</small></p>
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images\Stewie.png" alt="" class="profile">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="fas fa-id-card"></i> Stewart</h5>
|
||||
<p class="card-text"> I recently got my masters in bike fixing. I can help you with any repair or
|
||||
maintenence </p>
|
||||
<p class="card-text"><small class="text-muted">Availability: Monday-Wednesday</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-12">
|
||||
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images\Stewie.png" alt="" class="profile">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Stewart</h5>
|
||||
<p class="card-text"> I recently got my masters in bike fixing. I can help you with any repair or maintenence </p>
|
||||
<p class="card-text"><small class="text-muted">Availability: Monday-Wednesday</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -218,7 +214,7 @@
|
|||
|
||||
<section class="white-section" id="pricing">
|
||||
|
||||
<h2 class="section-heading">Our Services</h2>
|
||||
<h2 class="section-heading"><i class="fas fa-toolbox"></i> Our Services</h2>
|
||||
<p>Simple and affordable price plans for your bike.</p>
|
||||
|
||||
|
||||
|
|
@ -226,14 +222,15 @@
|
|||
<div class="pricing-col col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Brake Repair</h3>
|
||||
<h3><i class="fas fa-screwdriver"></i> Brake Repair</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h2 class="price-text">$47.95</h2>
|
||||
<img class="title-image" src="images/brake.jpg" alt="bike1">
|
||||
<p>Repair Using Standard kit</p>
|
||||
<p>Part Replacement</p>
|
||||
<button type="button" class="btn btn-block btn-outline-dark btn-lg">Select</button>
|
||||
<button type="button" onclick="toAppointment()"
|
||||
class="btn btn-block btn-outline-dark btn-lg">Select</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -241,14 +238,15 @@
|
|||
<div class="pricing-col col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Fixing Punctures</h3>
|
||||
<h3><i class="fas fa-wrench"></i> Fixing Punctures</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h2 class="price-text">$59.95</h2>
|
||||
<img class="title-image" src="images/tire.jpg" alt="bike2">
|
||||
<p> Repair Using Advanced Kit</p>
|
||||
<p> Part Replacement</p>
|
||||
<button type="button" class="btn btn-block btn-outline-dark btn-lg">Select</button>
|
||||
<button type="button" onclick="toAppointment()"
|
||||
class="btn btn-block btn-outline-dark btn-lg">Select</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -257,14 +255,15 @@
|
|||
<div class="pricing-col col-lg-4 ">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Full Repair/Maintenance</h3>
|
||||
<h3><i class="fas fa-tools"></i> Full Repair/Maintenance</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h2 class="price-text">$79.95</h2>
|
||||
<img class="title-image" src="images/maintenance.jpg" alt="bike3">
|
||||
<p>Full Part Replacement</p>
|
||||
<p>Full Cleaning</p>
|
||||
<button type="button" class="btn btn-block btn-outline-dark btn-lg">Select</button>
|
||||
<button type="button" onclick="toAppointment()"
|
||||
class="btn btn-block btn-outline-dark btn-lg">Select</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -275,19 +274,20 @@
|
|||
<!-- Call to Action -->
|
||||
|
||||
<section class="colored-section2" id="cta">
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
|
||||
<div class ="col-12">
|
||||
<h2 class="big-heading">Contact Us</h2>
|
||||
<p style="color:white;font-size:20px">5 Hawthorne Avenue <br>
|
||||
Ottawa, Ontario <br>
|
||||
Phone: (613) 567-8180 <br>
|
||||
Email: info@cycosport.ca <br>
|
||||
<p style= "font-weight: bold; color: white;font-size:25px ">Buisness Hours: 8:30 - 22:00, Monday to Friday <p>
|
||||
</p>
|
||||
<div class="col-12">
|
||||
<h2 class="big-heading"> <i class="fas fa-map-signs"></i> Contact Us</h2>
|
||||
<p style="color:white;font-size:20px">5 Hawthorne Avenue <br>
|
||||
Ottawa, Ontario <br>
|
||||
Phone: (613) 567-8180 <br>
|
||||
Email: info@cycosport.ca <br>
|
||||
<p style="font-weight: bold; color: white;font-size:25px ">Buisness Hours: 8:30 - 22:00, Monday to Friday
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div id="googleMap" class="map-img"></div>
|
||||
|
|
@ -295,19 +295,19 @@
|
|||
|
||||
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -315,9 +315,9 @@
|
|||
<!--- Book an Appointment -->
|
||||
<section class="white-section" id="appointment">
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
<h2 class="big-heading">Book an Appointment</h2>
|
||||
|
||||
<h2 class="big-heading"> <i class="far fa-clock"></i> Book an Appointment</h2>
|
||||
<!-- Accordion for booking a service-->
|
||||
<div id="accordion">
|
||||
<div class="card">
|
||||
|
|
|
|||
Loading…
Reference in a new issue