<img
src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
/>
<h1><span class="text blue">Build</span> for everyone</h1>
<!-- <p class="info">
The text is taken from
<a href="http://careers.google.com/" target="_blank">Google</a>'s website.
</p> -->
@import url("https://fonts.googleapis.com/css?family=Public+Sans&display=swap");
body {
margin: 0;
padding: 0;
font-family: "Public Sans", sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
img {
width: 100px;
height: 100px;
}
h1 {
font-size: 68px;
color: #747474;
span.text {
padding: 0;
padding-right: 4px;
border-right: 2px solid #747474;
animation: blink 0.75s infinite;
}
.blue {
color: #4480ff;
}
.green {
color: #4caf50;
}
.yellow {
color: #f4b400;
}
.red {
color: #f44336;
}
}
p.info {
font-size: 12px;
margin-top: 6rem;
color: #747474;
a {
text-decoration: none;
color: #4480ff;
}
}
@keyframes blink {
from {
border: none;
}
to {
border-color: 2px solid #747474;
}
}
@media screen and (max-width: 670px) {
h1 {
font-size: 40px;
}
img {
width: 75px;
height: 75px;
}
}
@media screen and (max-width: 400px) {
h1 {
font-size: 32px;
}
}
View Compiled
const words = ["Build", "Create", "Design", "Code"],
colors = ["blue", "green", "yellow", "red"],
text = document.querySelector(".text");
// Generator (iterate from 0-3)
function* generator() {
var index = 0;
while (true) {
yield index++;
if (index > 3) {
index = 0;
}
}
}
// Printing effect
function printChar(word) {
let i = 0;
text.innerHTML = "";
text.classList.add(colors[words.indexOf(word)]);
let id = setInterval(() => {
if (i >= word.length) {
deleteChar();
clearInterval(id);
} else {
text.innerHTML += word[i];
i++;
}
}, 500);
}
// Deleting effect
function deleteChar() {
let word = text.innerHTML;
let i = word.length - 1;
let id = setInterval(() => {
if (i >= 0) {
text.innerHTML = text.innerHTML.substring(0, text.innerHTML.length - 1);
i--;
} else {
text.classList.remove(colors[words.indexOf(word)]);
printChar(words[gen.next().value]);
clearInterval(id);
}
}, 300);
}
// Initializing generator
let gen = generator();
printChar(words[gen.next().value]);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.