Тема: Верстаем сайт 18 Независимого Баттла
Показать сообщение отдельно
Проект Разгром
в Бане
Сообщения: 27,650
Регистрация: 05.06.2008
Откуда: под андервотом
Старый пост, нажмите что бы добавить к себе блог 23 мая 2022, 19:45
Домашняя страница Отправить сообщение через twitter для Проект Разгром
   #6 (ПС)
лого бродячие делали
тормозните денчика с него спросите

Добавлено через 27 минут 5 секунд
ебаааааааать мы пол года не могли до этого додуматься



Добавлено через 8 часов 52 минуты 18 секунд
ебать копать верхнее меню сверстано, иконочки и текст кнопачек меняется при нажатии/наведении



ееееееееее бой

HTML
-
<!DOCTYPE html>
<html class="page" lang="ru">

<head>
<meta charset="utf-8">
<title>18 Независимый Баттл Hip-Hop.Ru</title>
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body class="page-body">

<header class="main-header">
<nav class="main-navigation">
<button class="button header-big-button help-button">поддержать проект</button>
<ul class="header-menu">
<li class="button header-button specification-button"><a href="#">
<svg width="17" height="20" viewBox="0 0 17 20" fill="#01AE7E" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 20H3.7C0.9 20 0 17.4 0 16V3.2C0.1 1.9 1.1 0 3.8 0H13.4C14.9 0 15.7 0.6 16.2 1C17 1.9 17 2.9 17 3.2V16.1C17 16.2 17 17.9 15.9 19.1C15.3 19.7 14.4 20 13.5 20ZM3.8 2.5C3 2.5 2.6 2.7 2.6 3.3V16C2.6 16.1 2.7 17.5 3.7 17.5H13.4C13.8 17.5 13.9 17.4 14 17.3C14.3 17 14.4 16.4 14.4 16.1V3.1C14.4 2.7 14 2.5 13.3 2.5H3.8V2.5Z" fill="current"/>
<path d="M11.0004 4.80039H6.20039C5.80039 4.80039 5.40039 4.50039 5.40039 4.10039C5.40039 3.70039 5.70039 3.40039 6.20039 3.40039H11.0004C11.4004 3.40039 11.8004 3.70039 11.8004 4.10039C11.7004 4.50039 11.4004 4.80039 11.0004 4.80039Z" fill="current"/>
<path d="M12.1996 7.5H4.89961C4.49961 7.5 4.09961 7.2 4.09961 6.8C4.09961 6.4 4.49961 6 4.89961 6H12.1996C12.5996 6 12.9996 6.4 12.9996 6.8C12.9996 7.2 12.5996 7.5 12.1996 7.5Z" fill="current"/>
<path d="M12.1996 10.3004H4.89961C4.49961 10.3004 4.09961 10.0004 4.09961 9.60039C4.09961 9.20039 4.39961 8.90039 4.89961 8.90039H12.1996C12.5996 8.90039 12.9996 9.20039 12.9996 9.60039C12.9996 10.0004 12.5996 10.3004 12.1996 10.3004Z" fill="current"/>
<path d="M12.1996 12.9996H4.89961C4.49961 12.9996 4.09961 12.6996 4.09961 12.2996C4.09961 11.8996 4.39961 11.5996 4.89961 11.5996H12.1996C12.5996 11.5996 12.9996 11.8996 12.9996 12.2996C12.9996 12.6996 12.5996 12.9996 12.1996 12.9996Z" fill="current"/>
<path d="M12.1996 15.8004H4.89961C4.49961 15.8004 4.09961 15.5004 4.09961 15.1004C4.09961 14.7004 4.39961 14.4004 4.89961 14.4004H12.1996C12.5996 14.4004 12.9996 14.7004 12.9996 15.1004C12.9996 15.5004 12.5996 15.8004 12.1996 15.8004Z" fill="current"/>
</svg>
<span class="header-button-text">Правила</span></a></li>
<li class="button header-button raters-button"><a href="#">
<svg width="22" height="21" viewBox="0 0 22 21" fill="#01AE7E" xmlns="http://www.w3.org/2000/svg">
<path d="M21.3 5.69922L11.6 1.09922C11.2 0.899219 10.8 0.899219 10.5 1.09922L0.7 5.79922C0.3 5.99922 0 6.49922 0 6.99922C0 7.49922 0.3 7.89922 0.7 8.09922L4.9 10.0992V16.3992C4.9 17.9992 6.2 20.9992 11.1 20.9992C15.8 20.9992 17.3 17.9992 17.4 16.3992V16.2992L17.2 9.99922L18.1 9.59922V13.4992C18.1 14.1992 18.7 14.7992 19.4 14.7992C20.1 14.7992 20.7 14.1992 20.7 13.4992V8.29922L21.3 7.99922C21.7 7.79922 22 7.39922 22 6.89922C22 6.39922 21.7 5.99922 21.3 5.69922ZM14.8 16.2992C14.7 16.6992 14.3 18.4992 11 18.4992C7.6 18.4992 7.4 16.7992 7.4 16.4992V11.3992L10.5 12.8992C10.7 12.9992 10.9 12.9992 11.1 12.9992C11.3 12.9992 11.5 12.9992 11.7 12.8992L14.8 11.3992V16.2992ZM11.1 10.1992L4.2 6.99922L11 3.69922L17.7 6.89922L11.1 10.1992Z" fill="current"/>
</svg>
<span class="header-button-text">Судьи</span></a></li>
<li class="button header-button prizes-button"><a href="#">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#01AE7E" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3004 17.4004H5.70039C5.00039 17.4004 4.40039 18.0004 4.40039 18.7004C4.40039 19.4004 5.00039 20.0004 5.70039 20.0004H14.3004C15.0004 20.0004 15.6004 19.4004 15.6004 18.7004C15.6004 18.0004 15.0004 17.4004 14.3004 17.4004Z" fill="current"/>
<path d="M16.8 1.8C16.8 1.6 16.8 1.5 16.8 1.3C16.8 0.6 16.2 0 15.5 0H4.5C4.1 0 3.8 0.2 3.5 0.4C3.3 0.7 3.1 1 3.2 1.4C3.2 1.5 3.2 1.6 3.2 1.7C1.3 1.8 0 2.1 0 3.8C0 9.9 4.6 11.5 6.9 11.9C7.4 12.5 8 13 8.7 13.3C8 13.6 7 13.7 6.9 13.7C6.2 13.7 5.6 14.3 5.6 15C5.6 15.7 6.2 16.3 6.9 16.3H13.1C13.8 16.3 14.4 15.7 14.4 15C14.4 14.3 13.8 13.7 13.1 13.7C12.8 13.7 12.2 13.6 12 13C12.3 12.7 12.6 12.4 13 11.9C15.3 11.5 20 10 20 3.8C20 2.1 18.7 1.8 16.8 1.8ZM14.2 2.6C13.8 7.5 11.2 10.3 10.2 11.2C8 10.6 6.5 5.9 5.9 2.6H14.2ZM1.5 3.8C1.5 3.5 1.9 3.4 3.5 3.3C3.8 5.1 4.5 7.8 5.6 10C3.7 9.3 1.5 7.7 1.5 3.8ZM14.4 10C15.4 8.4 16.4 6.1 16.7 3.3C18.1 3.3 18.5 3.4 18.5 3.8C18.5 7.7 16.3 9.3 14.4 10Z" fill="current"/>
<path d="M11.5 8.2L11.6 6.6L12.5 5.3L11 4.7L10 3.5L9 4.7L7.5 5.3L8.4 6.6L8.5 8.2L10 7.8L11.5 8.2Z" fill="current"/>
</svg><span class="header-button-text">Призы</span></a></li>
<li class="button header-button history-button"><a href="#">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#01AE7E" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 20H1.2C0.6 20 0 19.4 0 18.8C0 18.2 0.6 17.6 1.2 17.6C1.7 17.6 3.5 17.4 3.5 15.3V4.7C3.5 4.2 3.6 1.9 4.8 0.7C5.2 0.3 5.8 0 6.5 0H16.9C17 0 17 0 17 0C17.7 0 18.3 0.3 18.8 0.8C20 2.1 20 4.3 20 4.8C20 5.4 19.4 6 18.8 6H16.5V15.3C16.5 15.7 16.5 18.1 15.3 19.3C14.8 19.7 14.2 20 13.5 20ZM5.5 17.5H13.6C13.8 17.3 14.1 16.3 14.1 15.2V4.7C14.1 4 14.1 3.2 14.3 2.5H6.5C6.3 2.6 6 3.8 6 4.7V15.2C6 16.2 5.8 16.9 5.5 17.5ZM16.6 3.5H17.4C17.3 3.1 17.2 2.7 17 2.5C17 2.5 17 2.5 16.9 2.5C16.8 2.5 16.7 2.9 16.6 3.5Z" fill="current"/>
<path d="M11.8 5.5H8.2C7.8 5.5 7.5 5.2 7.5 4.8C7.5 4.4 7.8 4 8.2 4H11.7C12.1 4 12.4 4.3 12.4 4.7C12.4 5.1 12.2 5.5 11.8 5.5Z" fill="current"/>
<path d="M12.5996 8.09961H7.39961C6.99961 8.09961 6.59961 7.79961 6.59961 7.39961C6.59961 6.99961 6.99961 6.59961 7.39961 6.59961H12.6996C13.0996 6.59961 13.3996 6.89961 13.3996 7.29961C13.3996 7.69961 12.9996 8.09961 12.5996 8.09961Z" fill="current"/>
<path d="M12.6002 10.7008H7.4002C7.0002 10.7008 6.7002 10.4008 6.7002 10.0008C6.7002 9.60078 7.0002 9.30078 7.4002 9.30078H12.7002C13.1002 9.30078 13.4002 9.60078 13.4002 10.0008C13.4002 10.4008 13.0002 10.7008 12.6002 10.7008Z" fill="current"/>
<path d="M12.6002 13.4H7.4002C7.0002 13.4 6.7002 13.1 6.7002 12.7C6.7002 12.3 7.0002 12 7.4002 12H12.7002C13.1002 12 13.4002 12.3 13.4002 12.7C13.4002 13.1 13.0002 13.4 12.6002 13.4Z" fill="current"/>
<path d="M12.6002 15.9996H7.4002C7.0002 15.9996 6.7002 15.6996 6.7002 15.2996C6.7002 14.8996 7.0002 14.5996 7.4002 14.5996H12.7002C13.1002 14.5996 13.4002 14.8996 13.4002 15.2996C13.4002 15.6996 13.0002 15.9996 12.6002 15.9996Z" fill="current"/>
</svg><span class="header-button-text">История баттлов</span></a></li>
<li class="button header-button contacts-button"><a href="#">
<svg width="18" height="20" viewBox="0 0 18 20" fill="#01AE7E" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_501_35)">
<path d="M17.1 10.7999C17.5 10.7999 18 10.4999 18 9.99989C18 9.49989 17.6 9.19989 17.1 9.19989H16.1V7.19989H17.1C17.6 7.29989 18 6.99989 18 6.49989C18 6.09989 17.7 5.69989 17.1 5.69989H16.1V3.19989C16.1 2.89989 16.1 1.79989 15.1 0.899885C14.8 0.499885 14 -0.000114601 12.8 -0.000114601H3.4C1 -0.100115 0 1.79989 0 3.09989V15.9999C0.1 17.8999 1.2 19.9999 3.4 19.9999H12.8C13.7 19.9999 14.4 19.6999 14.9 19.1999C16.1 18.0999 16.1 16.1999 16.1 16.0999V14.1999H17.1C17.5 14.1999 18 13.8999 18 13.3999C18 12.9999 17.6 12.5999 17.1 12.5999H16.1V10.7999H17.1V10.7999ZM13.5 12.5999H12.9C12.5 12.5999 12 12.8999 12 13.3999C12 13.7999 12.3 14.1999 12.9 14.1999H13.5V15.9999C13.5 16.4999 13.3 17.1999 13.1 17.3999C13.1 17.3999 13 17.4999 12.9 17.4999H3.4C2.9 17.4999 2.6 16.2999 2.6 15.9999V3.19989C2.6 2.89989 2.7 2.39989 3.4 2.39989H12.7C12.9 2.39989 13.1 2.39989 13.2 2.49989C13.3 2.59989 13.4 2.89989 13.4 2.99989V5.69989H12.8C12.4 5.69989 12 5.99989 12 6.49989C12.1 6.89989 12.4 7.29989 12.9 7.29989H13.5V9.29989H12.9C12.4 9.29989 12 9.59989 12 9.99989C12 10.3999 12.3 10.7999 12.9 10.7999H13.5V12.5999Z" fill="current"/>
<path d="M10.4997 13.2992C10.1997 11.9992 9.49969 9.99922 8.19969 9.39922C9.09969 9.19922 9.69969 8.39922 9.69969 7.59922C9.69969 6.49922 8.69969 5.69922 7.59969 5.69922C6.39969 5.69922 5.49969 6.59922 5.49969 7.59922C5.49969 8.39922 6.09969 9.19922 6.99969 9.39922C5.49969 9.99922 4.79969 11.9992 4.49969 13.1992C4.39969 13.6992 4.79969 14.1992 5.39969 14.1992C5.39969 14.1992 9.19969 14.1992 9.69969 14.1992C10.0997 14.1992 10.6997 13.7992 10.4997 13.2992Z" fill="current"/>
</g>
<defs>
<clipPath id="clip0_501_35">
<rect width="18" height="20" fill="white"/>
</clipPath>
</defs>
</svg><span class="header-button-text">Контакты</span></a></li>
</ul>
<button class="button header-big-button sand-track-button">сдать трек</button>
</nav>
</header>

