Copyright © 2024. Quad All Rights Reserved.
Created: 12 March 2024
Latest Update: 12 March 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Quad - SASS Startup & Software Landing Page HTML5 Template. If you have any question, please feel free to contact us.
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Quad" folder.
You will find the
two folder one is for lite version and other is for dark version
file on the root that will be edited.
Also you will see 5 directories, css, js, fonts, logo, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
appside/
├── assets/css/plugins/
| ├── bootstrap.min.css
| ├── fontawesome.css
| ├── mobile.css
| ├── aos.css
| ├── magnific-popup.css
| ├── owl.carousel.min.css
| ├── slick-slider.css
| ├── swiper.bundle.css
| ├── typhograpy.css
| ├── master.css
|
├── style.css
|
|
├── assets/fonts/
| ├── fa-brands-300
| ├── fa-brands-300.woff2
| ├── fa-brands-400
| ├── fa-brands-400.woff2
| ├── fa-regular-400
| ├── fa-regular-400.woff2
| ├── fa-solid-900
| ├── fa-solid-900.woff2
| ├── fa-v4compatibility
| ├── fa-v4compatibility.woff2
|
├── assets/js/plugins
│ ├── bootstrap.min.js
| ├── fontawesome.js
│ ├── counter.js
│ ├── gsap.min.js
│ ├── magnific-popup.js
│ ├── jquery-3-6-0.min.js
│ ├── owlcarousel.min.js
│ ├── ScrollTrigger.min.js
│ ├── mobilemenu.js
│ ├── aos.js
│ ├── slick-slider.js
| ├── awiper-bundle.js
| ├── waypoints.js
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── rtl.html
├── single-index1.html
├── single-index2.html
├── single-index3.html
├── single-index4.html
├── single-index5.html
├── about.html
├── blog1.html
├── blog2.html
├── blog-left.html
├── blog-right.html
├── blog-details.html
├── contact.html
├── team.html
├── testimonial1.html
├── testimonial2.html
├── download.html
├── features.html
├── pricing-plan.html
├── faq.html
├── login.html
├── signup.html
├── verify.html
├── resetpass.html
├── forget.html
<!--===== WELCOME STARTS =======--> <div class="welcome2-section-area" style="background-image: url(assets/images/background/header2-bg.png); background-position: center; background-repeat: no-repeat; background-size: cover;"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-7"> <div class="welcome2-header heading3"> <span data-aos="fade-up" data-aos-duration="600">Quad Email Marketing Software </span> <h1 data-aos="fade-up" data-aos-duration="800">Unleash the Potential Your Emails with Quad</h1> <p data-aos="fade-up" data-aos-duration="1000">Welcome to Quad where email marketing becomes a breeze. Our intuitive and <br> feature-rich platform empowers you to create, and track impactful.</p> <div data-aos="fade-up" data-aos-duration="1200"> <a href="contact.html" class="header-btn2">Get Started </a> <a href="features.html" class="header-btn3">Explore Features</a> </div> </div> </div> <div class="col-lg-5"> <div class="header-images-area"> <div class="header-elements1 reveal"> <img src="assets/images/all-images/haeder2-img1.png" alt=""> </div> <div class="header-elements2" data-aos="zoom-out" data-aos-duration="1000"> <img src="assets/images/elements/header2-elements.png" alt="" class="aniamtion-key-3"> </div> </div> </div> </div> </div> </div> <!--===== WELCOME ENDS =======--> <!--===== OTHERS STARTS =======--> <div class="brand2-section-area sp8"> <div class="container"> <div class="row"> <div class="col-lg-6 m-auto"> <div class="brand2-header text-center"> <h4 data-aos="fade-up" data-aos-duration="1000">Join 500,000 Customer Around the World Who Trust Quad</h4> </div> </div> </div> <div class="space30"></div> <div class="row"> <div class="col-lg-12" data-aos="fade-left" data-aos-duration="1200"> <div class="brand2-logos"> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo1.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo2.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo3.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo4.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo5.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo1.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo2.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo3.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo4.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo5.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo1.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo2.png" alt=""> </div> <div class="brand2-logo"> <img src="assets/images/elements/brand2-logo3.png" alt=""> </div> </div> </div> </div> </div> </div> <!--===== OTHERS ENDS =======--> <!--===== GENERATION AREA STARTS =======--> <div class="genaration2-section-area sp3"> <div class="container"> <div class="row"> <div class="col-lg-6 m-auto"> <div class="genaration2-header text-center heading4"> <span data-aos="fade-up" data-aos-duration="800">Lead Generation</span> <h2 data-aos="fade-up" data-aos-duration="1000">Seamless Email Marketing Solutions: Introducing Quad</h2> </div> </div> </div> <div class="space60"></div> <div class="col-lg-12 m-auto"> <div class="tabs-area" data-aos="fade-up" data-aos-duration="1000"> <ul class="nav nav-pills justify-center" id="pills-tab"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-email-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Cold Email Automation</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-hyper-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Hyper-Personalization</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-delivary-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Delivery Suite</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link m-0" id="pills-inbox-tab" data-bs-toggle="pill" data-bs-target="#pills-inbox" type="button" role="tab" aria-controls="pills-inbox" aria-selected="false">Unified Inbox</button> </li> </ul> </div> <div class="space60"></div> <div class="tabs-content-area"> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" > <div class="tabs-contents"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="tabs-images reveal"> <img src="assets/images/all-images/service2-img1.png" alt=""> </div> </div> <div class="col-lg-6"> <div class="tabs-text-area" data-aos="fade-up" data-aos-duration="800"> <div class="tabs-icon"> <img src="assets/images/icons/service-icon1.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Automated Follow -Ups</a> <p>Fueling our mission is a passion for innovation. We at the forefront of technology, consistently </p> </div> </div> <div class="space20"> </div> <div class="tabs-text-area" data-aos="fade-up" data-aos-duration="1000"> <div class="tabs-icon1"> <img src="assets/images/icons/service-icon2.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Let the best copy win a-z</a> <p>Unlock the full potential of your marketing strategy with our cutting-edge email marketing solutions. </p> </div> </div> <div class="space20"></div> <div class="tabs-text-area" data-aos="fade-up" data-aos-duration="1200"> <div class="tabs-icon2"> <img src="assets/images/icons/service-icon3.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Verify Your email by Sending</a> <p>Whether you're a small business looking to connect with your audience or a seasoned marketer seeking </p> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" > <div class="tabs-contents"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="tabs-images reveal"> <img src="assets/images/all-images/works-img1.png" alt=""> </div> </div> <div class="col-lg-6"> <div class="tabs-text-area"> <div class="tabs-icon"> <img src="assets/images/icons/service-icon1.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Automated Follow -Ups</a> <p>Fueling our mission is a passion for innovation. We at the forefront of technology, consistently </p> </div> </div> <div class="space20"> </div> <div class="tabs-text-area"> <div class="tabs-icon1"> <img src="assets/images/icons/service-icon2.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Let the best copy win a-z</a> <p>Unlock the full potential of your marketing strategy with our cutting-edge email marketing solutions. </p> </div> </div> <div class="space20"></div> <div class="tabs-text-area"> <div class="tabs-icon2"> <img src="assets/images/icons/service-icon3.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Verify Your email by Sending</a> <p>Whether you're a small business looking to connect with your audience or a seasoned marketer seeking </p> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel"> <div class="tabs-contents"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="tabs-images"> <img src="assets/images/all-images/service2-img1.png" alt=""> </div> </div> <div class="col-lg-6"> <div class="tabs-text-area"> <div class="tabs-icon"> <img src="assets/images/icons/service-icon1.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Automated Follow -Ups</a> <p>Fueling our mission is a passion for innovation. We at the forefront of technology, consistently </p> </div> </div> <div class="space20"> </div> <div class="tabs-text-area"> <div class="tabs-icon1"> <img src="assets/images/icons/service-icon2.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Let the best copy win a-z</a> <p>Unlock the full potential of your marketing strategy with our cutting-edge email marketing solutions. </p> </div> </div> <div class="space20"></div> <div class="tabs-text-area"> <div class="tabs-icon2"> <img src="assets/images/icons/service-icon3.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Verify Your email by Sending</a> <p>Whether you're a small business looking to connect with your audience or a seasoned marketer seeking </p> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="pills-inbox" role="tabpanel" aria-labelledby="pills-inbox-tab" > <div class="tabs-contents"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="tabs-images"> <img src="assets/images/all-images/works-img1.png" alt=""> </div> </div> <div class="col-lg-6"> <div class="tabs-text-area"> <div class="tabs-icon"> <img src="assets/images/icons/service-icon1.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Automated Follow -Ups</a> <p>Fueling our mission is a passion for innovation. We at the forefront of technology, consistently </p> </div> </div> <div class="space20"> </div> <div class="tabs-text-area"> <div class="tabs-icon1"> <img src="assets/images/icons/service-icon2.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Let the best copy win a-z</a> <p>Unlock the full potential of your marketing strategy with our cutting-edge email marketing solutions. </p> </div> </div> <div class="space20"></div> <div class="tabs-text-area"> <div class="tabs-icon2"> <img src="assets/images/icons/service-icon3.svg" alt=""> </div> <div class="tabs-text"> <a href="features.html">Verify Your email by Sending</a> <p>Whether you're a small business looking to connect with your audience or a seasoned marketer seeking </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--===== GENERATION AREA ENDS =======-->
// HOMEPAGE1 HEADER STARTS // .header-area.homepage2{ position: absolute; width: 100%; z-index: 2; .navbar{ display: block; } .header-elements{ display: flex; align-self: center; justify-content: space-between; padding: 25px 0; transition: $trans; .site-logo{ margin-top: 5px; } .main-menu{ display: flex; align-items: center; .nav-item{ .nav-link.active{ background: none; color: $btn-bg2; } } ul { li { display: inline-block; position: relative; &:hover > a{ color:$btn-bg2 ; transition: $trans; } &:hover { ul.dropdown-padding{ visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 50px; position: absolute; } } a { font-family: $font3 !important; font-size: $small-size; font-weight: $medium; color: $white; display: inline-block; transition: $trans; padding: 0 10px; } ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background: $white; top: 100px; width: 220px; z-index: 1; transition: $trans; border-radius: 5px; padding: 15px; li.main-small-menu { position: relative; &:hover > a{ color:$btn-bg2 ; transition: $trans; padding-left: 25px; } &:hover > a::after{ color:$btn-bg2 ; transition: $trans; visibility: visible; opacity: 1; } a { display: flex; align-items: center; justify-content: space-between; } ul.small-dropdown { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; background: $white; position: absolute; top: 70px; width: 220px; z-index: 1; left: 195px; transition: $trans; border-radius: 5px; padding: 15px } &:hover{ ul.small-dropdown { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 0; position: absolute; } } } li { display: block; a { font-family: $font3 !important; font-weight: $medium; color: $color1; padding: 8px; display: inline-block; position: relative; z-index: 1; border-radius: 4px; transition: $trans; &::after{ position: absolute; content: ""; height: 2px; width: 10px; transition: $trans; z-index: -1; background: $btn-bg2; left: 10px; top: 22px; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; transition: $trans; } &:hover{ transition: $trans; color: $btn-bg2; padding-left: 25px; &::after{ transition: $trans; border-radius: 4px; visibility: visible; transition: $trans; opacity: 1; } } } } } } } .header-btn2{ margin: 0 16px 0 22px; } } } } .header-area.homepage2.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; -webkit-animation-name: fade-in-down; animation-name: fade-in-down; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: $color5; transition: $trans; z-index: 99; .header-elements{ margin-top: 0; transition: $trans; border: none; background: none; padding: 14px 0; } } // HOMEPAGE1 HEADER ENDS //
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
Vikinglab