<body>
<div id="mainframe">
<header>
<h1 id="logo">
<img src="images/Logo.svg" alt="Logo" />
<span>Logo Text</span>
</h1>
</header>
<nav id="menu">
<a href="#menwrap" title="Open Menu" id="ham">
<img class="icon" src="images/ham.svg" alt="Menu" />
</a>
<div id="menwrap">
<ul>
<li class="menit" id="current">
<a href="#" title="Home">
<img src="images/home.png" alt="Home" />
<span>Home</span>
</a>
</li>
<li class="menit" id="race">
<a href="#" title="Racing">
<img src="images/racing.png" alt="Racing" />
<span>Racing</span>
</a>
</li>
<li class="menit" id="leisure">
<a href="#" title="Racing">
<img src="images/leisure.png" alt="Leisure" />
<span>Leisure</span>
</a>
</li>
<li class="menit" id="work">
<a href="#" title="Utility Workboats">
<img src="images/work.png" alt="Utility Workboats" />
<span>Utility Workboats</span>
</a>
</li>
<li class="menit" id="cust">
<a href="#" title="Custom Builds">
<img src="images/custom.jpg" alt="Custom Builds" />
<span>Custom Builds</span>
</a>
</li>
</ul>
<a href="#" title="Close Menu" id="clomen">
<img class="icon" src="images/cross.svg" alt="Close Menu" />
</a>
</div>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<aside>
<blockquote>
<p>This is a quote from one of our satisfied customers.</p>
</blockquote>
<cite>Their Name</cite>
</aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<address>Address and contact details</address>
</footer>
</div>
</body>/* Reset Stuff*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: bottom;
line-height: 1.2;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
body {
background-color: #8af;
background-image: url(../images/back1024.jpg);
background-attachment: fixed ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
font-family: 'Trebuchet MS', sans-serif;
}
#mainframe {
width: 80%;
max-width: 900px ;
margin: 0 auto ;
margin-top: 3em;
margin-bottom: 3em;
background: rgba(255,255,255,0.6);
border-radius: 100px 30px 100px 20px;
border-radius: 10vw 3vw 10vw 2vw ;
}
#mainframe:target {
background: rgba(255,255,255,0.9);
}
header {
position: relative;
width: 100% ;
max-height: 100px ;
height: auto ;
background: #fff ;
border-top: 30px solid #d00;
border-radius: 100px 30px 0 0;
border-radius: 10vw 3vw 0 0 ;
}
#logo {
position: relative ;
top: 20%;
margin: 0 auto ;
width: 90%;
max-width: 700px ;
padding: 2%;
}
#logo img {
width: 100% ;
}
h1 span {
display: block;
height: 0;
overflow: hidden;
}
a, a:hover {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#menu {
background: #00d;
padding: 0;
padding-top: 1.5em;
width: 100%;
height: auto;
}
#menwrap {
padding: 2px;
}
#ham, #clomen {
display: none;
}
#menu ul {
display: table;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
left: 0;
text-align: center;
}
#menu ul li {
display: inline-block;
flex-grow: 1;
padding: 2px;
}
#menu ul li a {
display: inline-block;
width: 100%;
height: 100%;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
font-style: italic;
vertical-align: middle;
padding: 0.2em 0 0.2em 0;
color: #d00;
background: #fff;
background: linear-gradient(to top right, #8af, #fff 40%);
}
#menu ul li a:hover {
background: #d00;
background: linear-gradient(to top right, #700, #d00 40%);
color: #fff;
border-color: #00d #fff #fff #00d ;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
#menu ul li a:active {
background: #00d;
color: #fff;
border-color: #fff #d00 #d00 #fff ;
}
#menu ul li a img {
display: none;
}
p {
margin: 2em;
font-family: sans-serif ;
text-align: justify ;
}
footer {
background: rgba(256,256,256,0.8);
margin: 0;
padding: 0.5em;
border-bottom: 30px solid #00d ;
border-radius: 0 0 100px 20px ;
border-radius: 0 0 10vw 2vw ;
box-shadow: inset 0px -10px 0px 0px #d00 ;
}
address {
color: #00d ;
margin-left: 1em;
margin-right: 3em;
margin-bottom: 1em ;
text-align: center ;
}
aside {
float: right ;
margin: 0.5em;
width: 300px ;
height: auto;
background: #8af;
background-image: url(../images/boat1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 0;
border: 4px solid #00d ;
border-radius: 50px 0px 50px 0px ;
border-color: #00d #d00 #d00 #00d ;
}
blockquote {
display: block;
color: #fff;
margin: 0.2em;
font-family: 'Trebuchet MS', sans-serif;
font-weight: bolder ;
font-style: italic;
font-size: 1.4em;
text-shadow: 1px 1px 1px #000 ;
line-height: 1.2em;
text-align: left;
}
blockquote p {
margin: 0.5em;
}
blockquote p:before {
content: open-quote;
}
blockquote p:after {
content: close-quote;
}
cite {
display: block;
margin-left: 1em;
margin-bottom: 0.5em;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #000 ;
}
@media screen and (max-width: 650px) {
#mainframe {
width: 95% ;
}
header {
border-top: 20px solid #d00;
}
#menu{
padding: 4px;
width: auto;
}
#menwrap {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
#menwrap:target {
display: block;
}
#ham, #clomen {
display: block;
width: 50px;
height: 50px;
background: #fff;
border-radius: 5px;
}
#clomen {
position: fixed;
bottom: 0;
right: 0;
}
#ham {
position: relative;
top: 0;
left: 0;
}
#ham img, #clomen img {
position: absolute;
width: 70%;
top: 15%;
left: 15%;
}
#ham:hover, #clomen:hover {
background: #d00;
}
#ham:active, #clomen:active {
background: #00d;
}
#menu ul {
position: fixed;
width: 100%;
height: calc( 100% - 50px ) ;
top: 0;
left: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
#menu ul li{
width: 41%;
height: 41%;
margin: 2%;
background: none;
padding: 0;
overflow: hidden;
}
#menu ul li a {
display: block;
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.9);
background: linear-gradient(to top right, #acf, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.2));
border: solid 4px;
border-color: #00d #d00 #d00 #00d ;
border-radius: 20% 0;
font-size: 1.3em;
font-size: 4.8vw;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
#menu ul li a:hover {
background: linear-gradient(to top right, #700, rgba(220,0,0,0.9) 50%, rgba(255,0,0,0.2));
}
#menu ul li a img {
display: block;
margin: auto;
width: 70%;
width: 30vmin;
}
#menu ul li a span {
position: absolute;
width: 100%;
bottom: 0.4em;
left: 0;
}
#menu ul #current {
display: none;
}
p {
margin: 1em;
}
aside {
float: none;
margin: 0 auto;
max-width: 95%;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.