Create a Tyre Fitting Landing Page using HTML, CSS, and JavaScript (Source Code)

Faraz

By Faraz -

Step-by-step guide to building a custom tyre fitting service website with HTML, CSS, and JavaScript. Source code included for easy implementation.

Join us on Telegram
Create a Tyre Fitting Landing Page using HTML, CSS, and JavaScript (Source Code).webp
Read AlsoConvert Form Fill Data into Interactive Badge using HTML, CSS, and JavaScript.jpgConvert Form Fill Data into Interactive Badge using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

Your tyre fitting service landing page serves as the gateway to your business online. It's more than just a digital storefront; it's a reflection of your professionalism, reliability, and commitment to customer satisfaction. In this guide, we'll walk you through the process of creating a compelling landing page using HTML, CSS, and JavaScript. From designing the layout to implementing interactive features and optimizing for user experience, you'll learn how to craft a landing page that not only attracts visitors but also converts them into loyal customers. Whether you're a seasoned web developer or just starting out, this guide will equip you with the knowledge and skills to elevate your tyre fitting service to new heights online. Let's dive in!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our tyre fitting landing page.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down the HTML code step by step:

1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used, which is HTML5 in this case.

2. <html lang="en">: This tag defines the root element of the HTML document and specifies the language of the content, which is English (en).

3. <head>: This section contains meta-information about the document, such as character encoding, viewport settings, title, and links to external resources.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use the latest rendering engine.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for responsive design.
  • <title>: Sets the title of the webpage.
  • <link>: Links to external CSS stylesheets for Font Awesome icons, Google Fonts, and a custom stylesheet (styles.css).

4. <body>: This section contains the visible content of the webpage.

  • <header>: Defines the header section containing a banner with contact information and navigation links.
  • <div id="navbar">: Another navigation bar possibly for mobile devices or a different layout.
  • <div class="container">: Container for the main content sections.
  • <section class="form">: Section containing a form for selecting tyre sizes and providing contact details.
  • <section class="about_us" id="aboutus">: Section providing information about the tyre fitting service.
  • <center>: Deprecated tag used for centering content. Contains a section (<div class='section3 fade' id='section3'>) displaying cards with information about various services.
  • <div id="ourclients">: Section displaying logos of clients.
  • <footer>: Footer section containing columns with company information, links, and accepted payment methods.
  • <div class="sub-footer">: Sub-footer containing copyright information.
  • <a href="#" id="scroll-up" class="animate"><i class="fa fa-angle-up"></i></a>: Back-to-top button.
  • <script>: Links to jQuery, Anime.js, and a custom JavaScript file (script.js), possibly for interactivity and animations.

This is the basic structure of our tyre-fitting landing page using HTML, and now we can move on to styling it using CSS.

Read AlsoCreating a Doctor Appointment Landing Page with HTML and CSS.webpCreating a Doctor Appointment Landing Page with HTML and CSS (Source Code)

Step 2 (CSS Code):

Next, we must style our tyre-fitting landing page by adding our CSS. This will give our landing page an upgraded presentation.

Let's break down the CSS code:

1. Universal Selector and Scroll Behavior:

  • *,html: Applies to all elements and the HTML element itself.
  • scroll-behavior: smooth;: Sets smooth scrolling behavior for all scrollable elements.

2. Box Sizing Reset:

  • *, *:after, *:before: Applies to all elements, including pseudo-elements.
  • -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;: Sets the box-sizing property to border-box, ensuring that padding and border are included in the element's total width and height.

3. Scrollbar Styling:

  • :root: Selects the root element of the document.
  • scrollbar-color: ...: Specifies the color of the scrollbar thumb and track.
  • scrollbar-width: thin;: Sets the width of the scrollbar to thin.

4. Scrollbar Customization for Webkit Browsers:

  • ::-webkit-scrollbar: Targets the default scrollbar in WebKit browsers.
  • ::-webkit-scrollbar-thumb: Specifies the appearance of the scrollbar thumb.
  • ::-webkit-scrollbar-corner: Specifies the appearance of the scrollbar corner.

5. Global Styles:

  • body: Styles applied to the entire body.
  • Resets margin and sets overflow-x to hidden.
  • Sets the font family to 'Archivo' and sans-serif as a fallback.

