A Pen by Tyler Thompson on CodePen.
Created
July 4, 2016 16:30
-
-
Save TylerThompson/2396cc73620057a0e65cce75123f8bb9 to your computer and use it in GitHub Desktop.
VjWWpo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="intro"> | |
<div class="intro-text"> | |
<h3>Make 2016 the year you do something about your situation. Take control, become a dev!</h3> | |
<span>Study these kick-ass electives!</span> | |
</div> | |
<div class="intro-pills"> | |
<span>Search Engine Optimization</span> | |
<span>Logo Design & Fontography</span> | |
<span>Database Architecture</span> | |
<span>Gulp & Wetpack</span> | |
<span>Test Driven Development</span> | |
<span>Functional Programming</span> | |
<span>Project Management</span> | |
<span>Shell Scripting</span> | |
<span>Devops & AWS</span> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.intro { | |
position: relative; | |
display: block; | |
width: 100%; | |
height: 50%; | |
padding: 10px; | |
background: lightblue; | |
} | |
.intro-text { | |
display: block; | |
width: 100%; | |
max-width: 930px; | |
text-align: center; | |
color: #333333; | |
padding: 0 0 25px 0; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.intro-text > h3 { | |
font-size: 2.5em; | |
text-transform: uppercase; | |
} | |
.intro-text > h3::after { | |
content: '_______'; | |
display: block; | |
text-align: center; | |
font-size: 16px; | |
margin-top: 10px; | |
margin-bottom: -7px; | |
} | |
.intro-text > span { | |
font-size: 22px; | |
text-transform: capitalize; | |
} | |
.intro-pills { | |
display: block; | |
width: 100%; | |
max-width: 930px; | |
margin-left: auto; | |
margin-right: auto; | |
padding: 4px; | |
text-align: center; | |
padding-bottom: 15px; | |
} | |
.intro > div.intro-pills > span { | |
display: inline-block; | |
flex-grow: 0; | |
width: auto; | |
font-size: 12px; | |
background: #FF2723; | |
padding: 8px 5px; | |
white-space: nowrap; | |
margin: 4px; | |
border-radius: 5px; | |
color: white; | |
outline: none; | |
border: 1px solid darkred | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment