<section class="color1">
<h3 class="hex-val-1">#EAE4B2</h3>
<h2>HELLO</h2>
<h3>#00D544F</h3>
</section>
<section class="color2">
<h3 class="hex-val-1">#0D544F</h3>
<h2>WORLD</h2>
<h3>#EAE4B2</h3>
</section>
body {
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
}
.color1 {
display: flex;
width: 50%;
height: 100%;
background-color: #0d544f;
color: #eae4b2;
}
.color2 {
display: flex;
width: 50%;
height: 100%;
background-color: #eae4b2;
color: #0d544f;
}
h2 {
margin: auto;
font-family: Helvetica Neue;
font-weight: 100;
font-size: 3em;
letter-spacing: 3px;
}
h3 {
position: fixed;
font-family: Helvetica Neue;
bottom: 0;
margin: 0 0 2vh 0;
width: 50%;
text-align: center;
font-weight: 100;
}
.hex-val-1 {
top: 0;
margin: 2vh 0 0 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.