Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>SlyFiles</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="SlyFiles upload" />
- <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
- <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
- <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --><script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
- <link rel="stylesheet" href="flexslider.css" type="text/css">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
- <script src="js/jquery.flexslider.js"></script>
- <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
- <script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/javascript">
- // Can also be used with $(document).ready()
- $(window).load(function() {
- $('.flexslider').flexslider({
- animation: "slide"
- });
- });
- </script>
- </head>
- <header>
- <div class="header">
- <div class="container">
- <div class="menu">
- <ul>
- <li class="current"><img src="img/home.png"/><span style="vertical-align: middle; margin-left: 5px;">Home</span></li>
- <li><img src="img/twitter.png"/><span style="pical-align: middle; margin-left: 5px;">Twitter</span></li>
- <li><img src="img/fb.png"/><span style="vertical-align: middle; margin-left: 5px;">Facebook</span></li>
- <li><img src="img/contact.png"/><span style="vertical-align: middle; margin-left: 5px;">Contact</li>
- </ul>
- </div>
- </div>
- </div>
- <div id="borderbottom"></div>
- </header>
- <body>
- </body>
- </html>
- THE CSS
- ----------------------------------------
- .header {
- height: 42px;
- width: 100%;
- background: #1d1d1d;
- }
- #borderbottom {
- width: 100%;
- height: 12px;
- background-image: url("../img/border.png");
- background-repeat: repeat-x;
- }
- .menu {
- margin-top: -15px;
- }
- .menu li {
- display: inline;
- margin: 10px;
- float: left;
- color: #fff;
- }
- .current {
- background-image: url("../img/current.png");
- width: 84px;
- height: 54px;
- }
- .flex-container a:active,
- .flexslider a:active,
- .flex-container a:focus,
- .flexslider a:focus {outline: none;}
- .slides,
- .flex-control-nav,
- .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
- /* FlexSlider Necessary Styles
- *********************************/
- .flexslider {margin: 0; padding: 0;}
- .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
- .flexslider .slides img {width: 100%; display: block;}
- .flex-pauseplay span {text-transform: capitalize;}
- /* Clearfix for the .slides element */
- .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
- html[xmlns] .slides {display: block;}
- * html .slides {height: 1%;}
- /* No JavaScript Fallback */
- /* If you are not using another script, such as Modernizr, make sure you
- * include js that eliminates this class on page load */
- .no-js .slides > li:first-child {display: block;}
- /* FlexSlider Default Theme
- *********************************/
- .flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
- .flex-viewport {max-height: 258px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
- .loading .flex-viewport {max-height: 300px;}
- .flexslider .slides {zoom: 1;}
- .carousel li {margin-right: 5px}
- /* Direction Nav */
- .flex-direction-nav {*height: 0;}
- .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
- .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
- .flex-direction-nav .flex-prev {left: -36px;}
- .flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
- .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
- .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
- .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
- /* Control Nav */
- .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
- .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
- .flex-control-paging li a {
- width: 11px;
- height: 11px;
- display: block;
- background: #fff;
- cursor: pointer;
- text-indent: -9999px;
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- -o-border-radius: 20px;
- border-radius: 20px;
- box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
- }
- .flex-control-paging li a:hover {
- background: #009ec3; /* Old browsers */
- background: -moz-linear-gradient(top, #009ec3 0%, #00aad9 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009ec3), color-stop(100%,#00aad9)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* IE10+ */
- background: linear-gradient(to bottom, #009ec3 0%,#00aad9 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ec3', endColorstr='#00aad9',GradientType=0 ); /* IE6-9 */
- }
- .flex-control-paging li a.flex-active {
- background: #009ec3; /* Old browsers */
- background: -moz-linear-gradient(top, #009ec3 0%, #00aad9 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009ec3), color-stop(100%,#00aad9)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* IE10+ */
- background: linear-gradient(to bottom, #009ec3 0%,#00aad9 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ec3', endColorstr='#00aad9',GradientType=0 ); /* IE6-9 */
- cursor: default;
- }
- .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
- .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
- .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
- .flex-control-thumbs img:hover {opacity: 1;}
- .flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
- @media screen and (max-width: 860px) {
- .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
- .flex-direction-nav .flex-next {opacity: 1; right: 0;}
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement