README.md

@@ -1,4 +1,4 @@
-# challenge-landing-page
+# practice-time-landing-page
 
 
 
@@ -15,7 +15,7 @@ Already a pro? Just edit this README.md and make it your own. Want to make it ea
 
 ```
 cd existing_repo
-git remote add origin https://gitlab.com/m3-academy/fase-01/challenge-landing-page.git
+git remote add origin https://gitlab.com/m3-academy/fase-01/practice-time-landing-page.git
 git branch -M main
 git push -uf origin main
 ```

assests/style/main.css

@@ -1,160 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Inter', sans-serif;
-    color: #000000;
-}
-
-.page-header {
-    display: flex;
-    justify-content: center;
-    padding: 29px 0;
-    background: #000000;
-}
-
-.header-logo {
-    display: block;
-    width: 226.16px;
-    height: 43px;
-}
-
-.main-banner {
-    width: 100%;
-    display: block;
-}
-
-.top-infocard {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 178px;
-    
-}
-
-.top-infocard-text {
-    text-align: center;
-    margin: 73px 0;
-    max-width: 766px;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-   
-}
-
-.top-infocard-title {
-    font-weight: 500;
-    font-size: 48px;
-    line-height: 58px;
-    text-transform: uppercase;
-    margin: 14px 0;
-}
-
-
-.top-infocard-subtitle {
-    font-weight: 400;
-    font-size: 32px;
-    line-height: 39px;
-    text-transform: uppercase;
-    }
-
-.top-infocard-description {
-    font-size: 16px;
-    line-height: 24px;
-    text-align: left;
-}
-
-.top-cards {
-    display: grid;
-    grid-template-columns: repeat(3, max-content);
-    gap: 21px;
-    justify-content: center;
-    margin-bottom: 80px;
-}
-
-.top-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 35px 26px 27px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-}
-
-.top-card-image {
-    display: block;
-    margin-bottom: 27px;
-}
-
-.top-card-description {
-    max-width: 299px;
-    line-height: 24px;
-    text-align: center;
-}
-
-.middle-cards-wrapper {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    justify-items: center;
-    gap: 40px;
-    margin: 0 72px;
-  
-}
-
-.middle-cards {
-    background: #E0E0E0;
-    margin-bottom: 190px;
-    
-}
-
-.middle-card {
-    max-width: 566px;
-
-    
-}
-
-.middle-card-image {
-    width: 100%;
-    display: block;
-
-}
-
-
-.page-footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 38px;
-    background: black;
-}
-
-.footer-icons {
-    display: flex;
-    list-style: none;
-
-}
-
-.footer-icon {
-    margin: 0 8px;
-    margin-bottom: 16px;
-}
-
-.footer-text {
-    font-size: 10px;
-    line-height: 12px;
-    text-transform: uppercase;
-    color: #BDBDBD;
-
-}
-
-@media screen and (max-width: 414px) {
-    .main-banner-desktop{
-        display: none;
-    }
-}
-
-@media screen and (min-width: 415px) {
-    .main-banner-mobile {
-        display: none;
-    }
-}

assets/style/main.css

