Ticiano-Damasceno
diff --git a/‎index.html
+14-4 b/‎index.html
+14-4
diff --git a/‎style/style.css
+51-2 b/‎style/style.css
+51-2
diff --git a/‎template/CNN logo.png
1.27 KB b/‎template/CNN logo.png
1.27 KB
diff --git a/‎template/Clutch.png
1.12 KB b/‎template/Clutch.png
1.12 KB
diff --git a/‎template/Desktop - Light.png
-546 KB b/‎template/Desktop - Light.png
-546 KB
diff --git a/‎template/Google.png
1.32 KB b/‎template/Google.png
1.32 KB
diff --git a/‎template/Gradient (1).png
381 KB b/‎template/Gradient (1).png
381 KB
diff --git a/‎template/Gradient.png
714 KB b/‎template/Gradient.png
714 KB
diff --git a/‎template/Mobile.png
-58.5 KB b/‎template/Mobile.png
-58.5 KB
diff --git a/‎template/Slack.png
1.79 KB b/‎template/Slack.png
1.79 KB
diff --git a/‎template/Trustpilot.png
1.86 KB b/‎template/Trustpilot.png
1.86 KB
diff --git a/‎template/full.png
219 KB b/‎template/full.png
219 KB
diff --git a/‎teste_posicao.html
+51 b/‎teste_posicao.html
+51
@@ -40,11 +40,21 @@ <h3>Get a bird's eye view with our customizable dashboard. Stay on top of things
         </div>
     </div>
     <main>
-        <img class="template" src="./template/Desktop - Light.png" alt="white-template">
-        <img class="mobile" src="./template/Mobile.png" alt="mobile">
+        <div class="principal">
+            <img class="template" src="./template/full.png" alt="white-template">
+        </div> 
     </main>
-    <footer>
-
+    <footer class="rodape">
+        <div class="rodape__item">
+            <p>Trusted by these companies</p>
+            <div class="rodape__item__links">
+                <a><img src="./template/Google.png" alt="Google"></a>
+                <a><img src="./template/Slack.png" alt="Slack"></a>
+                <a><img src="./template/Trustpilot.png" alt="Trustpilot"></a>
+                <a><img src="./template/CNN logo.png" alt="CNN"></a>
+                <a><img src="./template/Clutch.png" alt="Clutch"></a>
+            </div>
+        </div>
     </footer>
 </body>
 </html>
@@ -3,12 +3,16 @@
 :root {
     --color1: #36485C;
     --color2: #4328EB;
+    --color3: #D5CFFA;
 }
 
 body {
     margin: 0;
     padding: 0;
     width: 100wh;
+    background: 
+        linear-gradient(to bottom, white 50%,transparent 60%) no-repeat,
+        linear-gradient(to left, #FF5222, #F800AF ,#975BEB) no-repeat;
 }
 
 .cabecalho {
@@ -60,6 +64,7 @@ body {
 }
 
 .sub_cabecalho {
+    position: relative;
     font-family: 'Inter', sans-serif;
     display: flex;
     margin: 0 auto;
@@ -105,6 +110,50 @@ body {
     text-decoration: none;
 }
 
-.mobile{
-    position: relative;
+.sub_cabecalho__botoes p {
+    color: var(--color2);
+}
+
+.sub_cabecalho__botoes i {
+    background-color: var(--color3);
+    border-radius: 100%;
+    width: 16px;
+    height: 16px;
+    display: flex;
+}
+
+.principal {
+    margin: 60px 10% 64px 10%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.template {
+    width: 90%;
+}
+
+.rodape {
+    /* margin: 0px 80px 80px 80px; */
+    margin: 0px 5% 5% 5%;
+}
+
+.rodape__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.rodape__item p {
+    color: white;
+    font-size: 18px;
+    font-family: 'Inter' sans-serif;
+    font-weight: 400;
+}
+
+.rodape__item__links {
+    display: flex;
+    align-items: center;
+    width: 966px;
+    justify-content: space-between;
 }
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Teste posição</title>
+    <style>
+        div {
+            border: 1px solid black;
+            height: 50px;
+            margin-bottom: 10px;
+        }
+        .d1 {
+            background-color: gray;
+            position: static;
+        }
+        .d2 {
+            background-color: blue;
+            position: relative;
+            top: 10px;
+            left: 10px;
+        }
+        .d3 {
+            background-color: red;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+        }
+        .d4 {
+            background-color: blue;
+            position: relative;
+            overflow: hidden;
+        }
+        .d5 {
+            position: absolute;
+            background-color: chocolate;
+            top: 15px;
+            right: 15px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">static d1</div>
+    <div class="d2">relative d2</div>
+    <div class="d5">absolute d5</div>
+    <div class="d4">
+        relative d4
+        <div class="d3">absolute d3</div>
+    </div>
+</body>
+</html>