<section class="section top-section">
<div class="content-container content-theme-dark">
<div class="content-inner">
<div class="content-center">
<h1>Finest</h1>
<p>Dual Color Text Effect <a href="http://finestpixels.com/" target="_blank">by Finest Pixels</a></p>
</div>
</div>
</div>
</section>
<section class="section bottom-section">
<div class="content-container content-theme-light">
<div class="content-inner">
<div class="content-center">
<h1>Finest</h1>
<p>Dual Color Text Effect <a href="http://finestpixels.com/" target="_blank">by Finest Pixels</a></p>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css?family=Raleway:700,900');
* {
margin: 0;
padding: 0;
border: none;
}
body {
font-size: 14px;
font-family: 'Raleway', sans-serif;
}
a{
text-decoration: none;
}
/* Sections */
.section{
height: 100vh;
min-height: 500px;
position: relative;
}
/* Containers */
.content-container{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
clip: rect(auto, auto, auto, auto);
pointer-events: none;
}
.content-inner{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
padding: 0;
z-index: 99;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
-webkit-perspective: 1000;
perspective: 1000;
pointer-events: all;
}
.content-center{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* Aesthetics */
.top-section{
background: linear-gradient(135deg, #f4583a 0%,#cd1e38 100%);
}
.bottom-section{
background: #d4fef2;
}
.section h1{
font-size: 200px;
font-weight: 900;
text-transform: uppercase;
text-align: center;
}
.section p,
.section a{
font-weight: 700;
letter-spacing: 7px;
text-transform: uppercase;
text-align: center;
}
.content-theme-dark h1{
color: #E33E39;
text-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.content-theme-dark p,
.content-theme-dark a{
color: #FEA98D;
}
.content-theme-light h1{
color:#062930;
text-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.content-theme-light p,
.content-theme-light a{
color: #728E93;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.