From 2bdf1b8754b2c727a19c316c976e707edd231ee7 Mon Sep 17 00:00:00 2001 From: jarryl Date: Wed, 5 Aug 2020 21:58:29 +0800 Subject: [PATCH] This is my attempt at the css positioning exercise --- css/style.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 71 ++++++++++++++++++++++++++++++++++----------- 2 files changed, 135 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index 412f6d4..a05838f 100644 --- a/css/style.css +++ b/css/style.css @@ -8,4 +8,84 @@ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin: 0; + overflow-x: hidden; +} + +#phones { + position: absolute; + top: 100px; + left:15%; +} + +#frame{ + width: 700px; +} + +.container { + position: relative; +} + +.text-block { + position: absolute; + top: 10px; + width: 600px; + padding: 10px 50px; +} + +.topSection { + background-color: rgb(63, 114, 155); + height: 350px; + width: 100%; +} + +.content { + position: relative; + top: 100px; + left: 50%; + margin-left:-100px; +} + +.footer { + bottom: 60px; + left: 50%; + margin-left: -250px; + margin-top: 30px; +} + +ul{ + list-style: none; + margin: 10px; +} + +li { + display: inline; + margin-right: 10px; +} + +.login { + display: inline-block; + position: relative; + bottom: 30px; + margin-left: 250px; + border: 1px solid #1c5380; + padding:10px; + width: 100px; + color: white; +} + +h1 { + font-size:40px; + color: #1c5380; +} + +.footer li { + color: #06365f; + font-weight:700; + text-transform: uppercase; +} + +#copyright { + font-weight: 400; + color: grey; + text-transform: uppercase; } diff --git a/index.html b/index.html index f038e97..a8b1f8e 100644 --- a/index.html +++ b/index.html @@ -3,31 +3,70 @@ + Instagram - 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?
+
+
+ + +
+
+
+
    +
  • About Us
    • +
  • Support
    • +
  • Blog
    • +
  • Press
    • +
  • API
    • +
  • Jobs
    • +
  • Privacy
    • +
  • Terms
    • + © 2014 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? + - © 2014 Instagram