feat(cords): criei o html e css dos primeiros cards

assets/imagens/card01.svg

@@ -0,0 +1,13 @@
+<svg width="103" height="103" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_59_964)">
+<path d="M73.2652 54.4426H96.068V75.7642H73.2652V54.4426Z" fill="#0336DB"/>
+<path d="M6.93198 54.4426H29.7348V75.7642H6.93198V54.4426Z" fill="#0336DB"/>
+<path d="M40.8369 54.4426H62.1631V89.3342H40.8369V54.4426Z" fill="#0336DB"/>
+<path d="M95.3669 10.9888H7.63306C3.42415 10.9888 0 14.4131 0 18.6219V33.3092C0 37.012 1.97169 40.2627 4.92026 42.067V89.9995C4.92026 91.1105 5.82091 92.0112 6.93198 92.0112H96.068C97.1791 92.0112 98.0797 91.1105 98.0797 89.9995V42.067C101.028 40.2627 103 37.012 103 33.3092V18.6219C103 14.4131 99.5757 10.9888 95.3669 10.9888V10.9888ZM82.4805 33.3092C82.4805 36.7479 79.683 39.5453 76.2441 39.5453C72.8053 39.5453 70.0078 36.7479 70.0078 33.3092V15.0122H82.4805V33.3092ZM65.9844 33.3092C65.9844 36.7479 63.1869 39.5453 59.748 39.5453C56.3092 39.5453 53.5117 36.7479 53.5117 33.3092V15.0122H65.9844V33.3092ZM49.4883 33.3092C49.4883 36.7479 46.6908 39.5453 43.252 39.5453C39.8131 39.5453 37.0156 36.7479 37.0156 33.3092V15.0122H49.4883V33.3092ZM32.9922 33.3092C32.9922 36.7479 30.1947 39.5453 26.7559 39.5453C23.317 39.5453 20.5195 36.7479 20.5195 33.3092V15.0122H32.9922V33.3092ZM4.02344 18.6219C4.02344 16.6315 5.64287 15.0122 7.63306 15.0122H16.4961V33.3092C16.4961 36.7479 13.6986 39.5453 10.2598 39.5453C6.82093 39.5453 4.02344 36.7479 4.02344 33.3092V18.6219ZM94.0563 87.9877H8.9437V43.4849C9.37461 43.5402 9.81397 43.569 10.2598 43.569C13.6362 43.569 16.6371 41.9294 18.5078 39.4047C20.3785 41.9294 23.3794 43.569 26.7559 43.569C30.1323 43.569 33.1332 41.9294 35.0039 39.4047C36.8746 41.9294 39.8755 43.569 43.252 43.569C46.6284 43.569 49.6293 41.9294 51.5 39.4047C53.3707 41.9294 56.3716 43.569 59.748 43.569C63.1245 43.569 66.1254 41.9294 67.9961 39.4047C69.8668 41.9294 72.8677 43.569 76.2441 43.569C79.6206 43.569 82.6215 41.9294 84.4922 39.4047C86.3629 41.9294 89.3638 43.569 92.7402 43.569C93.186 43.569 93.6254 43.5404 94.0563 43.4849V87.9877ZM98.9766 33.3092C98.9766 36.7479 96.1791 39.5453 92.7402 39.5453C89.3014 39.5453 86.5039 36.7479 86.5039 33.3092V15.0122H95.3669C97.3573 15.0122 98.9766 16.6315 98.9766 18.6219V33.3092Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_59_964">
+<rect width="103" height="103" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/imagens/card02.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="103" viewBox="0 0 100 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.7912 95.3056H17.2303V26.7631H27.9V37.1243C27.9 38.2353 28.7919 39.136 29.8922 39.136C30.9923 39.136 31.8844 38.2353 31.8844 37.1243V26.7631H59.2063V37.1243C59.2063 38.2353 60.0984 39.136 61.1984 39.136C62.2985 39.136 63.1906 38.2353 63.1906 37.1243V26.7631H73.5273V48.0779H77.5117V24.7514C77.5117 23.6403 76.6196 22.7397 75.5195 22.7397H63.1906V17.7287C63.1906 7.95313 55.2751 0 45.5454 0C43.3154 0 41.1805 0.417834 39.2145 1.17967C37.2484 0.417834 35.1135 0 32.8835 0C23.1536 0 15.2381 7.95313 15.2381 17.7287V22.7395H2.90923C1.80914 22.7395 0.917042 23.6401 0.917042 24.7512V89.7613C0.917042 95.0368 5.17415 99.3288 10.4068 99.3288H68.8044C66.8365 98.2564 64.7517 96.925 62.7912 95.3056ZM45.5454 4.02344C53.0781 4.02344 59.2063 10.1717 59.2063 17.7287V22.7395H50.5287V17.7287C50.5287 12.2528 48.045 7.34901 44.1501 4.09425C44.6089 4.04758 45.0745 4.02344 45.5454 4.02344ZM39.2145 5.58614C43.5682 7.8801 46.5445 12.4624 46.5445 17.7289V22.7397H31.8844V17.7287C31.8844 12.4622 34.8607 7.8801 39.2145 5.58614ZM19.2225 17.7287C19.2225 10.1717 25.3508 4.02344 32.8835 4.02344C33.3544 4.02344 33.8198 4.04738 34.2786 4.09445C30.3837 7.34901 27.8998 12.253 27.8998 17.7289V22.7397H19.2223V17.7287H19.2225ZM13.2459 95.3056H10.4068C7.37113 95.3056 4.90142 92.8185 4.90142 89.7615V26.7631H13.2459V95.3056Z" fill="black"/>
+<path d="M92.7992 54.7375C86.7766 54.7375 81.5819 51.191 79.165 46.0659H72.082C69.6651 51.1908 64.4705 54.7375 58.4479 54.7375C56.2051 54.7375 54.0772 54.2452 52.1641 53.3635V78.4196C52.1641 96.7462 75.6235 103 75.6235 103C75.6235 103 99.0829 96.7462 99.0829 78.4196V53.3635C97.1698 54.2452 95.0418 54.7375 92.7992 54.7375Z" fill="#0336DB"/>
+<path d="M74.8531 81.6054C74.328 81.6054 73.8228 81.3957 73.4487 81.0201L69.1192 76.673C68.3389 75.8895 68.3353 74.6158 69.1113 73.828C69.8868 73.0401 71.1483 73.0364 71.9286 73.82L74.7249 76.6276L81.99 67.9301C82.6996 67.0807 83.9563 66.9733 84.7972 67.6895C85.6383 68.4059 85.745 69.6751 85.0354 70.5244L76.3762 80.891C76.0172 81.3207 75.4968 81.579 74.9406 81.6035C74.9113 81.6047 74.8824 81.6054 74.8531 81.6054Z" fill="white"/>
+</svg>

assets/imagens/card03.svg

@@ -0,0 +1,6 @@
+<svg width="102" height="97" viewBox="0 0 102 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M71.4307 49.972C81.8615 49.972 90.3174 41.4332 90.3174 30.9001C90.3174 20.367 81.8615 11.8282 71.4307 11.8282C60.9998 11.8282 52.5439 20.367 52.5439 30.9001C52.5439 41.4332 60.9998 49.972 71.4307 49.972Z" fill="#0336DB"/>
+<path d="M71.4307 60.8353C87.7768 60.8353 101.075 47.4065 101.075 30.9003C101.075 14.3939 87.7768 0.965118 71.4307 0.965118C55.0846 0.965118 41.7861 14.3939 41.7861 30.9003C41.7861 47.4065 55.0846 60.8353 71.4307 60.8353ZM71.4307 4.98856C85.5796 4.98856 97.0909 16.6125 97.0909 30.9003C97.0909 45.1879 85.5798 56.8118 71.4307 56.8118C57.2818 56.8118 45.7705 45.1879 45.7705 30.9003C45.7705 16.6125 57.2816 4.98856 71.4307 4.98856Z" fill="black"/>
+<path d="M68.085 35.9238C67.3947 35.0586 66.1408 34.9224 65.2837 35.6193C64.4269 36.3163 64.292 37.5827 64.9821 38.4479C66.0804 39.8246 67.6548 40.6067 69.2231 40.9815C69.3066 42.0149 70.1636 42.8272 71.2085 42.8272C72.204 42.8272 73.029 42.09 73.177 41.1265C75.9828 40.6208 77.9517 38.7344 78.2746 36.1662C78.6499 33.1831 76.7336 30.3222 73.6147 29.2089C73.4726 29.1582 73.3348 29.1087 73.2007 29.0602V25.1845C73.3666 25.2913 73.4904 25.408 73.5689 25.5206C74.2004 26.4301 75.4429 26.6504 76.344 26.0119C77.2446 25.3738 77.4624 24.1191 76.8303 23.2096C76.1057 22.1665 74.8403 21.2815 73.1995 20.917C73.164 19.8373 72.2863 18.9731 71.2085 18.9731C70.1082 18.9731 69.2163 19.8737 69.2163 20.9848V21.0522C69.094 21.0846 68.9709 21.1194 68.847 21.1572C66.7556 21.7935 65.1774 23.8388 65.009 26.1314C64.8417 28.4097 66.0358 30.3858 68.2031 31.4178C68.4394 31.5304 68.7846 31.6777 69.2161 31.8513V36.7555C68.7593 36.5479 68.3625 36.2717 68.085 35.9238ZM74.3219 35.6593C74.2478 36.2485 73.8527 36.6985 73.2007 36.9653V33.4707C74.0759 34.0916 74.4086 34.9713 74.3219 35.6593ZM68.9828 26.4289C69.0018 26.1694 69.087 25.9123 69.2165 25.6878V27.261C69.0362 27.025 68.9591 26.749 68.9828 26.4289Z" fill="white"/>
+<path d="M101.992 69.3911C101.887 66.9491 100.766 64.8492 98.8342 63.4786C95.6513 61.2197 91.3553 61.612 88.6187 64.4111C88.531 64.5008 88.4517 64.5986 88.3822 64.7034L84.0117 71.2787C82.7881 68.3623 79.9453 66.3136 76.6424 66.3136L45.1993 66.2922H45.198C44.721 66.2922 44.2602 66.4648 43.8988 66.7789L36.0217 73.6221H30.2733V71.854C30.2733 70.743 29.3812 69.8423 28.2811 69.8423H19.5095V69.5671C19.5095 68.456 18.6174 67.5554 17.5173 67.5554H1.99219C0.891902 67.5554 0 68.456 0 69.5671V93.1601C0 94.2712 0.891902 95.1719 1.99219 95.1719H17.5173C18.6174 95.1719 19.5095 94.2712 19.5095 93.1601V92.8849H28.2809C29.381 92.8849 30.2731 91.9843 30.2731 90.8732V89.0156H36.8786L42.846 95.4034C43.2227 95.8066 43.747 96.0347 44.2951 96.0347C44.3045 96.0347 44.3138 96.0347 44.3232 96.0345L85.4646 95.4517C86.1065 95.4426 86.7048 95.1218 87.0715 94.5899L100.143 75.6347C100.152 75.6228 100.16 75.6107 100.168 75.5988C101.433 73.6766 102.081 71.472 101.992 69.3911ZM15.5251 91.1484H3.98438V71.5788H15.5251V91.1484ZM26.2887 88.8617H19.5095V73.8657H26.2887V88.8617ZM96.8612 73.3538L84.3863 91.4433L45.1434 91.9992L39.1875 85.6236C38.811 85.2207 38.2869 84.9924 37.7384 84.9924H30.2733V77.6456H36.7608C37.2378 77.6456 37.6986 77.473 38.0599 77.1589L45.9365 70.3163L76.6411 70.3372C78.8617 70.3372 80.6685 72.1952 80.6685 74.4791C80.6685 76.7628 78.8619 78.6206 76.6411 78.6206C76.6359 78.6206 76.6307 78.6208 76.6255 78.6208H59.4449C58.8982 78.6208 58.3755 78.8478 57.9992 79.2485L53.808 83.7125C53.051 84.5188 53.0846 85.792 53.8831 86.5565C54.2684 86.9252 54.7612 87.1083 55.2533 87.1083C55.7811 87.1083 56.3078 86.8979 56.6995 86.4806L60.3013 82.6443L80.1927 82.6451H80.1933C80.8571 82.6451 81.4775 82.3111 81.8474 81.7545L91.5757 67.119C92.9429 65.8324 95.0052 65.6787 96.5432 66.7706C98.6193 68.2438 98.275 71.1936 96.8612 73.3538Z" fill="black"/>
+</svg>

index.html

@@ -2,32 +2,62 @@
 
 <html lang="pt-br">
     <head>
-        <meta charset="UTF-8">
+        <meta charset="UTF-8"/>
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         
         <title>Desafio M3</title>
 
-        <link rel="stylesheet" href="./styles/main.css">
+        <link rel="stylesheet" href="./styles/main.css"/>
-
+        <link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
     </head>
     
     <body>
         <header class="logo-page">
             <a href="/">
-                 <img src="./assets/imagens/Logo-M3Academy01.png" alt="logo M3">
+                 <img src="./assets/imagens/Logo-M3Academy01.png" alt="logo M3"/>
             </a>
         </header>
         <main>
             <div>
                 <figure class="banner-principal banner-principal-desktop">
-                    <img src="./assets/imagens/baner01.png" alt="banner M3">
+                    <img src="./assets/imagens/baner01.png" alt="banner M3"/>
                 </figure>
                 <figure class="banner-principal banner-principal-mobile">
-                    <img src="./assets/imagens/banner-mobile.png" alt="banner-mobile m3">
+                    <img src="./assets/imagens/banner-mobile.png" alt="banner-mobile m3"/>
+                </figure>
+            </div>
+            <section class="texto-principal-conteiner">
+                <div class="texto-principal">
+                    <h2>Lorem ipsum</h2>
+                    <h1>dolor sit amet</h1>
+                    <p>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>
+                <figure class="imagem-principal">
+                    <img src="./assets/imagens/3pc.png" alt="tres computadores"/>
+                </figure>
+            </section>
+            <div class="cards-conteiner">
+                <figure class="cards-primeiro">
+                    <img class="cards-primeiro-card" src="./assets/imagens/card01.svg" alt="card01"/>
+                    <figcaption class="cards-primeiro-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                </figure>
+
+                <figure class="cards-primeiro">
+                    <img class="cards-primeiro-card" src="./assets/imagens/card02.svg" alt="card02"/>
+                    <figcaption class="cards-primeiro-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                </figure> 
+
+                <figure class="cards-primeiro">
+                    <img class="cards-primeiro-card" src="./assets/imagens/card03.svg" alt="card03"/>
+                    <figcaption class="cards-primeiro-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
                 </figure>
 
             </div>
+
+            .
         </main>
         
     </body>

styles/main.css

@@ -1,6 +1,9 @@
 * {
     margin: 0;
     box-sizing: border-box;
+    font-family: "Inter";
+    text-align: center;
+    color: #000000;
 }
 
 .logo-page {
@@ -26,15 +29,154 @@
     display: none;
 }
 
+.texto-principal-conteiner {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    gap: 84px;
+    flex-direction: column;
+    padding: 73px 0 179px;
+}
+
+.texto-principal {
+    width: 40%;
+}
+.texto-principal h2{
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+    text-transform: uppercase;
+}
+.texto-principal h1{
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 58px;
+    text-transform: uppercase;
+    margin-bottom: 28px;
+}
+.texto-principal p {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: left;
+}
+
+.imagem-principal {
+    width: 17%;
+}
+
+.imagem-principal img{
+    width: 100%;
+}
+
+.cards-conteiner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 21px;
+    margin-bottom: 80px;
+}
+
+.cards-primeiro {
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    width: 18%;
+    padding: 36px 26px 27px 26px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 27px;
+}
+
+.cards-primeiro-card {
+    width: 35%;
+
+}
+
+.cards-primeiro-texto {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
+
+@media (min-width: 2500px){
+    .texto-principal h2{
+        font-size: 64px;
+        line-height: 78px;
+    }
+    .texto-principal h1{
+        font-size: 96px;
+        line-height: 116px;
+    }
+    .texto-principal p {
+        font-size: 32px;
+        line-height: 48px;
+    }
+
+    .cards-primeiro-texto {
+        font-size: 32px;
+        line-height: 48px;
+    }
+
+}
+
 @media (max-width: 1024px) {
     .logo-page a {
         width: 54%;
     }
+
     .banner-principal-mobile {
         display: block;
     }
+
     .banner-principal-desktop {
         display: none;
     }
 
+    .texto-principal {
+        width: 86%;
+    }
+
+    .imagem-principal {
+        width: 58%;
+        margin-bottom: 90px;
+    }
+
+    .texto-principal h2 {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .texto-principal h1 {
+        font-size: 28px;
+        line-height: 34px;
+        margin-bottom: 5px;
+        margin-top: 1px;
+    }
+
+    .texto-principal p {
+        font-size: 16px;
+        line-height: 24px;
+        text-align: center;
+    }
+
+    .texto-principal-conteiner {
+        padding: 73px 0 65px;
+        gap: 65px;
+    }
+
+    .cards-conteiner {
+        flex-direction: column;
+    }
+
+    .cards-primeiro {
+        width: 85%;
+    }
+
+    .cards-primeiro-card {
+        max-width: 104px;
+    }
+
 }