JSFiddle - React, Tailwind, and code Playground
by Kocsten
HTML
<a href="/" class="mydaserwqazun">
<b>ZORNER</b>компания
<div>Строение интернет сайта</div>
</a>
CSS
body {
background: #484863;
}
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
.mydaserwqazun, .mydaserwqazun:hover {
display: inline-block;
font-size: 50px;
line-height :50px;
color: #FFF;
font-family: 'Roboto Condensed', sans-serif;
text-decoration:none;
}
.mydaserwqazun b {
color: #BDE1FF;
font-size: 56px;
}
.mydaserwqazun div {
font-size: 24px;
line-height:20px;
text-align:left;
color: #FFF;
}
.mydaserwqazun:hover {
animation: blur1 1s ease-out;
}
.mydaserwqazun:hover b {
animation: blur2 1s ease-out;
}
@keyframes blur1 {
from {
text-shadow:0px 0px 10px #fff,
0px 0px 10px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 50px #fff,
0px 0px 50px #fff;
}
}
@keyframes blur2 {
from {
color: #337AB7 ;
}
}
@media (max-width:600px) {
.mydaserwqazun, .mydaserwqazun:hover {
font-size: 40px;
line-height: 40px;
}
.mydaserwqazun b {
font-size: 48px;
}
.mydaserwqazun div {
font-size: 18px;
}
}