сверстан футер
This commit is contained in:
DmitriyB
@@ -24,6 +24,9 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
|
<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@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
+2
-37
@@ -1,38 +1,3 @@
|
|||||||
.App {
|
.App {
|
||||||
text-align: center;
|
font-family: inter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-logo {
|
|
||||||
height: 40vmin;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.App-logo {
|
|
||||||
animation: App-logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-header {
|
|
||||||
background-color: #282c34;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(10px + 2vmin);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-link {
|
|
||||||
color: #61dafb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes App-logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+4
-15
@@ -1,24 +1,13 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import logo from './logo.svg';
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
import { Footer } from './components/footer/footer';
|
||||||
|
import { MainPart } from './components/mainPart/mainPart';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<header className="App-header">
|
<MainPart />
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
<Footer />
|
||||||
<p>
|
|
||||||
Edit <code>src/App.tsx</code> and save to reload.
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
className="App-link"
|
|
||||||
href="https://reactjs.org"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Learn React
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,11 +3,35 @@ import React from "react";
|
|||||||
type TProps = {
|
type TProps = {
|
||||||
title: string
|
title: string
|
||||||
href?: string
|
href?: string
|
||||||
pairData: Array<{value1: string, value2: string}>
|
pairData: Array<{value1: string, value2?: string}>
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ContactContainer:React.FC<TProps> = React.memo((props) => {
|
export const ContactContainer:React.FC<TProps> = React.memo((props) => {
|
||||||
return <div className="contact-container">
|
return <div className="contact-container">
|
||||||
|
<div className="contact-header">
|
||||||
|
<span className="contact-header-title">{props.title}</span>
|
||||||
|
<span className="contact-header-line"></span>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
props.href
|
||||||
|
? <a href={props.href} className='contact-href'>{props.href}</a>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
<div className="contact-data-container">
|
||||||
|
{props.pairData.map(pair => {
|
||||||
|
return <div className="contact-data-row">
|
||||||
|
<div className="contact-data-value-container">
|
||||||
|
<span className="contact-data-value">{pair.value1}</span>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
pair?.value2
|
||||||
|
? <div className="contact-data-value-container">
|
||||||
|
<span className="contact-data-value">{pair?.value2}</span>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
})
|
})
|
||||||
@@ -5,4 +5,78 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #1E1630;
|
background-color: #1E1630;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 120px 200px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content-container {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
gap: 100px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content-logo {
|
||||||
|
width: 70px;
|
||||||
|
height: 113px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content-contacts {
|
||||||
|
display: flex;
|
||||||
|
gap: 60px;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-header-title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-header-line {
|
||||||
|
height: 2px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #979797;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-href {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-container {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 255px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-data-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 130%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-data-row {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-data-value-container {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { ContactContainer } from "./contactsContainer";
|
||||||
import './footer.css';
|
import './footer.css';
|
||||||
import whiteLogo from './logoWhiteIcon.svg';
|
import whiteLogo from './logoWhiteIcon.svg';
|
||||||
|
|
||||||
@@ -6,7 +7,31 @@ export const Footer:React.FC = React.memo(() => {
|
|||||||
return <div className="footer-container">
|
return <div className="footer-container">
|
||||||
<div className="footer-content-container">
|
<div className="footer-content-container">
|
||||||
<img className="footer-content-logo" alt="logo" src={whiteLogo}></img>
|
<img className="footer-content-logo" alt="logo" src={whiteLogo}></img>
|
||||||
|
<div className="footer-content-contacts">
|
||||||
|
<ContactContainer
|
||||||
|
title="Контакты"
|
||||||
|
href="graff.tech"
|
||||||
|
pairData={[
|
||||||
|
{value1: 'Россия', value2: 'ОАЭ'},
|
||||||
|
{value1: 'info@graff.tech', value2: 'waseem@graff.tech'},
|
||||||
|
{value1: '+7 800 770 00 67', value2: '+971 50 983 8902'}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ContactContainer
|
||||||
|
title="Соцсети"
|
||||||
|
pairData={[
|
||||||
|
{value1: 'Facebook', value2: 'Instagramm'},
|
||||||
|
{value1: 'YouTube', value2: 'VK'}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ContactContainer
|
||||||
|
title="Адрес"
|
||||||
|
pairData={[
|
||||||
|
{value1: 'ул. Московская, 47,'},
|
||||||
|
{value1: 'Екатеринбург, Россия'}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
})
|
})
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url('backgroundImage.svg') 50% 50% no-repeat;
|
background: url('backgroundImage.svg') 50% 50% no-repeat;
|
||||||
background-size: auto 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-part-header {
|
.main-part-header {
|
||||||
|
|||||||
Reference in New Issue
Block a user