CodePen Embed - drMEmM

<!DOCTYPE html>
<html>
<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="slider">
          <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="2.jpg"></article>
                <article><img src="3.jpg"></article>
                <article><img src="4.jpg"></article>
                <article><img src="5.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>
</div>
</html>

*{
    margin: 0;
    padding: 0;
}
main{
  display:flex;
}
.all{
  align-self: flex-end;
}
a{
    text-decoration: none;
}
li{
 text-decoration: none;
 list-style: none;
}
body{ 
font-family: 'Rubik', sans-serif;
background-image: url(img/bg.png);
min-height: 100vh; 
 }
 .logo{
    color: #111;
    padding-left: 10px; 
    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 a{
    padding: 14px 20px;
    font-size: 20px;
    display: flex; 
    color: #000000;
 }
 .topnav a:hover{ 
background: #A9A9A9; 
width: 310px;
transition: 0.2s;
opacity: 0.7;
} 
.topnav{
    background-color: #D3D3D3;
    width: 350px;
    height: calc(100vh - 60px); 60px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.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 {
  transition: 0.5s;
  position: relative;
  z-index: 0;
}
.content_active {
  transform: translateX(30%);
}
#slider { /*положение слайдера*/
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 300px;
  align-items: flex-start;

}

#slider{ /*центровка слайдера*/
padding-right: 100px;
}

#slides article{ /*все изображения справа друг от доруга*/
  width: 20%;
  float: left;
}

#slides .image{ /*устанавливает общий размер блока с изображениями*/
  width: 500%;
  line-height: 0;
}

#overflow{ /*сркывает все, что находится за пределами этого блока*/
  width: 100%;
  overflow: hidden;
}

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){
  background: url('prev.png') no-repeat; /*заливка фона картинкой без повторений*/
  float: left;
  margin: 0 0 0 -84px; /*сдвиг влево*/
  display: block;
  height: 68px;
  width: 68px;
}

/*настройка переключения и положения для правой стрелки*/
#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){
  background: url('next.png') no-repeat; /*заливка фона картинкой без повторений*/
  float: right;
  margin: 0 -84px 0 0; /*сдвиг вправо*/
  display: block;
  height: 68px;
  width: 68px;
}

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: -25% 0 0 0;
  width: 100%;
  height: 50px;
}

#active label{ /*стиль отдельного переключателя*/
  border-radius: 10px; /*скругление углов*/
  display: inline-block; /*расположение в строку*/
  width: 15px;
  height: 15px;
  background: #bbb;
}

#active{ /*расположение блока с переключателями*/
  margin: 23% 0 0;
  text-align: center;
}

#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;
}

This Pen is owned by artemper33 on CodePen.

See more by @artemper33 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.