added list of services
This commit is contained in:
soyed
parent
f3fdab2a52
commit
9013655215
2 changed files with 66 additions and 87 deletions
|
|
@ -39,6 +39,7 @@ body {
|
||||||
background-color: #34626c;
|
background-color: #34626c;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colored-section3 {
|
.colored-section3 {
|
||||||
background-color: #cfd3ce;
|
background-color: #cfd3ce;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
@ -62,8 +63,8 @@ h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: rgb(77, 77, 77);
|
color: rgb(77, 77, 77);
|
||||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -86,22 +87,19 @@ p {
|
||||||
|
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
padding: 0px 18px;
|
padding: 0px 18px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-link {
|
.navbar-link {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-family: 'Montserrat-light', sans-serif;
|
font-family: 'Montserrat-light', sans-serif;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#test {
|
#test {
|
||||||
color:rgb(236, 236, 236);
|
color: rgb(236, 236, 236);
|
||||||
}
|
}
|
||||||
|
|
||||||
#test:hover {
|
#test:hover {
|
||||||
color:rgb(216, 181, 24);
|
color: rgb(216, 181, 24);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -129,9 +127,8 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
#features .container-fluid {
|
#features .container-fluid {
|
||||||
padding: 3% 5% ;
|
padding: 3% 5%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -210,16 +207,22 @@ p {
|
||||||
|
|
||||||
|
|
||||||
/* CTA Section */
|
/* CTA Section */
|
||||||
#cta{
|
|
||||||
|
#cta {
|
||||||
padding: 3% 7%
|
padding: 3% 7%
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-img{
|
.map-img {
|
||||||
width:70%;
|
width: 70%;
|
||||||
height:400px;
|
height: 400px;
|
||||||
margin: 3% auto;
|
margin: 3% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*****Appointment Section *****/
|
||||||
|
|
||||||
|
.request-label {
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -245,30 +248,44 @@ p {
|
||||||
background-image: url("images/biking.jpg");
|
background-image: url("images/biking.jpg");
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style inputs with type="text", select elements and textareas */
|
|
||||||
input[type=text], select, textarea {
|
|
||||||
width: 100%; /* Full width */
|
|
||||||
padding: 12px; /* Some padding */
|
|
||||||
border: 1px solid #ccc; /* Gray border */
|
|
||||||
border-radius: 4px; /* Rounded borders */
|
|
||||||
box-sizing: border-box; /* Make sure that padding and width stays in place */
|
|
||||||
margin-top: 6px; /* Add a top margin */
|
|
||||||
margin-bottom: 16px; /* Bottom margin */
|
|
||||||
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style the submit button with a specific background color etc */
|
/* Style inputs with type="text", select elements and textareas */
|
||||||
input[type=submit] {
|
|
||||||
|
input[type=text],
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
/* Full width */
|
||||||
|
padding: 12px;
|
||||||
|
/* Some padding */
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
/* Gray border */
|
||||||
|
border-radius: 4px;
|
||||||
|
/* Rounded borders */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* Make sure that padding and width stays in place */
|
||||||
|
margin-top: 6px;
|
||||||
|
/* Add a top margin */
|
||||||
|
margin-bottom: 16px;
|
||||||
|
/* Bottom margin */
|
||||||
|
resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Style the submit button with a specific background color etc */
|
||||||
|
|
||||||
|
input[type=submit] {
|
||||||
background-color: #d60024;
|
background-color: #d60024;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When moving the mouse over the submit button, add a darker green color */
|
|
||||||
input[type=submit]:hover {
|
/* When moving the mouse over the submit button, add a darker green color */
|
||||||
|
|
||||||
|
input[type=submit]:hover {
|
||||||
background-color: #fa4664;
|
background-color: #fa4664;
|
||||||
}
|
}
|
||||||
|
|
||||||
68
index.html
68
index.html
|
|
@ -106,39 +106,6 @@
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
|
|
||||||
|
|
||||||
<section class="colored-section3" id="features">
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="feature-box col-lg-4">
|
|
||||||
<i class="feature-icon fas fa-check-circle fa-4x"></i>
|
|
||||||
<h3 class="feature-title">Fast and Easy</h3>
|
|
||||||
<p>Just leave it to us, we can fix any problem within 3 days</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-box col-lg-4">
|
|
||||||
<i class="feature-icon fas fa-bullseye fa-4x"></i>
|
|
||||||
<h3 class="feature-title">Precise</h3>
|
|
||||||
<p>We can help you find what bike is right for you</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-box col-lg-4">
|
|
||||||
<i class="feature-icon fas fa-heart fa-4x"></i>
|
|
||||||
<h3 class="feature-title">Guaranteed Satisfaction</h3>
|
|
||||||
<p>All of our customers have loved their bikes. Take it from them.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- Testimonials -->
|
<!-- Testimonials -->
|
||||||
|
|
||||||
|
|
@ -187,18 +154,6 @@
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<!-- 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">
|
|
||||||
<img class="press-img" src="images/bizinsider.png" alt="biz-insider-logo">
|
|
||||||
<img class="press-img" src="images/mashable.png" alt="mashable-logo">
|
|
||||||
|
|
||||||
</section>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- Pricing -->
|
<!-- Pricing -->
|
||||||
|
|
||||||
<section class="white-section" id="pricing">
|
<section class="white-section" id="pricing">
|
||||||
|
|
@ -312,7 +267,20 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<form action="action_page.php">
|
<form action="action_page.php">
|
||||||
|
|
||||||
<h2 class="big-heading">Book an Appointment</h2>
|
<h2 class="big-heading">Book an Appointment</h2>
|
||||||
|
|
||||||
|
<!--- Select Services --->
|
||||||
|
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
|
||||||
|
<option selected>Select Services</option>
|
||||||
|
<option value="1">Brake Repair</option>
|
||||||
|
<option value="2">Fixing Punctures</option>
|
||||||
|
<option value="3">Full Repair/Maintenance</option>
|
||||||
|
</select>
|
||||||
|
<!--- Select Appointment Data --->
|
||||||
|
<div class="request-label">
|
||||||
|
<label for="appTime">Request Appointment for: </label>
|
||||||
|
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6" style="float: right;">
|
<div class="col-6" style="float: right;">
|
||||||
|
|
@ -323,19 +291,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<input type="text" id="subject" name="subject" placeholder="Subject">
|
<input type="text" id="subject" name="subject" placeholder="Subject">
|
||||||
|
|
||||||
<textarea id="message" name="message" placeholder="Your Message" style="height:200px"></textarea>
|
<textarea id="message" name="message" placeholder="Your Message" style="height:200px"></textarea>
|
||||||
|
|
||||||
<label for="appTime">Request Appointment for: </label>
|
|
||||||
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
|
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
<input type="submit" value="Submit">
|
||||||
<input type="submit" value="Submit">
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue