(33 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | {{Valencia_UPV/bootstrapcss}} | |
− | {{Valencia_UPV/ | + | |
− | + | ||
{{Valencia_UPV/stackinterfacecss}} | {{Valencia_UPV/stackinterfacecss}} | ||
− | {{Valencia_UPV/ | + | {{Valencia_UPV/sociconcss}} |
− | {{Valencia_UPV/ | + | {{Valencia_UPV/lightboxcss}} |
− | {{Valencia_UPV/ | + | {{Valencia_UPV/flickitycss}} |
− | {{Valencia_UPV/ | + | {{Valencia_UPV/iconsmindcss}} |
− | {{Valencia_UPV/ | + | {{Valencia_UPV/jquerystepscss}} |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
{{Valencia_UPV/themecss}} | {{Valencia_UPV/themecss}} | ||
− | {{Valencia_UPV/ | + | {{Valencia_UPV/customcss}} |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 31: | Line 14: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
Line 44: | Line 23: | ||
</style> | </style> | ||
+ | <body class=" "> | ||
+ | <a id="start"></a> | ||
+ | <section class="bar bar-3 bar--sm bg--secondary"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-6"> | ||
+ | <div class="bar__module"> | ||
+ | <span class="type--fade">Stack | Multipurpose HTML Template with Variant Page Builder</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-lg-6 text-right text-left-xs text-left-sm"> | ||
+ | <div class="bar__module"> | ||
+ | <ul class="menu-horizontal"> | ||
+ | <li> | ||
+ | <div class="modal-instance"> | ||
+ | <a href="#" class="modal-trigger">Login</a> | ||
+ | <div class="modal-container"> | ||
+ | <div class="modal-content section-modal"> | ||
+ | <section class="unpad "> | ||
+ | <div class="container"> | ||
+ | <div class="row justify-content-center"> | ||
+ | <div class="col-md-6"> | ||
+ | <div class="boxed boxed--lg bg--white text-center feature"> | ||
+ | <div class="modal-close modal-close-cross"></div> | ||
+ | <h3>Login to Your Account</h3> | ||
+ | <hr data-title="OR"> | ||
+ | <div class="feature__body"> | ||
+ | <form> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-12"> | ||
+ | <input type="text" placeholder="Username" /> | ||
+ | </div> | ||
+ | <div class="col-md-12"> | ||
+ | <input type="password" placeholder="Password" /> | ||
+ | </div> | ||
+ | <div class="col-md-12"> | ||
+ | <button class="btn btn--primary type--uppercase" type="submit">Login</button> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </form> | ||
+ | <span class="type--fine-print block">Dont have an account yet? | ||
+ | <a href="#">Create account</a> | ||
+ | </span> | ||
+ | <span class="type--fine-print block">Forgot your username or password? | ||
+ | <a href="#">Recover account</a> | ||
+ | </span> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </section> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="modal-instance"> | ||
+ | <a href="#" class="modal-trigger">Create Account</a> | ||
+ | <div class="modal-container"> | ||
+ | <div class="modal-content"> | ||
+ | <section class="imageblock feature-large bg--white border--round "> | ||
+ | <div class="imageblock__content col-lg-5 col-md-3 pos-left"> | ||
+ | <div class="background-image-holder"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container"> | ||
+ | <div class="row justify-content-end"> | ||
+ | <div class="col-lg-7"> | ||
+ | <div class="row justify-content-center"> | ||
+ | <div class="col-lg-10 col-md-11"> | ||
+ | <h2>Create an account</h2> | ||
+ | <p class="lead">Get started with a 14 day free trial, No credit card required — cancel at any time.</p> | ||
+ | <hr data-title="OR"> | ||
+ | <form> | ||
+ | <div class="row"> | ||
+ | <div class="col-12"> | ||
+ | <input type="email" name="Email Address" placeholder="Email Address" /> | ||
+ | </div> | ||
+ | <div class="col-12"> | ||
+ | <input type="password" name="Password" placeholder="Password" /> | ||
+ | </div> | ||
+ | <div class="col-12"> | ||
+ | <button type="submit" class="btn btn--primary type--uppercase">Create Account</button> | ||
+ | </div> | ||
+ | <div class="col-12"> | ||
+ | <span class="type--fine-print">By signing up, you agree to the | ||
+ | <a href="#">Terms of Service</a> | ||
+ | </span> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </form> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of col--> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </section> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#" data-notification-link="search-box"> | ||
+ | <i class="stack-search"></i> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="shop-cart.html"> | ||
+ | <i class="stack-basket"></i> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="dropdown dropdown--absolute"> | ||
+ | <span class="dropdown__trigger"> | ||
+ | </span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-1 dropdown__content"> | ||
+ | <ul class="menu-vertical text-left"> | ||
+ | <li> | ||
+ | <a href="#">ENG</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">GER</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#" data-notification-link="side-menu"> | ||
+ | <i class="stack-dot-3"></i> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </section> | ||
+ | <!--end bar--> | ||
+ | <div class="notification pos-right pos-top side-menu bg--white" data-notification-link="side-menu" data-animation="from-right"> | ||
+ | <div class="side-menu__module"> | ||
+ | </div> | ||
+ | <!--end module--> | ||
+ | <hr> | ||
+ | <div class="side-menu__module"> | ||
+ | <span class="type--fine-print float-left">Already have an account?</span> | ||
+ | <a class="btn type--uppercase float-right" href="#"> | ||
+ | <span class="btn__text">Login</span> | ||
+ | </a> | ||
+ | </div> | ||
+ | <!--end module--> | ||
+ | <hr> | ||
+ | <div class="side-menu__module"> | ||
+ | <ul class="list--loose list--hover"> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <span class="h5">About Stack</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <span class="h5">Careers</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <span class="h5">Investors</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <span class="h5">Locations</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <span class="h5">Contact</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end module--> | ||
+ | <hr> | ||
+ | <div class="side-menu__module"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="notification pos-top pos-right search-box bg--white border--bottom" data-animation="from-top" data-notification-link="search-box"> | ||
+ | <form> | ||
+ | <div class="row justify-content-center"> | ||
+ | <div class="col-lg-6 col-md-8"> | ||
+ | <input type="search" name="query" placeholder="Type search query and hit enter" /> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </form> | ||
+ | </div> | ||
+ | <!--end of notification--> | ||
+ | <div class="nav-container "> | ||
+ | <div class="bar bar--sm visible-xs"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-3 col-md-2"> | ||
+ | <a href="index.html"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="col-9 col-md-10 text-right"> | ||
+ | <a href="#" class="hamburger-toggle" data-toggle-class="#menu1;hidden-xs"> | ||
+ | <i class="icon icon--sm stack-interface stack-menu"></i> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </div> | ||
+ | <!--end bar--> | ||
+ | <nav id="menu1" class="bar bar--sm bar-1 hidden-xs "> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-1 col-md-2 hidden-xs"> | ||
+ | <div class="bar__module"> | ||
+ | <a href="index.html"> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | <!--end module--> | ||
+ | </div> | ||
+ | <div class="col-lg-11 col-md-12 text-right text-left-xs text-left-sm"> | ||
+ | <div class="bar__module"> | ||
+ | <ul class="menu-horizontal text-left"> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Home</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-12 dropdown__content dropdown__content--lg"> | ||
+ | <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4"> | ||
+ | <div class="background-image-holder"> | ||
+ | </div> | ||
+ | <div class="container pos-vertical-center pl-5"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-8"> | ||
+ | <span class="h2 color--white">Beautiful, modular sites in moments.</span> | ||
+ | <a href="#" class="btn btn--primary type--uppercase"> | ||
+ | <span class="label">$18 USD.</span> | ||
+ | <span class="btn__text"> | ||
+ | Purchase Stack Now | ||
+ | </span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row justify-content-end"> | ||
+ | <div class="col-lg-6"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-4"> | ||
+ | <h5>Industries</h5> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="home-accommodation.html"> | ||
+ | Accommodation | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-construction.html"> | ||
+ | Construction | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-coworking.html"> | ||
+ | Coworking | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-drone-photography.html"> | ||
+ | Drone Photography | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-education.html"> | ||
+ | Education | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-event.html"> | ||
+ | Event | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-fitness.html"> | ||
+ | Fitness | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-health-insurance.html"> | ||
+ | Insurance | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-knowledge-base.html"> | ||
+ | Knowledge Base | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-musician.html"> | ||
+ | Musician | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-nonprofit.html"> | ||
+ | Nonprofit | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-political.html"> | ||
+ | Political | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-restaurant.html"> | ||
+ | Restaurant | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-recruitment.html"> | ||
+ | Recruitment | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-tourism.html"> | ||
+ | Tourism | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-wedding.html"> | ||
+ | Wedding | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="col-lg-4"> | ||
+ | <h5>Landing Pages</h5> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="home-landing-1.html"> | ||
+ | Landing 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-2.html"> | ||
+ | Landing 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-3.html"> | ||
+ | Landing 3 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-4.html"> | ||
+ | Landing 4 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-5.html"> | ||
+ | Landing 5 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-6.html"> | ||
+ | Landing 6 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-7.html"> | ||
+ | Landing 7 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-8.html"> | ||
+ | Landing 8 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-9.html"> | ||
+ | Landing 9 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-landing-10.html"> | ||
+ | Landing 10 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-software-1.html"> | ||
+ | Software 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-software-2.html"> | ||
+ | Software 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-software-3.html"> | ||
+ | Software 3 | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="col-lg-4"> | ||
+ | <h5>Portfolios</h5> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="home-portfolio-agency-1.html"> | ||
+ | Agency | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-portfolio-agency-2.html"> | ||
+ | Agency 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-portfolio-personal-1.html"> | ||
+ | Personal 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-portfolio-photography.html"> | ||
+ | Photography | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-portfolio-photography-2.html"> | ||
+ | Photography 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-portfolio-studio-1.html"> | ||
+ | Studio 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-portfolio-studio-2.html"> | ||
+ | Studio 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-portfolio-video.html"> | ||
+ | Video | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <h5>Coming Soon</h5> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="home-coming-soon-1.html"> | ||
+ | Coming Soon 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-coming-soon-2.html"> | ||
+ | Coming Soon 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="home-coming-soon-3.html"> | ||
+ | Coming Soon 3 | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of col--> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Pages</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">About</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="page-about-company.html"> | ||
+ | About Company | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-about-team.html"> | ||
+ | About Team | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-about-me.html"> | ||
+ | About Me | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-about-history.html"> | ||
+ | About History | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Careers</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="page-careers.html"> | ||
+ | Careers Listing | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-careers-single.html"> | ||
+ | Career Single | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Contact</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="page-contact-map-1.html"> | ||
+ | Contact Map 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-contact-map-2.html"> | ||
+ | Contact Map 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-contact-map-3.html"> | ||
+ | Contact Map 3 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-contact-map-4.html"> | ||
+ | Contact Map 4 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-contact-planner-1.html"> | ||
+ | Contact Planner 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-contact-planner-2.html"> | ||
+ | Contact Planner 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Pricing</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="page-pricing-1.html"> | ||
+ | Pricing Plans 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-pricing-2.html"> | ||
+ | Pricing Plans 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-pricing-3.html"> | ||
+ | Pricing Plans 3 | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Services</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="page-services-1.html"> | ||
+ | Services 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-services-2.html"> | ||
+ | Services 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-services-3.html"> | ||
+ | Services 3 | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown separate"> | ||
+ | <span class="dropdown__trigger">Accounts</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="page-accounts-profile.html"> | ||
+ | Public Profile | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-accounts-settings.html"> | ||
+ | Account Settings | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-accounts-login-1.html"> | ||
+ | Login Simple | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-accounts-login-2.html"> | ||
+ | Login Social | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-accounts-create-1.html"> | ||
+ | Create Simple | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-accounts-create-2.html"> | ||
+ | Create Social | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-accounts-recover.html"> | ||
+ | Recover Account | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Utilities</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="page-utility-conversation.html"> | ||
+ | Conversation | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="404.html"> | ||
+ | Error 404 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="500.html"> | ||
+ | Error 500 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-utility-maintnence.html"> | ||
+ | Maintnence Mode | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-utility-onboarding.html"> | ||
+ | Onboarding | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-utility-search-results-list.html"> | ||
+ | Search Results List | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="page-utility-search-results.html"> | ||
+ | Search Results Boxes | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Blog</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Articles</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="blog-articles-list.html"> | ||
+ | Simple List | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="blog-articles-list-minimal.html"> | ||
+ | Minimal List | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="blog-articles-magazine.html"> | ||
+ | Magazine | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="blog-articles-cards.html"> | ||
+ | Cards | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="blog-articles-cards-sidebar.html"> | ||
+ | Cards Sidebar | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Post Single</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="blog-post-single.html"> | ||
+ | Standard Post | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="blog-post-audio-single.html"> | ||
+ | Audio Post | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="blog-post-image-single.html"> | ||
+ | Image Post | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="blog-post-video-single.html"> | ||
+ | Video Post | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Shop</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Shop Standard</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="shop-2col.html"> | ||
+ | 2 Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="shop-3col.html"> | ||
+ | 3 Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="shop-4col.html"> | ||
+ | 4 Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Shop Tiles</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="shop-2col-tiles.html"> | ||
+ | 2 Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="shop-3col-tiles.html"> | ||
+ | 3 Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="shop-4col-tiles.html"> | ||
+ | 4 Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Product Singles</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="shop-product-1.html"> | ||
+ | Product Simple | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="shop-product-2.html"> | ||
+ | Product Detailed | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="separate"> | ||
+ | <a href="shop-cart.html"> | ||
+ | Cart Overview | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class=""> | ||
+ | <a href="shop-checkout.html"> | ||
+ | Checkout | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class=""> | ||
+ | <a href="shop-terms.html"> | ||
+ | Terms | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Portfolio</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Titles Outside</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="portfolio-one-1col.html"> | ||
+ | One Column | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-one-2col.html"> | ||
+ | Two Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-one-3col.html"> | ||
+ | Three Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Titles Inside</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="portfolio-two-1col.html"> | ||
+ | One Column | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-two-2col.html"> | ||
+ | Two Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-two-3col.html"> | ||
+ | Three Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Titles Hover</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="portfolio-three-1col.html"> | ||
+ | One Column | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-three-2col.html"> | ||
+ | Two Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-three-3col.html"> | ||
+ | Three Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Fullwidth</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="portfolio-four-2col.html"> | ||
+ | Two Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-four-3col.html"> | ||
+ | Three Columns | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown separate"> | ||
+ | <span class="dropdown__trigger">Case Studies</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="portfolio-case-study-1.html"> | ||
+ | Case Study 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-case-study-2.html"> | ||
+ | Case Study 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-case-study-3.html"> | ||
+ | Case Study 3 | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Single Projects</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="portfolio-single-1.html"> | ||
+ | Project Single 1 | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="portfolio-single-2.html"> | ||
+ | Project Single 2 | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Blocks</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="dropdown__content dropdown__content--lg col-lg-8"> | ||
+ | <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="6"> | ||
+ | <div class="background-image-holder"> | ||
+ | </div> | ||
+ | <div class="container pos-vertical-center pl-5"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-10"> | ||
+ | <span class="h3 color--white">Over 290 modular interface blocks.</span> | ||
+ | <a href="#" class="btn btn--primary type--uppercase"> | ||
+ | <span class="btn__text"> | ||
+ | Launch Builder | ||
+ | </span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row justify-content-end"> | ||
+ | <div class="col-lg-6"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="sections-accordions.html"> | ||
+ | Accordions | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-cta.html"> | ||
+ | Calls To Action | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-cards.html"> | ||
+ | Cards | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-covers.html"> | ||
+ | Covers | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-features-small.html"> | ||
+ | Features Small | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-features-large.html"> | ||
+ | Features Large | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-contact.html"> | ||
+ | Forms Contact | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-signup.html"> | ||
+ | Forms Signup | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-subscribe.html"> | ||
+ | Forms Subscribe | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-footers.html"> | ||
+ | Footers | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-galleries.html"> | ||
+ | Galleries | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-instagram.html"> | ||
+ | Instagram | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-maps.html"> | ||
+ | Maps | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="col-md-6"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="sections-modals.html"> | ||
+ | Modals | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-navigation.html"> | ||
+ | Navigation Bars | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-notifications.html"> | ||
+ | Notifications | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-pricing.html"> | ||
+ | Pricing | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-processes.html"> | ||
+ | Processes | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-sliders.html"> | ||
+ | Sliders | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-twitter.html"> | ||
+ | Twitter | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-tabs.html"> | ||
+ | Tabs | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-team.html"> | ||
+ | Teams | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-testimonials.html"> | ||
+ | Testimonials | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-text-layouts.html"> | ||
+ | Text Layouts | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-titles.html"> | ||
+ | Titles | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="sections-videos.html"> | ||
+ | Videos | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of col--> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | <!--end row--> | ||
+ | </div> | ||
+ | <!--end container--> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <span class="dropdown__trigger">Elements</span> | ||
+ | <div class="dropdown__container"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-12 dropdown__content dropdown__content--lg"> | ||
+ | <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4"> | ||
+ | <div class="background-image-holder"> | ||
+ | </div> | ||
+ | <div class="container pos-vertical-center pl-5"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-8"> | ||
+ | <span class="h3 color--white">Detailed and organised elements</span> | ||
+ | <a href="elements.html" class="btn btn--primary type--uppercase"> | ||
+ | <span class="btn__text"> | ||
+ | Explore Elements | ||
+ | </span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row justify-content-end"> | ||
+ | <div class="col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="elements-accordions.html"> | ||
+ | Accordions | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-alerts.html"> | ||
+ | Alerts | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-boxes.html"> | ||
+ | Boxes | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-buttons.html"> | ||
+ | Buttons | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-colors.html"> | ||
+ | Colors | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-countdown.html"> | ||
+ | Countdown | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-dropdowns.html"> | ||
+ | Dropdowns | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-form-elements.html"> | ||
+ | Form Elements | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-gradient-backgrounds.html"> | ||
+ | Gradient Backgrounds | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-grid.html"> | ||
+ | Grid System | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-image-backgrounds.html"> | ||
+ | Image Backgrounds | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-instagram.html"> | ||
+ | Instagram | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="elements-lightbox.html"> | ||
+ | Lightbox | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-maps.html"> | ||
+ | Maps | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-masonry.html"> | ||
+ | Masonry | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-modals.html"> | ||
+ | Modals | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-navigation.html"> | ||
+ | Navigation Bars | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-navigation-inpage.html"> | ||
+ | Navigation In-Page | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-navigation-sidebar.html"> | ||
+ | Navigation Sidebar | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-notifications.html"> | ||
+ | Notifications | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-parallax.html"> | ||
+ | Parallax | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-pricing.html"> | ||
+ | Pricing | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-progress-bars.html"> | ||
+ | Progress Bars | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-radials.html"> | ||
+ | Radials | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="col-lg-2 col-md-4"> | ||
+ | <ul class="menu-vertical"> | ||
+ | <li> | ||
+ | <a href="elements-scrims-overlays.html"> | ||
+ | Scrims & Overlays | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-sliders.html"> | ||
+ | Sliders | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-tables.html"> | ||
+ | Tables | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-tabs.html"> | ||
+ | Tabs | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-tooltips.html"> | ||
+ | Tooltips | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-twitter.html"> | ||
+ | Twitter Feed | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-typed-text.html"> | ||
+ | Typed Text | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-typography.html"> | ||
+ | Typography | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-video-background.html"> | ||
+ | Video Backgrounds | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-video-inline.html"> | ||
+ | Video Inline | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="elements-wizards.html"> | ||
+ | Wizards | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end dropdown content--> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end dropdown container--> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end module--> | ||
+ | <div class="bar__module"> | ||
+ | <a class="btn btn--sm type--uppercase" href="#"> | ||
+ | <span class="btn__text"> | ||
+ | Try Builder | ||
+ | </span> | ||
+ | </a> | ||
+ | <a class="btn btn--sm btn--primary type--uppercase" href="#"> | ||
+ | <span class="btn__text"> | ||
+ | Buy Now | ||
+ | </span> | ||
+ | </a> | ||
+ | </div> | ||
+ | <!--end module--> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </nav> | ||
+ | <!--end bar--> | ||
+ | </div> | ||
+ | <div class="main-container"> | ||
+ | <section class="imagebg image--light cover cover-blocks bg--secondary"> | ||
+ | <div class="background-image-holder hidden-xs" style="background-image: url(https://static.igem.org/mediawiki/2018/thumb/4/47/T--Valencia_UPV--pruebaBin.jpg/1600px-T--Valencia_UPV--pruebaBin.jpg); opacity: 1; background-position: initial initial; background-repeat: initial initial;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/thumb/4/47/T--Valencia_UPV--pruebaBin.jpg/1600px-T--Valencia_UPV--pruebaBin.jpg"> | ||
+ | </div> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6 col-lg-5 "> | ||
+ | <div> | ||
+ | <h1>Gradient Backgrounds</h1> | ||
+ | <p class="lead"> | ||
+ | These modular elements can be readily used and customized across pages and in different blocks. | ||
+ | </p> | ||
+ | <hr class="short"> | ||
+ | <p> | ||
+ | Explore all of Stack's modular elements | ||
+ | <br /> at the | ||
+ | <a href="elements.html">Element Index Page →</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </section> | ||
+ | <section> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-5"> | ||
+ | <div class="boxed bg--secondary boxed--lg boxed--border"> | ||
+ | <h4>Gradient Background</h4> | ||
+ | <p> | ||
+ | Stack allows you to easily add an animated gradient background to elements that fades seamlessly between a list of hex colours you define in the | ||
+ | <strong>data-gradients</strong> attribute. | ||
+ | </p> | ||
+ | <pre> | ||
+ | <section class="imagebg" data-gradient-bg="#4876BD,#5448BD,#8F48BD,#BD48B1"> | ||
+ | CONTENT | ||
+ | </section> | ||
+ | </pre> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-md-7"> | ||
+ | <div class="height-50 imagebg text-center" data-gradient-bg="#4876BD,#5448BD,#8F48BD,#BD48B1"> | ||
+ | <div class="pos-vertical-center"> | ||
+ | <h2>Gradient Backgrounds Rock</h2> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </section> | ||
+ | <footer class="footer-3 text-center-xs space--xs "> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <ul class="list-inline list--hover"> | ||
+ | <li class="list-inline-item"> | ||
+ | <a href="#"> | ||
+ | <span class="type--fine-print">Get Started</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="list-inline-item"> | ||
+ | <a href="#"> | ||
+ | <span class="type--fine-print">help@stack.io</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="type--fine-print"> | ||
+ | Supercharge your web workflow | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="col-md-6 text-right text-center-xs"> | ||
+ | <span class="type--fine-print">© | ||
+ | <span class="update-year"></span> Stack Inc.</span> | ||
+ | <a class="type--fine-print" href="#">Privacy Policy</a> | ||
+ | <a class="type--fine-print" href="#">Legal</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--end of row--> | ||
+ | </div> | ||
+ | <!--end of container--> | ||
+ | </footer> | ||
+ | </div> | ||
+ | <!--<div class="loader"></div>--> | ||
+ | <a class="back-to-top inner-link" href="#start" data-scroll-class="100vh:active"> | ||
+ | <i class="stack-interface stack-up-open-big"></i> | ||
+ | </a> | ||
+ | <script src="jquery311minjs"></script> | ||
+ | <script src="flickityminjs"></script> | ||
+ | <script src="easypiechartminjs"></script> | ||
+ | <script src="parallaxjs"></script> | ||
+ | <script src="typedminjs"></script> | ||
+ | <script src="datepickerjs"></script> | ||
+ | <script src="isotopeminjs"></script> | ||
+ | <script src="ytplayerminjs"></script> | ||
+ | <script src="lightboxminjs"></script> | ||
+ | <script src="granimminjs"></script> | ||
+ | <script src="jquerystepsminjs"></script> | ||
+ | <script src="countdownminjs"></script> | ||
+ | <script src="twitterfetcherminjs"></script> | ||
+ | <script src="spectragramminjs"></script> | ||
+ | <script src="smoothscrollminjs"></script> | ||
+ | <script src="scriptsjs"></script> | ||
+ | <script src="bootstrapcss"></script> | ||
+ | <script src="customcss"></script> | ||
+ | <script src="flickitycss"></script> | ||
+ | <script src="iconsmindcss"></script> | ||
+ | <script src="jquerystepscss"></script> | ||
+ | <script src="lightboxcss"></script> | ||
+ | <script src="sociconcss"></script> | ||
+ | <script src="stackinterfacecss"></script> | ||
+ | <script src="themecss"></script> | ||
− | + | </body> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
</html> | </html> |
Latest revision as of 15:14, 25 June 2018
Gradient Backgrounds
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the
Element Index Page →
Gradient Background
Stack allows you to easily add an animated gradient background to elements that fades seamlessly between a list of hex colours you define in the data-gradients attribute.
<section class="imagebg" data-gradient-bg="#4876BD,#5448BD,#8F48BD,#BD48B1"> CONTENT </section>