<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./dist/style.css">
</head>
<body>
<header class="toolbar">
<div class="icons">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
<path d="M32 4c-8.837 0-16.836 3.582-22.627 9.374l-9.373-9.374v24h24l-8.971-8.97c4.344-4.343 10.343-7.030 16.971-7.030 13.254 0 24 10.745 24 24 0 7.169-3.143 13.602-8.126 18l5.292 6c6.644-5.864 10.834-14.442 10.834-24 0-17.673-14.327-32-32-32z" fill="#000000"></path>
</svg>|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
<path d="M47.199 4c-6.727 0-12.516 5.472-15.198 11.188-2.684-5.715-8.474-11.188-15.201-11.188-9.274 0-16.8 7.527-16.8 16.802 0 18.865 19.031 23.812 32.001 42.464 12.26-18.536 31.999-24.2 31.999-42.464 0-9.274-7.527-16.802-16.801-16.802z" fill="#000000"></path>
</svg>
</div>
<div>
<h6>Juan Estrada<span>Photography</span></h6>
<nav class="menu">
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</nav>
<h1>LandScape</h1>
</div>
</header>
<div class="holder">
<div class="container">
<div class="title">
</div>
<div class="content">
<div id="item">
<img src="http://2.bp.blogspot.com/-aEmJ1o-tyKc/VM-HSrCWLHI/AAAAAAAAaqc/ABoeOqyY37A/s1600/Ferrari-LaFerrari-1.jpg">
<h3>Ferrari Laferrari</h3>
</div>
</div>
<div class="aside">
<ul class="info">
<li><h4><i class="icon icon camera">Canon Powershot S95</h4></li>
<li>22.5 MM</li>
<li>f/5.6</li>
<li>1/1000</li>
<li>80</li>
</ul>
</div>
</div>
<div class="container2">
<div class="title">
</div>
<div class="content2">
<div id="item2">
<img src="http://2.bp.blogspot.com/-aEmJ1o-tyKc/VM-HSrCWLHI/AAAAAAAAaqc/ABoeOqyY37A/s1600/Ferrari-LaFerrari-1.jpg">
<h3>Ferrari Laferrari</h3>
</div>
</div>
<div class="aside2">
<ul class="info2">
<li><h4>Canon Powershot S95</h4></li>
<li>22.5 MM</li>
<li>f/5.6</li>
<li>1/1000</li>
<li>80</li>
</ul>
</div>
</div>
</div>
</body>
</html>
css
*{
box-sizing:border-box;
}
body{
background-color: rgb(36, 36, 25);
}
header{
width: 80%;
margin: auto;
}
h1{
background-color: orange;
text-align: center;
display: block;
}
h6{
display: block;
background-color: red;
}
.toolbar{
background-color: white;
display: inline-block;
}
.icons{
background-color: blue;
display: inline-block;
}
.menu{
display: inline-block;
}
a{
background-color: orange;
display: inline-block;
}
img{
display: inline-block;
width: 100%;
-webkit-filter:grayscale(100%);
filter: grayscale(100%);
}
img:hover{
transition:.5s;
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}
nav{
display: inline-block;
}
/*.title{
background-color: yellow;
background-image: url(https://webdevbuddy.files.wordpress.com/2012/06/boy-cartoon.png);
margin: auto;
border-radius: 50%;
}*/
.holder{
height: 100%;
width: 100%;
}
.container{
display: inline-block;
background-color: blue ;
max-width:80%;
height: 100%;
margin: auto;
}
.content{
display:inline-block;
width: 40%;
min-width: 600px;
background-color: yellow;
}
.aside{
display: inline-block;
background-color: green;
min-width: 200px;
position: absolute;
position-top: 0;
}
.info{
background-color: grey;
}
.container2{
background-color: red ;
max-width:80%;
height: 100%;
margin: auto;
}
.content2{
display:inline-block;
width: 40%;
min-width: 600px;
height:50%;
background-color: yellow;
}
.aside2{
display: inline-block;
background-color: green;
min-width: 200px;
height:50%;
position: absolute;
position-top: 0;
}
.info2{
background-color: grey;
}
