<h1><strong>big ideas</strong>come from<em>big pencils</em></h1>
<h2>Leo Burnett</h2>
<img src="https://upload.wikimedia.org/wikipedia/en/c/cf/Our-gang-title-card.jpg" />
<img src="https://s-media-cache-ak0.pinimg.com/236x/34/bb/84/34bb8478d10070b32c72b240fc936300.jpg" alt="" />
<ul>
<li><a href="https://css-tricks.com/almanac/properties/t/text-shadow/">Text Shadow CSS-TRICKS</a></li>
<li><a href="https://tympanus.net/codrops/css_reference/text-shadow/">Text Shadow CODROPS</a></li>
<li><a href="https://css-tricks.com/examples/ShapesOfCSS/">Drawing Shapes with CSS</a></li>
<li><a href="https://css-tricks.com/pseudo-element-roundup/">Using pseudo elements CSS-TRICKS</a></li>
<li><a href="https://tympanus.net/codrops/css_reference/after/">The ::after pseudo element CODROPS</a></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Rammetto+One|Pirata+One);
body {
padding: 5%;
background-color: dimgray;
}
h1 {
font-family: 'Pirata One';
font-size: 60px;
line-height: .9;
margin-top: 50px;
text-align: center;
}
strong,
em {
font-family: 'Rammetto One';
font-size: 200%;
display: block;
letter-spacing: -5px;
text-transform: uppercase;
color: goldenrod;
text-shadow: 2px 4px 5px rgba(0, 0, 0, .2), 3px 8px 5px rgba(0, 0, 0, .2), 4px 10px 5px rgba(0, 0, 0, .2), 5px 12px 5px rgba(0, 0, 0, .2), 6px 14px 5px rgba(0, 0, 0, .2);
}
em {
font-size: 170%;
margin-top: 10px;
}
h2 {
font-style: italic;
line-height: 50px;
position: relative;
top: 30px;
width: 500px;
height: 50px;
margin: auto;
padding-left: 30px;
transform: rotate(-12deg);
color: goldenrod;
background-color: black;
}
h2::after {
position: absolute;
top: 0;
right: -80px;
width: 25px;
content: '';
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid black;
background-color: transparent;
}
img {
width: 49.5%;
margin-top: 400px;
}
ul {
padding: 20px;
background-color: white;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.