Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
Car Glass Repairing Website Template in HTML, CSS, Javascript
For full source code visit : https://freecodez.com/post/qmebwrk
<!-- https://freecodez.com -->
<div class="main-container">
<nav class="navbar navbar-expand-custom navbar-mainbg sticky-top">
<a class="navbar-brand navbar-logo" href="#">AutoGlass Repair</a>
<button
class="navbar-toggler"
type="button"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars text-white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<div class="hori-selector">
<div class="left"></div>
<div class="right"></div>
</div>
<li class="nav-item active">
<a class="nav-link" href="#home"><i class="fas fa-home"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:+123456789"><i class="fas fa-phone"></i>Call US</a>
</li>
</ul>
</div>
</nav>
<div class="main" id="home">
<div class="row">
<div class="col-md">
<div class="c1">
<div class="main-content">
<h1>AutoGlass<br />Repairing With <br />Our Top Experts</h1>
<p>
We provide faster, better and safer services. We provide
doorstep services.
</p>
<div>
<a href="#contact" class="main-btn">Contact</a>
<a href="#about" class="secondary-btn">About</a>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="c2">
<div class="img">
<img src="https://raw.githubusercontent.com/vikas7754/car-repairing-website-template/master/images/carg.gif" />
</div>
</div>
</div>
</div>
</div>
<div class="social" id="services">
<div class="social-container">
<a href=""><i class="fab fa-instagram"></i> Instagram</a>
<a href=""><i class="fab fa-facebook"></i> Facebook</a>
<a href="">Linked<i class="fab fa-linkedin"></i></a>
<a href=""><i class="fab fa-twitter"></i> Twitter</a>
</div>
</div>
<div class="services">
<div class="row">
<div class="col-lg">
<div class="row">
<div class="col-sm">
<div class="f1">
<h3>Our Services</h3>
<p>
We provide better, safer and faster services. Windshield
replacement in under 2 hours. Doorstep service, Conveniently
located service centres Genuine products used. One-year
warranty on workmanship and material
</p>
</div>
</div>
<div class="col-sm">
<div class="f2">
<svg xmlns="http://www.w3.org/2000/svg" width="108.166" height="39.418"
viewBox="0 0 108.166 39.418">
<g id="Group_1094" data-name="Group 1094" transform="translate(1.015 1.209)">
<path id="Path_757" data-name="Path 757"
d="M-504.8,85.124a4.509,4.509,0,0,1,.721-1.679,5.443,5.443,0,0,0-1.681-5.638c-2.758-2.279-10.916-3.837-14.032-4.438s-10.075-1.2-10.075-1.2-8.281-6.48-14.635-7.558c-8.951-1.517-21.834-.72-26.992.72s-11.872,5.4-11.872,5.4l-7.078.6-.479.841.479,1.8.48.718-.6,3.961-1.771,1.439.213,3.118s-.48,1.56,0,1.919a15.625,15.625,0,0,1,1.558,1.679l3.961.24,2.638.359h5.2a5.829,5.829,0,0,1-.2-1.5,5.819,5.819,0,0,1,5.819-5.816,5.817,5.817,0,0,1,5.818,5.816,5.827,5.827,0,0,1-.2,1.5h43.049a5.792,5.792,0,0,1-.2-1.5,5.816,5.816,0,0,1,5.816-5.816,5.816,5.816,0,0,1,5.818,5.816,5.827,5.827,0,0,1-.2,1.5h.425l1.8.6h3.722l3.444-1.44S-504.8,85.726-504.8,85.124Z"
transform="translate(592.334 -54.513)" fill="#ffde00" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<g id="Group_1094-2" data-name="Group 1094" transform="translate(40.171)">
<path id="Path_758" data-name="Path 758"
d="M-544.054,53.9a74.471,74.471,0,0,1,25.243-.349c6.358,1.2,14.636,8.442,14.636,8.442s6.959.669,10.076,1.34,11.274,2.412,14.032,4.959,1.682,6.3,1.682,6.3a5.335,5.335,0,0,0-.721,1.875c0,.671.927,1.607.927,1.607l-3.442,1.609h-3.722l-1.8-.671"
transform="translate(544.054 -52.64)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<line id="Line_82" data-name="Line 82" x1="18.208" y1="0.582"
transform="translate(19.798 9.142)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_759" data-name="Path 759"
d="M-481.006,86.946a5.821,5.821,0,0,0,3.906-5.5,5.817,5.817,0,0,0-5.818-5.818"
transform="translate(533.786 -56.501)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</g>
<line id="Line_83" data-name="Line 83" x1="39.103" y1="1.798"
transform="translate(17.848 18.017)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<line id="Line_84" data-name="Line 84" x2="1.203" y2="3.23"
transform="translate(39.919 15.857)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_760" data-name="Path 760"
d="M-576.273,89.193a5.82,5.82,0,0,0,5.819,5.818,5.818,5.818,0,0,0,5.818-5.818,5.817,5.817,0,0,0-5.818-5.817A5.819,5.819,0,0,0-576.273,89.193Z"
transform="translate(589.637 -57.802)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_761" data-name="Path 761"
d="M-511.034,89.193a5.818,5.818,0,0,0,5.816,5.818,5.817,5.817,0,0,0,5.818-5.818,5.816,5.816,0,0,0-5.818-5.817A5.817,5.817,0,0,0-511.034,89.193Z"
transform="translate(578.68 -57.802)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</g>
</svg>
<h4>Any Vehicle, Any Glass</h4>
<p>
We provide all types of glasses like windshield, back
window, front driver etc.
</p>
</div>
</div>
</div>
</div>
<div class="col-lg">
<div class="row">
<div class="col-sm">
<div class="f3">
<svg xmlns="http://www.w3.org/2000/svg" width="62.524" height="60.929"
viewBox="0 0 62.524 60.929">
<g id="Group_1098" data-name="Group 1098" transform="translate(1.24 1)">
<path id="Path_769" data-name="Path 769"
d="M73.7,32.134V65.945c.981.137,1.883.28,2.622.422,4.2.807,15.172,2.906,18.884,5.973a7.325,7.325,0,0,1,2.259,7.586,6.073,6.073,0,0,0-.968,2.259c0,.807,1.248,1.937,1.248,1.937l-4.638,1.937h-5l-2.42-.808h-.57A7.824,7.824,0,0,1,83.5,88.315h21.238V32.134Z"
transform="translate(-44.451 -32.134)" fill="#ffde00" />
<path id="Path_770" data-name="Path 770"
d="M73.7,57.972V32.134h31.034V88.646h-4.443"
transform="translate(-44.451 -32.134)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_771" data-name="Path 771"
d="M110.216,71.89a2.181,2.181,0,1,1-2.181-2.182A2.181,2.181,0,0,1,110.216,71.89Z"
transform="translate(-54.503 -43.881)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<line id="Line_87" data-name="Line 87" x1="10.084" y1="0.464"
transform="translate(0.804 35.061)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_772" data-name="Path 772"
d="M67.923,102.916a7.829,7.829,0,1,0,7.829-7.828A7.83,7.83,0,0,0,67.923,102.916Z"
transform="translate(-42.645 -51.816)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_773" data-name="Path 773"
d="M71.813,95.712h.57l2.42.808h5l4.638-1.937S83.2,93.453,83.2,92.646a6.074,6.074,0,0,1,.968-2.259A7.325,7.325,0,0,0,81.9,82.8c-3.712-3.066-14.689-5.166-18.884-5.973s-13.559-1.613-13.559-1.613-10.2-7.237-18.312-9.621"
transform="translate(-31.149 -42.595)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_774" data-name="Path 774" d="M31.15,109.41H56.7"
transform="translate(-31.149 -56.293)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</g>
</svg>
<h4>Doorstep Service</h4>
<p>
We provide doorstep service, just fill the contact form and
give your address and details.
</p>
</div>
</div>
<div class="col-sm">
<div class="f4">
<svg xmlns="http://www.w3.org/2000/svg" width="46.366" height="66.464"
viewBox="0 0 46.366 66.464">
<g id="Group_1097" data-name="Group 1097" transform="translate(1.138 1.131)">
<path id="Path_764" data-name="Path 764"
d="M70.814,73.589a3.419,3.419,0,0,0,2.943-1.974,6.213,6.213,0,0,1,5.564-3.193c2.215-.042,3.38-1.14,3.424-3.33A6.4,6.4,0,0,1,86.131,59.3a3.021,3.021,0,0,0,1.2-4.446,6.367,6.367,0,0,1,0-6.769,3,3,0,0,0-1.127-4.4,6.525,6.525,0,0,1-3.466-5.995,2.974,2.974,0,0,0-3.169-3.169,6.473,6.473,0,0,1-5.986-3.466,2.957,2.957,0,0,0-4.261-1.173,6.557,6.557,0,0,1-6.993.024,2.966,2.966,0,0,0-4.317,1.185,6.437,6.437,0,0,1-5.927,3.427,2.984,2.984,0,0,0-3.211,3.209,6.559,6.559,0,0,1-3.5,5.982,2.957,2.957,0,0,0-1.152,4.265,6.528,6.528,0,0,1,0,6.992,2.966,2.966,0,0,0,1.149,4.268,6.559,6.559,0,0,1,3.5,6.059,2.974,2.974,0,0,0,3.205,3.119,6.4,6.4,0,0,1,5.881,3.369,3.05,3.05,0,0,0,4.511,1.185,6.331,6.331,0,0,1,6.7.015A10.179,10.179,0,0,0,70.814,73.589Z"
transform="translate(-43.739 -29.409)" fill="#ffde00" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_765" data-name="Path 765"
d="M51.8,86.125l-4.109,9.226-3.152,7.072c-.459,1.027.167,1.865,1.395,1.872l7.41.041,4.985,5.481c.83.911,1.868.813,2.326-.213l3.152-7.073,2.1-4.717,2.1,4.717,3.15,7.073c.459,1.027,1.5,1.124,2.326.213l4.987-5.481,7.407-.041c1.228-.007,1.854-.846,1.4-1.872l-3.149-7.072L80.16,86.44"
transform="translate(-43.931 -46.111)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_766" data-name="Path 766"
d="M75.694,64.932V51.42c.006-.851-.727-1.488-1.425-.274l-.96,1.551"
transform="translate(-52.447 -35.611)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<g id="Group_1096" data-name="Group 1096" transform="translate(7.883 9.967)">
<path id="Path_767" data-name="Path 767"
d="M55.415,55.419A14.176,14.176,0,0,0,63.05,72"
transform="translate(-54.913 -47.035)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Path_768" data-name="Path 768"
d="M91.747,59.4a14.179,14.179,0,0,0-6.3-15.865"
transform="translate(-63.903 -43.536)" fill="none" stroke="#000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
</svg>
<h4>1 - Year Warranty</h4>
<p>We provide best quality product with 1 - year warranty.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contact" id="contact">
<h3 class="text-center">Contact US</h3>
<div class="row">
<div class="col-md">
<div class="imgx p-5">
<img src="https://raw.githubusercontent.com/vikas7754/car-repairing-website-template/master/images/car.png" />
</div>
</div>
<div class="col-md">
<div class="contact-form">
<div class="form-container">
<form action="" method="post" id="msform">
<ul id="progressbar">
<li class="activex">Car Details</li>
<li>Personal Details</li>
<li>Preference</li>
</ul>
<fieldset>
<div class="circle-x"></div>
<h3>Car Details</h3>
<div class="form-group">
<select
class="form-control"
id="glass"
name="glass"
required
>
<option value="">Which glass is broken</option>
<option value="Windshield">Windshield</option>
<option value="Back Window">Back Window</option>
<option value="Front Driver">Front Driver</option>
<option value="Front Passenger">Front Passenger</option>
<option value="Rear Driver">Rear Driver</option>
<option value="Rear Passenger">Rear Passenger</option>
<option value="Right Quarter">Right Quarter</option>
<option value="Left Quarter">Left Quarter</option>
</select>
</div>
<div class="form-group">
<select name="year" id="year" class="form-control">
<option value="">Select year</option>
</select>
</div>
<div class="form-group mt-4">
<select name="make" id="make" class="form-control">
<option value="">Select make</option>
</select>
</div>
<div class="form-group mt-4">
<select name="model" id="model" class="form-control">
<option value="">Select model</option>
</select>
</div>
<div class="form-group mt-4">
<select name="style" id="style" class="form-control">
<option value="">Select style</option>
</select>
</div>
<input
type="button"
name="next"
class="next action-button"
value="Next"
/>
</fieldset>
<fieldset>
<h3>Personal Details</h3>
<div class="form-group">
<input
type="text"
name="name"
id="name"
class="form-control"
placeholder="Your full name"
/>
</div>
<div class="form-group">
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Your email address"
/>
</div>
<div class="form-group">
<input
type="tel"
name="mobno"
id="mobno"
class="form-control"
placeholder="Your mobile no."
/>
</div>
<div class="form-group">
<textarea
name="msg"
id="msg"
rows="4"
class="form-control"
placeholder="Enter your message"
></textarea>
</div>
<input
type="button"
name="previous"
class="previous action-button"
value="Previous"
/>
<input
type="button"
name="next"
class="next action-button"
value="Next"
/>
</fieldset>
<fieldset>
<div class="form-group" id="radio-btn">
<label class="radio" style="margin-right: 15px"
><input
type="radio"
name="at"
id="at-shop"
checked=""
/>
repair at shop</label>
<label class="radio"
><input type="radio" name="at" id="at-home" /> Repair at
home</label>
</div>
<div class="form-group">
<div id="repair-address" style="display: none" class="text-left">
<label for="repairAddress">Your Address :</label>
<input
type="text"
class="form-control"
id="raddr"
placeholder="Enter your address"
name="repairAddress"
/>
</div>
<div id="repair-date" style="display: block" class="mt-2 text-left">
<label for="repairDate">Date and Time :</label>
<input
type="datetime-local"
class="form-control"
name="repairDate"
id="date"
/>
</div>
</div>
<input
type="button"
name="previous"
class="previous action-button"
value="Previous"
/>
<input
type="submit"
name="contact"
class="action-button"
value="Submit"
/>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="subscribe" id="about">
<div class="subscribe-container">
<h2>SUBSCRIBE FOR DAILY UPDATES</h2>
<h5>Please Enter Your Email Address To Never Miss An Update.</h5>
<form action="" method="post">
<input
type="email"
name="email"
class="si"
placeholder="Enter your email"
/>
<input
type="submit"
name="subscribe"
class="btn-x"
value="Subscribe"
/>
</form>
</div>
</div>
<div class="about">
<h3 class="about-heading">About us</h3>
<div class="row">
<div class="col-md">
<div class="imgx p-3">
<img src="https://raw.githubusercontent.com/vikas7754/car-repairing-website-template/master/images/car.png" alt="" />
</div>
</div>
<div class="col-md">
<div class="about-content p-5">
<h3>Faster, Better, Safer</h3>
<ul>
<li>Windshield replacement in under 2 hours</li>
<li>Doorstep facility</li>
<li>Conveniently located service centres</li>
<li>Genuine products used</li>
<li>
Quality workmanship delivered through trained technicians
</li>
<li>One-year warranty on workmanship and material</li>
<li>Transparent pricing</li>
<li>Best CSI (Customer Satisfaction Index): 95% current</li>
<li>Conveniently located centres</li>
<li>
Widest range of products - for all cars, both Indian and
imported
</li>
<li>Specialised repair technology for chips on windshields</li>
</ul>
</div>
</div>
</div>
</div>
<div class="reviews-container" id="reviews">
<h3>Customers Reviews</h3>
<div class="reviews">
<div class="review">
<i class="fas fa-quote-right"></i>
<img src="https://raw.githubusercontent.com/vikas7754/car-repairing-website-template/master/images/img1663068540.png" alt="" />
<h5>John Doe</h5>
<p class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</p>
<p>
They replaced my cracked windshield. They came to my house and
replaced the windshield with OEM glass which was paid for by my
car insurance
</p>
</div>
<div class="review">
<i class="fas fa-quote-right"></i>
<img src="https://raw.githubusercontent.com/vikas7754/car-repairing-website-template/master/images/img1663068540.png" alt="" />
<h5>Angelina</h5>
<p class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</p>
<p>
I had a huge crack in my windshield and they replaced it. They
came to my house and got it replaced in a short period of time. It
didn't interrupt my day at all.
</p>
</div>
<div class="review">
<i class="fas fa-quote-right"></i>
<img src="https://raw.githubusercontent.com/vikas7754/car-repairing-website-template/master/images/img1663068540.png" alt="" />
<h5>Angela</h5>
<p class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</p>
<p>
I had a huge crack in my windshield and they replaced it. They
came to my house and got it replaced in a short period of time. It
didn't interrupt my day at all.
</p>
</div>
</div>
</div>
<footer class="footer-section">
<div class="container">
<div class="footer-cta pt-5 pb-5">
<div class="row">
<div class="col-xl-4 col-md-4 mb-30">
<div class="single-cta">
<i class="fas fa-map-marker-alt"></i>
<div class="cta-text">
<h4>Find us</h4>
<span>New York</span>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 mb-30">
<div class="single-cta">
<i class="fas fa-phone"></i>
<div class="cta-text">
<h4><a href="tel:+123456789">Call us</a></h4>
<span>+123456789</span>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 mb-30">
<div class="single-cta">
<i class="far fa-envelope-open"></i>
<div class="cta-text">
<h4>Mail us</h4>
<span>mail@info.com</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer-content pt-5 pb-5">
<div class="row">
<div class="col-xl-4 col-lg-4 mb-50">
<div class="footer-widget">
<div class="footer-logo">
<a href="#home">
<h2 class="text-warning">AutoGlass</h2>
</a>
</div>
<div class="footer-text">
<p>
Lorem ipsum dolor sit amet, consec tetur adipisicing elit,
sed do eiusmod tempor incididuntut consec tetur
adipisicing elit,Lorem ipsum dolor sit amet.
</p>
</div>
<div class="footer-social-icon">
<span>Follow us</span>
<a href="#"><i class="fab fa-facebook-f facebook-bg"></i></a>
<a href="#"><i class="fab fa-twitter twitter-bg"></i></a>
<a href="#"><i class="fab fa-linkedin facebook-bg"></i></a>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 mb-30">
<div class="footer-widget">
<div class="footer-widget-heading">
<h3>Useful Links</h3>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 mb-50">
<div class="footer-widget">
<div class="footer-widget-heading">
<h3>Subscribe</h3>
</div>
<div class="footer-text mb-25">
<p>
Don't miss to subscribe to our new feeds, kindly fill the
form below.
</p>
</div>
<div class="subscribe-form">
<form action="" method="post">
<input
type="email"
name="email"
placeholder="Email Address"
/>
<button type="submit" name="subscribe">
<i class="fab fa-telegram-plane"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-area">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 text-center text-lg-left">
<div class="copyright-text">
<p>
Copyright © 2022, All Right Reserved
<a href="#">Car Repair</a>
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 d-none d-lg-block text-right">
<div class="footer-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Policy</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
Source Code : https://freecodez.com/post/qmebwrk
For more such articles visit : https://freecodez.com
Top comments (0)