<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Signika:wght@400&display=swap" rel="stylesheet">
<body>
<input type="checkbox" id="btn"/>
<div id="main">
<h1 id="first-line">I'M</h1>
<h1 id="second-line">BR<span id="mid">OK</span>EN</h1>
</div>
</body>
* {
top: 0;
left: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
place-items: center;
}
#main {
width: 100vw;
height: 100vh;
background: #000;
margin-top: -15vw;
padding-top: 20vw;
}
#btn:checked ~ #main {
transition: .5s all;
filter: invert(1) hue-rotate(210deg);
}
#btn {
z-index: 3;
width: 10vw;
height: 4vw;
-webkit-appearance: none;
position: absolute;
outline: none;
border: none;
cursor: pointer;
left: 85vw;
top: 5vw;
border-radius: 2.5vw;
background: white;
}
input[type="checkbox"]:before {
content: "";
position: absolute;
width: 3vw;
height: 3vw;
border-radius: 5vw;
background: black;
left: .5vw;
top: .5vw;
transition: .5s;
}
input:checked[type="checkbox"] {
box-shadow: inset 0 0 100px rgba(0,0,0,1);
}
input:checked[type="checkbox"]:before {
left: 6.5vw;
background: white;
}
h1 {
text-align: center;
}
#first-line {
font-size: 6.5vw;
font-family: 'Signika', sans-serif;
margin-top: 10vw;
margin-left: 2vw;
color: #457b9d;
}
#second-line {
font-size: 10vw;
font-family: 'Poppins', sans-serif;
margin-top: -5vw;
color: rgba(168, 218, 220, .2);
}
#mid {
color: rgba(168, 218, 220, 1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.