A Pen by Juan Pablo on CodePen.
Created
January 8, 2019 12:31
-
-
Save swest/485beaf7d356ad5d252b5c4a46a62d5d to your computer and use it in GitHub Desktop.
Quote with top/bottom border
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="blockquote-wrapper"> | |
<div class="blockquote"> | |
<h1> | |
Start before you are ready | |
</h1> | |
<h4>—Steven Pressfield</h4> | |
</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
body { | |
background-color: #52ACFF; | |
background-image: -webkit-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%); | |
background-image: -moz-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%); | |
background-image: -o-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%); | |
background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%); | |
} | |
/* center the blockquote in the page */ | |
.blockquote-wrapper { | |
display: flex; | |
height: 100vh; | |
padding: 0 20px; | |
} | |
/* Blockquote main style */ | |
.blockquote { | |
position: relative; | |
font-family: 'Montserrat', sans-serif; | |
font-weight: 800; | |
color: #ffffff; | |
padding: 30px 0; | |
width: 100%; | |
max-width: 500px; | |
z-index: 1; | |
margin: 80px auto; | |
align-self: center; | |
border-top: solid 1px; | |
border-bottom: solid 1px; | |
} | |
/* Blockquote header */ | |
.blockquote h1 { | |
position: relative; | |
color: #FFFFFF; | |
font-size: 40px; | |
font-weight: 800; | |
line-height: 1; | |
margin: 0; | |
} | |
/* Blockquote right double quotes */ | |
.blockquote:after { | |
position: absolute; | |
content: "”"; | |
color: rgba(255, 255, 255, 1); | |
font-size: 10rem; | |
line-height: 0; | |
bottom: -43px; | |
right: 30px; | |
} | |
/* increase header size after 600px */ | |
@media all and (min-width: 600px) { | |
.blockquote h1 { | |
font-size: 60px; | |
} | |
} | |
/* Blockquote subheader */ | |
.blockquote h4 { | |
position: relative; | |
color: #292a2b; | |
font-size: 1.4rem; | |
font-weight: normal; | |
line-height: 1; | |
margin: 0; | |
padding-top: 20px; | |
z-index: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment