first
This commit is contained in:
ruchi
parent
16557c4a63
commit
2b0ea0a375
11 changed files with 180 additions and 95 deletions
160
css/styles.css
160
css/styles.css
|
|
@ -1,27 +1,42 @@
|
|||
body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
text-align: center;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Headings */
|
||||
|
||||
.big-heading {
|
||||
font-family: 'Montserrat-Black';
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.5;
|
||||
font-family: 'Montserrat-Black';
|
||||
font-size: 3.5rem;
|
||||
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;
|
||||
color: #ffffff;
|
||||
background-color: #ff4c68;
|
||||
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;
|
||||
line-height: 1.5;
|
||||
font-size: 3rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
padding: 0px 18px;
|
||||
padding: 0px 18px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
font-size: 1.2rem;
|
||||
font-family: 'Montserrat-light', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
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%;
|
||||
text-align: left;
|
||||
padding: 3% 15% 7%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/* Title Image */
|
||||
|
||||
.title-image {
|
||||
width: 60%;
|
||||
transform: rotate(25deg);
|
||||
position: absolute;
|
||||
right: 30%;
|
||||
width: 60%;
|
||||
transform: rotate(25deg);
|
||||
position: absolute;
|
||||
right: 30%;
|
||||
}
|
||||
|
||||
|
||||
/* Features section */
|
||||
|
||||
#features {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
padding: 4%;
|
||||
padding: 4%;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
color: #ef8172;
|
||||
margin-bottom: 1rem;
|
||||
color: #ef8172;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.feature-icon:hover {
|
||||
color: #ff4c68;
|
||||
color: #ff4c68;
|
||||
}
|
||||
|
||||
|
||||
/* testimonial section */
|
||||
|
||||
#testimonials {
|
||||
background-color: #ef8172;
|
||||
background-color: #ef8172;
|
||||
}
|
||||
|
||||
.testimonial-text {
|
||||
font-size: 3rem;
|
||||
line-height: 1.5;
|
||||
font-size: 3rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.testimonial-img {
|
||||
width: 10%;
|
||||
border-radius: 100%;
|
||||
margin: 20px;
|
||||
width: 10%;
|
||||
border-radius: 100%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
}
|
||||
.carousel-item {}
|
||||
|
||||
|
||||
/* Press section */
|
||||
|
||||
#press {
|
||||
background-color: #ef8172;
|
||||
padding-bottom: 3%;
|
||||
background-color: #ef8172;
|
||||
padding-bottom: 3%;
|
||||
}
|
||||
|
||||
.press-img {
|
||||
width: 15%;
|
||||
margin: 20px 20px 50px;
|
||||
width: 15%;
|
||||
margin: 20px 20px 50px;
|
||||
}
|
||||
|
||||
|
||||
/* Pricing Section */
|
||||
|
||||
#pricing {
|
||||
padding: 100px;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
.price-text {
|
||||
font-size: 3rem;
|
||||
line-height: 1.5;
|
||||
font-size: 3rem;
|
||||
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 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
position: static;
|
||||
transform: rotate(0);
|
||||
}
|
||||
#title {
|
||||
text-align: center;
|
||||
}
|
||||
.title-image {
|
||||
position: static;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.colored-section#title {
|
||||
background-image: url("images/biking.jpg");
|
||||
}
|
||||
BIN
images/bike_repair1.jpg
Normal file
BIN
images/bike_repair1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
images/bike_shop1.jpg
Normal file
BIN
images/bike_shop1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
BIN
images/biking.jpg
Normal file
BIN
images/biking.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
images/biking2.jpg
Normal file
BIN
images/biking2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
images/customers/Anthony.png
Normal file
BIN
images/customers/Anthony.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 703 KiB |
BIN
images/customers/bobby.jpg
Normal file
BIN
images/customers/bobby.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
images/customers/elizabeth.jpg
Normal file
BIN
images/customers/elizabeth.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
images/customers/keith.png
Normal file
BIN
images/customers/keith.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
images/owne_pic.jpg
Normal file
BIN
images/owne_pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
113
index.html
113
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>
|
||||
<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-outline-light download-btn"><i class="fab fa-google-play"></i> Download</button>
|
||||
<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> Book an Appointment</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>
|
||||
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
|
||||
<em>Pebbles, New York</em>
|
||||
<h2 class="testimonial-text"> "Strong 10 from me. The service here is phenomenal." </h2>
|
||||
<img class="testimonial-img" src="images\customers\Anthony.png" alt="dog-profile">
|
||||
<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>
|
||||
<img class="testimonial-img" src="images/lady-img.jpg" alt="lady-profile">
|
||||
<em>Beverly, Illinois</em>
|
||||
<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\customers\elizabeth.jpg" alt="lady-profile">
|
||||
<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>
|
||||
<p>Simple and affordable price plans for your and your dog.</p>
|
||||
<h2 class="section-heading">Our Bike Repair Plans</h2>
|
||||
<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">Free</h2>
|
||||
<h2 class="price-text">$47.95</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">
|
||||
<h3 class="big-heading">Find the True Love of Your Dog's Life Today.</h3>
|
||||
<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-outline-light download-btn"><i class="fab fa-google-play"></i> Download</button>
|
||||
</div>
|
||||
<h2 class="big-heading">Contact Us</h2>
|
||||
<p style="color:white;">5 Hawthorne Avenue <br>
|
||||
Ottawa, Ontario <br>
|
||||
Phone: (613) 567-8180 <br>
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue