add header and footer react
This commit is contained in:
parent
cbd29f5ba0
commit
c7d15b1943
|
|
@ -16,7 +16,7 @@
|
||||||
<section class="logoSection">
|
<section class="logoSection">
|
||||||
<!--Логотип-->
|
<!--Логотип-->
|
||||||
<a href="https://vvsu.ru">
|
<a href="https://vvsu.ru">
|
||||||
<img src="./img/logo.png" alt="">
|
<img src="./images/logo.png" alt="">
|
||||||
</a>
|
</a>
|
||||||
<div class="verticalLine"></div>
|
<div class="verticalLine"></div>
|
||||||
<!--Название сервиса-->
|
<!--Название сервиса-->
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.11.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
}
|
}
|
||||||
|
|
@ -3114,6 +3115,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@remix-run/router": {
|
||||||
|
"version": "1.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.0.tgz",
|
||||||
|
"integrity": "sha512-N13NRw3T2+6Xi9J//3CGLsK2OqC8NMme3d/YX+nh05K9YHWGcv8DycHJrqGScSP4T75o8IN6nqIMhVFU8ohg8w==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rollup/plugin-babel": {
|
"node_modules/@rollup/plugin-babel": {
|
||||||
"version": "5.3.1",
|
"version": "5.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||||
|
|
@ -14386,6 +14395,36 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-router": {
|
||||||
|
"version": "6.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.0.tgz",
|
||||||
|
"integrity": "sha512-hTm6KKNpj9SDG4syIWRjCU219O0RZY8RUPobCFt9p+PlF7nnkRgMoh2DieTKvw3F3Mw6zg565HGnSv8BuoY5oQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@remix-run/router": "1.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-router-dom": {
|
||||||
|
"version": "6.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.0.tgz",
|
||||||
|
"integrity": "sha512-Q3mK1c/CYoF++J6ZINz7EZzwlgSOZK/kc7lxIA7PhtWhKju4KfF1WHqlx0kVCIFJAWztuYVpXZeljEbds8z4Og==",
|
||||||
|
"dependencies": {
|
||||||
|
"@remix-run/router": "1.6.0",
|
||||||
|
"react-router": "6.11.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8",
|
||||||
|
"react-dom": ">=16.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-scripts": {
|
"node_modules/react-scripts": {
|
||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.11.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -2,12 +2,12 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>React App</title>
|
<title>Pairent</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body id="root">
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root">
|
|
||||||
<!-- this to content -->
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,17 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import './App.css';
|
import Header from './components/Header/Header';
|
||||||
|
import Footer from './components/Footer/Footer';
|
||||||
|
import './main.css';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<>
|
||||||
</div>
|
<Header/>
|
||||||
|
<main>
|
||||||
|
<div className="horizontalLine"></div>
|
||||||
|
</main>
|
||||||
|
<Footer/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './styles/Footer.css';
|
||||||
|
|
||||||
|
const Footer = function () {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<div class="footerHouses">
|
||||||
|
<svg width="64" height="112" viewBox="0 0 64 112" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 16L31.5 0.5L64 16V112H0V16Z" fill="#D9D9D9"/>
|
||||||
|
<rect x="45" width="8" height="16" fill="#D9D9D9"/>
|
||||||
|
<rect x="37" y="27" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="10" y="27" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="37" y="79" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="10" y="79" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="37" y="53" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="10" y="53" width="16" height="16" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="64" height="64" fill="#D9D9D9"/>
|
||||||
|
<rect x="38" y="38" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="11" y="38" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="38" y="12" width="16" height="16" fill="white"/>
|
||||||
|
<rect x="11" y="12" width="16" height="16" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="footerBlock"></div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/*Домики на футере*/
|
||||||
|
.footerHouses{
|
||||||
|
margin: 5% 0 0 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Футер*/
|
||||||
|
.footerBlock{
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
margin-top: -0.5%;
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './styles/Header.css';
|
||||||
|
|
||||||
|
const Header = function () {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<section className="logoSection">
|
||||||
|
<a href="https://vvsu.ru">
|
||||||
|
<img src="/images/vvsu_logo.png"></img>
|
||||||
|
</a>
|
||||||
|
<div className="verticalLine"></div>
|
||||||
|
<h1>Pairent</h1>
|
||||||
|
<a href="#">
|
||||||
|
<button className="btnLocation">
|
||||||
|
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.88889 8.6665V12.9511L4.27722 13.854C4.14528 14.0487 3.85444 14.0487 3.7225 13.854L3.11111 12.9511V8.6665C3.39972 8.719 3.69611 8.75017 4 8.75017C4.30389 8.75017 4.60028 8.719 4.88889 8.6665ZM4 0C6.20917 0 8 1.76289 8 3.93758C8 6.11227 6.20917 7.87515 4 7.87515C1.79083 7.87515 0 6.11227 0 3.93758C0 1.76289 1.79083 0 4 0ZM4 2.07817C5.04167 2.07817 5.88889 2.91217 5.88889 3.93758C5.88889 4.1186 6.03833 4.26571 6.22222 4.26571C6.40611 4.26571 6.55556 4.1186 6.55556 3.93758C6.55556 2.5504 5.40889 1.4219 4 1.4219C3.81611 1.4219 3.66667 1.56902 3.66667 1.75003C3.66667 1.93105 3.81611 2.07817 4 2.07817Z" fill="#222222"></path>
|
||||||
|
</svg>
|
||||||
|
Владивосток
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
<nav>
|
||||||
|
<div>
|
||||||
|
<a href="#">
|
||||||
|
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M14.447 0.95727C12.7345 -0.502078 10.1877 -0.239583 8.61584 1.38226L8.00023 2.01663L7.38462 1.38226C5.8159 -0.239583 3.26595 -0.502078 1.55348 0.95727C-0.408984 2.63224 -0.512107 5.63843 1.24411 7.45403L7.29087 13.6977C7.68149 14.1008 8.31585 14.1008 8.70647 13.6977L14.7532 7.45403C16.5126 5.63843 16.4094 2.63224 14.447 0.95727Z"></path>
|
||||||
|
</svg>
|
||||||
|
Избранное
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">
|
||||||
|
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10.4 9.33333H11.6C11.8 9.33333 12 9.1 12 8.86667V3.96667C12 3.73333 11.8 3.5 11.6 3.5H10.4C10.2 3.5 10 3.73333 10 3.96667V8.86667C10 9.1 10.2 9.33333 10.4 9.33333ZM13.4 9.33333H14.6C14.8 9.33333 15 9.1 15 8.86667V0.466667C15 0.233333 14.8 0 14.6 0H13.4C13.2 0 13 0.233333 13 0.466667V8.86667C13 9.1 13.2 9.33333 13.4 9.33333ZM4.4 9.33333H5.6C5.8 9.33333 6 9.1 6 8.86667V6.3C6 6.06667 5.8 5.83333 5.6 5.83333H4.4C4.2 5.83333 4 6.06667 4 6.3V8.86667C4 9.1 4.2 9.33333 4.4 9.33333ZM7.4 9.33333H8.6C8.8 9.33333 9 9.1 9 8.86667V1.63333C9 1.4 8.8 1.16667 8.6 1.16667H7.4C7.2 1.16667 7 1.4 7 1.63333V8.86667C7 9.1 7.2 9.33333 7.4 9.33333ZM15.5 11.6667H2V0.583333C2 0.261042 1.77625 0 1.5 0H0.5C0.22375 0 0 0.261042 0 0.583333V12.8333C0 13.4776 0.447812 14 1 14H15.5C15.7763 14 16 13.739 16 13.4167V12.25C16 11.9277 15.7763 11.6667 15.5 11.6667Z"></path>
|
||||||
|
</svg>
|
||||||
|
Сравнения
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">
|
||||||
|
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.5556 5C11.5556 2.2375 8.96944 0 5.77778 0C2.58611 0 0 2.2375 0 5C0 6.07188 0.391667 7.05937 1.05556 7.875C0.683333 8.81875 0.0694444 9.56875 0.0611111 9.57812C0 9.65 -0.0166667 9.75625 0.0194444 9.85C0.0555556 9.94375 0.133333 10 0.222222 10C1.23889 10 2.08056 9.61563 2.68611 9.21875C3.58056 9.70938 4.63889 10 5.77778 10C8.96944 10 11.5556 7.7625 11.5556 5ZM14.9444 11.875C15.6083 11.0625 16 10.0719 16 9C16 6.90938 14.5139 5.11875 12.4083 4.37187C12.4333 4.57812 12.4444 4.7875 12.4444 5C12.4444 8.30937 9.45278 11 5.77778 11C5.47778 11 5.18611 10.975 4.89722 10.9406C5.77222 12.7375 7.82778 14 10.2222 14C11.3611 14 12.4194 13.7125 13.3139 13.2188C13.9194 13.6156 14.7611 14 15.7778 14C15.8667 14 15.9472 13.9406 15.9806 13.85C16.0167 13.7594 16 13.6531 15.9389 13.5781C15.9306 13.5688 15.3167 12.8219 14.9444 11.875Z"></path>
|
||||||
|
</svg>
|
||||||
|
Чаты
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a href="#">
|
||||||
|
<button className="userIcon">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M16 0C7.16129 0 0 7.16129 0 16C0 24.8387 7.16129 32 16 32C24.8387 32 32 24.8387 32 16C32 7.16129 24.8387 0 16 0ZM16 6.19355C19.1355 6.19355 21.6774 8.73548 21.6774 11.871C21.6774 15.0065 19.1355 17.5484 16 17.5484C12.8645 17.5484 10.3226 15.0065 10.3226 11.871C10.3226 8.73548 12.8645 6.19355 16 6.19355ZM16 28.3871C12.2129 28.3871 8.81936 26.671 6.54839 23.9871C7.76129 21.7032 10.1355 20.129 12.9032 20.129C13.0581 20.129 13.2129 20.1548 13.3613 20.2C14.2 20.471 15.0774 20.6452 16 20.6452C16.9226 20.6452 17.8064 20.471 18.6387 20.2C18.7871 20.1548 18.9419 20.129 19.0968 20.129C21.8645 20.129 24.2387 21.7032 25.4516 23.9871C23.1806 26.671 19.7871 28.3871 16 28.3871Z" fill="#007EFF"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
margin: 18px 0px 11px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoSection{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Логотип*/
|
||||||
|
.logoSection img{
|
||||||
|
width: 100px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verticalLine{
|
||||||
|
width: 3px;
|
||||||
|
height: 37px;
|
||||||
|
margin: 0px 17px 0px 17px;
|
||||||
|
background-color: #A9A9A9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Название сервиса*/
|
||||||
|
.logoSection h1{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Кнопка локации*/
|
||||||
|
.btnLocation{
|
||||||
|
width: 150px;
|
||||||
|
height: 28px;
|
||||||
|
margin-left: 37px;
|
||||||
|
border-radius: 40px;
|
||||||
|
background-color: #CCC;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Навигация*/
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav div{
|
||||||
|
margin-right: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a, svg{
|
||||||
|
transition: 0.3s;
|
||||||
|
fill: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav svg:hover{
|
||||||
|
fill: #0050A1;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover{
|
||||||
|
color: #0050A1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Горизонтальная линия под шапкой*/
|
||||||
|
.horizontalLine{
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #CCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Личный кабинет*/
|
||||||
|
.userIcon{
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
margin: 0 5% 0 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontalLine{
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #CCC;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue