<!DOCTYPE html>
<html lang="ru">
<head>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сайт PW-клана "Белый Лис"</title>
<link rel="icon" href="img/icon.png">
</head>
<body>
<nav>
<a href="index.html">Главная</a> |
<a href="http://pw2.ru/">Главная сервера</a> |
<a href="communication.html">Связь в клане</a>
</nav>
<header class="col-11">
<h1>Добро пожаловать на сайт PW-клана "Белый Лис"!</h1>
</header>
<content class="col-9">
<div class="SiteMenu">
<p><b><i>Меню сайта</b></i></p>
</div>
<sidebar class="col-8">
<img src="img/sidebar(1).png" usemap="#sitemenu">
<map name="sitemenu">
<area shape="rect" coords="124,32,371,77" href="clan-history.html">
<area shape="rect" coords="130,113,350,142" href="about-game.html">
<area shape="rect" coords="126,178,354,211" href="active-officers.html">
<area shape="rect" coords="127,252,365,294" href="real-stories.html">
<area shape="rect" coords="127,329,358,365" href="clan-players.html">
<area shape="rect" coords="125,400,364,440" href="guides.html">
<area shape="rect" coords="125,475,362,514" href="http://lk.pw2.ru/register.php">
</sidebar>
<div class="BigImage">
<img src="img/logo(1).png" alt="logo">
<div class="col-3">
</div>
</div>
</content>
</body>
</html>* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-image:
url(img/background.jpg);
font-family: Ubuntu;
}
nav {
background-color: Goldenrod;
text-align: center;
padding: 5px;
border-radius: 1px 1px 1px 1px;
border-style: solid;
border-color: black;
}
h1 {
text-align: center;
font-family: Ubuntu;
padding: 5px;
font-size: 24pt;
}
h2 {
text-align: center;
}
.BigImage {
margin-left: 580px;
margin-top: -575px;
justify-content: space-between;
background-repeat: no-repeat;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.SiteMenu {
margin-top: 70px;
padding-left: 10px;
display: block;
margin-left: 20px;
font-size: 20pt;
position: relative;
}
sidebar {
text-align: center;
display: flex;
}
.MainText {
padding-left: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
/* For larger screen sizes */
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media screen and (min-width: 320px) {
.BigImage {
max-width: 25%;
}
}
@media screen and (min-width: 550px) {
.BigImage {
max-width: 50%;
}
}
@media screen and (min-width: 768px) {
.BigImage {
max-width: 75%;
}
}
@media screen and (min-width: 960px) {
.BigImage {
max-width: 100%;
}
}
Простой
Средний
Средний
