HTML
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor....
CSS
@import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, 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: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display:...