first-commit

This commit is contained in:
Dhaverd 2022-10-12 09:44:22 +08:00
commit bd577d44b1
9 changed files with 341 additions and 0 deletions

42
index.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Dhaverd</title>
<link href="src/styles/style.css" rel="stylesheet">
<link rel="icon" href="src/img/D.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="src/scripts/header.js"></script>
</head>
<body>
<header id="header" class="default">
<div>
<a href="index.html"><img class="header-img" src="src/img/dhaverd.png"></a>
</div>
<nav class="header-nav">
<p>
<a class="one" href="index.html">Главная </a>
<a class="two" href="http:\\176.114.129.4:3000">Gitea </a>
<a class="three" href="servers.html">Сервера</a>
</p>
</nav>
</header>
<main>
<section class="side-bar">
<p><a href="index.html">Главная</a></p>
<p><a href="http:\\176.114.129.4:3000">Gitea</a></p>
<p><a href="servers.html">Сервера</a></p>
</section>
<section class="clay"> </section>
<section class="main-content">
<p><h1>Приветствую!</h1></p>
<p>Данный сайт разработан для личного использования. Здесь можно найти мой личный репозиторий Git, в который я иногда выкладываю проги написаные по фану. Также тут можно найти мои сервера Minecraft, Insurgency и других игр.</p>
</section>
</main>
<footer>
<section>
<p>© Dhaverd 2022</p>
</section>
</footer>
</body>
</html>

55
servers.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Dhaverd - Servers</title>
<link href="src/styles/style.css" rel="stylesheet">
<link rel="icon" href="src/img/D.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="src/scripts/header.js"></script>
</head>
<body>
<header id="header" class="default">
<div>
<a href="index.html"><img class="header-img" src="src/img/dhaverd.png"></a>
</div>
<nav class="header-nav">
<p>
<a class="one" href="index.html">Главная </a>
<a class="two" href="http:\\176.114.129.4:3000">Gitea </a>
<a class="three" href="servers.html">Сервера</a>
</p>
</nav>
</header>
<main id="#main">
<section class="side-bar">
<p><a href="index.html">Главная</a></p>
<p><a href="http://176.114.129.4:3000">Gitea</a></p>
<p><a href="servers.html">Сервера</a></p>
</section>
<section class="clay"> </section>
<section class="main-content">
<p><h1>У нас имеются следующие сервера:</h1></p>
<p><h2>Minecraft 1.16.1 Vanilla</h2></p>
<p><h3>IP: 176.114.129.4:25565</h3></p>
<p style="text-align: center;">Просто ванильный сервер где можно строить разные построички</p>
<p style="text-align: center;"><img class="minecraft-vanilla" src="src/img/minecraft_vanilla.jpg"></p>
<p><h2>Minecraft 1.6.4 RPG</h2></p>
<p><h3>IP: 176.114.129.4:25565</h3></p>
<p style="text-align: center;">RPG сервер с магией и всем таким, содержит достаточно модов на магию, монстров и т.п.</p>
<p style="text-align: center;"><img class="minecraft-vanilla" src="src/img/minecraft_rpg.jpg"></p>
<p><h2>Insurgency Hardore COOP</h2></p>
<p><h3>IP: 176.114.129.4:27015</h3></p>
<p style="text-align: center;">Название говорит само за себя - это хардкорный сервер Insurgency с кооперативным режимом игры</p>
<section class="image-content">
<p><img class="insurgency" src="src/img/insurgency.jpg"></p>
</section>
</section>
</main>
<footer>
<section>
<p>© Dhaverd 2022</p>
</section>
</footer>
</body>
</html>

BIN
src/img/D.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/img/Dhaverd.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
src/img/insurgency.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 425 KiB

BIN
src/img/minecraft_rpg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

18
src/scripts/header.js Normal file
View File

