Добавил Сайт

This commit is contained in:
orange 2023-03-10 17:36:13 +06:00
parent 59c008f16c
commit fecb04e0e4
4 changed files with 104 additions and 0 deletions

67
Header.css Normal file
View file

@ -0,0 +1,67 @@
.header {
position: fixed;
height: 32px;
width: 100%;
background: #04030f;
}
.header > img {
height: 100%;
position: relative;
margin: auto;
display: block;
padding: 4px 0px 4px 0px;
}
.header > div.link {
display: block;
position: relative;
top: -32px;
margin: auto;
width: 96px;
height: 32px;
padding: 4px 0px 4px 0px;
opacity: 0;
background: #04030f;
background-image: url(img/g5183-6.svg);
background-repeat: no-repeat;
background-size: 96px;
background-position: 50% 4px;
/* transition: opacity .3s ease, height .3s ease, top 0s ease; */
animation: checks .3s forwards;
}
.header > div.link:hover {
animation: check .3s forwards;
width: 100%;
height: 64px;
opacity: 1;
}
.header > div.link:hover > a.Discord {
display: block;
}
.header > div.link > a.Discord {
color: white;
display: none;
text-align: center;
position: relative;
top: calc(100% - 14px - (50% / 4));
font-size: 14px;
}
@keyframes check {
0% {
opacity: 0;
height: 32px;
}
100% {
opacity: 1;
height: 64px;
}
}
@keyframes checks {
0% {
opacity: 1;
height: 64px;
}
100% {
opacity: 0;
height: 64px;
}
}

20
index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="Header.css">
</head>
<body>
<div class="header">
<img src="img/g5183-6.svg" alt="Logo">
<div class="link">
<a class="Discord">Перейти в наш дискорд…</a>
</div>
</div>
<div class="elem"></div>
<script src="script.js"></script>
</body>
</html>

0
script.js Normal file
View file

17
style.css Normal file
View file

@ -0,0 +1,17 @@
@import url("https://fonts.googleapis.com/css?family=Martian+Mono");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Martian Mono", monospace;
font-size: 14pt;
}
body {
background: #24232f;
}
.elem {
width: 20px;
height: 2000px;
}