<head>
<meta charset="UTF=8">
<title>google</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<style>
body {}
</style>
</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img class="graficlogo" src="https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"></a>
</div>
</header>
<main>
<nav>
<div class="wrapper">
<a href="#" class="menu-btn"></a>
<div class="topnav" id="myTopnav">
<a href="openButton">Косметика для лица.</a>
<a href="FAQ.html">Косметика для тела.</a>
<a href="openButton">Натуральное мыло.</a>
<a href="openButton">Уход за волосами.</a>
<a href="openButton">Тайские масла.</a>
<a href="openButton">Тайская аптека.</a>
<a href="openButton">Тайские бальзамы.</a>
<a href="openButton">Тайские зубные пасты.</a>
<a href="openButton">Товары для детей.</a>
<a href="openButton">Товары для дома.</a>
<a href="openButton">Чай.</a>
</div>
</div>
</nav>
<div class="all">
<input checked type="radio" name="respond" id="desktop">
<article id="slide">
<input checked type="radio" name="slider" id="switch1">
<input type="radio" name="slider" id="switch2">
<input type="radio" name="slider" id="switch3">
<input type="radio" name="slider" id="switch4">
<input type="radio" name="slider" id="switch5">
<div id="slides">
<div id="overflow">
<div class="image">
<article>
<img src="https://bipbap.ru/wp-content/uploads/2017/04/72fqw2qq3kxh.jpg">
</article>
<article>
<img src="https://img.izismile.com/img/img14/20210306/640/daily_picdump_3684_640_high_50.jpg">
</article>
<article>
<img src="https://s00.yaplakal.com/pics/pics_original/4/8/7/7576784.jpg">
</article>
<article>
<img src="https://img.izismile.com/img/img14/20210306/640/daily_picdump_3684_640_59.jpg">
</article>
<article>
<img src="https://img.izismile.com/img/img14/20210306/640/daily_picdump_3684_640_high_44.jpg">
</article>
</div>
</div>
</div>
<div id="controls">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
<div id="active">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
</article>
</div>
</main>
<script src="script.js"></script>
</body>
* { margin: 0; padding: 0;}
body
{ font-family: 'Rubik', sans-serif;
background-image: url(img/bg.png);
min-height: 100vh; /*overflow: hidden;*/
}
main
{ display:flex;
max-width: 99vw;
min-height: calc(80vw - 80px); max-height: 60vw; /* auto*/
}
a { text-decoration: none; }
li { text-decoration: none; list-style: none; }
.logo
{ color: #111;
height: 80px;
display: flex;
opacity: 0.95;
padding-top: 1px;
padding-left: 20px;
background-color: #D3D3D3;
}
.graficlogo
{ max-width: 100%;
box-sizing: border-box;
height: 100%;
}
.topnav
{ display: flex;
flex-grow: 1;
flex-direction: column;
min-width: calc(50px + 50vh);
height: auto; /* calc(100vh - 80px) */
background-color: #D3D3D3;
}
.topnav a
{ padding: 1vh 20px;
font-size: calc(5vh - 4px);
display: flex;
color: #000000;
}
.topnav a:hover
{ background: #A9A9A9;
transition: 0.2s;
opacity: 0.7;
}
section
{ height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #aff;
}
.wrapper
{ position: relative;
overflow-x: hidden;
}
.menu {
position: fixed;
transition: 0.5s;
transform: translateX(-100%);
}
.menu_active { transform: translateX(0%); }
.menu-list
{ display: flex;
justify-content: space-around;
align-items: center;
height: 50%;
flex-direction: column;
}
.menu-list a
{ text-decoration: none;
text-transform: uppercase;
font-weight: 900;
}
.menu-btn
{ width: 30px;
height: 30px;
background-color: #111;
position: absolute;
right: -35px;
top: 10px;
}
.content /* этот класс ещё не упомянут в html */
{ position: relative;
z-index: 0;
transition: 0.5s;
}
.content_active { transform: translateX(30%); }
.all {height: 78vh; text-align: center; overflow: auto; border: 2px solid #caa;} /* flex-end */
#slide /*положение слайдера*/
{ /*flex-direction: row;
justify-content: center; */
padding: 10px; height: 71vh;
border: 2px solid #acc;/* align-items: flex-start; align-items: center;*/
}
/*#slider { } центровка слайдера*/
#slides article /*все изображения справа друг от доруга*/
{ width: 20%; float: left; }
/*устанавливает общий размер блока с изображениями*/
#slides .image { width: 500%; line-height: 0; }
/* скрывает всё, что находится за пределами этого блока */
#overflow {
width: 100%; height: 60vh;
overflow: hidden;
border: 2px solid #acc;
}
/*размер всего слайдера*/
article img { width: 100%; } /*размер изображений слайдера*/
#desktop:checked ~ #slider { max-width: 960px; } /*максимальнная длина*/
/*настройка переключения и положения для левой стрелки*/
/*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
#switch1:checked ~ #controls label:nth-child(5),
#switch2:checked ~ #controls label:nth-child(1),
#switch3:checked ~ #controls label:nth-child(2),
#switch4:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(4)
{ display: block;
float: left;
width: 10vw;
height: 10vw;
margin-left: 1vw; /*сдвиг влево*/
border: 2px solid #acc;
border-radius: 50%;
background: rgba(0,0,0,.5) url('prev.png') no-repeat; /* заливка фона картинкой без повторений */
}
/*настройка переключения и положения для правой стрелки*/
#switch1:checked ~ #controls label:nth-child(2),
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(4),
#switch4:checked ~ #controls label:nth-child(5),
#switch5:checked ~ #controls label:nth-child(1)
{ display: block;
float: right;
width: 10vw;
height: 10vw;
margin-right: 1vw; /*сдвиг вправо*/
border: 2px solid #acc;
border-radius: 50%;
background: rgba(0,0,0,.5) url('next.png') no-repeat; /*заливка фона картинкой без повторений*/
}
/*при наведении на стрелки или переключатели - курсор изменится*/
label, a { cursor: pointer; }
/*скрывает стандартные инпуты (чекбоксы) на странице*/
.all input { display: none; }
/*позиция изображения при активации переключателя*/
#switch1:checked ~ #slides .image { margin-left: 0; }
#switch2:checked ~ #slides .image { margin-left: -100%; }
#switch3:checked ~ #slides .image { margin-left: -200%; }
#switch4:checked ~ #slides .image { margin-left: -300%; }
#switch5:checked ~ #slides .image { margin-left: -400%; }
/*положение блока всех управляющих элементов*/
#controls
{ margin: -10vh 0 -20px 2px;
width: 100%;
height: 10vw; background: #eee;
}
/* расположение блока с переключателями */
#active { margin: 4vh 0; text-align: center; }
#active label /* стиль отдельного переключателя */
{ border-radius: 50%; /* скругление углов */
display: inline-block; /*расположение в строку*/
width: 15px;
height: 15px;
background: #bbb;
}
/*поведение чекбокса при наведении*/
#active label:hover
{ background: #76c8ff; border-color: #777 !important; } /* запрет изменений */
/*цвет активного лейбла при активации чекбокса*/
#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5)
{ background: #18a3dd; border-color: #18a3dd !important;}
/*анимация пролистывания изображений*/
#slides .image
{ transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); }
/*прозрачность стрелок при наведении*/
#controls label:hover { opacity: 0.6; }
/*прозрачность стрелок при отводе курсора*/
#controls label { transition: opacity 0.2s ease-out; }
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.