<!DOCTYPE html> <!-- Developer: Varga Developments --> <!-- Project: Fully Responsive Website With A Background Image Slider. --> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Full Width Responsive Image Slider</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.cycle2.js"></script> <style type="text/css"> html, body, img { padding: 0; margin: 0; height: 100%; width: 100%; background: url(.container); } body { font-family: "Helvetica Neue", Helvetica, Arial; } .container { height: 100%; width: 100%; overflow: hidden; z-index: 900; } .cycle-slideshow { height: 100%; width: 100%; display: block; position: relative; margin: 0 auto; } .cycle-prev, .cycle-next { font-size: 200; color: #FFF; display: block; position: absolute; top: 50%; margin-top: -16px; z-index: 9999; cursor: pointer; } .cycle-prev { left: 10%; } .cycle-next { right: 10%; } .cycle-pager { width: 100%; text-align: center; display: block; position: absolute; position: top; bottom: 20px; z-index: 9999; } .cycle-pager span { text-indent: 100%; white-space: nowrap; ; width: 12px; height: 12px; display: inline-block; border: 1px solid #FFF; border-radius: 50%; margin: 0 10px; cursor: pointer; } .cycle-pager .cycle-pager-active { background: #FFF; } button.contact-us { background-color: red; border: 2px solid blue; position: fixed; top: calc((100vh - 38px) / 2); left: calc((100vw - 120px) / 2); } button:hover { color: #fff; background: rgba(255, 255, 255, 0.2); } /*Menu CSS*/ #sidebar { background: #151718; width: 200px; height: 17%; display: block; position: absolute; left: -200px; top: 0px; transition: left 0.3s linear; z-index: 1000; } #sidebar.visible { left: 0px; transition: left 0.3s linear; } ul { margin: 0; padding: 0; } ul li { list-style: none; } ul li a { background: #1C1E1F; color: #ccc; border-bottom: 1px solid #111; display: block; width: 180px; padding: 10px; text-decoration: none; } #sidebar-btn { display: inline-block; vertical-align: middle; width: 20px; height: 150px; cursor: pointer; margin: 20px; position: absolute; top:0px; right:-60px; } #sidebar-btn span { height: 1px; background:#ffffff; margin-bottom: 5px; display: block; } #sidebar-btn span:nth-child(2) { width: 75%; } #sidebar-btn span:nth-child(3) { width: 50%; } /*Menu CSS*/ </style> </head> <body> <div id="sidebar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="servicesPage.html">Services</a></li> <li><a href="aboutPage.html">About</a></li> <li><a href="aboutPage.html">Contact</a></li> </ul> <div id="sidebar-btn"> <span></span> <span></span> <span></span> </div> </div> <!-- Buttons for email subscriptions and stuff --> <button class="contact-us">Contact Us</button> <!-- Full Width Responsive Slider --> <div class="container"> <div class="cycle-slideshow">s <span class="cycle-prev">〈</span> <span class="cycle-next">〉</span> <span class="cycle-pager"></span> <img src="images/wp5.jpg"> <img src="images/wp6.jpg"> <img src="images/wp7.jpg"> </div> <!-- Full Width Responsive Slider --> </div> <script type="text/javascript"> $(document).ready(function(){ $('#sidebar-btn').click(function(){ $('#sidebar').toggleClass('visible'); }); }); </script> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)