From d79bb3f2a737df0035c807ec6d7ecd07e5284a47 Mon Sep 17 00:00:00 2001 From: Nosayba Ahmed Date: Mon, 25 May 2020 19:36:30 +0100 Subject: [PATCH 1/3] first style --- week2/2-website/css/style.css | 212 ++++++++++++++++++++++++++++++++-- week2/2-website/index.html | 68 ++++++++++- 2 files changed, 267 insertions(+), 13 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..68ef2695 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,19 +1,211 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } +nav .logo { + margin:0; + background-color:white; + height: 3.375rem; + + } + -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ + +.nav-bar{ + margin: 0; + padding: 0; + background-color:white; + position: fixed; + width:100%; + height: 3.375rem; + border-bottom: 1px solid #ddd; + + + } + nav ul{ + display:flex; + justify-content:space-around; + flex-direction:raw; + margin-left: 1.563rem; + font-size:1.04rem; + list-style-type:none; + } + + nav a { + display: flex; + color: #838994; + font-size: 1.04rem; + text-decoration: none; + margin-top: rem; + + } + + + + li a.active { + color:#4c5058; + font-weight:600; + } + + li a:hover{ + cursor: pointer; + color:#333333; + } + + + + + .backimg{ + background-image: url('https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/master/week2/2-website/img/first-background.jpg'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 45.938rem; + overflow: auto; + } + + .content { + text-align: center; + } + + h1 { + color: white; + text-align: center; + font-weight: 300; + margin-top: 17.5rem; + font-size: 3.125rem; + } + + + p{ + color:white; + font-weight:300; + margin-top: 1.25rem; + font-size: 1.563rem; + + } + + button { + + width: 9.688rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; + } + button:hover{ + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; + } + + + + + + .cases { + display:flex; + background-color: #fff; + padding-bottom: 5rem; + justify-content: center; + flex-flow: row; + + } + + + .cases .one > li { + width: 33.3333333%; + flex-direction: row; + flex-flow: row; + + list-style-type: none; + + } + + + + /*footer */ + footer { + background-color: #fff; + overflow: auto; + padding-bottom: 9.375rem; + text-align: center; + } + hr { + border: 0; + border-top: 1px solid #eaebec; + margin: 1.313rem 0; + + } + .icons > li { + border-radius: 1.25rem; + width: 2.5rem; + height: rem; + display: inline-block; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; + } + ul li:hover { + cursor: pointer; + } + + .twitter{ + color: #55acee; + } + .facebook{ + color: #4c66a4; + } + .insta{ + color: #3f729b; + } + span { + font-size: 0.9rem; + font-weight: 300; + color: #838994; + } + + + + /** + * Responsive Design + + @media (min-width: 48rem) { + .content { + width: 46rem; + } + } + @media (min-width: 62rem) { + .content { + width: 60rem; + } + } + @media (min-width: 75rem) { + .content { + width: 60%; + } + }*/ + + /* Chrome, Safari, Opera + @-webkit-keyframes bounce { + 0%, 100% {margin-top: 0px;} + 50% {margin-top: 2rem;} + }*/ + /* Standard syntax + @keyframes bounce { + 0%, 100% {margin-top: 0px;} + 50% {margin-top: 2rem;} + } + */ + + diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..298597b2 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -12,10 +12,72 @@ +
+ + +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+ +
+

Everyone needs a little Karma.

- - - + +
    +
  • +
    +

    Internet for all devices

    • + +
  • +
    +

    Boost your productivity

    +
    • +
  • +
    +

    Pay as You Go

    +
    +
    • +
+ +
+ +
+
+
+
Join us on
+
    + + +
  • +
    • +
+ + © Karma Mobility, Inc. + +
+
+ +
+ + + From 68e0dba5cfe9af617fe97c779c06ae10273d4fd3 Mon Sep 17 00:00:00 2001 From: Nosayba Ahmed Date: Sun, 31 May 2020 12:24:47 +0100 Subject: [PATCH 2/3] second clone --- week2/2-website/css/style.css | 178 +++++++++++++++++++--------------- week2/2-website/index.html | 31 +++--- 2 files changed, 115 insertions(+), 94 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 68ef2695..6981904d 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,53 +1,50 @@ - +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} - body { + line-height:1; + margin:0; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + } -nav .logo { - margin:0; - background-color:white; - height: 3.375rem; - - } - - -.nav-bar{ - margin: 0; - padding: 0; + .nav-bar ul { + display:block; + font-size:1.04rem; + margin:0 ; + padding:0 ; background-color:white; position: fixed; width:100%; - height: 3.375rem; + height: 4.375rem; border-bottom: 1px solid #ddd; - - - } - nav ul{ - display:flex; - justify-content:space-around; - flex-direction:raw; - margin-left: 1.563rem; - font-size:1.04rem; - list-style-type:none; - } + } + +.nav-bar li { + + display:inline-block; + margin-left:1.563rem; + margin-top:1.7rem; + list-style-type:none; + + +} nav a { - display: flex; color: #838994; font-size: 1.04rem; text-decoration: none; - margin-top: rem; - - } + } - li a.active { + li .active { color:#4c5058; - font-weight:600; + font-weight:500; } li a:hover{ @@ -55,7 +52,12 @@ nav .logo { color:#333333; } - + ul .logo { + width:20%; + height: 2.375rem; + margin-top: 0.7rem; + +} .backimg{ @@ -72,28 +74,26 @@ nav .logo { } h1 { + display :block; color: white; text-align: center; - font-weight: 300; + font-weight:300 ; margin-top: 17.5rem; - font-size: 3.125rem; - } + font-size: 3.125rem; + } - p{ + .content > h3{ color:white; font-weight:300; margin-top: 1.25rem; - font-size: 1.563rem; - + font-size: 1.563rem; } button { width: 9.688rem; background-color: #f15a29; - border-color: #f15a29; - text-shadow: none; border-style: none; border-radius: 4px; padding: 1rem 1.5rem; @@ -108,28 +108,39 @@ nav .logo { - +.cases h2{ + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; + text-align:center; +} .cases { - display:flex; + display:block; + margin-top: 7.875rem; background-color: #fff; padding-bottom: 5rem; - justify-content: center; - flex-flow: row; - - } - + } - .cases .one > li { - width: 33.3333333%; - flex-direction: row; - flex-flow: row; +.cases ul { + display:flex; + flex-direction:row; + justify-content:center; +} - list-style-type: none; + .cases .one > li { + width: 20%; + list-style-type: none; } - +.cases div > h3{ + + font-weight: 400; + font-size: 1.563rem; + margin: 2.5rem 0px 1.875rem; +} + /*footer */ footer { @@ -138,12 +149,22 @@ nav .logo { padding-bottom: 9.375rem; text-align: center; } - hr { + + + .content hr { border: 0; - border-top: 1px solid #eaebec; - margin: 1.313rem 0; - - } + border-top: 1px solid #eaebec; + margin: 1.313rem 0; +} + + + +h5{ + font-size: 1em; + font-weight:400; + +} + .icons > li { border-radius: 1.25rem; width: 2.5rem; @@ -171,35 +192,36 @@ nav .logo { font-size: 0.9rem; font-weight: 300; color: #838994; + } - /** - * Responsive Design + + /* Responsive Design - @media (min-width: 48rem) { - .content { - width: 46rem; - } - } - @media (min-width: 62rem) { - .content { - width: 60rem; - } - } - @media (min-width: 75rem) { - .content { - width: 60%; - } - }*/ + @media (min-width: 48rem) { + .content { + width: 46rem; + } +} +@media (min-width: 62rem) { + .content { + width: 60rem; + } +} +@media (min-width: 75rem) { + .content { + width: 60%; + } +} - /* Chrome, Safari, Opera + Chrome, Safari, Opera @-webkit-keyframes bounce { 0%, 100% {margin-top: 0px;} 50% {margin-top: 2rem;} - }*/ - /* Standard syntax + } + Standard syntax @keyframes bounce { 0%, 100% {margin-top: 0px;} 50% {margin-top: 2rem;} diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 298597b2..14db73b8 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -12,12 +12,11 @@ -
- - + +
+

Introducing Karma

-

Bring WiFi with you, everywhere you go.

+

Bring WiFi with you, everywhere you go.

+

Everyone needs a little Karma.

@@ -50,11 +53,11 @@

Boost your productivity

  • -

    Pay as You Go

    +

    Pay as You Go

    • - +
    @@ -75,9 +78,5 @@
    Join us on
    - - - - From 0bad1f732f1a1f9ffe67628f3f8a058ec6d96efa Mon Sep 17 00:00:00 2001 From: Nosayba Ahmed Date: Sun, 7 Jun 2020 20:19:52 +0100 Subject: [PATCH 3/3] cloned but not responsive --- week2/2-website/css/style.css | 372 +++++++++++++++++----------------- 1 file changed, 184 insertions(+), 188 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 6981904d..f2e75548 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,233 +1,229 @@ html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + font-size: 1rem; } - + body { - line-height:1; - margin:0; - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; - + line-height:1; + margin:0; + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; + } - .nav-bar ul { - display:block; - font-size:1.04rem; - margin:0 ; - padding:0 ; - background-color:white; - position: fixed; - width:100%; - height: 4.375rem; - border-bottom: 1px solid #ddd; - } +.nav-bar ul { + text-align: center; + display:block; + font-size:1.04rem; + margin:0 ; + padding:0 ; + background-color:white; + position: fixed; + width:100%; + height: 4.375rem; + border-bottom: 1px solid #ddd; + } + - .nav-bar li { - display:inline-block; - margin-left:1.563rem; - margin-top:1.7rem; - list-style-type:none; - - +display:inline-block; +margin-left:1.563rem; +margin-top:1.7rem; +list-style-type:none; + + } - nav a { - color: #838994; - font-size: 1.04rem; - text-decoration: none; - } - - - - li .active { - color:#4c5058; - font-weight:500; - } - - li a:hover{ - cursor: pointer; - color:#333333; +nav a { + color: #838994; + font-size: 1.04rem; + text-decoration: none; } - - ul .logo { - width:20%; - height: 2.375rem; - margin-top: 0.7rem; - + + + + li .active { + color:#4c5058; + font-weight:500; } + +li a:hover{ + cursor: pointer; + color:#333333; +} + +ul .logo { + width:20%; + height: 2.375rem; + margin-top: 0.7rem; - - .backimg{ - background-image: url('https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/master/week2/2-website/img/first-background.jpg'); - background-position: center bottom; - background-repeat: no-repeat; - background-size: cover; - height: 45.938rem; - overflow: auto; - } - - .content { +} + + +.backimg{ + background-image: url('https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/master/week2/2-website/img/first-background.jpg'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height:45.938rem; + overflow: auto; +} + + +h1 { + display :block; + color: white; text-align: center; - } - - h1 { - display :block; - color: white; - text-align: center; - font-weight:300 ; - margin-top: 17.5rem; - font-size: 3.125rem; - } - - - .content > h3{ - color:white; - font-weight:300; - margin-top: 1.25rem; - font-size: 1.563rem; - } + font-weight:300 ; + margin-top: 17.5rem; + font-size: 3.125rem; +} - button { - - width: 9.688rem; - background-color: #f15a29; - border-style: none; - border-radius: 4px; - padding: 1rem 1.5rem; - color: white; - font-size: 1.125rem; - } - button:hover{ - background-color: #d9400e; - border-color: #cf3d0e; - cursor: pointer; - } +.middle{ + text-align: center; +} + +.middle > h3{ + color:white; + font-weight:300; + margin-top: 1.25rem; + font-size: 1.563rem; +} + +button { + + width: 9.688rem; + background-color: #f15a29; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; + +} +button:hover{ + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} +.last { + text-align: center; +} .cases h2{ - font-size: 2.75rem; - margin: 1.625rem 0 3.125rem; - font-weight: 300; - text-align:center; + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; + text-align:center; } - .cases { - display:block; - margin-top: 7.875rem; - background-color: #fff; - padding-bottom: 5rem; - } +.cases { + display:block; + margin-top: 7.875rem; + background-color: #fff; + padding-bottom: 5rem; + } .cases ul { - display:flex; - flex-direction:row; - justify-content:center; +display:flex; +flex-direction:row; +justify-content:center; } - .cases .one > li { - width: 20%; - list-style-type: none; +.cases .one > li { + width: 20%; + list-style-type: none; - } +} .cases div > h3{ - - font-weight: 400; - font-size: 1.563rem; - margin: 2.5rem 0px 1.875rem; + +font-weight: 400; +font-size: 1.563rem; +margin: 2.5rem 0px 1.875rem; } - + - /*footer */ - footer { - background-color: #fff; - overflow: auto; - padding-bottom: 9.375rem; - text-align: center; - } +/*footer */ +footer { + background-color: #fff; + overflow: auto; + padding-bottom: 9.375rem; + text-align: center; +} - - .content hr { - border: 0; - border-top: 1px solid #eaebec; - margin: 1.313rem 0; + +.footer hr { + border: 0; + border-top: 1px solid #eaebec; + margin-: 1.313rem 0; + width:50%; + } - + - + h5{ - font-size: 1em; - font-weight:400; - + font-size: 1em; + font-weight:400; + } - .icons > li { - border-radius: 1.25rem; - width: 2.5rem; - height: rem; - display: inline-block; - margin: 1.25rem 5px; - border: 1px solid #eaebec; - padding: 0.625rem 0; - text-align: center; - } - ul li:hover { - cursor: pointer; - } - - .twitter{ - color: #55acee; - } - .facebook{ - color: #4c66a4; - } - .insta{ - color: #3f729b; - } - span { - font-size: 0.9rem; - font-weight: 300; - color: #838994; - - } - +.icons > li { + border-radius: 1.25rem; + width: 2.5rem; + height: rem; + display: inline-block; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; +} +ul li:hover { + cursor: pointer; +} + +.twitter{ + color: #55acee; +} + .facebook{ + color: #4c66a4; +} + .insta{ + color: #3f729b; +} +span { + font-size: 0.9rem; + font-weight: 300; + color: #838994; +} + + + + +/* Responsive Design*/ + +@media (min-width: 600px) { + - /* Responsive Design - - @media (min-width: 48rem) { - .content { - width: 46rem; - } } @media (min-width: 62rem) { - .content { - width: 60rem; - } + + } @media (min-width: 75rem) { - .content { - width: 60%; - } + } - - Chrome, Safari, Opera - @-webkit-keyframes bounce { - 0%, 100% {margin-top: 0px;} - 50% {margin-top: 2rem;} - } - Standard syntax - @keyframes bounce { - 0%, 100% {margin-top: 0px;} - 50% {margin-top: 2rem;} - } - */ - - + + + + +