diff --git a/src/pages/app.scss b/src/pages/app.scss index 1920419..bedd0a6 100644 --- a/src/pages/app.scss +++ b/src/pages/app.scss @@ -1,7 +1,163 @@ body { - background-color: white; - + background-color: $color-white; width: 100%; - font-family: $font-family-Roboto; } + +.main { + padding: 29px 100px 70px 100px; + + @media (max-width: 1024px) { + padding: 29px 16px 70px 16px; + } + + .article-name { + display: flex; + gap: 8px; + + @media (min-width: 2500px) { + gap: 8.75px; + + img.icon-home { + width: 31.25px; + } + + img.icon-arrow-right { + width: 15.62px; + } + } + + h5.article-name-title { + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; + color: $color-gray-600; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + } + + h1.article-title { + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + text-align: center; + color: $color-gray-200; + margin: 80px 0; + + @media (max-width: 1024px) { + margin: 80px 0 40px 0; + } + + @media (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + } + + article.article-container { + display: flex; + gap: 30px; + + @media (max-width: 1024px) { + flex-direction: column; + } + + ul.sections-list { + border-right: 1px solid $color-black; + width: 28.094%; + + @media (max-width: 1024px) { + width: 100%; + border-right: none; + } + + @media (min-width: 2500px) { + width: 25.6523%; + } + + li { + font-family: $font-family-Roboto; + color: $color-gray-350; + font-weight: 400; + font-size: 16px; + line-height: 19px; + padding: 10px 0 10px 16px; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + } + } + + li.active { + color: $color-white; + background-color: $color-black; + font-weight: 700; + } + } + + section { + display: none; + } + + section.active { + display: block; + width: 69.26%; + margin-bottom: 11px; + + @media (max-width: 1024px) { + width: 100%; + } + + @media (min-width: 2500px) { + width: 73.044%; + } + + h2.section-title { + font-family: $font-family-Roboto; + font-weight: 700; + font-size: 24px; + line-height: 28px; + margin-bottom: 12px; + color: $color-gray-200; + + @media (max-width: 1024px) { + text-align: center; + } + + @media (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + } + + .section-description p { + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: $color-gray-350; + + @media (max-width: 1024px) { + font-size: 12px; + line-height: 18px; + text-align: justify; + } + + @media (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + } + } + } + } +}