diff --git a/src/img/advantage/1.png b/src/img/advantage/1.png new file mode 100644 index 0000000..a1ec1ce Binary files /dev/null and b/src/img/advantage/1.png differ diff --git a/src/img/advantage/2.png b/src/img/advantage/2.png new file mode 100644 index 0000000..6e12114 Binary files /dev/null and b/src/img/advantage/2.png differ diff --git a/src/img/advantage/3.png b/src/img/advantage/3.png new file mode 100644 index 0000000..22a18b7 Binary files /dev/null and b/src/img/advantage/3.png differ diff --git a/src/img/advantage/4.png b/src/img/advantage/4.png new file mode 100644 index 0000000..b61438c Binary files /dev/null and b/src/img/advantage/4.png differ diff --git a/src/styles/media.css b/src/styles/media.css index 7d5b355..af34f8d 100644 --- a/src/styles/media.css +++ b/src/styles/media.css @@ -2,24 +2,44 @@ #about .section-about_wrap { grid-template-columns: 1fr 1fr; } + + #advantage .section-advantage_wrap { + grid-template-columns: 1fr; + } + + #advantage .section-advantage_wrap .advantage-users { + margin-top: 50px; + padding-left: 60px; + padding-right: 60px; + } + + #advantage .section-advantage_wrap .advantage-users .users-title { + font-size: 21px; + } } + @media (max-width: 860px) { - ul { + header ul { flex-direction: column; } - ul li { + + header ul li { margin-bottom: 10px; } + header .header-content_bottom { flex-direction: column; } + header .header-content_bottom div { margin-bottom: 10px; } + #first { padding-top: 60px; } } + @media (max-width: 770px) { .section-services_wrap { grid-template-columns: 1fr 1fr; @@ -27,51 +47,78 @@ padding-left: 25px; } } + @media (max-width: 768px) { #turn .section-turn_wrap { grid-template-columns: 1fr 1fr; } + #turn .section-turn_wrap div:nth-child(3) { grid-column: 1/3; margin-top: 40px; } } + +@media (max-width: 620px) { + #advantage .section-advantage_wrap .advantage-cards { + grid-template-columns: 1fr 1fr; + } + + #advantage .section-advantage_wrap .advantage-cards .card-other { + grid-column: 1/3; + } +} + @media (max-width: 576px) { #first .section-first_wrap h1 br { display: none; } + #first .section-first_wrap h1 { font-size: 30px; } } + @media (max-width: 548px) { .section-services_wrap { grid-template-columns: 1fr; padding-left: 0px; } + .section-services_wrap div p { text-align: center; padding-left: 0; - } + } + .section-services_wrap div::before { left: 15px; - } + } } + @media (max-width: 460px) { #about .section-about_wrap { grid-template-columns: 1fr; } + #turn .section-turn_wrap { grid-template-columns: 1fr; } + #turn .section-turn_wrap div:nth-child(3) { grid-column: 1; } + + #advantage .section-advantage_wrap .advantage-users { + padding-left: 0; + padding-right: 0; + } } + @media (max-width: 360px) { #first .section-first_wrap h1 { font-size: 28px; } + #first .btn-red { width: 100%; } diff --git a/src/styles/style.css b/src/styles/style.css index 8851b02..7f60fd8 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -74,13 +74,13 @@ h2 { padding-right: 15px; max-width: 960px; } -ul li { +header ul li { display: inline-block; list-style: none; font-size: 16px; font-family: ProximaNovaBold; } -ul { +header ul { padding: 0; margin: 0; display: flex; @@ -331,4 +331,121 @@ header { } .section-turn_feature p b { font-family: ProximaNovaBold; +} +/* Section Advantage */ +#advantage { + padding-top: 100px; + padding-bottom: 100px; +} +.section-advantage_wrap { + margin-top: 80px; + display: grid; + grid-template-columns: 2fr 1fr; +} +.advantage-cards { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +.card-advogrand { + background-color: #26b83a; +} +.card-other { + border: 1px solid #e8e8e8; +} +.card-advogrand, .card-other { + padding-top: 30px; +} +.card-title { + text-align: center; +} +.card-title span { + font-family: ProximaNovaExtraBld; + font-size: 15px; + color: #fff; +} +.card-other .card-title span { + color: #000; +} +.card-content ul li { + list-style: none; + text-align: center; + color: #fff; + font-size: 13px; + font-family: ProximaNovaBold; + margin-bottom: 30px; +} + +.card-info .card-content ul li, .card-other .card-content ul li { + color: #000; +} +.card-info .card-content ul { + margin-top: 77px; +} +.card-content ul { + padding: 0; + margin: 0; + margin-top: 30px; +} +.advantage-users { + padding-left: 20px; +} +.advantage-users .users-title { + color: #000; + font-size: 16px; + font-family: ProximaNovaExtraBld; + text-align: center; + margin-bottom: 30px; +} +.advantage-users button { + width: 100%; +} +.users-list ul li { + list-style: none; + font-family: ProximaNovaBold; + color: #1c1c1c; + margin-bottom: 20px; +} +.users-list ul li span { + font-family: ProximaNovaExtraBld; + padding-left: 20px; +} +.users-list ul { + margin: 0; + padding: 0; +} +.users-list ul li:nth-child(1)::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + background: url(../img/advantage/1.png) no-repeat center center; + position: relative; + top: 4px; +} +.users-list ul li:nth-child(2)::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + background: url(../img/advantage/2.png) no-repeat center center; + position: relative; + top: 4px; +} +.users-list ul li:nth-child(3)::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + background: url(../img/advantage/3.png) no-repeat center center; + position: relative; + top: 4px; +} +.users-list ul li:nth-child(4)::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + background: url(../img/advantage/4.png) no-repeat center center; + position: relative; + top: 4px; } \ No newline at end of file