Marie Designs

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a name="top"></a>
<title>Marie Designs</title>

<style>

body {
	margin:0px;
	height:100%;
	width:100%;
	background: url(rockywall.png);
	font-family: 'Lato', sans-serif;
	color: #000000;
	font-size:10px;
	word-wrap:break-word;
	overflow:scroll;
	overflow-x:hidden;
}
a {
	color:#000000;
	-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;
}
a:hover {
	color:#90D4B7;
	-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;
}
h1 {
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:.9vw;
}
h2{
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:.7vw;
}
p {
	font-style:italic;
	font-size:.7vw;
}
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width:90%;
	left:100%;
	right:100%;
}

th {
    width: px;
    vertical-align: center;
}
#logo img {
	position:absolute;
	background:#;
	width:7%;
	padding:15px 25px;
	z-index:9;
}
#header {
	position:absolute;
	padding:10px;
	width:100%;
	height:15%;
	background-color:#FFFFFF;
	text-align:right;
}
ul#navlinks li {
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:.9vw;
	padding: 20px 40px 0px 0px;
	display:inline-block;
}
#bottombar {
	position:absolute;
	background:#ffffff;
	border-top:1px solid #D3D3D3;
	width:100%;
	height:auto;
	padding:20px;
	bottom:4%;
}
ul#social li {
	position:relative;
	padding: 0px 10px 0px 0px;
	display:inline-block;
	vertical-align:middle;
}
ul#totop li {
	position:relative;
	font-size:.6vw;
	padding: 20px 20px 0px 0px;
	display:inline-block;
	vertical-align:middle;
	left:85%;
}
#leftcontent {
	position:absolute;
	width:10%;
	height:auto;
	left: 115px;
	top:72%;
	background:#ADADAD;
}
#rightcontent {
	position:relative;
	width:200px;
	height:auto;
}
#footer {
	position:absolute;
	width:100%;
	bottom:0px;
	padding:15px;
	background-color:#000000;
	color:#ffffff;
	text-align:center;
}
.subtitle {
	font-style:italic;
	letter-spacing:.5px;
	font-size:.7vw;
	padding-right:40px;
}
.banner {
	position:absolute;
	top:17%;
	width:100%;
	height:50%;
	background-image:url(1_v3.jpg);
	background-size:100% 125%;
	background-color:#DCDCDC;
}
.texture1 {
	position:absolute;
	top:3%;
	width:100%;
	height:3%;
	opacity:0.7;
	background-color:#ffffff;
}
.texture2 {
	position:absolute;
	bottom:18%;
	width:100%;
	height:3%;
	opacity:0.7;
	background-color:#ffffff;
}
.texture3 {
	position:absolute;
	bottom:0%;
	width:100%;
	height:11%;
	opacity:0.7;
	padding-top:1%;
	background-color:#ffffff;
	color:#000000;
	font-weight:bold;
	font-style:italic;
	font-size:1.5vw;
	text-align:center;
}
</style>
</head>

<body>
<div id="logo">
	<a href="index.html"><img src="logo.png" alt="logo"/></a>
</div>
<div id="header">
	<ul id="navlinks">
    	<li>Home </li>
   		<li>About</li>
    	<li>Portfolio</li>
    	<li>Contact</li>
    </ul>
    <br>
    <div class="subtitle">
    	Creativity is contageous, pass it on
    </div>
</div>
<div class="banner">
  <div class="texture1">
    </div>
    <div class="texture2">
    </div>
  <div class="texture3">
    	Welcome to my wonderful world.
    </div>
</div>
<div id="leftcontent">
	<h1>Hello!</h1>
	<p>I'm Annika Kirvan, a freelance graphic designer from Wudinna South Australia.<br><br>
I'm always on the look out for my next design adventure. If you're interested in working together, would like to learn more about me or have any questions, send me an email at hello@marie.com.au or fill out the form on my contact page.</p>
</div>
<div id="bottombar">
  <ul id="social">
   	<li><i class="fa fa-facebook fa-2x"></i> </li>
	<li><i class="fa fa-twitter fa-2x"></i></li>
   	<li><i class="fa fa-google-plus fa-2x"></i></li>
   	<li><i class="fa fa-instagram fa-2x"></i></li>
        <li><i class="fa fa-behance fa-2x"></i></li>
        &emsp;&emsp;
    <li><h2>Social</h2></li>
  </ul>
  <ul id="totop">
    	<li><h2>Back to top</h2></li>
   		<a href='#top'>
        	<li><i class="fa fa-angle-up fa-3x" ></i></li>
    	</a>
  </ul>
</div>
<div id="footer">
	Web Design © Marie 2016 | Privacy Policy | Terms & Conditions
</div>
</body>
</html>