Add files via upload

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%;
     }

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;
 }