Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 12, 2014 20:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/4538f92f51bbb303f930 to your computer and use it in GitHub Desktop.
Save anonymous/4538f92f51bbb303f930 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Anonasaurus Rex.
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="userLogin">Hello,
Maverik Employee
<a href="/logout.php">LOG OUT</a>
</div>
</div>
<div id="user_logo">user logo
</div>
<div id="iconnav">
<ul>
<li id="iconnav1" class="iconnavbutton"><a href="../home.php"><span class="hidelink"></span> </a>
</li>
<li id="iconnav2" class="iconnavbutton"><a href="../reportsHome.php"><span class="hidelink"></span> </a>
</li>
<li id="iconnav3" class="iconnavbutton"><a href="../manageFleetHome.php"><span class="hidelink"></span> </a>
</li>
<li id="iconnav4" class="iconnavbutton"><a href="../setups/userSetup.php"><span class="hidelink"></span> </a>
</li>
<li id="iconnav5" class="iconnavbutton"><a href="../accountSettingsHome.php"><span class="hidelink"></span> </a>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="bgdiv">
<div class="whitebg">
<div id="expandertop-content">expander top nav
</div>
<div id="content">content
</div>
</div>
</div><!-- End BG div -->
</div>
</body>
</html>
Raw
style.css
@charset "UTF-8";
/* CSS Document */
body {
margin: 0;
}
html {
background-image: url(../images/fleetbg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
#container {
min-width:1024px;
max-width:1160px;
width:90%;
margin:0 auto;
position:relative;
}
.bgdiv {
position:absolute;
top:330px;
display:block;
width:100%;
background-image: url(../images/metal_black.png);
background-repeat:repeat;
border-radius:5px;
margin-top:0px;
padding-top:20px;
padding-bottom:20px;
z-index:-1;
}
.whitebg {
display:block;
border-radius:3px;
background-color:#FFF;
width:95%;
padding:10px;
margin:0 auto;
position:relative;
}
#header {
background-image: url(../images/header.png);
background-repeat:no-repeat;
background-position:center;
display:block;
height:164px;
position:relative;
}
#userLogin {
float: right;
font-size: 14px;
font-style: italic;
height: 20px;
margin-right: 15%;
margin-top: 72px;
text-align: right;
width: 250px;
}
#expandertop-content {
width:100%;
background-image: url(../images/metal1.png);
background-repeat:repeat;
height:35px;
margin-top:115px;
}
#user_logo {
display:block;
background-color:#093;
width: 280px;
height:100px;
margin: auto;
z-index:5;
}
#iconnav {
background-color: #F66;
height: 184px;
margin: 0 auto;
width: 840px;
display:block;
}
#iconnav li {
padding:0;}
#container #iconnav ul li a {
display: block;
height: 184px;
width: 168px;
float: left;
list-style-type: none;
}
#container #iconnav ul li a:hover {
background-position: 0px -189px;
}
#container #iconnav ul li {
list-style-type: none;
display: inline;
}
#container #iconnav ul #iconnav1 a {
background-image: url(../images/icon1.png);
background-color:#000;
}
#container #iconnav ul #iconnav2 a {
background-color:#693;
background-image: url(../images/icon2.png);
}
#container #iconnav ul #iconnav3 a {
background-image: url(../images/icon3.png);
background-color:#643;
}
#container #iconnav ul #iconnav4 a {
background-image: url(../images/icon4.png);
background-color:#293;
}
#container #iconnav ul #iconnav5 a {
background-image: url(../images/icon5.png);
background-color:#993;
}
#content {
background-image: url(../images/lite_metal.png);
background-repeat:repeat-x;
width:100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
min-height:350px;
height:auto !important;
height:350px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment