Init project

2025-12-10 03:59:26 +02:00 · 2025-01-25 23:22:56 +01:00
parent ba2bb8e286
commit 5fbffe2e41
105 changed files with 21868 additions and 0 deletions
--- a/src/pages/About/About.scss
+++ b/src/pages/About/About.scss
@@ -0,0 +1,99 @@
+@import '../../styles/vars.scss';
+
+.wrapper-about {
+    background-image: url(../../assets/images/background/gOWo4SLsoic.jpg);
+    background-size: cover;
+
+    @media (max-width: $tabletWidth) {
+        background-size: auto;
+        background-position: top;
+    }
+}
+
+.about {
+    display: flex;
+    column-gap: 121px;
+    padding-left: 45px;
+    padding-bottom: 33px;
+    color: white;
+    // было 4px вместо 10px
+    text-shadow: 2px 2px 10px rgba(6, 26, 37, 1);
+
+    @media (max-width: $tabletWidth) {
+        flex-direction: column-reverse;
+        text-align: center;
+        padding: 0;
+        text-shadow: 1px 1px 15px rgba(6, 26, 37, 1);
+    }
+}
+
+.about-inner {
+    width: 596px;
+
+    @media (min-width: 1800px) {
+        width: 746px;
+    }
+
+    @media (max-width: $tabletWidth) {
+        align-self: center;
+        width: auto;
+        background: linear-gradient(90deg, #17628C 0%, #FFFFFF 147.13%);
+    }
+}
+
+.about__info {
+    // width: 596px;
+    padding: 38px;
+    font-size: 17.5px;
+    line-height: 29px;
+    border-radius: 25px;
+    background: rgba(10, 42, 60, 0.5);
+
+    @media (min-width: 1800px) {
+        font-size: 21.5px;
+        line-height: 33px;
+    }
+
+    @media (max-width: $tabletWidth) {
+        // width: auto;
+        padding: 30px;
+        margin: 50px;
+        font-size: 19.5px;
+    }
+}
+
+.about__info p:nth-child(2),
+.about__info p:last-child {
+    margin: 37px 0;
+}
+
+.about__title {
+    margin-top: 147px;
+    font-size: 35px;
+
+    @media (min-width: 1800px) {
+        font-size: 39px;
+    }
+
+    @media (max-width: $laptopWidth) {
+        margin-top: 247px;
+    }
+
+    @media (max-width: $tabletWidth) {
+        padding: 120px 18px;
+        margin: 0 0 60px 0;
+    }
+}
+
+.about__title span {
+    display: block;
+    text-align: end;
+
+    @media (max-width: 1355px) {
+        text-align: start;
+    }
+
+    @media (max-width: $tabletWidth) {
+        text-align: center;
+    }
+}