diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 5af3ce8..4342ec4 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -6,10 +6,9 @@ box-sizing: border-box; padding: 0; margin: 0; + font-family: 'Inter', sans-serif; } -/* HEADER */ - header { width: 100%; height: 100px; @@ -19,13 +18,80 @@ header { background-color: #000; } -/* SECTION1 */ +/* SECTION 1 */ -.sessao1 img { +.section1 img { width: 100%; height: auto; } +/* SECTION 2 */ + +.section2 { + display: flex; + justify-content: center; + align-items: center; + padding: 80px 0; + flex-wrap: wrap; +} + +.container-text { + max-width: 766px; +} + +.text-title { + font-size: 48px; + font-weight: 500; + text-transform: uppercase; + margin-bottom: 24px; +} + +.text-subtitle { + font-size: 32px; + font-weight: 400; + text-transform: uppercase; +} + +.text-paragraph { + font-weight: 400; + line-height: 24px; + margin-right: 124px; +} + +/* RESPONSIVIDADE -> NOTEBOOK */ + +@media screen and (min-width: 993px) and (max-width: 1280px) { + .container-text { + max-width: 520px; + } +} + +/* RESPONSIVIDADE -> TABLET */ + +@media screen and (max-width: 992px) { + .container-text { + margin: 0 20px; + } + + .text-title { + font-size: 28px; + } + + .text-subtitle { + font-size: 20px; + } + + .text-paragraph { + margin-right: 0; + } + + .container-img img { + width: 100%; + max-width: 240px; + margin: 67px 88px 157px 88px; + } +} + /* RESPONSIVIDADE -> CELULAR */ @media screen and (max-width: 425px) {