ironhack-labs · naimyasirozcan · Oct 11, 2025 · Oct 11, 2025
diff --git a/image.png b/image.png
diff --git a/index.html b/index.html
@@ -1,16 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <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 -->
-  </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
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Instagram Clone</title>
+  <link rel="stylesheet" href="/styles/style.css">
+</head>
+
+<body>
+
+  <div class="blue-bg">
+
+  </div>
+
+  <div class="landing-page">
+
+    <div class="landing-image">
+      <img src="/images/phones.png" alt="">
+    </div>
+
+    <div class="landing-greeting">
+
+      <div class="logo-and-btn">
+        <img src="/images/brand.png" alt="">
+        <button>
+          <img src="/images/home.png" alt="">Log In
+        </button>
+      </div>
+
+      <div class="greeting-div">
+
+        <h1 class="greeting-header">
+          Capture and Share
+          <br>
+          the World's Moments
+        </h1>
+        <p>
+          Instagram is a fast, beautiful and fun 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 class="badges">
+          <div class="badge">
+            <img src="/images/badge-iphone.png" alt="">
+          </div>
+          <div class="badge">
+            <img src="/images/badge-android.png" alt="">
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="footer">
+    <ul class="footer-nav">
+      <li>About Us</li>
+      <li>Support</li>
+      <li>Blog</li>
+      <li>Press</li>
+      <li>API</li>
+      <li>Jobs</li>
+      <li>Privacy</li>
+      <li>Terms</li>
+      <li>&copy; 2014 Instagram</li>
+    </ul>
+
+  </div> 
+
+</body>
+
+</html>
diff --git a/readme.md b/readme.md
@@ -1,79 +1,3 @@
-![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)
+I made a clone of Instagram landing page:
 
-# LAB | CSS Instagram Clone
-
-<details>
-  <summary>
-   <h2>Learning Goals</h2>
-  </summary>
-
-   This exercise allows you to practice and apply the concepts and techniques taught in class. 
-
-  Upon completion of this exercise, you will be able to:
-
-  - Develop a simple webpage based on provided design and assets.
-  - Create and link an external CSS stylesheet with an HTML document.
-  - Use the CSS `position`  property to position elements on a webpage.
-  - Use *Flexbox* to layout and position elements on a webpage.
-  - Display images in a webpage using HTML image tags and CSS `background`  property.
-  - Use MDN as a reference to look up and apply CSS properties not covered in class, such as `list-style` , `text-decoration` , `text-transform` , etc.
-  - Submit completed work using Git and GitHub by creating a Pull Request.
-
-  <br>
-  <hr> 
-
-</details>
-
-## Introduction
-
-One of the best ways to sharpen your CSS skills is to try to recreate an existing style and layout, so take a look at the deliverable below, work with a partner, and build your own version of Instagram.com. Don't worry if you can't get it to look _exactly_ as you see but try your best to get as close as possible.
-
-There's a starter code so that you can jump right into it.
-
-## Requirements
-
-- Fork this repo
-- Clone this repo
-
-* Use one of the CSS layout techniques to position elements on the page ([display](https://developer.mozilla.org/en-US/docs/Web/CSS/display), [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float), [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox), or [grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids))
-* Look up in [MDN](https://developer.mozilla.org/en/) and use CSS properties and values that may not have been covered in class, for example:
-  - `background: url("YOUR-LINK.COM")`
-  - `list-style`
-  - `text-decoration`
-  - `text-transform`
-* Use a single external CSS stylesheet to style all pages
-* Use the images provided to construct the appropriate elements on the page:
-  - the iPhone
-  - App Store and Google Play buttons
-  - Instagram Logo
-  - Login button
-
-## Submission
-
-Upon completion, run the following commands:
-
-```
-git add .
-git commit -m "done"
-git push origin master
-```
-
-Create Pull Request so your TAs can check up your work.
-
-## Instructions
-
-You are provided with files, images, and text content needed to create the page. The text is in the `index.html`, and the color palette is in the `styles/style.css` file.
-
-## Deliverable
-
-Please find a screenshot of the expected result below:
-
-![Instagram lab Screenshot](https://i.imgur.com/DQ9fk1u.png)
-
-## Extra Resources
-
-- [CSS Reference from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
-
-<br>
-
-**Happy coding!** :heart:
+![insta](image.png)
diff --git a/styles/style.css b/styles/style.css
@@ -8,3 +8,111 @@ body {
   font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0;
 }
+
+.blue-bg {
+  position: fixed;
+  width: 100vw;
+  height: 40vh;
+  top: 0;
+  left: 0;
+  background-image: url(/images/bgtile.png);
+  z-index: -1;
+}
+
+.landing-page {
+  height: 75vh;
+  display: flex;
+  padding-top: 12rem;
+  justify-content: center;
+}
+
+.landing-image {
+  margin-right: 2rem;
+}
+
+.landing-image img {
+  height: 85%;
+}
+
+.landing-greeting {
+  width: 40%;
+}
+
+.logo-and-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+.logo-and-btn button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 7rem;
+  height: 3.4rem;
+  padding: 0 1rem;
+  background: linear-gradient(to bottom, #6d8eb0 0%, #6d8eb0 100%);
+  color: rgb(215, 215, 215);
+  border-radius: 5px;
+  border: none;
+  margin-right: 0.8rem;
+}
+
+.greeting-div {
+  display: flex;
+  flex-direction: column;
+  background-image: url(/images/frame.png);
+  background-repeat: no-repeat;
+  width: 91%;
+  height: 50%;
+  background-size: 100%;
+  padding: 2rem;
+}
+
+.greeting-div h1 {
+  padding: 0 1rem;
+  margin-bottom: 0;
+  margin-top: 0;
+  color: #1b4065;
+}
+
+.greeting-div p {
+  margin-top: 0;
+  padding: 1rem;
+  font-size: 1.4rem;
+}
+
+.badges {
+  display: flex;
+}
+
+.badge {
+  display: flex;
+  justify-content: space-between;
+  background: rgb(48, 48, 48);
+  height: 4rem;
+  margin-left: 1rem;
+  margin-right: 2rem;
+  width: 12rem;
+  border-radius: 10px;
+}
+
+.footer-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 36rem;
+  text-transform: uppercase;
+  list-style: none;
+  font-weight: 700;
+  color: #25517e;
+}
+
+.footer-nav li:last-child {
+  color: gray;
+}
+
+
+
+