diff --git a/public/index.html b/public/index.html index aa069f2..4418f82 100644 --- a/public/index.html +++ b/public/index.html @@ -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`. --> + + + React App diff --git a/src/App.css b/src/App.css index 74b5e05..dbc852e 100644 --- a/src/App.css +++ b/src/App.css @@ -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; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index a53698a..0e15e03 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+ +
); } diff --git a/src/components/footer/contactsContainer.tsx b/src/components/footer/contactsContainer.tsx index cf63cf9..9f9aadb 100644 --- a/src/components/footer/contactsContainer.tsx +++ b/src/components/footer/contactsContainer.tsx @@ -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 = React.memo((props) => { return
- +
+ {props.title} + +
+ { + props.href + ? {props.href} + : null + } +
+ {props.pairData.map(pair => { + return
+
+ {pair.value1} +
+ { + pair?.value2 + ?
+ {pair?.value2} +
+ : null + } +
+ })} +
}) \ No newline at end of file diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index 41961d9..a030da9 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -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%; } \ No newline at end of file diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index 672ac46..f4ec591 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -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
logo - +
+ + + +
}) \ No newline at end of file diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css index 96d1eeb..c10504d 100644 --- a/src/components/mainPart/mainPart.css +++ b/src/components/mainPart/mainPart.css @@ -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 {