photogenic
index.html
<!-- Author: W3layouts Author URL: http://w3layouts.com --> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Photogenic - Photo Gallery Category Bootstrap Responsive Website Template - Home : W3Layouts</title> <!-- google-fonts --> <link href="//fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet"> <link href="//fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <!-- //google-fonts --> <!-- Template CSS Style link --> <link rel="stylesheet" href="assets/css/style-starter.css"> </head> <body> <!--header--> <header id="site-header" class="fixed-top"> <div class="container"> <nav class="navbar navbar-expand-lg stroke"> <h1> <a class="navbar-brand" href="index.html"> Phot<i class="fas fa-camera"></i>genic </a> </h1> <!-- if logo is image enable this <a class="navbar-brand" href="#index.html"> <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" /> </a> --> <button class="navbar-toggler collapsed bg-gradient" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon fa icon-expand fa-bars"></span> <span class="navbar-toggler-icon fa icon-close fa-times"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mx-lg-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> </ul> </div> <!-- search button --> <div class="search-right ml-lg-3"> <div class="search-container"> <form action="/search" method="get"> <input class="search expandright" id="searchright" type="search" name="q" placeholder="Search"> <label class="button searchbutton" for="searchright"><i class="fas fa-search"></i></label> </form> </div> </div> <!-- //search button --> <!-- toggle switch for light and dark theme --> <div class="cont-ser-position"> <nav class="navigation"> <div class="theme-switch-wrapper"> <label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox"> <div class="mode-container"> <i class="gg-sun"></i> <i class="gg-moon"></i> </div> </label> </div> </nav> </div> <!-- //toggle switch for light and dark theme --> </nav> </div> </header> <!--//header--> <!-- banner section --> <div class="slider-container"> <div class="left-slide" style="top: -300vh;"> <div style="background-color: #2c9f45"> <h3 class="mt-5 mb-3">Top Expertise</h3> <h4>With experience comes trust</h4> <p class="mt-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p> <a href="about.html" class="btn btn-style mt-5">Read More</a> </div> <div style="background-color: #c5080b"> <h3 class="mt-5 mb-3">Wedding Stills</h3> <h4>creating quality photos</h4> <p class="mt-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p> <a href="about.html" class="btn btn-style mt-5">Read More</a> </div> <div style="background-color: #0386ad"> <h3 class="mt-5 mb-3">Model Photoshoot</h3> <h4>world class photography</h4> <p class="mt-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p> <a href="about.html" class="btn btn-style mt-5">Read More</a> </div> <div style="background-color: #242424"> <h3 class="mt-5 mb-3">Best Photo Studio</h3> <h4>A high quality photography</h4> <p class="mt-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p> <a href="about.html" class="btn btn-style mt-5">Read More</a> </div> </div> <div class="right-slide"> <div class="bg-image1" style="background-image: url(assets/images/banner1.jpg)"></div> <div class="bg-image2" style="background-image: url(assets/images/banner2.jpg)"></div> <div class="bg-image3" style="background-image: url(assets/images/banner3.jpg)"></div> <div class="bg-image4" style="background-image: url(assets/images/banner4.jpg)"></div> </div> <div class="action-buttons"> <button class="down-button"> <i class="fas fa-arrow-down"></i> </button> <button class="up-button"> <i class="fas fa-arrow-up"></i> </button> </div> </div> <script> const sliderContainer = document.querySelector(".slider-container"); const slideRight = document.querySelector(".right-slide"); const slideLeft = document.querySelector(".left-slide"); const upButton = document.querySelector(".up-button"); const downButton = document.querySelector(".down-button"); const slidesLength = slideRight.querySelectorAll("div").length; let activeSlideIndex = 0; slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`; const changeSlide = (direction) => { const sliderHeight = sliderContainer.clientHeight; if (direction === "up") { activeSlideIndex++; if (activeSlideIndex > slidesLength - 1) activeSlideIndex = 0; } else if (direction === "down") { activeSlideIndex--; if (activeSlideIndex < 0) activeSlideIndex = slidesLength - 1; } slideRight.style.transform = `translateY(-${ activeSlideIndex * sliderHeight }px)`; slideLeft.style.transform = `translateY(${ activeSlideIndex * sliderHeight }px)`; }; upButton.addEventListener("click", () => changeSlide("up")); downButton.addEventListener("click", () => changeSlide("down")); </script> <!-- //banner section --> <!-- gallery section --> <section class="w3l-gallery py-5" id="gallery"> <div class="container py-md-5 py-4"> <div class="title-heading-w3 text-center mx-auto mb-sm-5 mb-4" style="max-width:700px"> <h3 class="title-style">Amazing Photo Gallery</h3> <p class="lead mt-2">Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sunt in culpa qui official.</p> </div> <div class="row"> <div class="col-lg-4 col-sm-6"> <div class=" item"> <a href="assets/images/g1.jpg" data-lightbox="example-set" data-title="Project 1" class="zoom d-block"> <img class="card-img-bottom d-block" src="assets/images/g1.jpg" alt="Card image cap"> <span class="overlay__hover"></span> <span class="hover-content"> <span class="title">Portrait Photography</span> <span class="content">Quisque ut lectus, eros et, sed commodo risus.</span> </span> </a> </div> <div class="item mt-4"> <a href="assets/images/g2.jpg" data-lightbox="example-set" data-title="Project 2" class="zoom d-block"> <img class="card-img-bottom d-block" src="assets/images/g2.jpg" alt="Card image cap"> <span class="overlay__hover"></span> <span class="hover-content"> <span class="title">Wedding Photography</span> <span class="content">Quisque ut lectus, eros et, sed commodo risus.</span> </span> </a> </div> </div> <div class="col-lg-4 col-sm-6 mt-sm-0 mt-4"> <div class="item"> <a href="assets/images/g3.jpg" data-lightbox="example-set" data-title="Project 3" class="zoom d-block"> <img class="card-img-bottom d-block" src="assets/images/g3.jpg" alt="Card image cap"> <span class="overlay__hover"></span> <span class="hover-content"> <span class="title">Fashion Photography</span> <span class="content">Quisque ut lectus, eros et, sed commodo risus.</span> </span> </a> </div> </div> <div class="col-lg-4 mt-lg-0 mt-4"> <div class="row"> <div class="col-lg-12 col-sm-6 item"> <a href="assets/images/g5.jpg" data-lightbox="example-set" data-title="Project 4" class="zoom d-block"> <img class="card-img-bottom d-block" src="assets/images/g5.jpg" alt="Card image cap"> <span class="overlay__hover"></span> <span class="hover-content"> <span class="title">Model Photography</span> <span class="content">Quisque ut lectus, eros et, sed commodo risus.</span> </span> </a> </div> <div class="col-lg-12 col-sm-6 item mt-lg-4 mt-sm-0 mt-4"> <a href="assets/images/g4.jpg" data-lightbox="example-set" data-title="Project 5" class="zoom d-block"> <img class="card-img-bottom d-block" src="assets/images/g4.jpg" alt="Card image cap"> <span class="overlay__hover"></span> <span class="hover-content"> <span class="title">Photojournalism</span> <span class="content">Quisque ut lectus, eros et, sed commodo risus.</span> </span> </a> </div> </div> </div> </div> </div> </section> <!-- //gallery section --> <!-- stats --> <section class="w3-stats pb-5" id="stats"> <div class="container pb-md-5 pb-4"> <div class="row text-center pt-lg-4"> <div class="col-md-3 col-6"> <div class="counter"> <i class="far fa-smile-beam"></i> <div class="timer count-title count-number mt-3" data-to="16300" data-speed="1500"></div> <p class="count-text">Happy Customers</p> </div> </div> <div class="col-md-3 col-6"> <div class="counter"> <i class="fas fa-photo-video"></i> <div class="timer count-title count-number mt-3" data-to="36076" data-speed="1500"></div> <p class="count-text">Photo Shoots</p> </div> </div> <div class="col-md-3 col-6 mt-md-0 mt-5"> <div class="counter"> <i class="fas fa-camera-retro"></i> <div class="timer count-title count-number mt-3" data-to="25" data-speed="1500"></div> <p class="count-text">Years of Experience</p> </div> </div> <div class="col-md-3 col-6 mt-md-0 mt-5"> <div class="counter"> <i class="fas fa-medal"></i> <div class="timer count-title count-number mt-3" data-to="7630" data-speed="1500"></div> <p class="count-text">Awards Won</p> </div> </div> </div> </div> </section> <!-- //stats --> <!-- progress & faq section --> <section class="w3l-progress py-5" id="progress"> <div class="container py-md-5 py-4"> <div class="title-heading-w3 text-center mx-auto mb-sm-5 mb-4" style="max-width:700px"> <h3 class="title-style">Frequently Asked Questions</h3> <p class="lead mt-2">Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sunt in culpa qui official.</p> </div> <div class="row pt-2"> <div class="col-lg-6 w3l-faq"> <div class="faq-page"> <ul> <li> <input type="checkbox" checked> <i></i> <h2>How would you describe your photography?</h2> <p>It's really, really good. <br>Amet earum velit nobis aliquam laboriosam nihil debitis facere voluptatibus consectetur quae quasi fuga, ad corrupti libero omnis sapiente non assumenda, incidunt officiis eaque iste minima autem.</p> </li> <li> <input type="checkbox" checked> <i></i> <h2>What kind of photography equipment do you use?</h2> <p>I use the best equipment in the world.<br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates amet earum velit nobis aliquam laboriosam nihil quasi fuga, ad corrupti libero omnis sapiente non assumenda excepturi. Tempore reiciendis ipsam culpa, qui voluptates eveniet, incidunt officiis eaque iste minima autem.</p> </li> <li> <input type="checkbox" checked> <i></i> <h2>Are you a successful photographer?</h2> <p>I'm sure that by almost any measure most folks would consider me a successful photographer. <br> Sit amet consectetur adipisicing elit. Voluptates amet earum velit nobis aliquam laboriosam nihil debitis animi. Tempore reiciendis ipsam culpa, qui voluptates eveniet, incidunt officiis eaque iste minima autem.</p> </li> <li> <input type="checkbox" checked> <i></i> <h2>How much do you charge?</h2> <p>All my pricing is available online. <br>Sit amet consectetur adipisicing elit. Voluptates amet earum velit nobis aliquam laboriosam nihil debitis facere voluptatibus consectetur quae quasi fuga, ad corrupti libero omnis sapiente non assumenda excepturi aperiam iste minima autem.</p> </li> </ul> </div> </div> <div class="col-lg-6 mt-lg-0 mt-5 pl-lg-5"> <div class="progress-info info1"> <h6 class="progress-tittle">Photography <span class="">80%</span></h6> <div class="progress"> <div class="progress-bar progress-bar-striped gradient-1" role="progressbar" style="width: 80%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> </div> </div> </div> <div class="progress-info info2"> <h6 class="progress-tittle">Creativity <span class="">95%</span> </h6> <div class="progress"> <div class="progress-bar progress-bar-striped gradient-2" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> </div> </div> </div> <div class="progress-info info3"> <h6 class="progress-tittle">Retouching <span class="">60%</span></h6> <div class="progress"> <div class="progress-bar progress-bar-striped gradient-3" role="progressbar" style="width: 60%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> </div> </div> </div> <div class="progress-info info4 mb-0"> <h6 class="progress-tittle">New Stills <span class="">85%</span></h6> <div class="progress"> <div class="progress-bar progress-bar-striped gradient-4" role="progressbar" style="width: 85%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> </div> </div> </div> </div> </div> </div> </section> <!-- //progress & faq section --> <!-- testimonial section --> <section id="testimonial-area" class="pt-5"> <div class="container pt-md-5 pt-4"> <div class="title-heading-w3 text-center mx-auto mb-sm-5 mb-4" style="max-width:700px"> <h3 class="title-style">Testimonials</h3> <p class="lead mt-2">Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sunt in culpa qui official.</p> </div> <div class="testi-wrap"> <div class="client-single active position-1" data-position="position-1"> <div class="client-img"> <img src="assets/images/testi4.jpg" alt="" /> </div> <div class="client-info"> <h3>Theo Hall</h3> <p>Subtitle goes here</p> </div> <div class="client-comment"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <img src="assets/images/quote.png" alt="" /> </div> </div> <div class="client-single inactive position-2" data-position="position-2"> <div class="client-img"> <img src="assets/images/testi2.jpg" alt="" /> </div> <div class="client-info"> <h3>Olive Yew</h3> <p>Subtitle goes here</p> </div> <div class="client-comment"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <img src="assets/images/quote.png" alt="" /> </div> </div> <div class="client-single inactive position-3" data-position="position-3"> <div class="client-img"> <img src="assets/images/testi1.jpg" alt="" /> </div> <div class="client-info"> <h3>Maya Didas</h3> <p>Subtitle goes here</p> </div> <div class="client-comment"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <img src="assets/images/quote.png" alt="" /> </div> </div> <div class="client-single inactive position-4" data-position="position-4"> <div class="client-img"> <img src="assets/images/testi3.jpg" alt="" /> </div> <div class="client-info"> <h3>Brock Lee</h3> <p>Subtitle goes here</p> </div> <div class="client-comment"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <img src="assets/images/quote.png" alt="" /> </div> </div> <div class="client-single inactive position-5" data-position="position-5"> <div class="client-img"> <img src="assets/images/testi5.jpg" alt="" /> </div> <div class="client-info"> <h3>Shona Leer</h3> <p>Subtitle goes here</p> </div> <div class="client-comment"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <img src="assets/images/quote.png" alt="" /> </div> </div> <div class="client-single inactive position-6" data-position="position-6"> <div class="client-img"> <img src="assets/images/testi6.jpg" alt="" /> </div> <div class="client-info"> <h3>Dennis Lson</h3> <p>Subtitle goes here</p> </div> <div class="client-comment"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <img src="assets/images/quote.png" alt="" /> </div> </div> <div class="client-single inactive position-7" data-position="position-7"> <div class="client-img"> <img src="assets/images/testi7.jpg" alt="" /> </div> <div class="client-info"> <h3>Jenna John</h3> <p>Subtitle goes here</p> </div> <div class="client-comment"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3> <img src="assets/images/quote.png" alt="" /> </div> </div> </div> </div> </section> <!-- //testimonial section --> <!-- call section --> <section class="w3l-call-to-action-6 text-center py-5"> <div class="container py-md-4 py-3"> <div class="d-md-flex align-items-center justify-content-center"> <h3 class="title-big">Looking for <span>Quality Photography?</span></h3> <a href="contact.html" class="btn btn-style ml-md-3 mt-md-0 mt-4">Contact Us</a> </div> </div> </section> <!-- //call section --> <!-- blog section --> <section class="w3l-grids-block-5 py-5"> <div class="container py-md-5 py-4"> <div class="title-heading-w3 text-center mx-auto mb-sm-5 mb-4" style="max-width:700px"> <h3 class="title-style">Latest Blog Posts</h3> <p class="lead mt-2">Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sunt in culpa qui official.</p> </div> <div class="row justify-content-center"> <div class="col-lg-4 col-md-6"> <div class="blog-card-single"> <div class="grids5-info"> <a href="#blog"><img src="assets/images/blog1.jpg" alt="" /></a> <div class="blog-info"> <div class="d-flex align-items-center justify-content-between "> <a class="d-flex align-items-center" href="#blog" title="23k followers"> <img class="img-fluid" src="assets/images/testi2.jpg" alt="admin" style="max-width:40px"> <span class="small ml-2">Eetey Cruis</span> </a> <p class="date-text"><i class="far fa-calendar-alt mr-1"></i>April 06, 2021</p> </div> <h5 class="color-1"><a href="#blog">Photography</a></h5> <h4><a href="#blog">You Should Fall In Love With Photography</a> </h4> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sunt inc officia deserunt.</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mt-md-0 mt-5"> <div class="blog-card-single"> <div class="grids5-info"> <a href="#blog"><img src="assets/images/blog2.jpg" alt="" /></a> <div class="blog-info"> <div class="d-flex align-items-center justify-content-between "> <a class="d-flex align-items-center" href="#blog" title="23k followers"> <img class="img-fluid" src="assets/images/testi1.jpg" alt="admin" style="max-width:40px"> <span class="small ml-2">Molive Joe</span> </a> <p class="date-text"><i class="far fa-calendar-alt mr-1"></i>April 13, 2021</p> </div> <h5 class="color-2"><a href="#blog">Camera</a></h5> <h4><a href="#blog">Your Camera Manual Portrait Photography</a></h4> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sunt inc officia deserunt.</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mt-lg-0 mt-5"> <div class="blog-card-single"> <div class="grids5-info"> <a href="#blog"><img src="assets/images/blog3.jpg" alt="" /></a> <div class="blog-info"> <div class="d-flex align-items-center justify-content-between "> <a class="d-flex align-items-center" href="#blog" title="23k followers"> <img class="img-fluid" src="assets/images/testi3.jpg" alt="admin" style="max-width:40px"> <span class="small ml-2">Turne Leo </span> </a> <p class="date-text"><i class="far fa-calendar-alt mr-1"></i>April 12, 2021</p> </div> <h5 class="color-3"><a href="#blog">Photo Gallery</a></h5> <h4><a href="#blog">The Best Professional Travel Photos</a></h4> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sunt inc officia deserunt.</p> </div> </div> </div> </div> </div> </div> </section> <!-- //blog section --> <!-- footer --> <footer class="w3l-footer-29-main"> <div class="footer-29-w3l py-5"> <div class="container pt-md-5 pt-4"> <div class="w3l-footer-text-style"> <div class="footer-list-cont d-flex align-items-center justify-content-between mb-5"> <h6 class="foot-sub-title">Contact Us</h6> <div class="main-social-footer-29"> <a href="#facebook" class="facebook"><i class="fab fa-facebook-f"></i></a> <a href="#twitter" class="twitter"><i class="fab fa-twitter"></i></a> <a href="#instagram" class="instagram"><i class="fab fa-instagram"></i></a> <a href="#linkedin" class="linkedin"><i class="fab fa-linkedin-in"></i></a> </div> </div> </div> <div class="row footer-top-29 pt-lg-5 pt-sm-4"> <div class="col-lg-3 col-sm-6"> <div class="address-grid"> <h5>10001 Alleghany st, 5th Avenue, 235 Terry, <br> London.</h5> <h5 class="mt-sm-5 mt-4">Everyday: <span> 7 AM - 8 PM</span></h5> </div> </div> <div class="col-lg-3 col-sm-6 mt-sm-0 mt-4"> <div class="address-grid"> <h5>Phone</h5> <h5 class="phone-number-text mt-2"><a href="tel:+1(21) 112 7368">+1(21) 112 7368</a></h5> </div> <div class="address-grid mt-sm-5 mt-4"> <h5>E-mail</h5> <h5 class="email-cont-text mt-1"> <a href="mailto:photogenic@mail.com" class="mail">photogenic@mail.com</a></h5> </div> </div> <div class="col-lg-2 col-md-6 col-sm-5 footer-list-menu pl-lg-0 mt-lg-0 mt-sm-5 mt-4"> <div class="address-grid"> <h5 class="mb-4 pb-lg-2">Support Links</h5> <ul> <li><a href="#privacy">Privacy Policy</a></li> <li><a href="#terms"> Terms of Service</a></li> <li><a href="contact.html">Contact us</a></li> <li><a href="#support"> Support</a></li> </ul> </div> </div> <div class="address-grid col-lg-4 col-md-6 col-sm-7 mt-lg-0 mt-sm-5 mt-4 w3l-footer-16-main"> <h5>Subscribe Here</h5> <form action="#" class="subscribe d-flex mt-4 pt-lg-2 mb-4" method="post"> <input type="email" name="email" placeholder="Email Address" required=""> <button><span class="fa fa-paper-plane" aria-hidden="true"></span></button> </form> <p>Subscribe to our mailing list and get updates to your email inbox.</p> </div> </div> <!-- copyright --> <div class="w3l-copyright text-center mt-lg-5 mt-sm-4 pt-md-4 pt-3"> <p class="copy-footer-29">© 2021 Photogenic. All rights reserved. Design by <a href="https://w3layouts.com/" target="_blank"> W3layouts</a></p> </div> </div> </div> </footer> <!-- //footer --> <!-- Js scripts --> <!-- move top --> <button onclick="topFunction()" id="movetop" title="Go to top"> <span class="fas fa-level-up-alt" aria-hidden="true"></span> </button> <script> // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function () { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("movetop").style.display = "block"; } else { document.getElementById("movetop").style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> <!-- //move top --> <!-- common jquery plugin --> <script src="assets/js/jquery-3.3.1.min.js"></script> <!-- //common jquery plugin --> <!-- theme switch js (light and dark)--> <script src="assets/js/theme-change.js"></script> <!-- //theme switch js (light and dark)--> <!-- libhtbox --> <script src="assets/js/lightbox-plus-jquery.min.js"></script> <!-- libhtbox --> <!-- counter for stats --> <script src="assets/js/counter.js"></script> <!-- //counter for stats --> <!-- testimonial script --> <script> $(document).ready(function () { $('.client-single').on('click', function (event) { event.preventDefault(); var active = $(this).hasClass('active'); var parent = $(this).parents('.testi-wrap'); if (!active) { var activeBlock = parent.find('.client-single.active'); var currentPos = $(this).attr('data-position'); var newPos = activeBlock.attr('data-position'); activeBlock.removeClass('active').removeClass(newPos).addClass('inactive').addClass( currentPos); activeBlock.attr('data-position', currentPos); $(this).addClass('active').removeClass('inactive').removeClass(currentPos).addClass( newPos); $(this).attr('data-position', newPos); } }); }(jQuery)); </script> <!-- //testimonial script --> <!-- MENU-JS --> <script> $(window).on("scroll", function () { var scroll = $(window).scrollTop(); if (scroll >= 80) { $("#site-header").addClass("nav-fixed"); } else { $("#site-header").removeClass("nav-fixed"); } }); //Main navigation Active Class Add Remove $(".navbar-toggler").on("click", function () { $("header").toggleClass("active"); }); $(document).on("ready", function () { if ($(window).width() > 991) { $("header").removeClass("active"); } $(window).on("resize", function () { if ($(window).width() > 991) { $("header").removeClass("active"); } }); }); </script> <!-- //MENU-JS --> <!-- disable body scroll which navbar is in active --> <script> $(function () { $('.navbar-toggler').click(function () { $('body').toggleClass('noscroll'); }) }); </script> <!-- //disable body scroll which navbar is in active --> <!--bootstrap--> <script src="assets/js/bootstrap.min.js"></script> <!-- //bootstrap--> <!-- //Js scripts --> </body> </html>
PROCESAR
THEME
<!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Photogenic - Photo Gallery Category Bootstrap Responsive Website Template - Home : W3Layouts</title> <!-- google-fonts --> <link href="//fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet"> <link href="//fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <!-- //google-fonts --> <!-- Template CSS Style link --> <link rel="stylesheet" href="assets/css/style-starter.css">
ASIGNAR HEAD
LIMPIAR