@ -0,0 +1,18 @@
$(document).ready(function(){
var $menu = $("#header");
let header = $('#header');
let hederHeight = header.height();
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
$menu.removeClass("default").addClass("fixed");
$('.main-content').css({
'paddingTop': hederHeight+'px'
});
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.removeClass("fixed").addClass("default");
$('.main-content').css({
'paddingTop': 0
});
}
});//scroll
});

226
src/styles/style.css Normal file
View File

@ -0,0 +1,226 @@
.header-img {
max-width: 50%;
height: auto;
}
/*
header {
background-color: #424242;
text-align: center;
padding-top: 10px;
box-shadow: 1px 1px 10px rgba(215, 77, 0, 0.5);
}
*/
body {
background-color: #575757;
}
.side-bar {
grid-area: side;
background-color: #424242;
height: 200px;
}
.side-bar p {
color: #E0E0E0;
text-align: left;
padding-left:25px;
font-family: Arial;
font-size: 20px;
}
.main-content {
padding-left:5px;
grid-area: main-content;
text-align: left;
background-color: #424242;
}
.main-content p {
color: #E0E0E0;
padding-left: 5px;
text-indent: 5%;
font-family: Arial;
font-size: 20px;
line-height: 150%;
}
.main-content ol {
color: #609A21;
text-indent: 5%;
font-family: Arial;
font-size: 20px;
line-height: 150%;
}
.main-content ul {
color: #E0E0E0;
}
.main-content del {
color: rgb(215, 77, 0);
}
.clay {
grid-area: clay;
}
main {
padding-top: 10px;
display: grid;
grid-template-columns: 15% 1% 84%;
grid-template-areas: "side clay main-content";
height: auto;
margin-bottom: 50px;
}
footer {
background-color: #424242;
position: fixed;
bottom: 0;
left: 0;
width:100%;
height: 7%;
}
footer p {
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #E0E0E0;
font-family: Arial;
font-size: 15px;
}
h1 {
text-align: center;
color: #609A21;
font-family: Arial;
font-size: 25px;
}
a {
font-style: normal;
color: #E0E0E0;
font-family: Arial;
font-size: 20px;
text-decoration: none;
transition: 0.2s linear;
}
a:hover {
color: #D74D00;
}
h2 {
text-align: center;
color: #E0E0E0;
font-family: Arial;
font-size: 20px;
}
h3 {
text-align: center;
color: #E0E0E0;
font-family: Arial;
font-size: 20px;
}
.insurgency {
width: 50%;
}
.image-content {
text-align: center;
}
.image-content img {
border-radius: 10%;
}
.header-nav p {
visibility: hidden;
width: 100%;
display: grid;
grid-template-columns: 25% 25% 25%;
grid-template-areas: "one two three four";
padding-bottom: 10px;
}
.header-nav a {
border: 1px;
border-color: #FFFFFF;
background-color: #505050;
margin-left: 5px;
margin-right: 0px;
padding-top: 3px;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
.fixed {
position: fixed;
bottom: 1;
left: 0;
right: 0;
top: 0;
width:100%;
height: 17%;
background-color: #424242;
text-align: center;
padding-top: 10px;
box-shadow: 1px 1px 10px rgba(215, 77, 0, 0.5);
}
.fixed nav p {
visibility: visible;
width: 100%;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-areas: "one two three";
padding-bottom: 10px;
}
.fixed nav a {
background-color: #505050;
margin-left: 5px;
margin-right: 0px;
padding-top: 3px;
margin-bottom: 10px;
}
.default {
background-color: #424242;
text-align: center;
padding-top: 10px;
box-shadow: 1px 1px 10px rgba(215, 77, 0, 0.5);
height: 100px;
}
.minecraft-vanilla {
width: 50%;
border-radius: 10%;
}
.fixed nav a:hover {
color: #E0E0E0;
background-color: #609A21;
}
.default nav a:hover {
color: #E0E0E0;
background-color: #609A21;
}