CodePen Embed - XwgRNG

<!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>
  <script src="script.js"></script>
</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>
      </header>
    </div>
    <nav>
      <div class="wrapper">
        <a href="#" class="menu-btn"></a>
        <div class="topnav" id="myTopnav">
             <a href="header/lico.html">Косметика для лица.</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>
          </nav>
        </div>
      </div>


    <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://pp.userapi.com/c850120/v850120318/f3261/wrYZ8iMLDDw.jpg"></article>
                <article><img src="https://downloader.disk.yandex.ru/preview/2c5327c211d8ff5ba942402581cf3f9c40c51fbb80f9c8d6a75a8702d953ec87/5c7be1cb/XroCQqm4PQhJp_sTOcgmVxueBovRmno-OPWESOjtH-252xjKp3cbw4zEAcPj-en_Xp2aVWRINY62OFACrCOIuA%3D%3D?uid=0&filename=170ebe782dc02be.jpg&disposition=inline&hash=&limit=0&content_type=image%2Fjpeg&tknv=v2&size=1880x939"></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>
        <div class="mini-cart"></div>
    <div class="goods-out"></div>
</main>
<footer></footer>  
  </main>
  <div class="box">
  <div>
</div>
<div class="line"></div>
<div class="main_team">
  <a href="openButton">О нас.</a>
    <a href="openButton">Контакты.</a>
    <a href="openButton"></a>
    <a href="openButton">Доставка и оплата.</a>
    <a href="openButton">JAJAJAJ@gmail.com.</a>
    <h4 class="name"></h4>
    <p class="position"></p>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</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 { /*положение слайдера*/
//margin: 100px auto;
padding: 10px;
padding-left: 300px;
}

#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;
}
.main_team {
  background: #111;
  text-align: center;
  padding: 30px;
  color: #fff;
}
.line{
  padding-top: 5px;
  width: 100%;
  height: 2px;
  background: #fcac45;
  position: relative;
}
 .main_team a{
  display: center;
   font-size: 20px;
   color: #fff;
   align-content: flex-start;
   width: 30%;
 }
 .main_team {
  display:flex;
  flex-wrap:center;
 }
 .footer-container {
  padding: 30px 0 10px;
  background-color: #144457;
  color: #ffffff;
}
.footer-container #social_block {
  float: left;
  width: 100%;
}
.footer-container #social_block h4 {
  float: left;
  margin-bottom: 0;
  padding: 0 10px 0 0;
}
.footer-container h4 {
  text-transform: uppercase;
  word-wrap: break-word;
  font-size: 14px;
  font-weight: 300;
}
.footer-container #social_block ul {
  padding-top: 5px;
  margin-bottom: 45px;
}
.footer-container #social_block ul li {
  float: left;
  text-align: center;
  width: 47px;
}
.footer-container ul li {
  padding-bottom: 4px;
}
.footer-container #social_block ul li a {
  color: #ffffff;
  display: inline-block;
  font-size: 30px;
}
.footer-container ul li a {
  text-transform: none;
  word-wrap: break-word;
}
.footer-container #social_block ul li.twitter a:before {
  content: "\f081";
}
.footer-container #social_block ul li.vk a:before {
  content: "\f189";
}
.footer-container #social_block ul li.rss a:before {
  content: "\f09e";
}
.footer-container #social_block ul li a:before {
  display: inline-block;
  font-family: "FontAwesome";
}
.footer-container #social_block ul li a span {
  display: none;
}
.footer-container #social_block ul li a:hover {
  color: #f55a3b;
}
.footer_menu ul {
  padding-left: 0;
}
.footer_menu ul > li {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  word-wrap: break-word;
  padding-bottom: 0;
}
.footer_menu ul li a {
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  color: #ffffff;
  text-decoration: none;
}
.footer_menu ul li a:hover {
  text-decoration: none;
  color: #f55a3b;
}
.cart {
    width: 250px;
    height: 340px;
    position: top
    border: 1px solid green;
    margin: 60px;
    float: left;
    text-align: center;
    padding: 20px;

}
.cart .name {
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.cart .cost {
    font-size: 1.3rem;
    margin: 30px 0;
}
.cart .add-to-cart {
    font-size: 1.1rem;
    background: black;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
.cart .add-to-cart:hover {
    background: cadetblue;
}
.cart .add-to-cart:active {
    background: red;
}
.goods-out::after {
    content: "";
    display: block;
    clear: both;
}
.main-cart img {
    width: 48px;
}

var cart = {}; // корзина

function init() {
    //вычитуем файл goods.json
    $.getJSON("goods.json", goodsOut);
}

function goodsOut(data) {
    // вывод на страницу
    console.log(data);
    var out='';
    for (var key in data) {
        // out +='<div class="cart">';
        // out +='<p class="name">'+data[key].name+'</p>';
        // out += '<img src="images/'+data[key].img+'" alt="">';
        // out +='<div class="cost">'+data[key].cost+'</div>';
        // out +='<button class="add-to-cart">Купить</button>';
        // out +='</div>';
        //---------
        out +='<div class="cart">';
        out +=`<p class="name">${data[key].name}</p>`;
        out +=`<img src="images/${data[key].img}" alt="">`;
        out +=`<div class="cost">${data[key].cost}</div>`;
        out +=`<button class="add-to-cart" data-id="${key}">Купить</button>`;
        out +='</div>';
    }
    $('.goods-out').html(out);
    $('.add-to-cart').on('click', addToCart);
}

function addToCart() {
    //добавляем товар в корзину
    var id = $(this).attr('data-id');
    // console.log(id);
    if (cart[id]==undefined) {
        cart[id] = 1; //если в корзине нет товара - делаем равным 1
    }
    else {
        cart[id]++; //если такой товар есть - увеличиваю на единицу
    }
    showMiniCart();
    saveCart();
}

function saveCart() {
    //сохраняю корзину в localStorage
    localStorage.setItem('cart', JSON.stringify(cart)); //корзину в строку
}

function showMiniCart() {
    //показываю мини корзину
    var out="";
    for (var key in cart) {
        out += key +' --- '+ cart[key]+'<br>';
    }
    $('.mini-cart').html(out);
}

function loadCart() {
    //проверяю есть ли в localStorage запись cart
    if (localStorage.getItem('cart')) {
        // если есть - расширфровываю и записываю в переменную cart
        cart = JSON.parse(localStorage.getItem('cart'));
        showMiniCart();
    }
}

$(document).ready(function () {
    init();
    loadCart();
});

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.