@charset "utf-8";
*{
margin: 0;
padding: 0;
border: 0;
}
/*----------------------- ОСНОВЫ ------------------------------ */
body{
width: 100%;
height: 100%;
color: #000000;
background: white;
background-image: url(img/background_img_1188.jpg);
background-size: cover;
background-attachment: fixed;
font-size: 1em;
font-family: 'Open Sans Condensed', sans-serif;
line-height: 100%;
}
a {
color:white;
text-decoration: none;
}
a:hover {
color:darkgray;
text-decoration: none;
}
a:active {color:dimgrey}
img {
max-width: 100%;
height: auto;
width: auto\9;
}
/*Блок для выделения*/
::selection{background:darkgray; color:aliceblue}
::-moz-selection{background:darkgray; color:aliceblue}
header, footer {
width: 100%;
background-color: black;
min-width: 50px;
}
header{
border-bottom: 0px solid silver;
padding: 0;
}
/*----------------------- ШАПКА ------------------------------ */
#Page_top{
display: -webkit-flex;
display: flex;
top: 0px;
line-height: 112px;
}
/*----------------------- КОНТЕЙНЕР ШАПКИ ------------------------------ */
.container{
display: -webkit-inline-flex;
display: inline-flex;
justify-content: space-evenly;
flex-direction: row;
flex-wrap: nowrap;
width: 1260px;
top: 0px;
margin: 0 auto;
}
/*----------------------- БОКСЫ ШАПКИ ------------------------------ */
.container_logo{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items:center;
flex-basis: 50%;
margin-right:auto;
top: 0px;
margin-left: 30px;
}
.container_info{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-basis: 50%;
justify-content:flex-end;
flex-grow: auto;
top: 0px;
}
.MainLogo_img{
width: 180px;
}
/*----------------------- БОКСЫ ПРАВОЙ ЧАСТИ ШАПКИ ------------------------------ */
.contact1,.contact2,.contact3,.contact5{
display: flex;
text-align: center;
flex-direction: row;
flex-wrap: nowrap;
flex-basis: content;
justify-content:flex-end;
align-self: center;
color: white;
text-decoration: none;
font-size: 2em;
font-family: 'Open Sans Condensed', sans-serif;
padding-left: 28px;
padding-right: 28px;
}
.contact1:hover,.contact2:hover,.contact3:hover{
color:darkgrey;
}
/*----------------------- ЛОГО ИНСТЫ ------------------------------ */
.image_logo{
display: flex;
align-self: auto;
width: 40px;
height: 40px;
}
.image_logo:hover{
filter:invert(100%);
}
/*-----------------------Hamburger-----------------------------------*/
.test{display: none;}
@media screen and (max-width: 1060px){
.container_logo
{
justify-content: space-between;
margin: 0;
padding: 30px 8px 30px 8px;
}
.MainLogo_img
{
display: flex;
flex-basis: 50%;
justify-content: center;
}
.container
{
flex-basis: 600px;
flex-direction: column;
flex-wrap: nowrap;
}
.container_info
{
justify-content: flex-start;
flex-wrap: wrap;
flex-basis: content;
align-self: flex-start;
}
.contact1,.contact2,.contact3,.contact5
{
justify-content: flex-start;
align-self: center;
padding: 8px;
flex-wrap: wrap;
line-height: 48px;
align-self: flex-start;
}
.contact5
{
margin-bottom: 19px;
}
#menuToggle {
width: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#menuToggle input {
display: flex;
width: 60px;
height: 60px;
position: absolute;
cursor: pointer;
opacity: 0; /* hide input */
z-index: 1; /* top of the menu */
}
#menuToggle span{
width: 55px;
height: 8px;
margin-bottom: 10px;
background: #7f8fa6;
border-radius: 4px;
-webkit-transition: all .5s cubic-bezier(.08,.81,.87,.71);
-moz-transition: all .5s cubic-bezier(.08,.81,.87,.71);
-ms-transition: all .5s cubic-bezier(.08,.81,.87,.71);
-o-transition: all .5s cubic-bezier(.08,.81,.87,.71);
transition: all .5s cubic-bezier(.08,.81,.87,.71);
}
#span1 {
transform-origin: 4px 0px;
}
#span3 {
transform-origin: bottom right;
}
#menuToggle input:checked ~ #span1 {
background-color: white;
transform: rotate(45deg) translate(8px);
}
#menuToggle input:checked ~ #span2 {
background-color: white;
transform: rotate(495deg) translate(4px);
}
#menuToggle input:checked ~ #span3 {
background-color: white;
transform: rotate(45deg);
opacity: 0;
}
}
.hidden{
display: none;
}
/*----------------------- ОПТИМИЗАЦИЯ ------------------------------ */
@media screen and (max-width: 1060px)
{
.container{
width: 760px;
}
.contact5{
transition-delay: 0.3s;
}
.contact5_active{
display: none;
transition-delay: 0.3s;
}
.container_info{
transition: transform 0.5s ease-out;
transform-origin: top;
transform: scaleY(0);
opacity: 0;
max-height: 0px;
visibility: hidden;
}
.container__info_active{
flex-direction: column;
transition: transform 0.5s ease-out;
transform-origin: top;
transform: scaleY(1);
opacity: 1;
max-height: 600px !important;
visibility: visible;
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content ="Сайт для онлайн записи в салон маникюра Desavir" />
<meta name="keywords" content="гель лак, маникюр, дизайн ноготь, педикюр, ресница наращивание, site, website">
<meta name='viewport' content='width=device-width,initial-scale=1'/>
<meta content='true' name='HandheldFriendly'/>
<meta content='width' name='MobileOptimized'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<link href="css/style.css" rel ="stylesheet" type ="text/css" />
<link href="css/header.css" rel ="stylesheet" type ="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<link href="css/img/dr.png" rel="shortcut icon" type="image/x-icon" />
<title>Desavir - Студия маникюра в Москве</title>
</head>
<body>
<header>
<div id="Page_top">
<div class="container">
<div class="container_logo">
<label for="test"><a href="index.html" id="logo"><img src="css/img/desavir_white_logo.png" alt="Desavir" class="MainLogo_img"></a></label>
<div id="menuToggle">
<input type="checkbox" class="test"/>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
</div>
</div>
<div class="container_info" id = "container_info">
<a href="o_nas.html" class="contact1">О нас</a>
<a href="price.html" class="contact2">Прайс</a>
<a href="kontakti.html" class="contact3">Контакты</a>
<a href="https://www.instagram.com/desavir/" class="contact5 contact5_active" id = "contact5"><img src="css/img/instagram-icone-icon.png" alt="Instagram" class="image_logo"></a>
</div>
</div>
</div>
</header>
<main><div id="page_center"><a href="" class="button">Записаться</a></div></main>
<script src="js/main.js"></script>
</body>
</html>
Простой
Простой