123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Elements</title>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="description" content="AerobicsFit template project">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
- <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
- <link rel="stylesheet" type="text/css" href="styles/elements.css">
- <link rel="stylesheet" type="text/css" href="styles/elements_responsive.css">
- </head>
- <body>
- <div class="super_container">
-
- <!-- Header -->
- <header class="header">
- <div class="container">
- <div class="row">
- <div class="col">
- <div class="header_content d-flex flex-row align-items-center justify-content-start">
- <div class="logo">Aerobics<span>Fit</span></div>
- <nav class="main_nav">
- <ul class="d-flex flex-row align-items-center justify-content-start">
- <li><a href="index.html">Home</a></li>
- <li><a href="about.html">About us</a></li>
- <li><a href="services.html">Services</a></li>
- <li><a href="blog.html">News</a></li>
- <li><a href="contact.html">Contact</a></li>
- </ul>
- </nav>
- <div class="join_button ml-auto"><a href="#">Join Now!</a></div>
- <div class="social header_social">
- <ul class="d-flex flex-row align-items-center justify-content-start">
- <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
- </ul>
- </div>
- <div class="hamburger ml-auto"><i class="fa fa-bars" aria-hidden="true"></i></div>
- </div>
- </div>
- </div>
- </div>
- </header>
- <!-- Menu -->
- <div class="menu">
- <div class="menu_content d-flex flex-column align-items-center justify-content-center">
- <ul class="menu_nav_list text-center">
- <li><a href="index.html">Home</a></li>
- <li><a href="about.html">About us</a></li>
- <li><a href="services.html">Services</a></li>
- <li><a href="blog.html">News</a></li>
- <li><a href="contact.html">Contact</a></li>
- </ul>
- <div class="menu_join"><a href="#">Join Now!</a></div>
- <div class="menu_social social">
- <ul class="d-flex flex-row align-items-center justify-content-start">
- <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
- </ul>
- </div>
- </div>
- </div>
- <!-- Home -->
- <div class="home">
- <div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/elements.jpg" data-speed="0.8"></div>
- <div class="home_container">
- <div class="container">
- <div class="row">
- <div class="col">
- <div class="home_content">
- <div class="home_title">Elements</div>
- <div class="breadcrumbs">
- <ul class="d-flex flex-row align-items-center justify-content-start">
- <li><a href="index.html">Home</a></li>
- <li>Elements</li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Elements -->
- <div class="elements">
- <div class="container">
- <div class="row">
- <div class="col">
-
- <!-- Buttons -->
- <div class="buttons">
- <div class="elements_title">Buttons</div>
- <div class="buttons_container d-flex flex-row align-items-center justify-content-start flex-wrap">
- <div class="button"><a href="#">Send Message</a></div>
- <div class="button button_2"><a href="#">Send Message</a></div>
- <div class="button button_3"><a href="#">Send Message</a></div>
- </div>
- </div>
- <!-- Accordions & Tabs -->
- <div class="accordions_and_tabs">
- <div class="elements_title">Accordions & Tabs</div>
- <div class="row accordions_and_tabs_row">
-
- <!-- Accordions -->
- <div class="col-lg-6">
- <div class="accordions">
- <!-- Accordion -->
- <div class="accordion_container">
- <div class="accordion d-flex flex-row align-items-center active"><div>What's your Vision?</div></div>
- <div class="accordion_panel">
- <div>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit.</p>
- </div>
- </div>
- </div>
-
- <!-- Accordion -->
- <div class="accordion_container">
- <div class="accordion d-flex flex-row align-items-center"><div>Who are the trainers?</div></div>
- <div class="accordion_panel">
- <div>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit.</p>
- </div>
- </div>
- </div>
- <!-- Accordion -->
- <div class="accordion_container">
- <div class="accordion d-flex flex-row align-items-center"><div>How can I enroll?</div></div>
- <div class="accordion_panel">
- <div>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit.</p>
- </div>
- </div>
- </div>
- <!-- Accordion -->
- <div class="accordion_container">
- <div class="accordion d-flex flex-row align-items-center"><div>What are the offers?</div></div>
- <div class="accordion_panel">
- <div>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit.</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Tabs -->
- <div class="col-lg-6">
- <div class="tabs_container">
- <div class="tabs d-flex flex-row align-items-center justify-content-start flex-wrap">
- <div class="tab active">Vision</div>
- <div class="tab">Trainers</div>
- <div class="tab">Enroll</div>
- <div class="tab">Offers</div>
- </div>
- <div class="tab_panels">
- <div class="tab_panel active">
- <div class="tab_panel_content">
- <div class="tab_text">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit. Donec malesuada lorem.</p>
- </div>
- </div>
- </div>
- <div class="tab_panel">
- <div class="tab_panel_content">
- <div class="tab_text">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit. Donec malesuada lorem.</p>
- </div>
- </div>
- </div>
- <div class="tab_panel">
- <div class="tab_panel_content">
- <div class="tab_text">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit. Donec malesuada lorem.</p>
- </div>
- </div>
- </div>
- <div class="tab_panel">
- <div class="tab_panel_content">
- <div class="tab_text">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mal esuada lorem maximus mauris scelerisque. Sit amet, consecteturdipi scing elit. Donec malesuada lorem.</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Loaders -->
- <div class="loaders">
- <div class="elements_title">Loaders</div>
- <div class="row loaders_row">
- <!-- Loader -->
- <div class="col-xl-3 col-md-6 loader_col">
- <!-- Loader -->
- <div class="loader_container text-center" >
- <div class="loader text-center" data-perc="0.75" data-color="#f03271"></div>
- <div class="loader_content">
- <div class="loader_title">Hard Work</div>
- </div>
- </div>
- </div>
- <!-- Loader -->
- <div class="col-xl-3 col-md-6 loader_col">
- <!-- Loader -->
- <div class="loader_container text-center">
- <div class="loader text-center" data-perc="0.83" data-color="#8b7597"></div>
- <div class="loader_content">
- <div class="loader_title">Ambition</div>
- </div>
- </div>
- </div>
- <!-- Loader -->
- <div class="col-xl-3 col-md-6 loader_col">
- <!-- Loader -->
- <div class="loader_container text-center">
- <div class="loader text-center" data-perc="0.25" data-color="#e6852e"></div>
- <div class="loader_content">
- <div class="loader_title">Diet</div>
- </div>
- </div>
- </div>
- <!-- Loader -->
- <div class="col-xl-3 col-md-6 loader_col">
- <!-- Loader -->
- <div class="loader_container text-center">
- <div class="loader text-center" data-perc="0.95" data-color="#c1ca36"></div>
- <div class="loader_content">
- <div class="loader_title">Fitness</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Milestones -->
- <div class="milestones">
- <div class="elements_title">Milestones</div>
- <div class="row milestones_row">
-
- <!-- Milestone -->
- <div class="col-xl-3 col-md-6 milestone_col">
- <div class="milestone d-flex flex-row align-items-center justify-content-start">
- <div class="milestone_icon d-flex flex-column align-items-center justify-content-center"><img src="images/icon_13.svg" alt=""></div>
- <div class="milestone_content">
- <div class="milestone_counter" data-end-value="1293">0</div>
- <div class="milestone_text">Km Spinned</div>
- </div>
- </div>
- </div>
- <!-- Milestone -->
- <div class="col-xl-3 col-md-6 milestone_col">
- <div class="milestone d-flex flex-row align-items-center justify-content-start">
- <div class="milestone_icon d-flex flex-column align-items-center justify-content-center"><img src="images/icon_12.svg" alt=""></div>
- <div class="milestone_content">
- <div class="milestone_counter" data-end-value="12">0</div>
- <div class="milestone_text">Hours a Day</div>
- </div>
- </div>
- </div>
- <!-- Milestone -->
- <div class="col-xl-3 col-md-6 milestone_col">
- <div class="milestone d-flex flex-row align-items-center justify-content-start">
- <div class="milestone_icon d-flex flex-column align-items-center justify-content-center"><img src="images/icon_11.svg" alt=""></div>
- <div class="milestone_content">
- <div class="milestone_counter" data-end-value="311">0</div>
- <div class="milestone_text">Days of Diet</div>
- </div>
-
- </div>
- </div>
- <!-- Milestone -->
- <div class="col-xl-3 col-md-6 milestone_col">
- <div class="milestone d-flex flex-row align-items-center justify-content-start">
- <div class="milestone_icon d-flex flex-column align-items-center justify-content-center"><img src="images/icon_10.svg" alt=""></div>
- <div class="milestone_content">
- <div class="milestone_counter" data-end-value="2300">0</div>
- <div class="milestone_text">Km Swimmed</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Icon Boxes -->
- <div class="icon_boxes">
- <div class="elements_title">Icon Boxes</div>
- <div class="row classes_row">
-
- <!-- Class -->
- <div class="col-xl-4 col-md-6 classes_col">
- <div class="classes_item c_item_1">
- <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
- <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
- <div><img src="images/icon_1.svg" alt="https://www.flaticon.com/authors/freepik"></div>
- </div>
- <div class="classes_title">Weight Loss Class</div>
- </div>
- <div class="classes_item_text">
- <p>Lorem ipsum dolor sit amet, consectetur elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum.</p>
- </div>
- </div>
- </div>
- <!-- Class -->
- <div class="col-xl-4 col-md-6 classes_col">
- <div class="classes_item c_item_2">
- <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
- <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
- <div><img src="images/icon_2.svg" alt="https://www.flaticon.com/authors/freepik"></div>
- </div>
- <div class="classes_title">Yoga Classes</div>
- </div>
- <div class="classes_item_text">
- <p>Ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum.</p>
- </div>
- </div>
- </div>
- <!-- Class -->
- <div class="col-xl-4 col-md-6 classes_col">
- <div class="classes_item c_item_3">
- <div class="classes_title_container d-flex flex-row align-items-center justify-content-start">
- <div class="classes_icon d-flex flex-column align-items-center justify-content-center">
- <div><img src="images/icon_3.svg" alt="https://www.flaticon.com/authors/freepik"></div>
- </div>
- <div class="classes_title">Spinning Class</div>
- </div>
- <div class="classes_item_text">
- <p>Sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum.</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Footer -->
- <footer class="footer">
- <div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/footer.jpg" data-speed="0.8"></div>
- <div class="footer_overlay"></div>
- <div class="container">
- <div class="row">
- <div class="col">
- <div class="footer_content text-center d-flex flex-column align-items-center justify-content-center">
- <div class="footer_logo"><a href="#">Aerobics<span>Fit</span></a></div>
- <div class="footer_contact">
- <ul>
- <li>
- <div class="footer_contact_title">Address:</div>
- <div class="footer_contact_text">481 Creekside Lane Avila CA 93424</div>
- </li>
- <li>
- <div class="footer_contact_title">Phone:</div>
- <div class="footer_contact_text">+53 345 7953 32453</div>
- </li>
- <li>
- <div class="footer_contact_title">Email:</div>
- <div class="footer_contact_text">yourmail@gmail.com</div>
- </li>
- </ul>
- </div>
- <div class="social footer_social">
- <ul class="d-flex flex-row align-items-center justify-content-start">
- <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
- <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
- </ul>
- </div>
- <nav class="footer_nav">
- <ul class="d-flex flex-row align-items-center justify-content-start">
- <li><a href="index.html">Home</a></li>
- <li><a href="about.html">About us</a></li>
- <li><a href="services.html">Services</a></li>
- <li><a href="blog.html">News</a></li>
- <li><a href="contact.html">Contact</a></li>
- </ul>
- </nav>
- </div>
- <div class="copyright d-flex flex-row align-items-center justify-content-center">
- Copyright ©<script>document.write(new Date().getFullYear());</script> Colorlib All rights reserved | More Templates <a href="https://shop194286523.taobao.com/" target="_blank" title="狮王素材">狮王素材</a> - Collect from <a href="https://shop194286523.taobao.com/" title="狮王素材" target="_blank">狮王素材</a>v>
- </div>
- </div>
- </footer>
- </div>
- <script src="js/jquery-3.2.1.min.js"></script>
- <script src="styles/bootstrap-4.1.2/popper.js"></script>
- <script src="styles/bootstrap-4.1.2/bootstrap.min.js"></script>
- <script src="plugins/greensock/TweenMax.min.js"></script>
- <script src="plugins/greensock/TimelineMax.min.js"></script>
- <script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
- <script src="plugins/greensock/animation.gsap.min.js"></script>
- <script src="plugins/greensock/ScrollToPlugin.min.js"></script>
- <script src="plugins/easing/easing.js"></script>
- <script src="plugins/progressbar/progressbar.min.js"></script>
- <script src="plugins/parallax-js-master/parallax.min.js"></script>
- <script src="js/elements.js"></script>
- </body>
- </html>
|