Modern Landing Page Template With Bootstrap And jQuery - Identity

Modern Landing Page Template With Bootstrap And jQuery - Identity
File Size: 2.51 MB
Views Total: 390
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Identity is a modern, responsive, mobile-friendly, multipurpose web template designed for landing page or single page web app.

Built with jQuery and the latest Bootstrap 4 framework. Highly customizable by modifying Bootstrap’s source code and variables with SASS.

More Features:

  • Sticky and responsive navbar.
  • Eye-catching hero section.
  • Animated text typing effect based on typed.js.
  • Smooth scroll.
  • Open source icons based on Feather.

How to use it:

1. Load the Identity's stylesheet (Bootstrap stylesheet is included) in the header.

<link href="css/identity.min.css" rel="stylesheet" />

2. Load the necessary JavaScript files at the end of the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script> 
<!-- Popper.js - dependency of Bootstrap -->
<script src="/path/to/cdn/popper.min.js"></script> 
<!-- Load plugins -->
<script src="js/plugins.min.js"></script>
<!-- Main script -->
<script src="js/main.min.js"></script>

3. The example to create a hero section with an animated page heading.

<div class="container flex-grow-1 d-flex justify-content-center align-items-center position-relative pt-5">
  <div class="content py-5">
    <h1 class="display-3 font-weight-bold">
      We create awesome <br>
      <span id="typed"></span>
      <div id="typed-strings">
          <p>websites</p>
          <p>e-commerce</p>
          <p>brands</p>
      </div> 
    </h1>
    <h2 class="text-muted font-weight-lighter mt-3">And we'd love to get to know you.</h2>
    <div class="hero-drawing py-5 mx-auto">
      <img src="img/drawing-hero.svg" alt="" class="img-fluid">
    </div>
  </div>
</div>

Changelog:

2020-05-14

  • v1.0.2: updated Bootstrap, performance tweaks

2020-05-13

  • v1.0.1

This awesome jQuery plugin is developed by vantagedesign. For more Advanced Usages, please check the demo page or visit the official website.