Пользователь
-
Автор темы
- #1
я 100% провалю это ваше огэ поэтому мне срочно прям надо обучаться хтмл сиэсэс
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="body">
<a class="buttonCenter" href="https://youtu.be/idqeaQyFwDE"> Youtube </a>
<video playsinline autoplay muted loop id="bgvid">
<source src="media/video6.mp4" type="video/mp4">
</video>
</body>
</html>
styles.css:
[USER=57480]@import[/USER] url('https://fonts.googleapis.com/css?family=JetBrains Mono NL');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-content: center;
height: 100vh;
background-color: #050801;
font-family: 'JetBrains Mono NL', JetBrains Mono NL;
}
buttonCenter{
position: absolute; display: inline-block; overflow: hidden; margin-right: 1vw; padding: 1vw 1vw; margin: 1vw; transition: .1s;
color: #ffffff; text-transform: uppercase; font-size: 2vw; letter-spacing: 4px; font-weight: lighter;
border-color: #ffffff7e; border-width: .1vw; border-style: solid; border-radius: .5vw;
}
video {
object-fit: cover;
width: 100vw; height: 100vh;
position: fixed;
top: 0; left: 0;
filter: blur(15px);
pointer-events: none;
}
buttonCenter:hover{
background: #ffffff;
color: #050801;
box-shadow: 0 0 .1vw #ffffff7a,
0 0 2vw #ffffff7a,
0 0 2vw #ffffff7a,
0 0 2vw #ffffff7a;
-webkit-box-reflect: below -.5vw linear-gradient(transparent,#ffffff5e);
font-weight: 900;
border-width: .5vw;
}
buttonCenter:nth-child(1){
filter: hue-rotate(270deg);
}
buttonCenter:nth-child(2){
filter: hue-rotate(110deg);
}