Template 1
This is a white-label template. To make it match your brand and style you need to do further customisations on the provided template
Use the below link to see what the white-label template looks like. Keep in mind that every color/logo/placeholder can be customized to match your style & branding.
Tip: Use the Copy button on the top-right of the code editor to copy all code
We added the custom code for you to use in the code editor below. See how to use it here
Index.html
Script.js
Style.css
|
<!-- START Include headers --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" crossorigin="anonymous" ></script> <!-- END Include headers--> <!-- START NOT NEEDED --> <link rel="stylesheet" href="/style.css" /> <script src="/script.js"></script> <!-- END NOT NEEDED --> <!-- START Landing page --> <div class="body"> <header class="header"> <div class="search-bar"> <div class="search-form"> <input class="form-control" type="text" placeholder="Search..." /> <button class="search-button"> <span class="material-symbols-outlined"> search </span> </button> </div> <button class="close-icon"> <span class="material-symbols-outlined"> close </span> </button> </div> <div class="logo-bar"> <div class="container"> <div class="logo-bar-inner"> <a class="logo" href="" ><img src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here" alt="logo" /></a> <div class="search-wrape mobile"> <button class="search-btn"> <span class="material-symbols-outlined"> search </span> </button> </div> <div class="toggle-icon"> </div> </div> </div> </div> <div class="navigation-menu"> <div class="container"> <div class="nav-menu"> <nav> <ul> <li><a href="">LINK</a></li> <li><a href="">LINK</a></li> <li><a href="">LINK</a></li> </ul> </nav> </div> </div> </div> </header> <section class="home-banner"> <div class="banner-width container"> <div class="banner-wrape"> <div class="banner-row"> <div class="banner-col-sm"> <div class="banner-wrape"> <div class="banner-text"> <h1>Title <strong>Subtitle</strong></h1> </div> </div> </div> <div class="banner-col-lg"> <div class="banner-image"> <figure> <img src="https://placehold.co/1115x530/2166ae/FFF?text=Banner%20Image" alt="banner-img" /> </figure> </div> </div> </div> </div> </div> </section> <section class="intro-section"> <div class="container"> <div class="intro-width"> <div class="intro-text"> <h2>Intro title</h2> <h5>Intro subtitle</h5> <p> Some intro description. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque id mollitia dolorum quam. Aspernatur omnis vitae debitis consequatur aliquam exercitationem facilis? Vero maiores aut dignissimos aspernatur quod pariatur odit quasi! </p> </div> </div> </div> </section> <section class="info-section"> <div class="container"> <div class="info-parent"> <div class="overview-data"> <div class="overview-row"> <div class="overview-col"> <div class="overview-wrape"> <div class="overview-box"> <h3>Title</h3> <p>Subtitle</p> <a class="btn-default" href="">Browse</a> </div> </div> </div> <div class="overview-col"> <div class="overview-wrape"> <div class="overview-box"> <h3>Title</h3> <p>Subtitle</p> <a class="btn-default" href="">Explore</a> </div> </div> </div> </div> </div> <div class="framework-data"> <div class="framework-row"> <div class="framework-col"> <div class="framework-wrape"> <div class="framework-box"> <figure> <img src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon" alt="framework-icon-1" /> </figure> <div class="framework-text"> <h4>Title</h4> <p>Description</p> <a class="start-btn" href="">Start ></a> </div> </div> </div> </div> <div class="framework-col"> <div class="framework-wrape"> <div class="framework-box"> <figure> <img src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon" alt="framework-icon-2" /> </figure> <div class="framework-text"> <h4>Title</h4> <p>Description</p> <a class="start-btn" href="">Start ></a> </div> </div> </div> </div> <div class="framework-col"> <div class="framework-wrape"> <div class="framework-box"> <figure> <img src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon" alt="framework-icon-3" /> </figure> <div class="framework-text"> <h4>Title</h4> <p>Description</p> <a class="start-btn" href="">Start ></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="buttons-link-section"> <div class="container"> <div class="buttons-link-group"> <div class="buttons-link"> <a class="btn-default" href="">Button</a> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <div class="footer-wrape"> <a class="foot-logo" href="#" ><img src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here" alt="logo" /></a> </div> </div> <div class="copyright"> <div class="container"> <div class="copyright-inner"> <p> © Copyright 2023 | | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> by <a href="#">Nobody</a> </p> <ul> <li> <a href="" ><span class="material-symbols-outlined"> grid_guides </span> </a> </li> <li> <a href="" ><span class="material-symbols-outlined"> grid_guides </span> </a> </li> <li> <a href="" ><span class="material-symbols-outlined"> grid_guides </span> </a> </li> <!-- Your social links --> </ul> </div> </div> </div> </footer> </div> <!-- END Landing page-->
Updated 22 Sep 2023
Did this page help you?