</body>

</html>


CSS
-
:root {
--basic-color: #01AE7E;
--basic-sand-track-button: #0EA3AC;
--basic-text-color: #2E2532;
--basic-frame-dark: rgba(34, 88, 75, 0.5);
--basic-frame-light: rgba(158, 218, 196, 0.5);
--basic-timer: rgba(10, 29, 24, 0.75);
--basic-yellow: #FCC556;
--basic-display-scroll: #9EDAC4;
--basic-display-allview: #22584B;
--display-social-contact: #BF2742;
--display-black: #000000;
--basic-white: #ffffff;
--basic-track-path: #C3BECB;
}

/* Global */

body {
min-width: 1456px;
margin: 0px auto;
padding: 10px 20px;
font-family: Stem;
}

a {
text-decoration: none;
}

.page-body {
background-image: url("../img/background.jpg");
width: 1456px;
}

.main-header {
height: 60px;
grid-template-columns: 1fr 2fr 1fr;
column-gap: 20px;
}

/* Header */

.main-navigation {
display: flex;
justify-content: space-between;
}

.header-menu {
justify-content: center;
margin: 0;
padding: 0;
}

.header-menu li {
height: 60px;
list-style-type: none;
padding: 0 10px 0 0;
}

.icon {
fill: #01AE7E;
}
.icon:hover {
fill: #FCC556;
}

