<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Главная</title>
<link rel="stylesheet" href="css/fontawesome_icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/fonts/Darkmode/Darkmode.css" />
<link rel="stylesheet" href="css/navmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sidebar-ONE.css" />
<link rel="stylesheet" href="css/content.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="css/table.css" />
<link rel="stylesheet" href="css/mobile_layout.css" />
</head>
<body>
<div class="wrapper">
<header>
<div class="div_SOCIAL-ICONS__header">
<!---------- SOCIAL ICONS ---------->
<section class="section__SOCIAL_ICONS__header">
<!----- YOUTUBE ----->
<a
href="https://www.youtube.com/channel/UCU0hq2CO9eBpIQXPcAHH3hw/"
target="_blank"
class="a__SOCIAL_ICONS-item__header youtube"
>
<i class="fa-brands fa-youtube"></i>
</a>
<!----- VKONTAKTE ----->
<a
href="https://vk.com/sol.song/"
target="_blank"
class="a__SOCIAL_ICONS-item__header vkontakte"
>
<i class="fa-brands fa-vk"></i>
</a>
<!----- TIKTOK ----->
<a
href="https://www.tiktok.com/@salt_band"
target="_blank"
class="a__SOCIAL_ICONS-item__header tiktok"
>
<i class="fa-brands fa-tiktok"></i>
</a>
<!----- SOUNDCLOUD ----->
<a
href="https://soundcloud.com/user-195249501?utm_source=mobi&utm_campaign=social_sharing&utm_terms=mobi_google_one_tap.treatment"
target="_blank"
class="a__SOCIAL_ICONS-item__header soundcloud"
>
<i class="fa-brands fa-soundcloud"></i>
</a>
<!----- BANDCAMP ----->
<a
href="https://bandcamp.com/"
target="_blank"
class="a__SOCIAL_ICONS-item__header bandcamp"
>
<i class="fa-brands fa-bandcamp"></i>
</a>
</section>
<!-- SOCIAL ICONS -->
</div>
<!--social-icons-->
<nav class="navbar">
<div class="container">
<div class="navbar__wrap">
<div class="hamb">
<div class="hamb__field" id="hamb">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
</div>
<a href="#" class="logo" id="logo">Logo</a>
<ul class="menu" id="menu">
<li><a href="index.html">Главная</a></li>
<li><a href="about_us.html">О нас</a></li>
<li><a href="photo_gallery.html">Фото</a></li>
<li><a href="video.html">Видео</a></li>
<li><a href="riders.html">Райдеры</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</nav>
<div class="popup" id="popup"></div>
<!-- Продолжение вашего кода .. -->
</header>
<!---------- CONTAINER (CONTENT + SIDEBAR) ---------->
<div class="container">
<!---------- SIDEBAR ONE ---------->
<div class="sidebar-ONE">
<div class="div_photo_solo">
<img src="img/sidebar/stas_solo_1.jpg" width="359" height="260" />
</div>
<!-- photo solo -->
<div class="div_photo_solo">
<img
src="img/sidebar/guitar_rita_solo_1.jpg"
width="359"
height="500"
/>
</div>
<!-- photo solo -->
<div class="div_photo_solo">
<img
src="img/sidebar/guitar_sergey_solo_1.jpg"
width="359"
height="260"
/>
</div>
<!-- photo solo -->
<div class="div_photo_solo">
<img
src="img/sidebar/bass_guitar_solo_1.jpg"
width="359"
height="500"
/>
</div>
<!-- photo solo -->
<div class="div_photo_solo">
<img src="img/sidebar/sax_solo_1.jpg" width="359" height="500" />
</div>
<!-- photo solo -->
<div class="div_photo_solo">
<img src="img/sidebar/drums_solo_1.jpg" width="359" height="500" />
</div>
<!-- photo solo -->
</div>
<!--sidebar-->
<!---------------------------------------- CONTENT 60 ---------------------------------------->
<div class="content">
<!---------- Section bg-img-main ---------->
<section class="bg-img-main">
<div class="container">
<div class="bg-img-main__content">
<div class="bg-img-main__block">
<h1 class="bg-img-main__title">СОЛЬ</h1>
</div>
<!--/intro__block-->
</div>
<!--/intro__content-->
</div>
<!-- container -->
</section>
<!--bg-img__main-->
</div>
<!---------- content ---------->
</div>
<!---------- container (content-area + sidebar-area) ---------->
<!------------------------------ FOOTER ------------------------------>
<div class="footer">
<a name="DOWN" class="anchor-2"></a>
<div class="div_space_FOOTER">
<div class="div_row-1_FOOTER"></div>
<!-- row-1 -->
<div class="div_row-2_FOOTER">
<div class="div_TITLE-1_FOOTER">Заголовок</div>
<div class="div_nav-menu_FOOTER">
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
</div>
</div>
<!-- row-2 -->
<div class="div_row-3_FOOTER">
<div class="div_TITLE-1_FOOTER">Заголовок</div>
<div class="div_nav-menu_FOOTER">
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
</div>
</div>
<!-- row-3 -->
<div class="div_row-4_FOOTER">
<div class="div_TITLE-1_FOOTER">Заголовок</div>
<div class="div_nav-menu_FOOTER">
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
</div>
</div>
<!-- row-4 -->
</div>
<!--space-->
<div class="div_space_FOOTER">
<div class="div_row-1_FOOTER"></div>
<!-- row-1 -->
<div class="div_row-2_FOOTER">
<div class="div_TITLE-1_FOOTER">Заголовок</div>
<div class="div_nav-menu_FOOTER">
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
</div>
</div>
<!-- row-2 -->
<div class="div_row-3_FOOTER">
<div class="div_TITLE-1_FOOTER">Заголовок</div>
<div class="div_nav-menu_FOOTER">
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
</div>
</div>
<!-- row-3 -->
<div class="div_row-4_FOOTER">
<div class="div_TITLE-1_FOOTER">Заголовок</div>
<div class="div_nav-menu_FOOTER">
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
<a class="a_nav-menu_FOOTER" href="#" target="_blank">Ссылка</a>
</div>
</div>
<!-- row-4 -->
</div>
<!--space-->
</div>
<!------------------------------ footer ------------------------------>
</div>
<!-- wrapper -->
<script src="js/navmenu.js"></script>
</body>
</html>
@media (max-width: 412px) {
body::before {
background-image: url(../img/mobile_layout/bg_mobile_layout.jpg);
background-size: contain;
background-repeat: no-repeat;
content: '';
position: fixed; /* Фиксируем на одном месте */
top: 0;
bottom: 0; /* Вся высота */
z-index: -1; /* Фон ниже текста */
/* Параметры фона */
filter: blur(1px); /* Размытие */
}
/*----- HEADER -----*/
.header {
background: rgba(0, 0, 0, 10);
justify-content: start;
height: 90px;
position: fixed;
width: 100%;
z-index: 2;
}
/*----- CONTENT -----*/
/*
Created on : 13 апр. 2022 г., 19:41:33
Author : sergeybabann
*/
/* ------------------------------ CONTENT-60 ------------------------------ */
.content {
bottom: 0;
min-height: 600px;
position: relative;
top: 90px;
z-index: 0;
}
/*---------- bg-img__main ----------*/
.bg-img-main {
position: relative;
background-size: cover;
background-repeat: no-repeat;
}
.bg-img-main:after {
background-color: #000;
content: '';
height: 100%;
left: 0;
opacity: 0.2;
position: absolute;
top: 0;
width: 100%;
}
.bg-img-main__content {
justify-content: center;
display: flex;
height: 881px;
position: relative;
z-index: 2;
}
.bg-img-main__title {
color: rgba(255, 165, 0, 0.5); /* */
font-size: 50px;
font-family: 'Darkmode';
font-weight: normal;
font-style: normal;
/* font-stretch: condensed; */
/* text-transform: uppercase; */
/* letter-spacing: 4px; */
}
.bg-img-main__block {
}
/*----- bg-img-main end -----*/
/*-------------------- TEXT --------------------*/
.div_TEXT-1_content {
display: flex;
flex-wrap: row wrap;
flex-direction: column;
font-size: 1.3em;
color: white;
line-height: 1em;
margin: 0 10em 0 10em;
background: rgba(0, 0, 0, 0.6);
padding: 3em 3em 3em 3em;
border-radius: 3px;
}
.ol_TEXT-1_content {
line-height: 2em;
margin: 0 2em 0 2em;
}
/*---------- YOUTUBE ----------*/
.div_YOUTUBE_CONTAINER-1_content {
margin: 2em 0 300px 0;
}
.div_YOUTUBE-LINK-1_content {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow, but according to the nearest parent */
top: 100px;
right: 0; /* confuse it i guess */
bottom: 0;
left: 0;
margin: auto; /* make em equal */
border: solid white 2px;
border-radius: 3px;
}
.div_YOUTUBE-LINK-2_content {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow, but according to the nearest parent */
top: 750px;
right: 0; /* confuse it i guess */
bottom: 0;
left: 0;
margin: auto; /* make em equal */
border: solid white 2px;
border-radius: 3px;
}
.div_YOUTUBE-LINK-3_content {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow, but according to the nearest parent */
top: 1150px;
right: 0; /* confuse it i guess */
bottom: 0;
left: 0;
margin: auto; /* make em equal */
border: solid white 2px;
border-radius: 3px;
}
/*---------- Page UP ----------*/
.div_block_Page-UP_content {
background: rgba(139, 90, 0, 0.7); /* */
border-bottom: solid 1px rgba(79, 79, 79, 10);
display: flex;
padding: 20px 0 20px 0;
margin: 0 0 0 0;
}
.div_block_Page-UP_content div {
flex: 1;
}
.div_bread-crumbs_Page-UP_content {
align-items: center;
color: rgba(207, 207, 207, 10);
display: flex;
font-size: 1em;
justify-content: center;
max-width: 300px;
}
.div_title_Page-UP_content {
color: rgba(207, 207, 207, 10);
display: flex;
flex-flow: row wrap;
font-size: 2em;
justify-content: flex-start;
}
/*---------- RIDER DESCRIPTION ----------*/
.section_RIDERS-SECTION_content {
display: flex;
}
.riders__titles-block_content {
padding: 100px 10px 100px 10px;
background: rgba(0, 0, 0, 0.89);
}
.riders__titles_content {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 500px;
min-width: 500px;
padding: 20px 0 20px 0;
}
.rider__title_content {
display: flex;
justify-content: flex-start;
font-size: 2em;
margin-bottom: 12px;
}
.rider__title-link_content {
display: flex;
}
.a_rider__title-link_content {
color: #cfcfcf;
display: flex;
justify-content: flex-start;
font-size: 1.3em;
padding: 0.5em 1em 0.5em 1em;
text-decoration: none;
}
.a_rider__title-link_content:hover {
background: rgba(54, 54, 54, 10);
border-radius: 3px;
color: gold;
padding: 0.5em 1em 0.5em 1em;
}
.riders__text_content {
background: rgba(0, 0, 0, 0.89);
display: flex;
flex-flow: row wrap;
font-size: 1.3em;
justify-content: flex-start;
padding: 100px 200px 100px 100px;
line-height: 2em;
}
/* ---------- RIDER TITLES ---------- */
.div_block_RIDER-BLOCK_content {
display: flex;
justify-content: space-evenly;
}
.div_title_RIDER_content {
align-items: center;
background: rgba(28, 28, 28, 10); /* */
color: white;
font-size: 2em;
display: flex;
justify-content: center;
min-width: 895px;
padding: 60px 0 60px 0;
margin: 0;
transform: translateY(-50%);
}
.div_block_RIDER-LEFT_content {
background: rgba(0, 0, 0, 0.8);
min-width: 300px;
max-width: 300px;
}
.div_block_RIDER-RIGHT_content {
background: rgba(0, 0, 0, 0.8);
min-width: 300px;
max-width: 300px;
}
/*---------- TABLE ----------*/
.space_TABLE-1_content {
margin: 0 0 0 0;
}
.div_table-CONTAINER_content {
margin: 0 300px 70px 300px;
}
/* -------------------- CONTACTS -------------------- */
.section_contacts_content {
margin: 0 0 50px 0;
}
.div_contacts_content {
display: flex;
justify-content: center;
flex-direction: column;
margin: 0 650px 0 650px;
/* border: solid 1px white; */
}
.span_name_contacts_content {
font-size: 25px;
font-weight: normal;
color: white;
display: flex;
justify-content: center;
margin: 200px 0 25px 0;
}
/*-----PHONE -----*/
.a_phone_contacts_content {
margin: 0 0 20px 0;
display: flex;
justify-content: center;
color: #fff;
font-size: 20px;
font-weight: normal;
text-decoration: none;
}
.a_phone_contacts_content:hover {
color: gold;
}
/*----- EMAIL -----*/
.a_email_contacts_content {
margin: 0 0 0 0;
display: flex;
justify-content: center;
color: #fff;
font-size: 20px;
font-weight: normal;
text-decoration: none;
}
.a_email_contacts_content:hover {
color: gold;
}
/*---------- SOCIAL ICONS ----------*/
.section__SOCIAL_ICONS__content {
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0 30px 0;
margin: 0 300px 0 300px;
}
.a__SOCIAL_ICONS-item__content {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
margin: 10px;
background-color: #f2f2f2;
border-radius: 50%;
box-shadow: 0px 0px 5px #00000080;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.a__SOCIAL_ICONS-item__content i {
font-size: 26px;
color: #67798e;
transition: all 0.3s ease;
z-index: 1;
}
.a__SOCIAL_ICONS-item__content:after {
content: '';
width: 70px;
height: 70px;
position: absolute;
transform: translate(0, 70px);
border-radius: 50%;
transition: all 0.3s ease;
}
.a__SOCIAL_ICONS-item__content.youtube:after {
background-color: #ff0000; /* red */
}
.a__SOCIAL_ICONS-item__content.vkontakte:after {
background-color: #0077ff; /* */
}
.a__SOCIAL_ICONS-item__content.tiktok:after {
background-color: #25f4ee; /* */
}
.a__SOCIAL_ICONS-item__content.bandlink:after {
background-color: #dc143c; /* crimson */
}
.a__SOCIAL_ICONS-item__content.soundcloud:after {
background-color: #f26f23; /* -- */
}
.a__SOCIAL_ICONS-item__content.bandcamp:after {
background-color: #00c5cd; /* Turquose3 */
}
/* crimson */
.a__SOCIAL_ICONS-item__content:hover {
transform: translateY(-4px);
box-shadow: 0px 0px 15px #00000080;
}
.a__SOCIAL_ICONS-item__content:hover i {
color: #fff;
}
.a__SOCIAL_ICONS-item__content:hover:after {
transform: translate(0);
}
/*-------------------- PHOTO --------------------*/
/*----- BACKGROUND -----*/
.img_RIDER-SCROLL-1_content {
border-top: solid 1px rgba(79, 79, 79, 10);
border-bottom: solid 1px rgba(79, 79, 79, 10);
border-right: solid 1px white;
min-height: 800px;
max-height: 800px;
min-width: 1495px;
max-width: 1495px;
filter: alpha(Opacity=50);
opacity: 0.5;
vertical-align: bottom;
}
/*----- MAIN -----*/
.img_MAIN-1_content {
min-height: 1000px;
max-height: 1000px;
min-width: 1495px;
max-width: 1495px;
}
/*----- SIDEBAR -----*/
.sidebar-ONE {
display: none;
overflow: hidden;
}
.div_SOCIAL-ICONS__header {
display: none;
background: black;
}
/* ----- NAVMENU -----*/
.navbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
background: rgba(54, 54, 54, 10);
height: 90px;
z-index: 2;
}
.navbar__wrap .menu {
display: none;
}
.hamb {
display: flex;
align-items: center;
}
.hamb__field {
padding: 10px 20px;
cursor: pointer;
}
.bar {
display: block;
width: 30px;
height: 3px;
margin: 6px auto;
background-color: #fff;
transition: 0.2s;
}
.popup {
position: fixed;
top: 75px;
left: -100%;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 100;
display: flex;
transition: 0.3s;
}
.popup.open {
left: 0;
}
.popup .menu {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
padding: 50px 0;
overflow: auto;
}
.popup .menu > li {
width: 100%;
}
.popup .menu > li > a {
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0;
font-size: 20px;
font-weight: bold;
color: #3f3f3f;
}
.popup .menu > li > a:hover {
background-color: rgba(122, 82, 179, 0.1);
}
.hamb__field.active .bar:nth-child(2) {
opacity: 0;
}
.hamb__field.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamb__field.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
body.noscroll {
overflow: hidden;
}
}