diff --git a/index.html b/index.html
index da7db46ff..2baa096dd 100644
--- a/index.html
+++ b/index.html
@@ -4,13 +4,46 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Instagram Clone</title>
-    <!-- don't forget to link your styles -->
+    <link rel="stylesheet" href="styles/style.css">
   </head>
+
   <body>
-    Instagram Capture and Share the World's Moments Instagram is a fast, beautiful and fun way to share your life with
-    friends and family. Take a picture or video, choose a filter to transform its look and feel, then post to Instagram
-    &mdash; it's that easy. You can even share to Facebook, Twitter, Tumblr and more. It's a new way to see the world.
-    Oh yeah, did we mention it's free? Download on the App Store Get it on Google Play About Us Support Blog Press API
-    Jobs Privacy Terms &copy; 2014 Instagram
+    <div></div>
+
+    <section id="principal">
+
+      <div class="esquerda">
+        <img src="images/phones.png" alt="phones">
+      </div>
+
+      <div class="direita">
+
+        <div class="logo-botao">
+          <img src="images/brand.png" alt="logo" class="ig-logo">
+          <button>
+            <img src="images/home.png" alt="home">
+            Log in
+          </button>
+        </div>
+
+        <div class="baixo">
+
+          <div class="texto">
+            <h1>Capture and Share the World's Moments</h1>
+            <p>Instagram is a <strong>fast</strong>, <strong>beautiful</strong> and <strong>fun</strong> way to share your life with
+              friends and family. <br> <br> Take a picture or video, choose a filter to transform its look and feel, then post to Instagram
+              &mdash; it's that easy. You can even share to Facebook, Twitter, Tumblr and more. It's a new way to see the world. <br> <br> Oh yeah, did we mention it's free?</p>
+          </div>
+          <div class="download">
+            <img src="images/badge-iphone.png" alt="app store">
+            <img src="images/badge-android.png" alt="google play">
+          </div>  
+        </div>
+
+      </div>
+
+    </section>
+    
   </body>
+
 </html>
diff --git a/styles/style.css b/styles/style.css
index c4865cc6d..9c65f1c25 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -6,5 +6,85 @@ light blue: #1c5380
 
 body {
   font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #1c5380 40%, white 40%);
   margin: 0;
+  min-height: 100vh;
 }
+
+#principal {
+  margin-top: 3%;
+  margin-left: 5%;
+  margin-right: 5%;
+  display: flex;
+}
+
+.esquerda {
+  width: 50%;
+  padding: 20px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+}
+
+.esquerda img {
+  height: 90%;
+}
+
+.direita {
+  width: 50%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content:space-between;
+}
+
+.logo-botao {
+  display: flex;
+  justify-content:space-between;
+  align-items:center;
+  margin-bottom: 30px;
+  width: 85%;
+}
+
+.logo-botao .ig-logo {
+  width: 60%;
+}
+
+button {
+  background-color: #1c5380;
+  color: white;
+  width: 17%;
+  border-radius: 3px;
+  padding: 7px;
+  display: flex;
+  justify-content:space-around;
+  align-items:center;
+}
+
+button img {
+  width: 30%;
+  height: 150%;
+}
+
+.baixo {
+background-color: white;
+padding: 25px;
+border-radius: 4px;
+width: 78%;
+box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
+}
+
+.texto {
+  width: 95%;
+}
+
+.texto h1 {
+margin-top: 0px;
+color: #1c5380;
+width: 53%;
+line-height: 1.2;
+}
+
+p {
+  margin-bottom: 50px;
+}
\ No newline at end of file
