From 1c8a2a9d3b7338af9aa439f8b8d1dadcefcbafdd Mon Sep 17 00:00:00 2001 From: Zixuan Date: Thu, 5 Jun 2025 20:29:49 +0100 Subject: [PATCH] instagram clone done --- index.html | 56 +++++++++++++++++++++++++--- styles/style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 146 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index da7db46f..fd581f43 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,60 @@ + 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 +
+
+ +
+ +
+ + diff --git a/styles/style.css b/styles/style.css index c4865cc6..a1ec521a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,8 +3,103 @@ Colors to use: dark blue: #06365f light blue: #1c5380 */ +* { + margin: 0; + padding: 0; +} body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; + background: linear-gradient(rgba(28, 83, 128, 0.68), #1c5380) no-repeat; + background-size: 100% 30%; +} + +ul { + list-style: none; +} + +li, +a { + text-decoration: none; +} + +.content { + margin: 100px auto; + width: 800px; + display: flex; + justify-content: center; + gap: 40px; +} + +.content-right-top { + display: flex; + align-items: center; + justify-content: space-between; + height: 110px; + padding: 5px 0; +} + +.content-right-top button { + background: linear-gradient( + rgba(28, 83, 128, 0.314), + rgba(28, 83, 128, 0.597) + ) + no-repeat; + background-size: cover; + height: 40px; + width: 90px; + color: #fff; + font-size: 400; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + box-shadow: 2px 2px 2px #06365f; + border: none; + cursor: pointer; + transition: all 0.3s; +} + +.content-right-top button:hover { + box-shadow: none; +} + +article { + background: url(../images/frame.png); + background-size: cover; + padding: 18px; +} + +h2 { + color: #06365f; + margin: 10px 20px; +} + +article p { + margin: 0 15px 10px 15px; +} + +.links { + display: flex; + align-items: center; + gap: 40px; + padding-left: 30px; +} + +footer ul { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; +} + +footer ul a { + color: #1c5380; + font-weight: 500; +} + +footer ul li:last-child { + color: #aaa; + font-size: 14px; }