<div class="grid">
<h1 class="main-headline">
Etiam Ipsum Justo
</h1>
<h2 class="subhead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h2>
<p class="primary-text">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700');
html,body {
font-size: 16px;
margin: 0;
padding: 0;
color: lighten(black, 15%);
}
.main-headline {
font-family: 'Source Sans Pro', sans-serif;
font-size: 3rem;
line-height: 3rem;
margin: 0;
position: relative;
top: .35rem;
}
.subhead {
font-family: 'Source Sans Pro', sans-serif;
text-transform: lowercase;
font-size: 2rem;
line-height: 2rem;
margin: 0;
position: relative;
top: .25rem;
}
.primary-text {
font-family: 'Source Sans Pro', sans-serif;
font-size: .75rem;
line-height: 1rem;
margin: 0;
position: relative;
top: .25rem;
}
.grid {
padding: 1rem;
position: relative;
display: flex;
justify-content: space-around;
* {
margin-right: 2rem;
&:last-child {
margin-right: 0;
}
}
&:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: repeating-linear-gradient(
transparent,
transparent calc(1rem - 1px),
cyan calc(1rem - 1px),
cyan 1rem
);
opacity: .5;
}
}
body,
html {
display: flex;
align-items: center;
height: 100vh;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.