<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<body>
<aside>
<nav>
<div class="row">
<ul class="main-nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Creative Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Get in touch</a></li>
</ul>
</div>
</nav>
</aside>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<div class="nav-trigger-container">
<label class="ion-navicon" for="nav-trigger"></label>
<a href="" class="ion-ios-email-outline"></a>
</div>
<!-- HERO BOX -->
<div class="site-wrap">
<header>
<div class="row">
<div class="hero-text-box">
<h1>Creative zest</h1>
<h2>for print & web.</h2>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper, enim in fermentum facilisis, enim sem sollicitudin leo, ut tincidunt eros dui eget felis.</p></blockquote>
<cite>Sheryn Moore » Implementation Manager » Wesleyan brand refesh</cite>
</div>
</div>
</header>
<!-- ABOUT ME -->
<section class="freelance-graphic-designer-marc-lemmon">
<div class="row">
<h2>Senior Creative Design Consultant<br/>
& UI Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non diam mollis, mollis dui nec, molestie massa. Ut consectetur tempor nunc vitae interdum. Fusce vel diam ac tortor auctor commodo non ut metus. Donec sollicitudin augue pretium, semper nisi vitae, ultrices diam. </p>
</div>
</section>
<!-- SKILLSET -->
<section class="freelance-graphic-designer-skillset">
<div class="row">
<h2>Creative Skillset</h2>
</div>
</section>
<!-- SOFTWARE & CODING-->
<section class="software-coding-skills">
<div class="row">
<h2>Software & Coding Skills</h2>
</div>
</section>
<!-- PORTFOLIO-->
<section class="freelance-graphic-designer-portfolio">
<div class="row">
<h2>Portfolio</h2>
</div>
</section>
<!-- PORTFOLIO-->
<section class="client-base">
<div class="row">
<h2>I've worked for these guys</h2>
</div>
</section>
<!-- HAPPY CLIENTS-->
<section class="graphic-design-testimonials">
<div class="row">
<h2>Happy Clients</h2>
</div>
</section>
<!-- FOOTER-->
<section class="footer">
<div class="row">
<h2>Have a look around</h2>
</div>
</section>
</div><!-- SITE-WRAP END-->
</body>
<!-- SCRIPT LINKS -->
<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js" type="text/javascript"></script>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Arial', 'helvetica', 'sans-serif';
font-size: 62.5%; /* -- This is equal to 10px -- */
font-weight: normal;
color: #454545;
text-rendering: optimizeLegibility;
}
body {
font-size: 16px; font-size: 1.6rem; /* -- 1.46em is (1.6 x the Root em measurement of 10px = 16px) -- */
margin: 0;
padding: 0;
background-color: #333333;
overflow-x: hidden;
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
img {
display: block;
margin:0;
padding: 0;
}
/* ------------------------------------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ------------------------------------------------------------------------- */
section {
width: 100%;
height: auto;
background-color: #eeeff0;
}
.row {
max-width: 100%;
margin: 0 auto;
}
/* ----- HEADINGS ----- */
h1 {
font-size: 4rem;
font-weight: 600;
}
h2 {
font-size: 3rem;
}
/* ----- PARAGRAPHS ----- */
p {
}
/* ------------------------------------------------------------------------- */
/* OFF CANVAS NAVIGATION */
/* ------------------------------------------------------------------------- */
/* ----- Container for the menu ----- */
aside {
background-color: #333333;
color: #fff;
width: -40%;
margin-right: -40%;
float: right;
position: absolute;
}
/* ----- Floating the header and all sections left ----- */
header, section {
width: 100%;
height: 100%;
float: left;
margin-left: 0;
}
/* -----Positioning the menu ----- */
.main-nav {
list-style: none;
background: #111;
width: 100%;
position: fixed;
right: 0;
top: 0;
z-index: 0;
}
/* ----- Sizing the menu ul with background color ----- */
ul.main-nav {
width: 200px;
height: 100px;
background-color: #333333;
}
/* ----- Turning the list elements into blocks for styling ----- */
ul.main-nav li {
display: block;
border-top: 1px solid #464545;
}
/* ----- Styling the anchor links with color, padding, width etc ----- */
ul.main-nav li a {
display: block;
color: #ffffff;
padding: 7px 0 7px 20px;
text-decoration: none;
font-size: 1rem;
}
/* ----- Styling the main content wrapper adding the z-index value (behind the menu) ----- */
.site-wrap {
min-width: 100%;
min-height: 100%;
background-color: #fff;
background-size: 200%;
position: relative;
top: 40px;
bottom: 100%;
right: 0;
z-index: 1;
}
/* ----- Positioning the menu trigger icon ----- */
label[for="nav-trigger"] {
bottom: 0px;
float: right;
margin-right: 20px;
z-index: 2;
width: 20px;
height: 40px;
padding-top: 5px;
cursor: pointer;
}
/* ----- ??? ----- */
.nav-trigger-container {
position: fixed;
top: 0;
right: 0;
z-index: 2;
background-color:#333333;
display:block;
height: 40px;
width: 100%;
}
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}
/* ----- Styling the nav trigger icon ----- */
.ion-navicon {
color: #ccc;
font-size: 3rem;
}
/* ----- Moving the nav trigger to the right when it is clicked ----- */
.nav-trigger:checked ~ label {
right: 220px;
}
/* ----- Moving the content wrapper to the right when menu icon is clicked ----- */
.nav-trigger:checked ~ .site-wrap {
right: 200px;
}
/* ----- Moving the content wrapper to the right when menu icon is clicked ----- */
.nav-trigger:checked ~ .nav-trigger-container {
right: 200px;
}
/* ----- Creating the smooth slide action ----- */
.nav-trigger + label, .site-wrap, .nav-trigger-container {
-webkit-transition: right 0.2s;
transition: right 0.2s;
right: 0;
}
/* ------------------------------------------------------------------------- */
/* OFF CANVAS CONTACT FORM */
/* ------------------------------------------------------------------------- */
.ion-ios-email-outline {
color: #ccc;
font-size: 3rem;
position: fixed;
bottom: 0px;
left: 20px;
z-index: 2;
width: 20px;
height: 40px;
cursor: pointer;
padding-top: 5px;
text=decoration: none;
boder: none;
}
/* ------------------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------------------- */
header {
background-color: #eeeff0;
}
/* ------------------------------------------------------------------------- */
/* OFF CANVAS - RESPONSIVE BREAKPOINTS */
/* ------------------------------------------------------------------------- */
/* Smartphones (landscape) ----------- */
@media only screen and (min-height : 200px) {
ul.main-nav li a {
padding: 10px 0 10px 20px;
font-size: 1.3rem;
}
}
@media only screen and (min-height : 300px) {
ul.main-nav li a {
padding: 15px 0 15px 20px;
font-size: 1.5rem;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.