menu bar
HTML
<body>
<div id="everything">
<header class="mainheader">
<img src="https://www.aaasports.co.uk/images/logos/button_trampoline.jpg">
<nav><ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CURRICULUM</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul></nav>
</header><!--end header -->
</div> <!-- Closing the EVERYTHING tag -->
</body>
</html>
CSS
/* ------------------ GENERAL STYLING ------------------ */
/* adding a custom font by giving it a name for usage in the CSS file (dodge) and adding the link where it's located */
@font-face {
font-family: dodge;
src: url(fonts/DODGE.ttf);
}
@font-face {
font-family: brush;
src: url(fonts/BrushScriptStd.otf);
}
@font-face {
font-family: feenc;
src: url(fonts/FEENC___.ttf);
}
@font-face {
font-family: agency;
src: url(fonts/ufonts.com_agency-fb.ttf);
}
/* RESET RULE */
* {
margin: 0px;
padding: 0px;
}
#everything{
width: 1025px;
margin: 0 auto;
}
a {
text-decoration: none;
}
body{
background: #cacaca;
}
.body {
width: 70%;
clear: both; /* makes the container to not have floating elements on the left and right side */
}
#everything{
box-shadow:10px 40px 190px 15px #767070;
}
a:link, a:visited{
color: #442300;
}
a:hover, a:active{
color: #F3BB12;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2px 0;
float: left;
}
.mainheader{
background-image: url('images/headerslice.jpg');
background-repeat: repeat-x;
width: 1025px;
}
.mainheader nav {
height: 85px;
width: 100%;
font-family: Calibri;
font-weight: bold;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 41.55%; /* margin for Chrome */
-moz-margin-start: 41.8%; /* margin for Mozilla firefox */
}
.mainheader nav ul{
list-style:none;
margin: 0 auto;
}
.mainheader nav ul li{
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited{
color:#AB6F80;
display: block;
padding: 7px 20px;
/* Come back here to assign height */
height:71px;
line-height:71px;
}
.mainheader a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited{
background-color: #F3BB12;
text-shadow: none;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2px 0;
}
#banner img{
width: 100%;
height:240px
}