From 906148e1686f66b9ed0a6768db4eb937e71df049 Mon Sep 17 00:00:00 2001 From: Angelannacyf <70864258+Angelannacyf@users.noreply.github.com> Date: Thu, 24 Sep 2020 22:06:16 +0100 Subject: [PATCH 1/2] Update index.html --- week2/2-website/index.html | 129 ++++++++++++++++++++++++++++++++----- 1 file changed, 112 insertions(+), 17 deletions(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..8347541d 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,21 +1,116 @@ - + + - - - + + Karma - - - - - - - - + + + + + + - - - - - + +
+ +
+
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
+ +
+
+
+
+
+

Everyone needs a little Karma.

+
    +
  • + Internet for all devices image +
    +

    Internet for all devices

    +
    +
    • +
  • + Boost your productivity image +
    +

    Boost your productivity

    +
    +
    • +
  • + Pay as You Go image +
    +

    Pay as You Go

    +
    +
    • +
+
+
+
+ + + From 4a284c20f96ad77389f58003e1ff663d52fbba51 Mon Sep 17 00:00:00 2001 From: Angelannacyf <70864258+Angelannacyf@users.noreply.github.com> Date: Thu, 24 Sep 2020 22:07:06 +0100 Subject: [PATCH 2/2] Update style.css --- week2/2-website/css/style.css | 216 ++++++++++++++++++++++++++++++++-- 1 file changed, 205 insertions(+), 11 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..5712894e 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,19 +1,213 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + body { + /*background-color: LightGray;*/ + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + line-height: 1; +} -body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; +.content { + padding: 0 0.938rem; + margin: 0 auto; + min-width: 37.5rem; +} +:focus { + outline: none; } /** - * 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' + * Navigation Section */ +.top-navigation { + display: flex; + background-color: #fff; + position: fixed; + width: 100%; + border-bottom: 1px solid #ddd; + z-index: 9999; +} +.top-navigation > .content { + height: 4.375rem; +} +.top-navigation .logo { + height: 4.375rem; +} +.top-navigation .links { + float: right; + color: #030d20; + font-size: 1.04rem; + margin-top: 1.7rem; +} +.top-navigation .links li { + display: inline-flex; + margin-left: 1.563rem; +} +.top-navigation .links li.active { + color: #4c5058; + font-weight: 500; +} +.top-navigation .links li:hover { + cursor: pointer; + color: #333333; +} + +/** + * Introduction Section + */ +.introduction { + background-image: url("../img/first-background.jpg"); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 45.938rem; + overflow: auto; +} +.introduction h1, +.introduction h3 { + color: white; + text-align: center; + font-weight: 300; +} +.introduction h1 { + margin-top: 17.5rem; + font-size: 3.125rem; +} +.introduction h3 { + margin-top: 1.25rem; + font-size: 1.563rem; +} +/** + * The buttons + */ +.introduction .buttons { + color: white; + text-align: center; + margin-top: 1.563rem; +} +.introduction .half { + width: 49%; + padding: 0 0.938rem; + display: flex; + vertical-align: bottom; + font-size: 1.125rem; + line-height: 1.2; +} +/** + * The Three Case Images + */ +.cases { + background-color: #fff; + overflow: hidden; + padding-bottom: 5rem; +} +.cases .content { + margin-top: 7.875rem; + padding: none; + color: #1d1e21; + text-align: center; +} +.cases h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; +} +.cases .devices > li { + width: 33.3333333%; + float: left; +} +.cases .devices h3 { + font-weight: 400; + font-size: 1.563rem; + margin: 2.5rem 0px 1.875rem; +} +.cases .devices p { + font-weight: 300; + font-size: 1.313rem; +} +ul, +ol { + list-style: none; +} + +/** + * Footer + */ +.social { + background-color: #fff; + overflow: auto; + padding-bottom: 9.375rem; + text-align: center; +} +.social hr { + border: 0; + border-top: 1px solid #eaebec; + margin: 1.313rem 0; +} +.social .icons > li { + display: inline-flex; + border-radius: 1.25rem; + width: 2.5rem; + height: 2.5rem; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; +} +.social .icons > li:hover { + cursor: pointer; +} +.social .twitter { + color: #55acee; +} +.social .facebook { + color: #4c66a4; +} +.social .instagram { + color: #3f729b; +} +.social .copy { + 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%; + } +} + +/** + * button + */ +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; +}