сверстан футер
This commit is contained in:
DmitriyB
@@ -24,6 +24,9 @@
|
||||
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`.
|
||||
-->
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+2
-37
@@ -1,38 +1,3 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
font-family: inter;
|
||||
}
|
||||
+4
-15
@@ -1,24 +1,13 @@
|
||||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import { Footer } from './components/footer/footer';
|
||||
import { MainPart } from './components/mainPart/mainPart';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<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>
|
||||
<MainPart />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,11 +3,35 @@ import React from "react";
|
||||
type TProps = {
|
||||
title: string
|
||||
href?: string
|
||||
pairData: Array<{value1: string, value2: string}>
|
||||
pairData: Array<{value1: string, value2?: string}>
|
||||
}
|
||||
|
||||
export const ContactContainer:React.FC<TProps> = React.memo((props) => {
|
||||
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>
|
||||
})
|
||||
@@ -5,4 +5,78 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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 { ContactContainer } from "./contactsContainer";
|
||||
import './footer.css';
|
||||
import whiteLogo from './logoWhiteIcon.svg';
|
||||
|
||||
@@ -6,7 +7,31 @@ export const Footer:React.FC = React.memo(() => {
|
||||
return <div className="footer-container">
|
||||
<div className="footer-content-container">
|
||||
<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>
|
||||
})
|
||||
@@ -18,7 +18,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('backgroundImage.svg') 50% 50% no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.main-part-header {
|
||||
|
||||
Reference in New Issue
Block a user