Dhaverd/ Site
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Изменение стилей для пк и мобильной версии

This commit is contained in:
Dhaverd 2022-10-20 14:03:39 +08:00
parent c93debbeeb
commit bba9072bd5
6 changed files with 76 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -4,13 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Dhaverd</title> <title>Dhaverd</title>
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" /> <link href="src/styles/style.css?v=01000035" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" /> <link rel="stylesheet" href="src/styles/styleMobile.css?v=01000035" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico"> <link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
<body id="main"> <body id="main">
<header id="header" class="default"> <header id="header" class="default index-logo">
<div class="logo-img"> <div class="logo-img">
<a href="index.html"><img class="header-img" src="src/img/dhaverd2.png"></a> <a href="index.html"><img class="header-img" src="src/img/dhaverd2.png"></a>
</div> </div>
@ -23,7 +23,7 @@
<p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p> <p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p>
<p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="main-content" id="main-content"> <section class="main-content index-main-content" id="main-content">
<h1 class="page-title">Приветствую!</h1> <h1 class="page-title">Приветствую!</h1>
<p class="content-text">Данный сайт разработан для личного использования. Здесь можно найти репозиторий Git. Также тут можно найти мои сервера Minecraft, Project Zomboid и иногда других игр. Еще у нас есть свой мессенджер MyChat</p> <p class="content-text">Данный сайт разработан для личного использования. Здесь можно найти репозиторий Git. Также тут можно найти мои сервера Minecraft, Project Zomboid и иногда других игр. Еще у нас есть свой мессенджер MyChat</p>
</section> </section>
@ -34,5 +34,4 @@
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>

7
mychat.html
View File

@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Dhaverd - MyChat</title> <title>Dhaverd - MyChat</title>
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" /> <link href="src/styles/style.css?v=01000035" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" /> <link rel="stylesheet" href="src/styles/styleMobile.css?v=01000035" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico"> <link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
@ -23,7 +23,7 @@
<p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p> <p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p>
<p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="main-content" id="main-content"> <section class="main-content mychat-main-content" id="main-content">
<h1 class="page-title">MyChat</h1> <h1 class="page-title">MyChat</h1>
<p class="content-text">Скачать MyChat Client можно здесь: <a class="text-link" target="_blank" href="https://nsoft-s.com/downloadmychat.html">ТыК</a></p> <p class="content-text">Скачать MyChat Client можно здесь: <a class="text-link" target="_blank" href="https://nsoft-s.com/downloadmychat.html">ТыК</a></p>
<p class="content-text">Также можно открыть Web-версию: <a class="text-link" target="_blank" href="http://176.114.129.4:800/chat">ТыК</a> </p> <p class="content-text">Также можно открыть Web-версию: <a class="text-link" target="_blank" href="http://176.114.129.4:800/chat">ТыК</a> </p>
@ -40,5 +40,4 @@
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>

7
servers.html
View File

@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Dhaverd - Servers</title> <title>Dhaverd - Servers</title>
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" /> <link href="src/styles/style.css?v=01000035" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" /> <link rel="stylesheet" href="src/styles/styleMobile.css?v=01000035" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico"> <link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
@ -23,7 +23,7 @@
<p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p> <p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p>
<p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="main-content" id="main-content"> <section class="main-content servers-main-content" id="main-content">
<h1 class="page-title">У нас имеются следующие сервера:</h1> <h1 class="page-title">У нас имеются следующие сервера:</h1>
<h2 class="server-name">Minecraft 1.16.1 Vanilla</h2> <h2 class="server-name">Minecraft 1.16.1 Vanilla</h2>
<h3 class="server-ips">IP: 176.114.129.4:25565</h3> <h3 class="server-ips">IP: 176.114.129.4:25565</h3>
@ -45,5 +45,4 @@
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>

64
src/styles/style.css
View File

@ -1,13 +1,11 @@
.header-img { .header-img {
max-width: 70%; max-width: 70%;
height: auto;
} }
body { body {
padding-left: 200px; padding-left: 10%;
padding-right: 200px; padding-right: 10%;
/* Или процентами? */
background-color: #575757; background-color: #575757;
} }
@ -57,12 +55,11 @@ body {
padding-left:10px; padding-left:10px;
text-align: left; text-align: left;
background-color: #424242; background-color: #424242;
height: auto;
} }
.main-content p { .main-content p {
color: #E0E0E0; color: #E0E0E0;
padding-left: 5px; padding-left: 10px;
text-indent: 5%; text-indent: 5%;
font-family: Arial; font-family: Arial;
/*font-size: 20px;*/ /*font-size: 20px;*/
@ -151,43 +148,12 @@ h2 {
border-radius: 10%; border-radius: 10%;
} }
.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: 25% 25% 25% 25%;
grid-template-areas: "one two three four";
padding-bottom: 10px;
}
.fixed nav a {
background-color: #505050;
margin-left: 5px;
margin-right: 0px;
padding-top: 3px;
margin-bottom: 10px;
}
.default { .default {
background-color: #424242; background-color: #424242;
text-align: center; text-align: center;
padding-top: 10px; padding-top: 10px;
box-shadow: 1px 1px 10px rgba(215, 77, 0, 0.5); box-shadow: 1px 1px 10px rgba(215, 77, 0, 0.5);
height: 100px; height: 110px;
} }
.minecraft-vanilla { .minecraft-vanilla {
@ -326,4 +292,24 @@ h2 {
.content-text { .content-text {
font-size: 20px; font-size: 20px;
}
.index-main-content {
height: 200px;
padding-bottom: 10px;
}
.servers-main-content {
height: 850px;
padding-bottom: 10px;
}
.mychat-main-content {
height: 450px;
padding-bottom: 10px;
}
.workout-main-content {
height: 710px;
padding-bottom: 10px;
} }

20
src/styles/styleMobile.css
View File

@ -273,4 +273,24 @@ h2 {
.content-text { .content-text {
font-size: 14px; font-size: 14px;
}
.index-main-content {
height: 200px;
padding-bottom: 10px;
}
.servers-main-content {
height: 450px;
padding-bottom: 10px;
}
.mychat-main-content {
height: 320px;
padding-bottom: 10px;
}
.workout-main-content {
height: 770px;
padding-bottom: 10px;
} }

29
workout.html
View File

@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Dhaverd</title> <title>Dhaverd</title>
<link href="src/styles/style.css?v=01000028" rel="stylesheet" media="screen" /> <link href="src/styles/style.css?v=01000035" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="src/styles/styleMobile.css?v=01000028" media="handheld,only screen and (max-device-width:480px)" /> <link rel="stylesheet" href="src/styles/styleMobile.css?v=01000035" media="handheld,only screen and (max-device-width:480px)" />
<link rel="icon" href="src/img/favicon.ico"> <link rel="icon" href="src/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
@ -23,7 +23,7 @@
<p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p> <p class="mychat"><a class="side-href" href="mychat.html">MyChat</a></p>
<p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p> <p class="workout-area"><a class="side-href" href="workout.html">Программа тренировок</a></p>
</section> </section>
<section class="main-content" id="main-content"> <section class="main-content workout-main-content" id="main-content">
<h1 class="page-title">Программа тренировок</h1> <h1 class="page-title">Программа тренировок</h1>
<table class="workout-table"> <table class="workout-table">
<tr> <tr>
@ -65,27 +65,34 @@
<td class="p-prim">8кг</td> <td class="p-prim">8кг</td>
</tr> </tr>
<tr> <tr>
<td class="exercise">Баттерфляй</td>
<td class="muscle-group">Грудь</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
<tr class="odd">
<td class="exercise">Сгибания с гантелями на бицепс</td> <td class="exercise">Сгибания с гантелями на бицепс</td>
<td class="muscle-group">Бицепсы</td> <td class="muscle-group">Бицепсы</td>
<td class="count">3x10</td> <td class="count">3x10</td>
<td class="l-prim">7кг</td> <td class="l-prim">7кг</td>
<td class="p-prim">8кг</td> <td class="p-prim">8кг</td>
</tr> </tr>
<tr class="odd"> <tr>
<td class="exercise">Нижний блок</td> <td class="exercise">Нижний блок</td>
<td class="muscle-group">Бицепсы</td> <td class="muscle-group">Бицепсы</td>
<td class="count">3x10</td> <td class="count">3x10</td>
<td class="l-prim">(?)</td> <td class="l-prim">(?)</td>
<td class="p-prim">20кг</td> <td class="p-prim">20кг</td>
</tr> </tr>
<tr> <tr class="odd">
<td class="exercise">Пресс</td> <td class="exercise">Пресс</td>
<td class="muscle-group">Пресс</td> <td class="muscle-group">Пресс</td>
<td class="count">3x10</td> <td class="count">3x10</td>
<td class="l-prim">-</td> <td class="l-prim">-</td>
<td class="p-prim">-</td> <td class="p-prim">-</td>
</tr> </tr>
<tr class="odd"> <tr>
<td class="exercise">Подъем ног в висе</td> <td class="exercise">Подъем ног в висе</td>
<td class="muscle-group">Пресс</td> <td class="muscle-group">Пресс</td>
<td class="count">3x10</td> <td class="count">3x10</td>
@ -131,13 +138,20 @@
<td class="p-prim">(?)</td> <td class="p-prim">(?)</td>
</tr> </tr>
<tr> <tr>
<td class="exercise">Обратный баттерфляй</td>
<td class="muscle-group">Плечи</td>
<td class="count">3x10</td>
<td class="l-prim">(?)</td>
<td class="p-prim">(?)</td>
</tr>
<tr class="odd">
<td class="exercise">Французский жим</td> <td class="exercise">Французский жим</td>
<td class="muscle-group">Трицепсы</td> <td class="muscle-group">Трицепсы</td>
<td class="count">3x10</td> <td class="count">3x10</td>
<td class="l-prim">(?)</td> <td class="l-prim">(?)</td>
<td class="p-prim">(?)</td> <td class="p-prim">(?)</td>
</tr> </tr>
<tr class="odd"> <tr>
<td class="exercise">Брусья</td> <td class="exercise">Брусья</td>
<td class="muscle-group">Трицепсы</td> <td class="muscle-group">Трицепсы</td>
<td class="count">3x10</td> <td class="count">3x10</td>
@ -212,5 +226,4 @@
</section> </section>
</footer> </footer>
</body> </body>
<script src="src/scripts/index.js"></script>
</html> </html>