From 4d741105fd92152e31baddfbf8b910041513010b Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Sun, 9 Oct 2022 22:33:36 -0300
Subject: [PATCH] feat: adiciona infocard

---
 .../fxemoji_threenetworkedcomputers.svg       | 15 +++++
 assets/styles/styles.css                      | 63 +++++++++++++++++++
 index.html                                    | 26 ++++++++
 3 files changed, 104 insertions(+)
 create mode 100644 assets/images/fxemoji_threenetworkedcomputers.svg

diff --git a/assets/images/fxemoji_threenetworkedcomputers.svg b/assets/images/fxemoji_threenetworkedcomputers.svg
new file mode 100644
index 0000000..aa8344a
--- /dev/null
+++ b/assets/images/fxemoji_threenetworkedcomputers.svg
@@ -0,0 +1,15 @@
+<svg width="315" height="315" viewBox="0 0 315 315" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_59_1030)">
+<path d="M167.851 110.208H147.149V75.6683H167.851V110.208ZM266.492 275.752H245.79V310.292H266.492V275.752ZM69.2096 275.752H48.5082V310.292H69.2096V275.752Z" fill="#ADB8BC"/>
+<path d="M113.111 102.856H201.889C203.304 102.856 204.662 103.418 205.663 104.419C206.663 105.42 207.226 106.777 207.226 108.193V110.076C207.226 111.492 206.663 112.849 205.663 113.85C204.662 114.851 203.304 115.413 201.889 115.413H113.111C111.696 115.413 110.338 114.851 109.337 113.85C108.337 112.849 107.774 111.492 107.774 110.076V108.193C107.774 106.777 108.337 105.42 109.337 104.419C110.338 103.418 111.696 102.856 113.111 102.856ZM98.6411 3.68033V89.2582C98.6411 90.2343 99.0289 91.1704 99.7191 91.8606C100.409 92.5508 101.345 92.9385 102.321 92.9385H212.679C213.162 92.9385 213.64 92.8433 214.087 92.6584C214.533 92.4734 214.939 92.2023 215.281 91.8606C215.623 91.5188 215.894 91.1131 216.079 90.6666C216.264 90.2201 216.359 89.7415 216.359 89.2582V3.68033C216.359 3.19702 216.264 2.71845 216.079 2.27193C215.894 1.82541 215.623 1.41969 215.281 1.07794C214.939 0.736194 214.533 0.465103 214.087 0.280149C213.64 0.0951946 213.162 0 212.679 0L102.321 0C101.345 0 100.409 0.387748 99.7191 1.07794C99.0289 1.76814 98.6411 2.70425 98.6411 3.68033ZM206.415 308.276V310.16C206.415 311.575 206.978 312.933 207.978 313.933C208.979 314.934 210.337 315.496 211.752 315.496H300.53C301.946 315.496 303.303 314.934 304.304 313.933C305.305 312.933 305.867 311.575 305.867 310.16V308.276C305.867 306.861 305.305 305.503 304.304 304.503C303.303 303.502 301.946 302.94 300.53 302.94H211.752C210.337 302.94 208.979 303.502 207.978 304.503C206.978 305.503 206.415 306.861 206.415 308.276ZM197.282 203.764V289.342C197.282 289.825 197.377 290.304 197.562 290.75C197.747 291.197 198.018 291.602 198.36 291.944C198.702 292.286 199.108 292.557 199.554 292.742C200.001 292.927 200.479 293.022 200.963 293.022H311.32C312.296 293.022 313.232 292.634 313.922 291.944C314.612 291.254 315 290.318 315 289.342V203.764C315 203.28 314.905 202.802 314.72 202.355C314.535 201.909 314.264 201.503 313.922 201.161C313.58 200.82 313.175 200.549 312.728 200.364C312.282 200.179 311.803 200.083 311.32 200.083H200.963C200.479 200.083 200.001 200.179 199.554 200.364C199.108 200.549 198.702 200.82 198.36 201.161C198.018 201.503 197.747 201.909 197.562 202.355C197.377 202.802 197.282 203.28 197.282 203.764ZM9.13315 308.276V310.16C9.13315 311.575 9.6954 312.933 10.6962 313.933C11.697 314.934 13.0544 315.496 14.4697 315.496H103.248C103.949 315.496 104.643 315.358 105.29 315.09C105.938 314.822 106.526 314.429 107.022 313.933C107.517 313.438 107.91 312.85 108.178 312.202C108.447 311.555 108.585 310.861 108.585 310.16V308.276C108.585 306.861 108.022 305.503 107.022 304.503C106.021 303.502 104.663 302.94 103.248 302.94H14.4697C13.0544 302.94 11.697 303.502 10.6962 304.503C9.6954 305.503 9.13315 306.861 9.13315 308.276ZM0 203.764V289.342C0 290.318 0.387748 291.254 1.07794 291.944C1.76814 292.634 2.70425 293.022 3.68033 293.022H114.037C115.013 293.022 115.95 292.634 116.64 291.944C117.33 291.254 117.718 290.318 117.718 289.342V203.764C117.718 203.28 117.623 202.802 117.438 202.355C117.253 201.909 116.982 201.503 116.64 201.161C116.298 200.82 115.892 200.549 115.446 200.364C114.999 200.179 114.521 200.083 114.037 200.083H3.68033C3.19702 200.083 2.71845 200.179 2.27193 200.364C1.82541 200.549 1.41969 200.82 1.07794 201.161C0.736194 201.503 0.465103 201.909 0.280149 202.355C0.0951946 202.802 0 203.28 0 203.764H0Z" fill="#C5CFD1"/>
+<path d="M113.04 11.7024H201.959C202.443 11.7024 202.921 11.7976 203.368 11.9825C203.814 12.1675 204.22 12.4386 204.562 12.7803C204.903 13.1221 205.175 13.5278 205.359 13.9743C205.544 14.4208 205.64 14.8994 205.64 15.3827V77.5552C205.64 78.0385 205.544 78.5171 205.359 78.9636C205.175 79.4102 204.903 79.8159 204.562 80.1576C204.22 80.4994 203.814 80.7705 203.368 80.9554C202.921 81.1404 202.443 81.2356 201.959 81.2356H113.04C112.064 81.2356 111.128 80.8478 110.438 80.1576C109.748 79.4674 109.36 78.5313 109.36 77.5552V15.3827C109.36 14.4067 109.748 13.4707 110.438 12.7805C111.128 12.0904 112.064 11.7026 113.04 11.7024ZM208.002 215.466V277.639C208.002 278.615 208.389 279.551 209.079 280.241C209.77 280.931 210.706 281.319 211.682 281.319H300.601C301.577 281.319 302.513 280.931 303.203 280.241C303.894 279.551 304.281 278.615 304.281 277.639V215.466C304.281 214.49 303.894 213.554 303.203 212.864C302.513 212.174 301.577 211.786 300.601 211.786H211.682C211.199 211.786 210.72 211.881 210.273 212.066C209.827 212.251 209.421 212.522 209.079 212.864C208.738 213.206 208.467 213.611 208.282 214.058C208.097 214.504 208.002 214.983 208.002 215.466ZM10.7186 215.466V277.639C10.7186 278.615 11.1064 279.551 11.7966 280.241C12.4868 280.931 13.4229 281.319 14.3989 281.319H103.318C104.294 281.319 105.23 280.931 105.921 280.241C106.611 279.551 106.998 278.615 106.998 277.639V215.466C106.998 214.49 106.611 213.554 105.921 212.864C105.23 212.174 104.294 211.786 103.318 211.786H14.3989C13.4229 211.786 12.4869 212.174 11.7967 212.864C11.1066 213.554 10.7188 214.49 10.7186 215.466Z" fill="#0336DB"/>
+<path d="M199.856 87.0871C199.856 87.9222 199.524 88.7231 198.934 89.3136C198.343 89.9041 197.542 90.2358 196.707 90.2358C195.872 90.2358 195.071 89.9041 194.481 89.3136C193.89 88.7231 193.558 87.9222 193.558 87.0871C193.558 86.252 193.89 85.4511 194.481 84.8605C195.071 84.27 195.872 83.9383 196.707 83.9383C197.542 83.9383 198.343 84.27 198.934 84.8605C199.524 85.4511 199.856 86.252 199.856 87.0871ZM295.349 284.022C294.514 284.022 293.713 284.354 293.122 284.944C292.532 285.535 292.2 286.335 292.2 287.171C292.2 288.006 292.532 288.807 293.122 289.397C293.713 289.988 294.514 290.319 295.349 290.319C296.184 290.319 296.985 289.988 297.575 289.397C298.166 288.807 298.498 288.006 298.498 287.171C298.498 286.335 298.166 285.535 297.575 284.944C296.985 284.354 296.184 284.022 295.349 284.022ZM98.0659 284.022C97.2308 284.022 96.4299 284.354 95.8394 284.944C95.2489 285.535 94.9171 286.335 94.9171 287.171C94.9171 288.006 95.2489 288.807 95.8394 289.397C96.4299 289.988 97.2308 290.319 98.0659 290.319C98.901 290.319 99.7019 289.988 100.292 289.397C100.883 288.807 101.215 288.006 101.215 287.171C101.215 286.335 100.883 285.535 100.292 284.944C99.7019 284.354 98.901 284.022 98.0659 284.022Z" fill="#F9F9F7"/>
+<path d="M178.115 87.087C178.115 86.4714 178.36 85.881 178.795 85.4456C179.23 85.0103 179.821 84.7657 180.437 84.7657H187.64C188.256 84.7657 188.846 85.0103 189.282 85.4456C189.717 85.881 189.962 86.4714 189.962 87.087C189.962 87.7027 189.717 88.2931 189.282 88.7284C188.846 89.1637 188.256 89.4083 187.64 89.4083H180.436C180.131 89.4083 179.829 89.3483 179.548 89.2316C179.266 89.1149 179.01 88.9439 178.795 88.7284C178.579 88.5128 178.408 88.2569 178.292 87.9753C178.175 87.6937 178.115 87.3918 178.115 87.087ZM279.078 289.492H286.282C286.897 289.492 287.488 289.247 287.923 288.812C288.358 288.377 288.603 287.786 288.603 287.17C288.603 286.555 288.358 285.964 287.923 285.529C287.488 285.094 286.897 284.849 286.282 284.849H279.078C278.462 284.849 277.872 285.094 277.436 285.529C277.001 285.964 276.756 286.555 276.756 287.17C276.756 287.786 277.001 288.377 277.436 288.812C277.872 289.247 278.462 289.492 279.078 289.492ZM81.7948 289.492H88.9986C89.6142 289.492 90.2046 289.247 90.64 288.812C91.0753 288.377 91.3199 287.786 91.3199 287.17C91.3199 286.555 91.0753 285.964 90.64 285.529C90.2046 285.094 89.6142 284.849 88.9986 284.849H81.7948C81.1884 284.863 80.6116 285.114 80.1876 285.548C79.7637 285.981 79.5263 286.564 79.5263 287.17C79.5263 287.777 79.7637 288.359 80.1876 288.793C80.6116 289.227 81.1884 289.478 81.7948 289.492Z" fill="black"/>
+<path d="M283.294 170.712L260.456 166.091C259.193 165.835 258.723 164.276 259.634 163.364L265.22 157.779L248.536 141.095L242.951 146.681C242.039 147.592 240.48 147.122 240.224 145.859L235.603 123.021C235.373 121.888 236.374 120.887 237.507 121.117L260.344 125.739C261.607 125.994 262.078 127.553 261.166 128.465L255.581 134.05L272.265 150.734L277.85 145.149C278.761 144.237 280.321 144.707 280.576 145.971L285.198 168.808C285.428 169.941 284.427 170.941 283.294 170.712ZM191.223 225.783L171.753 212.902C170.679 212.189 169.19 212.96 169.19 214.249V222.1H145.811V214.249C145.811 212.96 144.322 212.189 143.248 212.902L123.804 225.783C122.841 226.422 122.827 227.837 123.791 228.476L143.254 241.357C144.328 242.07 145.811 241.299 145.811 240.01V231.943H169.189V240.01C169.189 241.299 170.678 242.07 171.753 241.357L191.196 228.476C192.16 227.837 192.187 226.422 191.223 225.783ZM76.2275 121.116L53.39 125.737C52.127 125.993 51.6563 127.552 52.5681 128.463L58.1532 134.049L41.4693 150.732L35.8842 145.147C34.973 144.236 33.4134 144.706 33.1581 145.969L28.5364 168.807C28.3069 169.94 29.3073 170.94 30.4406 170.711L53.2781 166.089C54.5411 165.833 55.0118 164.274 54.1 163.363L48.5149 157.778L65.1989 141.094L70.784 146.679C71.6951 147.59 73.2547 147.12 73.5101 145.857L78.1317 123.02C78.3612 121.887 77.3608 120.887 76.2275 121.116Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_59_1030">
+<rect width="315" height="315" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index da3dcf1..b1a9d15 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -2,6 +2,8 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+  color: #000000;
 }
 
 header {
@@ -27,6 +29,49 @@ header {
   display: none;
 }
 
+.infocard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.infocard div {
+  display: flex;
+  flex-direction: column;
+  margin: 74px 0;
+  width: 80%;
+}
+
+.infocard h2 {
+  text-align: center;
+  font-size: 32px;
+  line-height: 39px;
+  text-transform: uppercase;
+}
+
+.infocard h1 {
+  text-align: center;
+  font-weight: 500;
+  font-size: 48px;
+  line-height: 58px;
+  text-transform: uppercase;
+}
+
+.infocard p {
+  text-align: center;
+  font-size: 16px;
+  line-height: 24px;
+  margin-top: 28px;
+  width: 100%;
+}
+
+.infocard figure {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 90px;
+}
+
 @media (max-width: 414px) {
   .banner-desktop {
     display: none;
@@ -41,4 +86,22 @@ header {
   .banner-mobile figure img {
     width: 100%;
   }
+
+  .infocard div {
+    width: 86%;
+  }
+
+  .infocard h2 {
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  .infocard h1 {
+    font-size: 28px;
+    line-height: 34px;
+  }
+
+  .infocard figure img {
+    width: 58%;
+  }
 }
diff --git a/index.html b/index.html
index 81c7017..33498db 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,18 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
   <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+
     <title>Landing Page Desafio</title>
 
     <link rel="stylesheet" href="./assets/styles/styles.css" />
@@ -35,6 +43,24 @@
           />
         </figure>
       </div>
+      <section class="infocard">
+        <div>
+          <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. <br />
+            Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit.
+            Nulla suscipit magna dui.
+          </p>
+        </div>
+        <figure>
+          <img
+            src="./assets/images/fxemoji_threenetworkedcomputers.svg"
+            alt="Três computadores em rede"
+          />
+        </figure>
+      </section>
     </main>
   </body>
 </html>