/* Header Button */

.header-button-text {
padding-left: 6px;
}
.button {
text-transform: uppercase;
font-weight: 700;
display: block;
}

.header-button {
display: inline-block;
vertical-align: middle;
margin: 15px 0px;
padding: 0;
}

.header-button {
padding-top: 0px;
}

.header-icon {
height: 20px;
padding-right: 10px;
fill:#01AE7E;
}

.header-icon:hover *,
.header-icon:focus * {
fill: #FCC556;
}

.header-menu a {
color: var(--basic-color);
display: inline-block;
height: 60px;
font-size: 16px;
margin-top: 2px;
line-height: 20px;
margin-bottom: 16px;
}

.header-menu-text {
height: 60px;
vertical-align: middle;
}

.header-button a:hover svg,
.header-button a:focus svg {
fill: #FCC556;
}

.svg-header-icon:hover .svg-icon {
fill: #FCC556;
}
.specification-button {
width: 120px;
}

.raters-button {
width: 100px;
}

.prizes-button {
width: 100px;
}

.history-button {
width: 208px;
}

.contacts-button {
width: 140px;
}

.header-button a:hover,
.header-button a:focus {
font-size: 18px;
color: var(--basic-yellow);
}
.header-big-button {
width: 349px;
height: 60px;
border-radius: 10px;
font-size: 22px;
}

.help-button {
background-color: var(--basic-color);
margin-right: 20px;
}

.sand-track-button {
background-color: var(--basic-sand-track-button);
margin-left: auto;
}


Добавлено через 9 часов 27 минут 26 секунд
https://youtu.be/DUPKrHrQRF0

offline