Template 1

3 min

this is a white label template to make it match your brand and style you need to do further customisations on the provided template how it looks 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 https //vpft1m csb app/ custom code files 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 / /landing page templates md index html search close search link link link title subtitle intro title intro subtitle 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! title subtitle browse title subtitle explore title description start > title description start > title description start > button © copyright 2023 | | link | link | link by nobody grid guides grid guides grid guides script js / ! jquery v1 12 4 | (c) jquery foundation | jquery org/license / $(document) ready(function () { $(" toggle icon") click(function () { $(" nav menu") toggleclass("show"); }); }); $(document) ready(function () { $(" search btn") click(function () { $(" header") addclass("show search"); }); $(" close icon") click(function () { $(" header") removeclass("show search"); }); }); style css \ root { \ accent color #2166ae; \ link primary #656565; \ link accent var( accent color); \ text primary #000; \ text secondary #fff; \ text accent var( accent color); \ sub title color #6f6f6f; \ primary background #fff; \ secondary background #f3f3f3; \ accent background var( accent color); \ foter background #363839; \ copyright background #282a2b; \ copyright text #8c8989; \ copyrigth link #bfbfbf; \ border color #e5e5e5; } body { margin 0; padding 0; font size 16px; color #333; font family "work sans", sans serif; } / comman / html { scroll behavior smooth; font size 62 5%; } { box sizing border box; margin 0; padding 0; } / comman area / ol, ul { margin 0; padding 0; } img { display block; } a { text decoration none; transition all 0 5s ease; } a\ focus, a\ hover, a\ active { text decoration none; outline none; } h1, h2, h3, h4, h5, h6 { font weight normal; margin 0; } p { margin 0; font size 16px; color #222; line height 24px; } figure { margin 0; } img { max width 100%; height auto; } button\ focus { outline none; box shadow none; } btn\ hover, btn\ focus { background color var( accent color); color #fff; border color var( accent color); } container { margin 0 auto; width 100%; } toggle icon { display none; cursor pointer; } bar1, bar2, bar3 { width 30px; height 2px; background color #626c70; margin 6px 0; transition 0 4s; } change bar1 { webkit transform rotate( 45deg) translate( 4px, 6px); transform rotate( 45deg) translate( 4px, 6px); } change bar2 { opacity 0; } change bar3 { webkit transform rotate(45deg) translate( 5px, 8px); transform rotate(45deg) translate( 5px, 8px); } mobile { display none; } / navigation / logo bar { padding 20px 0; border bottom 1px solid var( border color); } logo bar inner { display flex; align items center; justify content space between; } navigation menu { padding 0 0; } nav menu { display flex; align items center; justify content flex start; } nav menu ul { list style none; margin 0; display flex; align items center; flex wrap wrap; justify content flex start; } nav menu ul li { margin 0 22px 0 0; } nav menu ul li a { color var( link primary); font size 18px; font weight bold; text transform uppercase; letter spacing 1px; display block; padding 12px 0; } nav menu ul li a\ hover { color var( link accent); } search btn { background color transparent; border none; cursor pointer; width 18px; transition all 0 5s ease; } search btn\ hover { opacity 0 5; } / banner / home banner { padding 20px 0 20px 0; } banner width { max width 1040px; width 100%; margin 0 auto; } banner row { display flex; flex direction row; flex wrap wrap; margin 0 0; } banner col sm { width 50%; padding 0 0; } banner col lg { width 50%; padding 0 0; } banner wrape { min height 100%; width 100%; display flex; align items center; padding 0 0; } banner text { max width 490px; padding 0 30px 0 0; margin 0 0; width 100%; } banner text h1 { font size 4rem; line height 70px; color var( text secondary); } banner text h1 strong { font weight normal; } / intro section / intro section { padding 3rem 0; } intro width { width 100%; margin 0 auto; } intro text h2 { font size 3 2rem; margin 0 0 3rem 0; line height 1 14; } intro text h5 { font size 20px; color var( sub title color); line height 1 3; } intro text p { font size 17px; line height 1 7em; margin top 10px; } / info section / info section { padding 2 6rem 0 0 0; background color var( secondary background); } overview row { display flex; flex direction row; flex wrap wrap; } overview col { width 50%; } overview wrape { width 100%; min height 334px; background color var( primary background); border 1px solid rgba(0, 0, 0, 0 1); box shadow 1px 10px 5px 1px #ededed; padding 20px; margin 0 0 30px 0; display flex; align items center; justify content center; } overview box { text align center; } overview box h3 { font size 3 2rem; margin 0 0 30px 0; } overview box p { color var( sub title color); max width 280px; width 100%; font size 20px; margin 0 auto 30px auto; } btn default { padding 12px 29px; font size 16px; color var( text secondary); border 2px solid var( accent color); letter spacing 1px; background color var( accent color); font weight bold; text transform uppercase; border radius 5px; display inline block; text align center; } btn default\ hover { border 2px solid var( accent color); color var( accent color); background color var( text secondary); } framework data { padding 28px 0; } framework row { display flex; flex direction row; flex wrap wrap; margin 0 10px; } framework col { width 33 33%; padding 0 10px; } framework box { background color var( primary background); margin 0 0 30px 0; display flex; flex wrap wrap; } framework box figure { width 165px; min height 240px; display flex; align items center; justify content center; padding 10px; background color var( accent color); } framework text { width calc(100% 165px); min height 100%; padding 10px 10px 10px 15px; } framework text h4 { font size 20px; font weight bold; color var( accent color); margin 0 0 10px 0; min height 50px; display flex; align items center; } framework text p { margin 0 0 20px 0; font size 17px; line height 1 7em; min height 230px; } start btn { font size 16px; font weight bold; color var( accent color); } buttons link section { background color var( secondary background); } buttons link group { display flex; flex wrap wrap; align items center; flex direction row; min height 200px; padding 15px 0; margin 0 25px; } buttons link { width 25%; padding 0 25px; } buttons link group btn default { width 100%; display table; } footer { background color var( foter background); } footer wrape { padding 6 15rem 0; } copyright { padding 25px 0; background color var( copyright background); border top 1px solid #4b4c4d; } copyright inner { display flex; align items center; flex wrap wrap; justify content space between; } copyright p { color var( copyright text); font size 13px; } copyright p a { color var( copyrigth link); } copyright ul { list style none; margin 0; } copyright ul li { margin 0 5px 0 0; display inline block; } copyright ul li a { color var( copyrigth link); } copyright ul li\ last child { margin right 0; } copyright ul li a { display block; width 17px; } header { position relative; } search bar { max width 880px; width 100%; display flex; align items center; flex wrap wrap; position absolute; top 0%; left 0; transform translatey( 50%); opacity 0; visibility hidden; transition all 0 8s ease; background color #fff; z index 111; } search form { position relative; width calc(100% 50px); } form control { border 1px solid #d2d2d2; border radius 0; color #aaa9a9; font size 13px; background color #fff; width 100%; height 50px; opacity 1; } form control placeholder { color #aaa9a9; font size 13px; opacity 1; } form control\ focus { border 1px solid #d2d2d2; box shadow none; outline none; } search bar form control { padding left 50px; } search button { position absolute; top 0; left 0; width 50px; height 100%; background color transparent; border none; display flex; align items center; justify content center; cursor pointer; } search button img { width 14px; opacity 0 7; } close icon { width 50px; height 50px; display flex; align items center; background color transparent; cursor pointer; border none; justify content center; } close icon img { width 12px; } show search search bar { top 50%; opacity 1; visibility visible; } show search nav menu { position relative; z index 1; transition all 0 8s ease; transform translatey(50px); } home banner { position relative; } banner video { position absolute; top 0; left 0; width 100%; height 100%; object fit cover; opacity 0 15; } home banner before { content ""; width 100%; height 100%; background color var( accent color); position absolute; top 0; left 0; z index 1; mix blend mode multiply; } banner wrape { position relative; z index 11; } @media (min width 2001px) and (max width 2560px) { container { max width 1300px !important; } } @media (min width 1801px) and (max width 2000px) { container { max width 1300px !important; } } @media (min width 1551px) and (max width 1800px) { container { max width 1300px !important; } } @media (min width 1300px) and (max width 1550px) { html { font size 55%; } container { max width 1200px !important; } logo bar { padding 20px 0; } home banner { padding 40px 0 50px 0; } banner width { } intro section { padding 60px 0; } framework box figure { width 140px; } framework text { width calc(100% 140px); } overview box p { font size 18px; } featured videos box h3 { font size 24px; } buttons link group { margin 0 10px; min height 150px; } buttons link { padding 0 10px; } } @media (min width 1200px) and (max width 1299px) { container { max width 1150px !important; } html { font size 55%; } container { padding 0 15px; } logo bar { padding 20px 0; } home banner { padding 40px 0 50px 0; } banner width { } intro section { padding 60px 0; } framework box figure { width 140px; } framework text { width calc(100% 140px); } framework text h4 { font size 18px; } overview box p { font size 18px; } featured videos box h3 { font size 24px; } buttons link group { margin 0 10px; min height 150px; } buttons link { padding 0 10px; } } @media (min width 992px) and (max width 1199px) { container { max width 950px !important; } html { font size 48%; } container { padding 0 15px; } logo bar { padding 20px 0; } home banner { padding 40px 0 50px 0; } banner width { padding 0 15px; max width 950px; } intro section { padding 60px 0; } overview box p { font size 18px; } framework col { width 50%; } featured videos box h3 { font size 24px; } buttons link group { margin 0 10px; min height 150px; } buttons link { padding 0 10px; } intro text p, framework text p, featured videos title p { font size 16px; } featured videos col { width 50%; padding 0 10px; } } @media (min width 768px) and (max width 991px) { featured videos col { width 50%; padding 0 10px; } container { max width 700px !important; } show search nav menu { z index 1; transition all 0 8s ease; transform translatey(0px); } html { font size 43%; } container { padding 0 15px; } search wrape { margin 0 20px 0 auto; display table; } desktop { display none; } mobile { display block; } toggle icon { display block; } nav menu { display none; } nav menu show { display block; } logo bar { padding 15px 0; } nav menu ul li { width 100%; margin 0; } nav menu ul li a { border bottom 1px solid var( border color); } home banner { padding 20px 0; } banner text { padding 0; } banner text h1 { } banner width { max width 645px; } intro section { padding 50px 0; } overview wrape { min height 285px; } overview box h3 { margin bottom 20px; } overview box p { font size 16px; } framework col { width 100%; } featured videos box { padding 15px; } featured videos box h3 { font size 22px; margin bottom 15px; } featured videos box p { line height 20px; font size 14px; margin bottom 15px; } buttons link group { min height 160px; } buttons link { width 50%; } intro text p, framework text p, featured videos title p { font size 16px; } } @media (min width 320px) and (max width 767px) { html { font size 42%; } container { padding 0 15px; } search wrape { margin 0 20px 0 auto; display table; } show search nav menu { z index 1; transition all 0 8s ease; transform translatey(0px); } desktop { display none; } mobile { display block; } toggle icon { display block; } nav menu { display none; } nav menu show { display block; } logo bar { padding 15px 0; } nav menu ul li { width 100%; margin 0; } nav menu ul li a { border bottom 1px solid var( border color); } home banner { padding 40px 0; } banner width { padding 0 15px; max width 530px; width 100%; margin 0 auto; } banner col sm, banner col lg, overview col, framework col, featured videos col { width 100%; } banner text { margin 0 auto; padding 0; text align center; } intro section { padding 3rem 0; } intro text h2 { font size 4rem; } intro text h5, overview box p { font size 18px; } framework box figure { width 100%; min height 130px; } framework box figure img { height 90px; object fit contain; } framework text { width 100%; padding 20px; } buttons link group { min height 140px; margin 0 15px; } buttons link { width 100%; margin 5px 0; padding 0 15px; } foot logo { margin 0 auto; display table; } copyright inner { text align center; justify content center; } copyright ul { margin left 10px; } banner text h1 { } intro text p, framework text p, featured videos title p { font size 16px; } } @media (min width 576px) and (max width 767px) { container { max width 530px; } }