Merge pull request #6 from Marat200118/develop

Develop

css/style.css

@@ -335,6 +335,7 @@ section {
 
 .company-structure p {
   max-width: 60ch;
+  margin-top: 0;
 }
 
 .company-img {
@@ -479,6 +480,11 @@ section {
   color: var(--dark-color);
 }
 
+.final-section h2 {
+  margin-bottom: 2rem;
+  line-height: 1.2;
+}
+
 .discount-text {
   font-family: var(--helvetica);
   font-weight: 500;
@@ -578,6 +584,85 @@ section {
   align-items: center;
 }
 
+.animation-text__line {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+}
+
+.animation-text h4 {
+  margin: 0;
+}
+
+.animation-text__line p {
+  margin-top: 0.7rem;
+  margin-bottom: 0.7rem;
+}
+
+.carousel-item img {
+  width: clamp(6em, 10vw, 8em);
+  height: auto;
+}
+
+.company-list p {
+  color: var(--orange);
+  text-align: center;
+  margin: 0.4rem;
+}
+
+.carousel-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.radio {
+  display: none;
+}
+
+.stories-links a {
+  color: var(--orange);
+  text-decoration: underline;
+  font-family: var(--helvetica);
+  font-size: var(--font-size-heading);
+  transition: all 0.25s;
+}
+
+.stories-links a:hover {
+  color: var(--light-color);
+}
+
+.stories-links {
+  text-align: center;
+}
+
+.footer h2 {
+  margin-top: 4rem;
+}
+
+.map-img {
+  width: 100%;
+  height: auto;
+}
+
+.test-yourself-mobile {
+  color: var(--dark-color);
+}
+
+.mobile-map-content .route {
+  text-align: center;
+}
+
+.route {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+
+}
+
 /* * css media query  */
 
 @media (min-width: 768px) {
@@ -688,23 +773,30 @@ section {
   .investment-item {
     flex: 0 0 auto; 
     margin-right: 2rem;
+    margin-top: 0;
     justify-content: space-around;
     align-items: center;
     width: 100vw;
     flex-shrink: 0; 
   }
 
-  .investment-flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-  }
-
   .investment-left, .investment-right {
     width: 50%;
   }
+
+  .stories-links {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    gap: 2rem;
+    color: var(--orange);
+    text-align: left;
+  }
 
+  .stories-links p {
+    margin-top: 0;
+  }
 
   .investment-container {
     overflow-x: hidden;
@@ -715,7 +807,6 @@ section {
     height: 100vh;
   }
 
-
   .investment-img {
     max-width: 40vw;
   }
@@ -725,15 +816,22 @@ section {
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
-    gap: 7rem;
+    background-color: var(--light-color);
+    color: var(--dark-color);
+    padding: 3rem;
   }
 
   .test-yourself {
     display: block;
     color: var(--dark-color);
   }
 
+  .share-button {
+    margin-top: 3rem;
+  }
+
   .information-block p {
+    margin-top: 0;
     color: var(--orange);
   }
 
@@ -761,11 +859,18 @@ section {
   }
 
   .radio {
+    display: block;
     color: var(--orange);
     height: 1.5rem;
     width: 1.5rem;
     margin: 0;
     border-radius: 50%;
+    transition: all 0.25s;
+  }
+
+  .radio:hover {
+    cursor: pointer;
+    scale: 1.4;
   }
 
   .radio:nth-of-type(1) {
@@ -814,7 +919,6 @@ section {
     display: flex;
   }
 
-
   .radio:checked {
     color: var(--orange);
     background-color: var(--orange);
@@ -843,6 +947,7 @@ section {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    margin-top: 0;
   }
 
   .carousel-item img {
@@ -911,6 +1016,9 @@ section {
     cursor: pointer;
   }
 
+  .test-yourself-mobile {
+    display: none;
+  }
 
   .year-and-description {
     padding: 5rem 2rem;