From c5a3036a23a9209b1c4abefa8635671b987a4398 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miquel=20Pi=C3=B1a=20Grau?= Date: Tue, 14 Oct 2025 16:01:12 +0200 Subject: [PATCH] done --- index.html | 51 ++++++++++++-- styles/style.css | 170 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 215 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index da7db46ff..0282b8db8 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,52 @@ Instagram Clone - + - 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 - — 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 © 2014 Instagram +
+
+ +
+
+ +
+
+
+
+
+
Log in
+
+
+
+
+

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 + — 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?

+
+ +
+
+
+
+
+
+
+ + diff --git a/styles/style.css b/styles/style.css index c4865cc6d..1d24e4d60 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,7 +4,177 @@ dark blue: #06365f light blue: #1c5380 */ + body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; + color: #4D4F4F; +} + +h1 { + color: #06365f; + text-align: left; + width: 325px; +} + +a { + color: #1c5380; + text-decoration: none; + font-weight: bold; + margin-right: 25px; + +} + +p { + font-size: clamp(14px, 1.2vw, 32px); + margin-right: 70px; +} + +span { + font-weight: bold; +} + +footer { + width: 100%; + height: 5vh; + font-size: 12px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + position: relative; +} + +.blue-background { + width: 100%; + height: 35vh; + background-image: url(/images/bgtile.png); +} + +.white-background { + width: 100%; + height: 55vh; +} + +.container-absolute { + width: 100%; + height: 80vh; + display: flex; + flex-direction: row; + position: absolute; + justify-content: space-evenly; + align-content: center; + top: 45px; +} + +.container { + min-width: 30vw; + min-height: 75vh; +} + +.container-top { + min-width: 55vw; + height: 175px; + background-color: transparent; + display: flex; + justify-content: space-between; + align-items: center; +} + +.container-top-instagram { + background-image: url(/images/brand.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 25vw; + height: 12vh; + margin-left: 10px; +} + +.img-button, .img-button-text { + display: inline-block; +} + +.img-button { + background-image: url(/images/home.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + width: 1.75vw; + height: auto; + margin-right: 15px; + margin-bottom: 5px; +} + +.container-top-button { + width: 9vw; + height: 5vh; + border: 3px solid #1c5380; + border-radius: 5px; + color: #CCDBE3; + font-weight: bold; + font-size: 1.6vw; + padding: 10px 10px 10px 10px; + background: #275f8e; + display: flex; + align-content: center; + margin-right: 1.5vw; +} + +.img-phone { + background-image: url(/images/phones.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + display: flex; + width: 30vw; + height: auto; + height: 75vh; + display: inline-block; +} + +.container-context-and-bottom { + display: flex; + flex-direction: column; + margin-top: -25px; +} + +.container-content { + padding: 15px 0 0 55px; + background-image: url(/images/frame.png); + background-size: cover; + background-repeat: no-repeat; + width: 55vw; + height: 45vh; + box-sizing: border-box; +} + +.container-bottom { + margin-top: 15px; + display: flex; +} + +.container-bottom-apple, .container-bottom-android { + margin-left: 50px; + background-size: contain; + background-repeat: no-repeat; + background-position: top; +} + +.container-bottom-apple { + background-image: url(/images/badge-iphone.png); + width: 24vh; + height: auto; + +} + +.container-bottom-android { + background-image: url(/images/badge-android.png); + width: 12vw; + height: 25vh; + +} + +.footer-item { + margin-left: 20px; }