<html>
<head>
<meta charset="UTF-8">
<title> Церковь Благодать </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- видео фон -->
<div class="div-video-bg"></div>
<video class="video-bg" src="https://static.videezy.com/system/resources/previews/000/004/956/original/Sunray_Clouds_4K_Living_Background.mp4" autoplay muted loop ></video>
<div class="imgfon">
<img src="foto/fon1">
</div>
<div class="foto">
<img src="https://mobimg.b-cdn.net/v3/fetch/81/81e4a0142eb68f6e961ce26db3a26fd4.jpeg">
</div>
<div id="Текст">Текст</div>
<!-- Стиль кнопки О нас -->
<div class="wrapper1">
<a href="#!" class="btn1">О нас
<svg class="svg1">
<rect class="rect1" > </rect>
</svg>
</a>
</div>
<!-- Стиль кнопки ФОТО -->
<div class="wrapper2">
<a href="#!" class="btn2">Фото
<svg class="svg2">
<rect class="rect2"></rect>
</svg>
</a>
</div>
</body>
</html> @import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Marck+Script&family=Oswald:wght@300;400;500;600&display=swap');
body {
margin: 0;
box-sizing: border-box;
font-family: 'Bruno Ace SC', cursive;
font-family: 'Marck Script', cursive;
font-family: 'Oswald', sans-serif;
}
.foto {
pozition: absolute;
background-attachment: fixed;
}
/* video bg*/
.div-video-bg{
position: relative;
padding-bottom: 56.25%;
}
.video-bg {
width: 100%;
position: fixed;
z-index: -1;
top: 0;
left: 0;
}
/* надпись */
#Текст {
position: absolute;
font-size: 120px;
top: 30%;
left: 23%;
font-family: Oswald;
color: #041826;
}
}
/* Текст на главной странице */
#длятекста1 {
position: absolute;
top: 1050px;
left: 700px;
opacity: 0, 7;
}
/* Длинный текст на главной странице */
#text2 {
position: relative;
top: -450px;
left: 60px;
width: 400;
text-align: center;
}
/* логотип буква Б */
#Логотип {
position: relative;
top: 10px;
left: 5px;
}
/* vk ссылка */
.iconvk {
position: absolute;
left: 475px;
top: 500px;
display: block;
width: 80px;
height: 80px;
fill: black;
}
.iconvk:hover {
position: absolute;
left: 475px;
top: 500px;
display: block;
width: 80px;
height: 80px;
fill: blue;
}
/* Ютуб ссылка */
.youtube {
position: absolute;
left: 950px;
top: 500px;
display: block;
width: 80px;
height: 80px;
fill: black;
}
.youtube:hover {
position: absolute;
left: 950px;
top: 500px;
display: block;
width: 80px;
height: 80px;
fill: red;
}
/* Стиль кнопки О НАС*/
.wrapper1 {
width: 200px;
margin: -850px 50px auto;
}
.btn1 {
width: 170px;
display: block;
height: 50px;
line-height: 50px;
color: black;
text-decoration: none;
font-family: Comic Sans MS;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
position: relative;
}
.svg1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.rect1 {
width: 100%;
height: 100%;
fill: transparent;
stroke: #041826;
stroke-width: 5px;
stroke-dasharray: 10px 150px 20px 30px 20px 150px 20px 30px;
transition: 0.5s all;
}
.btn1:hover .rect1 {
stroke-dasharray: 200px 0 70px 0 200px 0 70px 0;
}
/*#endregion*/
/* Стиль кнопки ФОТО*/
.wrapper2 {
width: 200px;
margin: -50px 350px auto;
}
.btn2 {
width: 170px;
display: block;
height: 50px;
line-height: 50px;
color: black;
text-decoration: none;
font-family: Comic Sans MS;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
position: relative;
}
.svg2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.rect2 {
width: 100%;
height: 100%;
fill: transparent;
stroke: #041826;
stroke-width: 5px;
stroke-dasharray: 10px 150px 20px 30px 20px 150px 20px 30px;
transition: 0.5s all;
}
.btn2:hover .rect2 {
stroke-dasharray: 200px 0 70px 0 200px 0 70px 0;
}
/* #endregion */
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.