<!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/Secret Of Beauty.css"> <title>Collapsing Header Effect</title> </head> <body> <video id="video" autoplay loop <video muted> <source src="Video/timelapse.mp4" type="video/mp4"> <source src="Video/timelapse.webm" type="video/webm"> <source src="Video/timelapse.ogv" type="video/ogg"> </video> <div id="container"> <header> <h1>sadasfdasf</h1> </header> <div id="banner"> <h2></h2> </div> <div id="content"> <p>THIS IS JUST THE TEXTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p> </div> <div class="nav"> <ul class="group"> <li><a href="index.html">Home</li></a> <li><a href="#">Herbs</li></a> </div> <div class="nav2"> <ul class="group"> <li><a href="#">Locations</li></a> <li><a href="#">About</li></a> </ul> </div> </div> <footer> <p>©2015 Secret Of Beauty</p> </footer> </body> </html>
body { text-align:center; background-color:#90EE90; } header { width:2000px; height:165px; background-position: right center; position: fixed; margin-left:-90px; z-index:5000px; margin-top:27px; border:5px solid black; } #banner { width: 100%; height: 500px; position: fixed; top: 100px; } #content { width:2000px; position: relative; top: 500px; height: 1500px; background-repeat: no-repeat; } #container { z-index:509; position:fixed; background-position: right center; margin-top:-1115px; background-image: url("../Images/Secret Of Beauty.jpg"); } li { list-style: none; float:left; margin-left:40px; padding-top:10px; z-index:510; } a { text-decoration: none; padding: 20px 39.9px; border:5px solid black; color: black; z-index:510; font-size:137%; } .nav { float:right; margin-top: -1430px; position: absolute; position:fixed; margin-left: -85px; z-index:9999; } .site-nav ul{ } #video { position:relative; min-width:100%; min-height:120%; background-size:cover; z-index:-1; border:5px solid black; margin-left:-5px; } .nav2 { float:right; margin-top: -1430px; position: absolute; position:fixed; margin-left: 1450px; z-index:512; } footer{ background-color:#90EE90; position:relative; width:100%; margin-top:-4px; height:100%; font-size:200%; margin-left:-4px; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)