@@ -0,0 +1,398 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    color: #000000;
+}
+
+.page-header {
+    display: flex;
+    justify-content: center;
+    padding: 29px 0;
+    background: #000000;
+}
+
+.header-logo {
+    display: block;
+    width: 226.16px;
+    height: 43px;
+}
+
+.main-banner {
+    width: 100%;
+    display: block;
+}
+
+.top-infocard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 178px;
+    
+}
+
+.top-infocard-text {
+    text-align: center;
+    margin: 73px 0;
+    max-width: 766px;
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+   
+}
+
+.top-infocard-title {
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 58px;
+    text-transform: uppercase;
+    margin: 14px 0;
+}
+
+
+.top-infocard-subtitle {
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+    text-transform: uppercase;
+    }
+
+.top-infocard-description {
+    font-size: 16px;
+    line-height: 24px;
+    text-align: left;
+}
+
+.top-cards {
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    gap: 21px;
+   
+    justify-content: center;
+    margin-bottom: 80px;
+}
+
+.top-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8.45% 7.97% 15.70%;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.top-card-image {
+    display: block;
+    margin-bottom: 27px;
+}
+
+.top-card-description {
+    max-width: 299px;
+    line-height: 24px;
+    text-align: center;
+}
+
+.middle-cards-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 40px;
+    position: relative;
+    bottom: -62px;
+    margin: 0 3.75%;
+}
+
+.middle-cards-2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 40px;
+    
+}
+
+.middle-cards {
+    background: #E0E0E0;
+    margin-bottom: 190px;
+    
+}
+
+.middle-card {
+    max-width: 566px;
+
+    
+}
+
+.middle-card-image {
+    width: 100%;
+    display: block;
+
+}
+
+.bottom-cards {
+    display: grid;
+    grid-template-columns: repeat(4, max-content);
+    gap: 16px;
+    justify-content: center;
+    margin-bottom: 80px;
+}
+
+.bottom-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8.45% 7.97% 15.70%;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.bottom-card-image {
+    display: block;
+    margin-bottom: 27px;
+}
+
+.bottom-card-description {
+    max-width: 367px;
+    line-height: 24px;
+    text-align: center;
+}
+
+
+.bottom-infocard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 116px;
+}
+
+.bottom-infocard-text {
+    padding: 0 28% 50px;
+}
+
+.bottom-infocard-title {
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+    text-align: center;
+
+}
+
+.bottom-infocard-description {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
+
+.bottom-infocard-image {
+    display: block;
+    width: 70%;
+}
+
+.page-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 38px;
+    background: black;
+}
+
+.footer-icons {
+    display: flex;
+    list-style: none;
+
+}
+
+.footer-icon {
+    margin: 0 8px;
+    margin-bottom: 16px;
+}
+
+.footer-text {
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: uppercase;
+    color: #BDBDBD;
+
+}
+
+
+@media screen and (max-width: 413px) {
+    .top-card-description, .bottom-card-description {
+        max-width: 280px;
+    }
+
+    .top-card {
+        padding: 8.45% 7.97% 15.70%;
+    }
+
+    .bottom-card {
+        padding: 8.45% 7.97% 15.70%;
+    }
+}
+
+@media screen and (min-width: 851px) {
+    .top-infocard-image {
+        width: 16%;
+    }
+}
+
+@media screen and (min-width: 750px) and (max-width: 850px){
+    .top-infocard-image {
+        width: 30%;
+    }
+}
+
+
+@media screen and (max-width: 525px) {
+    .top-infocard-image {
+        width: 57%;
+    }
+}
+
+@media screen and (min-width: 526px) and (max-width: 1199px) {
+    .top-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+}
+
+
+@media screen and (min-width: 526px) and (max-width: 1580px) {
+    
+
+    .bottom-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .top-cards {
+        grid-template-columns: repeat(1, max-content);
+    }
+
+    .bottom-cards {
+        grid-template-columns: repeat(1, max-content);
+    }
+
+    .middle-cards-wrapper {
+        flex-direction: column;
+        margin: 0 23px;
+        align-items: center;
+        gap: 24px;
+        bottom: -32px;
+    }
+
+    .middle-cards-2 {
+        max-width: 566px;
+        flex-direction: row-reverse;
+        gap: 14px;
+    }
+    .middle-cards {
+        margin-bottom: 112px;
+    }
+    
+    .main-banner-desktop, .bottom-infocard-image-desktop {
+        display: none;
+    }
+    
+    .bottom-infocard {
+        display: flex;
+            flex-direction: column-reverse;
+            margin-bottom: 0;
+        }
+        
+        .bottom-cards {
+            grid-template-columns: repeat(1, max-content);
+        }
+    
+        .bottom-infocard-image{
+            width: 100%;
+        }
+    
+}
+
+
+
+    @media screen and (min-width: 769px) {
+        .main-banner-mobile, .bottom-infocard-image-mobile {
+            display: none;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+        .top-infocard {
+            margin-bottom: 21.88%;
+        }
+    
+        .top-infocard-text {
+            margin: 73px 29px 65px;
+        }
+    
+        .top-infocard-title {
+            font-size: 28px;
+            line-height: 34px;
+            text-align: center;
+            margin: 0 0 14px;
+        }
+    
+        .top-infocard-subtitle {
+            font-size: 20px;
+            line-height: 24px;
+            text-align: center;
+        }
+    
+        .top-infocard-description {
+            text-align: center;
+        }
+    
+        .bottom-infocard-text {
+            padding: 50px 32px 87px;
+        }
+    
+        .bottom-infocard-title {
+            font-weight: 600;
+            font-size: 24px;
+            line-height: 29px;
+            text-align: center;
+            margin-bottom: 9px;
+        }
+    
+        .footer-text {
+            text-align: center;
+        }
+        
+    }
+
+    @media screen and (min-width: 2500px) {
+        .main-banner-mobile, .bottom-infocard-image-mobile {
+            display: none;
+        }
+
+        .top-infocard-title {
+            font-size: 96px;
+            line-height: 116px;
+        }
+        
+        
+        .top-infocard-subtitle, .bottom-infocard-title {
+            font-size: 64px;
+            line-height: 78px;
+            }
+        
+        .top-infocard-description, .bottom-infocard-description {
+            font-size: 32px;
+            line-height: 48px;
+        }
+
+        .top-card-description, .bottom-card-description {
+            font-size: 32px;
+        }
+
+        .footer-text {
+            font-size: 20px;
+            line-height: 24px;
+        }
+
+        .top-card-description, .bottom-card-description {
+            line-height: 48px;
+        }
+    }

index.html

@@ -12,19 +12,19 @@
 
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 
-    <link rel="stylesheet" href="./assests/style/main.css">
+    <link rel="stylesheet" href="./assets/style/main.css">
 </head>
 <body>
     <header class="page-header">
         <a href="/">
-            <img class="header-logo" src="./assests/images/logo-m3academy.svg" alt="Logo M3 Academy">
+            <img class="header-logo" src="./assets/images/logo-m3academy.svg" alt="Logo M3 Academy">
         </a>
     </header>
 
     <main>
         <section>
-            <img class="main-banner main-banner-desktop" src="./assests/images/main-banner-desktop.png" alt="Banner principal desktop">
-            <img class="main-banner main-banner-mobile" src="./assests/images/main-banner-mobile.png" alt="Banner principal mobile">
+            <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner principal desktop">
+            <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile">
         </section>
 
         <section class="top-infocard">
@@ -36,24 +36,24 @@
                 <p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
             </div>
 
-            <img class="top-infocard-image" src="./assests/images/top-infocard-image.png" alt="Imagem do infocard do topo">
+            <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Imagem do infocard do topo">
         </section>
 
         <section class="top-cards">
             <div class="top-card">
-                <img class="top-card-image" src="./assests/images/top-card-image-01.png" alt="">
+                <img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="Imagem 01 do card do topo">
 
                 <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
             </div>
 
             <div class="top-card">
-                <img class="top-card-image" src="./assests/images/top-card-image-02.png" alt="">
+                <img class="top-card-image" src="./assets/images/top-card-image-02.png" alt="Imagem 02 do card do topo">
 
                 <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
             </div>
 
             <div class="top-card">
-                <img class="top-card-image" src="./assests/images/top-card-image-03.png" alt="">
+                <img class="top-card-image" src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo">
 
                 <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
             </div>
@@ -61,39 +61,88 @@
 
         <section class="middle-cards">
             <div class="middle-cards-wrapper">
-                <div class="middle-card">
-                    <img class="middle-card-image" src="./assests/images/middle-card-image-01.png" alt="">
+                <div class="middle-cards-2">
+                    <div class="middle-card">
+                        <img class="middle-card-image" src="./assets/images/middle-card-image-01.png" alt="">
+                    </div>
+                    
+                    <div class="middle-card">
+                        <img class="middle-card-image" src="./assets/images/middle-card-image-02.png" alt="">
+                    </div>
                 </div>
                 
-                <div class="middle-card">
-                    <img class="middle-card-image" src="./assests/images/middle-card-image-02.png" alt="">
-                </div>
-                
-                <div class="middle-card">
-                    <img class="middle-card-image" src="./assests/images/middle-card-image-03.png" alt="">
-                </div>
+                    <div class="middle-card">
+                        <img class="middle-card-image" src="./assets/images/middle-card-image-03.png" alt="">
+                    </div>
             </div>
         </section>
+        
+        <section class="bottom-cards">
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-image-01.png" alt="Imagem 01 do card de baixo ">
+
+                <p class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-image-02.png" alt="Imagem 02 do card de baixo ">
+
+                <p class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-image-03.png" alt="Imagem 03 do card de baixo ">
+
+                <p class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-image-04.png" alt="Imagem 04 do card de baixo ">
+
+                <p class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+
+        </section>
+
+        <section class="bottom-infocard">
             
+            <div class="bottom-infocard-text">
+                <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
+
+                <p class="bottom-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
+                </p>
+
+                <p class="bottom-infocard-description">
+                    Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
+                </p>
+                
+                <p class="bottom-infocard-description">  
+                    Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+                </p>
+            </div>
+
+            <img class="bottom-infocard-image bottom-infocard-image-desktop" src="./assets/images/bottom-infocard-image-desktop.png" alt="Imagem do infocard de baixo desktop">
+            <img class="bottom-infocard-image bottom-infocard-image-mobile" src="./assets/images/bottom-infocard-image-mobile.png" alt="Imagem do infocard de baixo mobile">
+        </section>
     </main>
 
     <footer class="page-footer">
          <ul class="footer-icons">
             <li class="footer-icon">
                 <a href="#" target="_blank">
-                    <img src="./assests/images/instagram-icon.png" alt="Ícone do Instagram">
+                    <img src="./assets/images/instagram-icon.png" alt="Ícone do Instagram">
                 </a>
             </li>
             
             <li class="footer-icon">
                 <a href="#" target="_blank">
-                    <img src="./assests/images/facebook-icon.png" alt="Ícone do Facebook">
+                    <img src="./assets/images/facebook-icon.png" alt="Ícone do Facebook">
                 </a>
             </li>
             
             <li class="footer-icon">
                 <a href="#" target="_blank">
-                    <img src="./assests/images/youtube-icon.png" alt="Ícone do Youtube">
+                    <img src="./assets/images/youtube-icon.png" alt="Ícone do Youtube">
                 </a>
             </li>
         </ul>