Skip to content

Instantly share code, notes, and snippets.

@skolo-online

skolo-online/landing-page-website.html

Created September 17, 2022 15:33
Show Gist options
  • Save skolo-online/80515ff5e0cb5e887bc0bae7c6bcc3e2 to your computer and use it in GitHub Desktop.
Save skolo-online/80515ff5e0cb5e887bc0bae7c6bcc3e2 to your computer and use it in GitHub Desktop.
Download ZIP
Landing Page Website HTML
Raw
landing-page-website.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{businessName}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta content="Themesbrand" name="author" />
<!-- favicon -->
<link rel="shortcut icon" href="#">
<!--Material Icon -->
<link rel="stylesheet" type="text/css" href="#" />
<!-- Pixeden Icon -->
<link rel="stylesheet" type="text/css" href="#" />
<!-- tinyslider -->
<link rel="stylesheet" href="#">
<!-- css -->
<link href="#" rel="stylesheet" type="text/css" />
<link href="#" rel="stylesheet" type="text/css" />
<link href="#" rel="stylesheet" type="text/css" />
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="70">
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom navbar-light sticky sticky-dark" id="navbar">
<div class="container">
<!-- LOGO -->
<a class="navbar-brand logo" href="index-2.html">
<img src="images/zooki.png" alt="" height="20">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="mdi mdi-menu"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto navbar-center" id="navbar-navlist">
<li class="nav-item">
<a data-scroll href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a data-scroll href="#services" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a data-scroll href="#features" class="nav-link">Features</a>
</li>
<li class="nav-item">
<a data-scroll href="#contact" class="nav-link">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- HOME START -->
<section class="section home-2-bg" id="home">
<div class="home-center">
<div class="home-desc-center">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="mt-40 home-2-content">
<h1 class="text-white fw-normal home-2-title display-4 mb-0">
{{section1Title}}
</h1>
<p class="text-white-70 mt-4 f-15 mb-0">
{{section1Description}}
</p>
<div class="mt-5">
<a href="#" class="btn btn-custom me-4">Learn More</a>
</div>
</div>
</div>
<!-- col end -->
<div class="col-lg-7">
<div class="mt-40 home-2-content position-relative">
<img src="#" alt=""
class="img-fluid mx-auto d-block home-2-img mover-img">
<div class="home-2-bottom-img">
<img src="#" alt="" class="img-fluid d-block mx-auto">
</div>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</div>
</div>
</section>
<!-- HOME END -->
<!-- SERVICE START -->
<section class="section" id="services">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="title-heading mb-5">
<h3 class="text-dark mb-1 fw-light text-uppercase">Our Services</h3>
<div class="title-border-simple position-relative"></div>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="service-box rounded mt-4 p-4">
<div class="service-icon mb-3">
<i class="mdi mdi-database"></i>
</div>
<div class="services-desc">
<div class="service-title mb-2 position-relative">
<h5 class="fw-normal mb-3"><a href="#" class="text-dark">{{service1Title}}</a></h5>
</div>
<p class="text-muted mb-3 f-14">
{{service1Description}}
</p>
<p class="mb-0 text-uppercase f-13"><a href="#" class="text-primary">learn more<i
class="mdi mdi-arrow-right ms-2"></i></a></p>
</div>
</div>
</div>
<!-- col end -->
<div class="col-lg-4 col-md-6">
<div class="service-box rounded mt-4 p-4">
<div class="service-icon mb-3">
<i class="mdi mdi-palette"></i>
</div>
<div class="services-desc">
<div class="service-title mb-2 position-relative">
<h5 class="fw-normal mb-3"><a href="#" class="text-dark">{{service2Title}}</a></h5>
</div>
<p class="text-muted mb-3 f-14">{{service2Description}}</p>
<p class="mb-0 text-uppercase f-13"><a href="#" class="text-primary">learn more<i
class="mdi mdi-arrow-right ms-2"></i></a></p>
</div>
</div>
</div>
<!-- col end -->
<div class="col-lg-4 col-md-6">
<div class="service-box rounded mt-4 p-4">
<div class="service-icon mb-3">
<i class="mdi mdi-finance"></i>
</div>
<div class="services-desc">
<div class="service-title mb-2 position-relative">
<h5 class="fw-normal mb-3"><a href="#" class="text-dark">{{service3Title}}</a></h5>
</div>
<p class="text-muted mb-3 f-14">{{service3Description}}</p>
<p class="mb-0 text-uppercase f-13"><a href="#" class="text-primary">learn more<i
class="mdi mdi-arrow-right ms-2"></i></a></p>
</div>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- SERVICE END -->
<!-- ABOUT START -->
<section class="section bg-about bg-light-about bg-light" id="about">
<div class="container">
<div class="row align-items-center mt-5">
<div class="col-md-6">
<div class="about-desc">
<h3 class="text-dark mb-3 fw-light">{{section3Title}}</h3>
<p class="text-muted f-15">{{section3Description}}</p>
<div class="about-by">
<p class="fw-light mb-0"><a href="#" class="text-dark"><i
class="mdi mdi-circle-medium text-custom me-2"></i>
Learn More <span class="text-custom"> About Us</span></a></p>
</div>
</div>
</div>
<!-- col end -->
<div class="col-md-6">
<div class="about-img light-img position-relative p-4">
<img src="#" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- ABOUT END -->
<!-- FEATURES START -->
<section class="section bg-features bg-light" id="features">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="title-heading mb-5">
<h3 class="text-dark mb-1 fw-light text-uppercase">Our Features</h3>
<div class="title-border-simple position-relative"></div>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
<div class="row align-items-center">
<div class="col-lg-6">
<div class="features-content">
<div class="features-icon">
<i class="pe-7s-science text-primary"></i>
</div>
<h4 class="fw-normal text-dark mb-3 mt-4">{{features1Title}}</h4>
<p class="text-muted f-14">{{features1Description}}</p>
<p class="mb-0 text-uppercase f-13"><a href="#" class="text-primary">learn more <span
class="right-arrow ms-1">&#x21FE;</span></a></p>
</div>
</div>
<!-- col end -->
<div class="col-lg-6">
<div class="features-img mt-32">
<img src="#" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- FEARURES 1 END -->
<section class="section bg-features">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="features-img">
<img src="#" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
<!-- col end -->
<div class="col-lg-6">
<div class="features-content mt-32">
<div class="features-icon">
<i class="pe-7s-shuffle text-primary"></i>
</div>
<h4 class="fw-normal text-dark mb-3 mt-4">{{features2Title}}</h4>
<p class="text-muted f-14">{{features2Description}}</p>
<p class="mb-0 text-uppercase f-13"><a href="#" class="text-primary">learn more <span
class="right-arrow ms-1">&#x21FE;</span></a></p>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- FEARURES 2 END -->
<section class="section bg-features bg-light">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="features-content">
<div class="features-icon">
<i class="pe-7s-display1 text-primary"></i>
</div>
<h4 class="fw-normal text-dark mb-3 mt-4">{{features3Title}}</h4>
<p class="text-muted f-14">{{features3Description}}</p>
<p class="mb-0 text-uppercase f-13"><a href="#" class="text-primary">learn more <span
class="right-arrow ms-1">&#x21FE;</span></a></p>
</div>
</div>
<!-- col end -->
<div class="col-lg-6">
<div class="features-img mt-40">
<img src="#" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- FEATURES 3 END -->
<!-- CONTACT US START -->
<section class="section bg-light" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="title-heading mb-5">
<h3 class="text-dark mb-1 fw-light text-uppercase">Get in touch</h3>
<div class="title-border-simple position-relative"></div>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
<div class="row">
<div class="col-lg-12">
<div class="contact-box p-5">
<div class="row">
<div class="col-lg-8 col-md-6">
<div class="custom-form p-3">
<form method="post" name="myForm" onsubmit="return validateForm()">
<p id="error-msg"></p>
<div id="simple-msg"></div>
<div class="row">
<div class="col-lg-6">
<div class="mb-3 app-label">
<input name="name" id="name" type="text" class="form-control"
placeholder="Name">
</div>
</div>
<!-- col end -->
<div class="col-lg-6">
<div class="mb-3 app-label">
<input name="email" id="email" type="email" class="form-control"
placeholder="Email">
</div>
</div>
<!-- col end -->
<div class="col-lg-12">
<div class="mb-3 app-label">
<input type="text" class="form-control" id="subject"
placeholder="Subject" />
</div>
</div>
<!-- col end -->
<div class="col-lg-12">
<div class="mb-3 app-label">
<textarea name="comments" id="comments" rows="5"
class="form-control" placeholder="Message"></textarea>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
<div class="row">
<div class="col-sm-12">
<input type="submit" id="submit" name="send"
class="submitBnt btn btn-custom" value="Send Message">
</div>
<!-- col end -->
</div>
<!-- row end -->
</form>
</div>
</div>
<!-- col end -->
<div class="col-lg-4 col-md-6">
<div class="contact-cantent p-3">
<div class="contact-details">
<div class="float-start contact-icon me-3 mt-2">
<i class="mdi mdi-headphones text-muted h5"></i>
</div>
<div class="app-contact-desc text-muted pt-1">
<p class="mb-0 info-title f-13">Call :</p>
<p class="mb-0 f-13">012-345-6789</p>
</div>
</div>
<div class="contact-details mt-2">
<div class="float-start contact-icon me-3 mt-2">
<i class="mdi mdi-email-outline text-muted h5"></i>
</div>
<div class="app-contact-desc text-muted pt-1">
<p class="mb-0 info-title f-13">Email :</p>
<p class="mb-0 f-13"><a href="" class="text-muted">youremailid@gmail.com</a>
</p>
</div>
</div>
<div class="contact-details mt-2">
<div class="float-start contact-icon me-3 mt-2">
<i class="mdi mdi-map-marker text-muted h5"></i>
</div>
<div class="app-contact-desc text-muted pt-1">
<p class="mb-0 info-title f-13">Location :</p>
<p class="mb-0 f-13"><a href="" class="text-muted">3179 Raccoon Run Seattle,
WA 98109</a></p>
</div>
</div>
<div class="follow mt-4">
<h4 class="text-dark mb-3">Follow</h4>
<ul class="follow-icon list-inline mt-32 mb-0">
<li class="list-inline-item f-15"><a href="#"
class="social-icon text-muted"><i class="mdi mdi-facebook"></i></a>
</li>
<li class="list-inline-item f-15"><a href="#"
class="social-icon text-muted"><i class="mdi mdi-twitter"></i></a>
</li>
<li class="list-inline-item f-15"><a href="#"
class="social-icon text-muted"><i
class="mdi mdi-google-plus"></i></a></li>
<li class="list-inline-item f-15"><a href="#"
class="social-icon text-muted"><i class="mdi mdi-linkedin"></i></a>
</li>
<li class="list-inline-item f-15"><a href="#"
class="social-icon text-muted"><i class="mdi mdi-whatsapp"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- CONTACT US END -->
<!-- FOOTER START -->
<section class="footer-bg">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="mb-5">
<p class="text-uppercase text-dark footer-title mb-4">About Us</p>
<p class="text-muted f-14">Sed ut perspiciatis unde omnis iste natus error sit voluptatem that
is doloremque totam that laudantiume.</p>
</div>
</div>
<!-- col end -->
<div class="col-lg-8">
<div class="row">
<div class="col-lg-4">
<div class="mb-5">
</div>
</div>
<!-- col end -->
<div class="col-lg-4">
<div class="mb-5">
</div>
</div>
<!-- col end -->
<div class="col-lg-4">
<div class="mb-5">
</div>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- FOOTER END -->
<!-- FOOTER ALT START -->
<section class="footer-alt bg-dark pt-3 pb-3">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="copyright text-white f-14 fw-light mb-0">
<script>document.write(new Date().getFullYear())</script> © Skolo Online Learning
</p>
</div>
<!-- col end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</section>
<!-- FOOTER ALT END -->
<script src="#"></script>
<script src="#"></script>
<script src="#"></script>
<script src="#"></script>
<!-- Main Js -->
<script src="#"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment