п

src/components/City/City.scss

@@ -65,6 +65,7 @@
   }
 }
 .city {
+  height: 400px;
   height: 520px;
   position: fixed;
   top: 100px;
@@ -88,6 +89,7 @@
     border-radius: 20px;
     border: none;
     padding: 5px;
+
     &_option {
       max-width: 200px;
     }

src/components/Header/Header.js

@@ -0,0 +1,87 @@
+import './header.scss';
+import { useEffect } from 'react';
+
+
+const Header = () => {
+    useEffect(() => {
+        const humburger = document.querySelector('.hamburger');
+        const header = document.querySelector('.header__navigation');
+        console.log(humburger);
+
+            humburger.addEventListener('click', (e) => {
+                e.currentTarget.classList.toggle('hamburger_active');
+                header.classList.toggle('hide');
+            });
+
+
+        
+
+
+        return () => {
+                humburger.removeEventListener('click', (e) => {
+                    e.currentTarget.classList.toggle('hamburger_active');
+                    header.classList.toggle('hide');
+                });
+
+          };
+    }, [])
+
+    return ( 
+        <header className="header" style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+            <div className="header__container" style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingLeft: '40px',
+                height: 79,
+                
+                backgroundColor: '#ffffff',
+            }}>
+                <div className="header__logo" style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                }}>
+                    <img src="./logo5121.png" alt="#" className="header__logo_img" style={{
+                    height: 53,
+                    width: 53,
+                }}/>
+                <span className="header__title" style={{
+                    color: '#F68C43',
+                    width: '60%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    fontWeight: 700,
+                    fontFamily: 'Raleway',
+                    fontSize: '20px',
+                }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
+                </div>
+                <button className="header__btn" style={{
+                    backgroundColor: '#fff',
+                    border: 'none',
+                }}>
+                   
+                </button>
+                <div className='hamburger'>
+                <span></span>
+                <span></span>
+                <span></span>
+                </div>
+            </div>
+            <div className='header__navigation hide'>
+                <a href='#' className='header__navigation_link'>Кино по пушкинской карте</a>
+                <a href='#' className='header__navigation_link'>Достопримечательности</a>
+                <a href='#' className='header__navigation_link'>Отели</a>
+            </div>
+        </header>
+        
+     );
+}
+ 
+export default Header;

src/components/Header/header.scss

@@ -0,0 +1,78 @@
+.hamburger {
+    display: block;
+    position: fixed;
+    right: 10px;
+    top: 28px;
+    transform: translateX(-50%);
+    height: 30px;
+    width: 30px;
+    span {
+    
+      display: block;
+      height: 3px;
+      width: 100%;
+      background-color: #000;
+      margin-top: 5px;
+      &:nth-child(1) {
+        margin-top: 0px;
+      }
+    }
+    &_active {
+      margin-top: 6px;
+      span {
+        transition: ease 0.5s;
+        &:nth-child(1) {
+          margin-top: -2px;
+          transform: translateY(4px) rotate(-45deg);
+        }
+        &:nth-child(2) {
+          display: none;
+        }
+        &:nth-child(3) {
+          margin-top: -3px;
+          transform: translateY(4px) rotate(45deg);
+        }
+      }
+    }
+}
+
+.header {
+
+
+    &__navigation {
+        transition:ease 0.6s;
+        transform: translateX(0%);
+        height: 200%;
+        position: fixed;
+        left: 0px;
+        width: 60%;
+        background-color: rgba( 0, 0, 0, 0.5 );
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: left;
+        padding-left: 30px;
+        padding-top: 100px;
+        
+        &_link {
+            margin-top: 6px;
+            z-index: 1;
+            color: #FFF;
+            font-family: Montserrat;
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            text-decoration: none;
+        }
+    }
+    &__container {
+        
+        width: 100%;
+        top: 0px;
+        position: fixed;                                                                
+    }
+}
+.hide {
+    transform: translateX(-100%);
+}

src/components/Main/Header.js

@@ -1,57 +0,0 @@
-
-const Header = () => {
-
-    return ( 
-        <div style={{
-            height: '100%',
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }}>
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                paddingLeft: '10px',
-                height: 79,
-                width: 390,
-                backgroundColor: '#ffffff',
-            }}>
-                <div style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                }}>
-                    <img src="./logo5121.png" alt="#" style={{
-                    height: 53,
-                    width: 53,
-                }}/>
-                <span style={{
-                    color: '#F68C43',
-                    width: '60%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    fontWeight: 700,
-                    fontFamily: 'Raleway',
-                    fontSize: '20px',
-                }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
-                </div>
-                <button style={{
-                    backgroundColor: '#fff',
-                    border: 'none',
-                }}>
-                    <img src="./menu.png" alt="#" style={{
-                                 height: 20,
-                                 width: 32,
-                                 marginRight: 10,       
-                                    }}/>
-                </button>
-                
-            </div>
-        </div>
-        
-     );
-}
- 
-export default Header;

src/components/Main/Main.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import Header from "./Header";
+import Header from "../Header/Header";
-import Card from "./Card";
+import Card from "../Card/Card";
-import Footer from "./Footer";
+import Footer from "../Footer/Footer";
 
 const Main = ({ userData }) => {
 
@@ -50,7 +50,7 @@ const Main = ({ userData }) => {
     }, []);
 
     return (
-        <div>
+        <div style={{paddingTop:'70px'}}>
         <Header />
         <Card city={userData.selectedCity}/>
         <div style={{

src/components/Tinder/Tinder.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from "react-router-dom"; 
 import TinderCard from 'react-tinder-card';
-import './Tinder.css';
+import './Tinder.scss';
 
 const Tinder = (props) => {
 
@@ -34,14 +34,7 @@ const Tinder = (props) => {
     };
 
     return (
-        <div style={{
+        <div className='tinder__flex'>
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100vh',
-            justifyContent: 'space-around',
-            alignItems: 'center',
-            background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
-          }}>
         <div className='tinder-container'>
             <div className='card-container'>
                 {cardInfo.map((card) => (
@@ -55,72 +48,31 @@ const Tinder = (props) => {
                             if(uniqueIds.length === cardInfo.length) {
                                 main('/main');
                                 setUserData(prevUserData => ({ ...prevUserData, unique: unique }));
-                                console.log(unique);
-                                console.log(props.userData);
                             }
                         }}
                     >
                         <div className='card'>
                             <div
                                 className='card-content'
-                                style={{
+                                >
-                                    width: '300px',
+                                <div className='card__img' style={{
-                                    height: '500px',
+                                    backgroundImage: `url(${card.imageURL})`
-                                    borderRadius: '10px',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    paddingTop: '10px',
-                                }}>
-                                <div style={{
-                                    height: '300px',
-                                    width: '245px',
-                                    borderRadius: '10px',
-                                    backgroundImage: `url(${card.imageURL})`,
-                                    backgroundRepeat: 'no-repeat',
-                                    backgroundPosition: 'center',
                                 }}/>
-                                <div style={{
+                                <div className='card__description_container'>
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    justifyContent: 'space-between',
-                                    height: '150px',
-                                }}>
                                     <h3 className="noselect text">{card.question}</h3>
-                                <div style={{
+                                <div className='btn__container_tinder'>
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    marginLeft: '18px',
-                                    marginRight: '18px',
-                                }}>
                                     <button
-                                    className="noselect"
+                                    className="btn__tinder noselect"
-                                    style={{
-                                        height: '69px',
-                                        width: '69px',
-                                        backgroundColor: 'rgb(0,0,0,0)',
-                                        border: 'none',
-                                    }}
                                     onClick={() => handleDislike(card.id)}
                                 >
-                                    <img draggable="false" src="./Dis.png" alt='#' style={{
+                                    <img draggable="false" src="./Dis.png" alt='#' className='card__choise_img' onClick={() => handleDislike(card.id)}/>
-                                        height: '100%',
-                                        width: '100%',
-                                    }} onClick={() => handleDislike(card.id)}/>
                                 </button>
                                 <button
-                                    className="noselect"
+                                    className="btn__tinder noselect"
-                                    style={{
+                                    
-                                        height: '69px',
-                                        width: '69px',
-                                        backgroundColor: 'rgb(0,0,0,0)',
-                                        border: 'none',
-                                    }}
                                     onClick={() => handleLike(card.id)}
                                 >
-                                    <img draggable="false" src="./Like.png" alt='#' style={{
+                                    <img draggable="false" src="./Like.png" alt='#' className='card__choise_img' onClick={() => handleLike(card.id)}/>
-                                        height: '100%',
-                                        width: '100%',
-                                    }} onClick={() => handleLike(card.id)}/>
                                 </button>
                                 </div>
                                 </div>

src/components/Tinder/Tinder.scss

@@ -80,6 +80,24 @@
     flex-wrap: wrap;
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
+    &__choise_img {
+      height: 100%;
+      width: 100%;
+    }
+    &__img {
+      height: 300px;
+      width: 245px;
+      border-radius: 10px;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    &__description_container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      height: 150px;
+    }
   }
   
   .card-content {
@@ -90,8 +108,34 @@
     width: 300px;
     height: 500px;
     background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    flex-direction: column;
+    padding-top: 10px;
   }
   
   .infoText {
     margin-top: 16px;
   }
+.tinder__flex {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: space-around;
+  align-items: center;
+  background: linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%);
+  
+}
+.btn__container_tinder {
+  width: 150px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 14px;
+  margin-bottom: 10px;
+}
+.btn__tinder {
+  height: 69px;
+  width: 69px;
+  background-color: #fff;
+  border: none;
+}