diff --git a/src/App.tsx b/src/App.tsx
index 60aa4e6..0e15e03 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ function App() {
return (
- {/* */}
+
);
}
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index dde82b0..4b2134b 100644
--- a/src/components/footer/footer.css
+++ b/src/components/footer/footer.css
@@ -32,6 +32,19 @@
box-sizing: border-box;
}
+.footer-content-contacts-first-container {
+ flex: 2;
+}
+
+.footer-content-contacts-second-container {
+ flex: 3;
+ display: flex;
+ gap: 60px;
+ /* width: 100%; */
+ /* justify-content: space-between; */
+ box-sizing: border-box;
+}
+
.contact-header {
display: flex;
flex-direction: column;
@@ -56,7 +69,7 @@
.contact-container {
width: 100%;
- min-width: 255px;
+ min-width: 230px;
display: flex;
flex-direction: column;
gap: 25px;
@@ -68,17 +81,23 @@
gap: 12px;
font-weight: 400;
font-size: 18px;
- line-height: 130%;
+ line-height: 130%;
}
.contact-data-row {
display: flex;
width: 100%;
justify-content: space-between;
+ gap: 20px;
}
.contact-data-value-container {
+ display: flex;
+ justify-content: flex-start;
width: 100%;
+ /* flex-shrink: 0; */
+ /* min-width: 160px; */
+ /* flex-shrink: 0; */
}
@media screen and (max-width: 1280px) {
@@ -93,4 +112,89 @@
flex-direction: column;
gap: 40px;
}
+
+ .footer-content-container {
+ gap: 60px;
+ }
+
+ .footer-content-contacts {
+ gap: 40px;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .footer-container {
+ padding: 80px 20px 70px 20px;
+ }
+
+ .footer-content-container {
+ flex-direction: column;
+ gap: 60px;
+ flex-wrap: wrap;
+ }
+
+ .footer-content-contacts {
+ flex-direction: column;
+ /* justify-content: space-between; */
+ }
+
+ .contact-data-row {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ gap: 20px;
+ }
+
+ .contact-data-value-container {
+ width: 100%;
+ flex-shrink: 1;
+ /* min-width: 160px; */
+ /* flex-shrink: 0; */
+ }
+
+ .footer-content-contacts-second-container {
+ gap: 40px;
+ }
+
+}
+
+@media screen and (max-width: 640px) {
+ .footer-container {
+ padding: 40px 10px;
+ }
+
+ .footer-content-logo {
+ width: 40px;
+ height: 65px;
+ }
+
+ .footer-content-container {
+ flex-direction: column;
+ gap: 40px;
+
+ }
+
+ .footer-content-contacts {
+ flex-direction: column;
+ }
+
+ .contact-data-row {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ gap: 20px;
+ }
+
+ .footer-content-contacts-second-container {
+ flex-direction: column;
+ }
+
+ .contact-header-title {
+ font-size: 18px;
+ }
+
+ .contact-data-container {
+ font-size: 14px;
+ }
+
}
\ No newline at end of file
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 808bd1a..845d570 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -8,29 +8,33 @@ export const Footer:React.FC = React.memo(() => {
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index f5c3714..a3624e3 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -18,7 +18,8 @@
width: 100%;
height: 100%;
background: url('backgroundImage.svg') 50% 50% no-repeat;
- background-size: 100% 100%;
+ /* background-size: 100% 100%; */
+ background-size: cover;
}
.main-part-header {