HTML CSS AND JAVASCRIPT in a nutshellThe code needs to be optimized so that it fits into a website above a contact form and text should be in the center without disturbing the wordpess website layout .Please help
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: helvetica, arial, sans-serif;
font-size: 100px;
font-weight: bold;
letter-spacing: -0.4rem;
}
.break {
display: flex;
flex-wrap: wrap;
}
.mask {
transform: rotate(0deg);
overflow: hidden;
position: relative;
white-space: nowrap;
animation: wobble 7s infinite;
}
@keyframes wobble {
35% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
.mask div {
position: relative;
}
nav ul {
display: flex;
}
nav li {
display: block;
}
nav a {
padding: 20px;
text-decoration: none;
background-color: lemonchiffon;
margin-right: 1px;
}
</style>
</head>
<body>
<div class="break">
GET IN TOUCH
</div>
<script>
const col_count = 20;
let txt = document.querySelector(".break"),
w = txt.getBoundingClientRect().width,
h = txt.getBoundingClientRect().height,
chunk_size = Math.ceil(w/col_count),
row_count = Math.ceil(h/chunk_size);
txt.style.width = chunk_size*col_count+"px";
let html = `<div class='mask'><div>${txt.innerHTML}</div></div>`;
txt.innerHTML = "";
for(let i=0; i<row_count; i++) {
for(let j=0; j<col_count; j++) {
txt.innerHTML += html;
let index = j+i*col_count;
}
}
let masks = document.querySelectorAll(".mask");
let inMasks = document.querySelectorAll(".mask div");
for(let i=0; i<row_count; i++) {
for(let j=0; j<col_count; j++) {
let index = j+i*col_count;
masks[index].style.width = chunk_size+"px";
masks[index].style.height = chunk_size+"px";
masks[index].style.overflow = "hidden";
masks[index].style.animationDelay = `${index*20}ms`;
inMasks[index].style.left = -j*(chunk_size) + "px";
inMasks[index].style.top = -i*(chunk_size) + "px";
}
}
</script>
</body>
</html>
Код был взят по ссылке - https://codepen.io/punishyourmachine/pen/pQZMZa?page=4
Требования ~
1. нужно быть в центре2. код должен быть вставлен над формой обратной связи, чтобы продемонстрировать его.3. Пожалуйста, измените цвет4. Вы можете исправить код с помощью этого или перейдя в редактор кода.