<div class="blockquote-wrapper">
<div class="blockquote">
<h1>
Start before you are ready
</h1>
<h4>—Steven Pressfield</h4>
</div>
</div>
body {
background-color: #52ACFF;
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.