6. Default Styling for Common Elements:

  • Styling for <a>, <li>, <button>, and <i> elements.
  • Removes default list styling and text decoration for links.
  • Applies transition and removes outline for better UX.
  • Defines color and font size for <em> elements.

7. Styling for Specific Components:

  • .title, .sub-title, .btn1, #scroll-up: Styles specific classes and IDs for titles, buttons, and scroll-up button.

8. Animations:

  • Defines animations using keyframes for smooth transitions.
  • .animate, .animate-bottom, .inline-photo, .inline-photo2, .inline-photo3: Defines animation effects for various elements.

9. Media Queries:

  • Defines responsive styles based on the screen size.
  • Adjustments for smaller screens, such as changing the navigation layout or hiding certain elements.

10. Container Styling:

  • .container: Styling for container elements, such as background images and positioning.

11. Form Styling:

  • .form: Styling for forms, including input fields and layout adjustments for responsiveness.

12. About Us Section:

  • .about_us: Styles for the about us section, including positioning and background color.

13. Cards Styling:

  • .section3, .snip1428: Styles for card-like elements, including layout and hover effects.

14. Client Section Styling:

  • #ourclients: Styles for the client section, including layout and image display.

15. Footer Styling:

  • .footer, .sub-footer: Styles for the footer section, including column layout and color schemes.

16. Credits Styling:

  • .credits: Styles for credits displayed on the page, including background color and positioning.

Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

*,
html {
  scroll-behavior: smooth;
}
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  scrollbar-color: rgb(210, 210, 210) rgb(46, 54, 69) !important;
  scrollbar-width: thin !important;
}
::-webkit-scrollbar {
  height: 12px;
  width: 8px;
  background: #000;
}
::-webkit-scrollbar-thumb {
  background: gray;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
  background: #000;
}
body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'Archivo', sans-serif;
}

/*DEFAULT*/
a {
  text-decoration: none;
}
li {
  list-style: none;
}
a,
li,
button,
i {
  transition: 0.5s;
}
input,
textarea,
select,
button {
  outline: none;
}
em {
  color: #1d76bc;
  font-size: 0.9em;
}
.title {
  font-size: 2em;
  font-family: 'Archivo Black', sans-serif;
}
.sub-title {
  font-size: 1em;
  font-family: 'Archivo Narrow', sans-serif;
}
.btn1 {
  color: #fff;
  background-color: #1d76ba;
  font-weight: 700;
  height: 50px;
  border: none;
  width: 80%;
  display: block;
  border-radius: 3px;
  text-transform: uppercase;
  margin: 4vh 0;
  -webkit-appearance: button;
  cursor: pointer;
}
#scroll-up {
  position: fixed;
  bottom: 2em;
  right: 2em;
  background: #1e1e1e;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
  z-index: 999;
  display: none;
}

/*ANIMATION*/
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.inline-photo {
  opacity: 0;
  transform: translateY(4em) rotateZ(-0deg);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
  will-change: transform, opacity;
}
.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(-0deg);
}
.inline-photo2 {
  opacity: 0;
  transform: translateX(-15em) rotateZ(-0deg);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
  will-change: transform, opacity;
}
.inline-photo2.is-visible2 {
  opacity: 1;
  transform: rotateZ(-0deg);
}
.inline-photo3 {
  opacity: 0;
  transform: translateX(15em) rotateZ(-0deg);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
  will-change: transform, opacity;
}
.inline-photo3.is-visible3 {
  opacity: 1;
  transform: rotateZ(-0deg);
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s;
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -0px;
    opacity: 0;
  }
  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    bottom: -0px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

/*LOADER*/
#myDiv {
  display: none;
}
#loader {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  width: 100%;
  box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
}

.banner {
  padding: 10px;
  background: #1e77bb;
  color: #fff;
  font-size: 1em;
  border-bottom: 1px solid #908f94;
}

.banner span a {
  margin: 0 10px;
  color: #fff;
}

.banner span a:hover {
  color: #1e1e1e;
}

.banner span:nth-child(2) {
  float: right;
}

/*NAVIGATION*/
.topnav {
  overflow: hidden;
  width: 100%;
  background-image: url('https://i.ibb.co/r2Ytm99/banner-bg.png');
  background-size: 100% 100%;
  padding: 15px 0;
  background-repeat: no-repeat;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#logo {
  position: absolute;
  left: 0;
  top: 30px;
}

#logo img {
  height: 60px;
}

.topnav .icon {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  color: #1e1e1e;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: #000;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 1000px) {
  .topnav {
    background-image: none;
    background-color: #0f2354;
  }
  .banner {
    display: none;
  }
  .topnav a {
    float: left;
  }
  .dropdown {
    float: left;
    overflow: hidden;
  }
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
  }
  #logo {
    float: none;
    position: static;
    width: 80%;
    height: 60px;
    margin-bottom: 20px;
  }
  #logo img {
    float: left;
    height: 50px;
    width: 30%;
  }
}

@media screen and (max-width: 1000px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
#navbar {
  background-color: #333;
  position: fixed;
  top: -90px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 999;
  padding: 10px 0;
  box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
}

#navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar #logo {
  position: absolute;
  top: -10px;
}

#navbar .dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

@media (max-width: 1000px) {
  #navbar {
    display: none;
  }
}

/*CONTAINER*/
.container {
  width: 100%;
  height: 90vh;
  background-image: url('https://i.ibb.co/qsHk9L1/slide-1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.container section {
  position: absolute;
  top: 15vh;
  width: 50%;
  left: 3rem;
  color: #fff;
}

.container .title {
  text-transform: uppercase;
  display: block;
}

.container .sub-title {
  display: block;
}

@media (max-width: 1000px) {
  .container {
    width: 100%;
    height: 80vh;
  }
  .container section {
    width: 90%;
    left: 1rem;
  }
}

/*FORM*/
.form {
  width: 90%;
  position: relative;
  top: -40vh;
  margin: auto;
  height: 120vh;
  overflow: hidden;
  transition: 0.5s;
  box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
}

.form .tyre_size {
  background: #fff;
  padding: 20px;
  height: 100vh;
}

.form .tyre {
  width: 20%;
  height: 20vh;
  margin: auto;
}

.form table:nth-child(1) {
  width: 25%;
  margin: 0vh;
  height: 90vh;
  float: left;
  background: #1d76ba;
  position: relative;
  background-image: url('https://i.ibb.co/ggLwwky/tyre2.png');
  background-size: 80% 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.form table .tyre2 {
  width: 80%;
  height: 30%;
  margin: auto;
  float: left;
  position: absolute;
  left: 5px;
  top: 30%;
}

.form table:nth-child(2) {
  width: 70%;
  margin: 3vh;
  float: right;
  height: 90vh;
}

.form table td {
  width: 33%;
  padding: 2vh;
}

.form select {
  width: 90%;
  padding: 10px;
}

.form label {
  color: #323232;
  font-size: 10px;
  font-weight: 400;
  margin-bottom: 5px;
  display: block;
  text-transform: uppercase;
}

.form input,
.form select {
  background-color: #f5f5f5;
  border: none;
  height: 40px;
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 400;
  color: #101113;
  padding: 5px;
  width: 97%;
  outline: none;
}

@media (max-width: 1000px) {
  .form {
    width: 90%;
    position: relative;
    top: -20vh;
    margin: auto;
    height: auto;
  }
  .form .tyre {
    width: 50%;
    height: 20vh;
    margin: auto;
  }
  .form .tyre_size {
    background: #fff;
    padding: 10px;
    height: auto;
  }
  .form table:nth-child(1) {
    display: none;
  }
  .form table:nth-child(2) {
    width: 95%;
  }
  .form table td {
    display: block;
    max-width: 100%;
    width: 100%;
  }
}

/*ABOUT US*/
.about_us {
  width: 100%;
  position: relative;
  top: -20vh;
  background: #f2f2f2;
}

.about_us table {
  width: 100%;
}

.about_us table td {
  width: 50%;
  padding: 30px;
}

.about_us table td:nth-child(1) {
  width: 60%;
}

.about_us table td img {
  width: 90%;
}

.about_us table td p {
  color: rgba(1, 1, 1, 0.9);
  line-height: 1.3rem;
  letter-spacing: 0.03rem;
}

.about_us button {
  width: 150px;
  border-radius: 30px;
}

@media (max-width: 1000px) {
  .about_us {
    position: relative;
    top: -10vh;
  }
  .about_us table td {
    width: 100%;
    display: block;
    padding: 20px;
  }
  .about_us table td:nth-child(1) {
    width: 100%;
  }
}

/*CARDS*/
.section3 {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  transition: 0.5s;
}
.section3 .fa-angle-double-right {
  position: absolute;
  margin-top: 8%;
  right: 30px;
  background: #000;
  padding: 20px;
  border-radius: 50%;
  color: #fff;
  z-index: 111;
}
.section3 .fa-angle-double-left {
  position: absolute;
  margin-top: 8%;
  left: 30px;
  background: #000;
  padding: 20px;
  border-radius: 50%;
  color: #fff;
  z-index: 111;
}
.section3 .angles {
  opacity: 0.7;
  transition: 0.5s;
}
.section3 .angles:hover {
  opacity: 1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
figure.snip1428 {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  height: 220px;
  width: 100%;
  color: #000000;
  text-align: left;
  font-size: 16px;
  background-color: #000000;
  box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
}
figure.snip1428 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1428 img {
  max-width: 100%;
  height: 100%;
  backface-visibility: hidden;
  object-fit: cover;
}
figure.snip1428 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  padding: 30px 10px 30px 0;
  background-color: #ffffff;
  width: 40%;
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}
figure.snip1428 figcaption:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  left: 100%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 160px 120px 160px 160px;
  border-color: transparent transparent transparent #ffffff;
}
figure.snip1428:after {
  position: absolute;
  top: 50%;
  left: 80%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1428 h3,
figure.snip1428 p {
  line-height: 1.5em;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  margin: 0;
}
figure.snip1428 h3 {
  margin: 0 0 5px;
  line-height: 1.1em;
  font-weight: 900;
  font-size: 1.4em;
  opacity: 0.75;
}
figure.snip1428 p {
  font-size: 0.8em;
}
figure.snip1428 i {
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 35px;
  font-size: 44px;
  color: #ffffff;
  opacity: 0;
}
figure.snip1428 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
figure.snip1428:hover img,
figure.snip1428.hover img {
  zoom: 1;
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
figure.snip1428:hover:after,
figure.snip1428.hover:after,
figure.snip1428:hover figcaption,
figure.snip1428.hover figcaption,
figure.snip1428:hover i,
figure.snip1428.hover i {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

@media (max-width: 600px) {
  .section3 .fa-angle-double-right {
    position: absolute;
    margin-top: 20%;
    right: 30px;
    background: #000;
    padding: 20px;
    border-radius: 50%;
    color: #fff;
  }
  .section3 .fa-angle-double-left {
    position: absolute;
    margin-top: 20%;
    left: 30px;
    background: #000;
    padding: 20px;
    border-radius: 50%;
    color: #fff;
  }
}

/*CLIENT SECTION*/
#ourclients {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: #f9f9f9;
  padding-bottom: 30px;
  max-height: 130px;
  overflow-y: hidden;
}
#ourclients .clients-wrap {
  display: block;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}
#ourclients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#ourclients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
#ourclients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  width: 150px;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
}
#ourclients h3 {
  border-bottom: 2px solid #3399ff;
  width: 150px;
  padding: 10px;
}

.footer {
  background: #000;
  padding: 30px 0px;
  font-family: 'Play', sans-serif;
}

.footer .column {
  width: 20%;
  margin: 0% 1%;
  display: inline-block;
}

.footer img {
  width: 50px;
  height: 50px;
}

.footer .column ul {
  width: 100%;
}

.footer .column ul li {
  list-style: none;
  padding: 5px 0px;
  color: gray;
  font-size: 0.9em;
}

.footer .column ul li a {
  text-decoration: none;
  font-size: 0.8em;
  color: gray;
  transition: 0.5s;
}

.footer .column ul li a:hover {
  color: #1b76bc;
}

.footer .column ul .title {
  font-size: 1em;
  color: #fff;
}

.footer .column ul li i {
  font-size: 2em;
  margin: 0px 10px;
}

.sub-footer {
  background: #1e1e1e;
  padding: 5px 0px;
  text-align: center;
  color: gray;
  font-size: 12px;
  font-family: 'Play', sans-serif;
}

@media (max-width: 720px) {
  .footer .column {
    width: 90%;
    display: block;
    margin: 0% 0%;
  }

  .footer .column:nth-child(2),
  .footer .column:nth-child(3) {
    width: 40%;
    display: inline-block;
  }
}

@media (max-width: 1200px) {
  .footer .column ul li input {
    padding: 5px 5px;
    outline: none;
    border: 0;
    width: 70%;
    height: 34px;
    color: #1e1e1e;
  }
  .footer .column ul li .btn1 {
    position: relative;
    top: 2px;
  }
}

@media (max-width: 940px) {
  .footer .column ul li input {
    padding: 5px 5px;
    outline: none;
    border: 0;
    width: 60%;
    height: 34px;
    color: #1e1e1e;
  }
  .footer .column ul li .btn1 {
    position: relative;
    top: 2px;
  }
}

.credits {
  background: #1e1e1e;
  color: gray;
  font-size: 13px;
  padding: 10px;
  position: fixed;
  right: 0;
  bottom: 20px;
  z-index: 9999;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript.

Let's break down the JavaScript code step by step:

1. Document Ready Function: The code begins with $(function() {...}), which is a jQuery shorthand for the document ready function. This ensures that the enclosed code executes when the DOM is fully loaded.

2. Client Logo Slider Initialization:

  • It selects the element with the id clientlogo and stores it in the variable $clientslider.
  • It calculates the number of child elements (<li> elements) within clientlogo and stores it in the variable clients.
  • It calculates the total width required for the slider based on the number of clients and sets it to clientwidth.
  • It sets the width of $clientslider to clientwidth.
  • It initializes variables for slider rotation (rotating), speed (clientspeed), and sets up a timer (seeclients) to call the rotateClients function at intervals determined by clientspeed.

3. Mouse Events Handling: It sets up mouse enter and mouse leave event handlers for the element with the id ourclients. When the mouse enters, rotating is set to false, pausing the slider rotation. When the mouse leaves, rotating is set to true, resuming the rotation.

4. rotateClients Function: This function controls the rotation of the client logos. If rotating is not false, it selects the first child element of #clientlogo, animates it to move left by 220 pixels, removes it from the DOM, resets its margin, and appends it after the last child element of #clientlogo.

5. Scroll Function: This function is triggered on scrolling. It checks the vertical scroll position and adjusts the visibility of the navigation bar (navbar) and a scroll-up button (scroll-up) accordingly.

6. Navigation Function: This function toggles a responsive class on an element with the id myTopnav, essentially toggling the visibility of a navigation menu, for smaller screens.

7. Hover Event Handling: It ensures that any element with the class hover removes the hover class when the mouse leaves, presumably for some hover effect.

8. Card Scroller Functions: These functions handle scrolling left and right within a section with the id section3, presumably for navigating through cards or content horizontally.

9. Loader Functions: These functions manage a loader animation. myLoader sets a timeout to show the main content after 3 seconds.

10. Scroll Animation Functions: These functions handle the animation of elements on scroll. They check if elements with specific classes (show-on-scroll, show-on-scroll2, show-on-scroll3) are within the viewport and toggle visibility accordingly.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

$(function() {
  var $clientslider = $('#clientlogo');
  var clients = $clientslider.children().length;
  var clientwidth = (clients * 220); 
  $clientslider.css('width', clientwidth);
  var rotating = true;
  var clientspeed = 1800;
  var seeclients = setInterval(rotateClients, clientspeed);
  $(document).on({
  mouseenter: function() {
  rotating = false;
  },
  mouseleave: function() {
  rotating = true;
  }
  }, '#ourclients');
  function rotateClients() {
  if (rotating != false) {
  var $first = $('#clientlogo li:first');
  $first.animate({
  'margin-left': '-220px'
  }, 2000, function() {
  $first.remove().css({
  'margin-left': '0px'
  });
  $('#clientlogo li:last').after($first);
  });
  }
  }
  });
  
  
  //SCROLL MENU
  window.onscroll = function() {scrollFunction()};
  
  function scrollFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
      document.getElementById("navbar").style.top = "0";
      document.getElementById("scroll-up").style.display = "block";
    } else {
      document.getElementById("navbar").style.top = "-90px";
      document.getElementById("scroll-up").style.display = "none";
    }
  }

  //NAVIGATION
  function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
  x.className += " responsive";
  } else {
  x.className = "topnav";
  }
  }
  
  /* Demo purposes only */
  $(".hover").mouseleave(
  function () {
  $(this).removeClass("hover");
  }
  );
  
  /*CARD_SCROLLER*/
  function scrollright(){
  document.getElementById("section3").scrollLeft += 400;
  }
  function scrollleft(){
  document.getElementById("section3").scrollLeft -= 400;
  }
  /*CARD_SCROLLERENDS*/
  
  //LOADER
  var myVar;
  function myLoader() {
    myVar = setTimeout(showPage, 3000);
  }
  function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("myDiv").style.display = "block";
  }
  
  //SCROLL ANIMATE
  var scroll = window.requestAnimationFrame ||
               function(callback){ window.setTimeout(callback, 1000/60)};
  var elementsToShow = document.querySelectorAll('.show-on-scroll'); 
  function loop() {
  
      Array.prototype.forEach.call(elementsToShow, function(element){
        if (isElementInViewport(element)) {
          element.classList.add('is-visible');
        } else {
          element.classList.remove('is-visible');
        }
      });
  
      scroll(loop);
  }
  loop();
  
  function isElementInViewport(el) {
    // special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
      el = el[0];
    }
    var rect = el.getBoundingClientRect();
    return (
      (rect.top <= 0
        && rect.bottom >= 0)
      ||
      (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight))
      ||
      (rect.top >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
    );
  }
  
  
  //SCROLL ANIMATE
  var scroll2 = window.requestAnimationFrame ||
               function(callback2){ window.setTimeout(callback2, 1000/60)};
  var elementsToShow2 = document.querySelectorAll('.show-on-scroll2'); 
  function loop2() {
  
      Array.prototype.forEach.call(elementsToShow2, function(element){
        if (isElementInViewport(element)) {
          element.classList.add('is-visible2');
        } else {
          element.classList.remove('is-visible2');
        }
      });
  
      scroll2(loop2);
  }
  loop2();
  
  function isElementInViewport(el) {
    // special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
      el = el[0];
    }
    var rect2 = el.getBoundingClientRect();
    return (
      (rect2.top <= 0
        && rect2.bottom >= 0)
      ||
      (rect2.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
        rect2.top <= (window.innerHeight || document.documentElement.clientHeight))
      ||
      (rect2.top >= 0 &&
        rect2.bottom <= (window.innerHeight || document.documentElement.clientHeight))
    );
  }

  //SCROLL ANIMATE
  var scroll3 = window.requestAnimationFrame ||
               function(callback3){ window.setTimeout(callback3, 1000/60)};
  var elementsToShow3 = document.querySelectorAll('.show-on-scroll3'); 
  function loop3() {
  
      Array.prototype.forEach.call(elementsToShow3, function(element){
        if (isElementInViewport(element)) {
          element.classList.add('is-visible3');
        } else {
          element.classList.remove('is-visible3');
        }
      });
  
      scroll3(loop3);
  }
  loop3();
  
  function isElementInViewport(el) {
    // special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
      el = el[0];
    }
    var rect3 = el.getBoundingClientRect();
    return (
      (rect3.top <= 0
        && rect3.bottom >= 0)
      ||
      (rect3.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
        rect3.top <= (window.innerHeight || document.documentElement.clientHeight))
      ||
      (rect3.top >= 0 &&
        rect3.bottom <= (window.innerHeight || document.documentElement.clientHeight))
    );
  }

Final Output:

Create a Tyre Fitting Landing Page using HTML, CSS, and JavaScript (Source Code).gif
Read AlsoCreate Animated Button with Hover Effect HTML & CSS Tutorial.jpgCreate Animated Button with Hover Effect | HTML & CSS Tutorial

Conclusion:

Creating a tyre fitting service landing page with HTML, CSS, and JavaScript is an essential step towards establishing a strong online presence for your business. By following the steps outlined in this guide, you can design a visually appealing and user-friendly page that effectively showcases your services and encourages visitors to take action. Remember to continuously monitor and optimize your landing page based on user feedback and analytics data to ensure it remains relevant and impactful. With dedication and attention to detail, your tyre fitting service landing page can become a powerful tool for driving traffic, generating leads, and ultimately, growing your business. Start implementing these strategies today and watch your online presence soar!

Design by: Mahesh

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: tyre fitting service, landing page design, html, css, javascript, user experience, online booking, automotive services, source code, how to design a tyre fitting landing page, html and css for tyre service website, implementing javascript for booking forms, user-friendly tyre service website design, customizing landing pages for automotive businesses
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post