From 6bbb4108fed498275b1b1d0ec66aaf77c957a72e Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 17:45:03 +0200 Subject: [PATCH 01/15] Headings I started with the

to

headings --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3e742ef04..d7920425f 100755 --- a/index.html +++ b/index.html @@ -10,7 +10,13 @@ - +

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

+ From cec3cd1fd52c736f13681b40574dc2216f3d960d Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 18:06:19 +0200 Subject: [PATCH 02/15] Nav bar I then created the nav bar links --- index.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d7920425f..6a5fa0dc5 100755 --- a/index.html +++ b/index.html @@ -10,7 +10,23 @@ -

Introducing Karma

+
+

Introducing Karma

+
+ + +

Bring WiFi with you, everywhere you go

Everyone needs a little Karma

Internet for all devices

From 6720f9906f94af190f4a689cdac85d98d465b392 Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 19:47:33 +0200 Subject: [PATCH 03/15] moved nav links When I looked at the web browser, the nav links was "inside the content, so i moved it out. --- index.html | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 6a5fa0dc5..32ef5bc53 100755 --- a/index.html +++ b/index.html @@ -9,25 +9,30 @@ +
-

Introducing Karma

+
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go

+ +
- - - -

Bring WiFi with you, everywhere you go

+ +

Everyone needs a little Karma

Internet for all devices

Boost your Productivity

@@ -38,4 +43,6 @@

Pay as you go

+ +
From 5baf3e492a1e14b0db7cd32019d258d87216ca18 Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 20:12:18 +0200 Subject: [PATCH 04/15] img tags I created the img tags that will contain the urls's for the pics with reference to the header 3 content sections --- index.html | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 32ef5bc53..d6fff00d7 100755 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@ +
@@ -29,14 +30,36 @@

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

    +
    • + + +
-

Everyone needs a little Karma -

Internet for all devices

-

Boost your Productivity

-

Pay as you go

+ +

+
+ + @@ -44,5 +67,8 @@

Pay as you go

-
+
+ + +
From 4bda6e65d3f1ccad6f0e60a2ee4a5ac743912556 Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 20:20:32 +0200 Subject: [PATCH 05/15] social media handles I created a div containing the social media handles --- index.html | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d6fff00d7..422b43fe2 100755 --- a/index.html +++ b/index.html @@ -68,7 +68,20 @@

Pay as you go

- - +
+
+
    + + + +
+
+ From 9fa53e38226640e6e067d2e0586559ce38071aea Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 20:35:29 +0200 Subject: [PATCH 06/15] x3 icons The icons for devices, coffee and refill did not work (I am sure it is due to something I did), so I opted to use the url straight from the github website instead --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 422b43fe2..caaa3f076 100755 --- a/index.html +++ b/index.html @@ -38,17 +38,17 @@

Bring WiFi with you, everywhere you go

Everyone needs a little Karma
  • - + devices

    Internet for all devices

  • - + productivity

    Boost your Productivity

  • - + refill

    Pay as you go

    • From 3407a5c25a311a7770396c11c2d996a4e2c11eec Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 20:40:21 +0200 Subject: [PATCH 07/15] karma logo logo url taken from github site --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index caaa3f076..7f62b003c 100755 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@
  • Help
  • Login
+ From 87542d5618c3a8324a4b6fe205efe31430790384 Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 20:59:12 +0200 Subject: [PATCH 08/15] navigation styling done --- css/style.css | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/css/style.css b/css/style.css index 5cb025cef..303d149ab 100755 --- a/css/style.css +++ b/css/style.css @@ -16,4 +16,38 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* navigation */ +.top-navigation{ + background-color: #fff; + position: fixed; + width: 100%; +} + +.top-navigation .content{ + color: #838994; + width: 970px; + height: 4.375rem; + margin: auto; +} + +.top-navigation .links{ + font-size: 1rem; + float: right + -webkit-font-smoothing: antialiased; + margin-top: 1.563rem; +} +.top-navigation .links .active{ + font-weight: 500; + color: #4c5058; +} + +.top-navigation li { + display: inline-block; + margin-left: 25px; +} + +.top-navigation .links li:hover { + cursor: pointer; + color: #333333; +} From 624214cb739a8815f830cd711c2d2aaf0cf3c0f8 Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 21:08:12 +0200 Subject: [PATCH 09/15] introduction styling done --- css/style.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/css/style.css b/css/style.css index 303d149ab..92c06fbdf 100755 --- a/css/style.css +++ b/css/style.css @@ -51,3 +51,20 @@ body { cursor: pointer; color: #333333; } + +/* introduction */ +.introduction { + background-image: url(https://thinkful-ed.github.io/karma-clone/img/first-background.jpg); + background-position: center bottom; + background-size: cover; + background-repeat: no-repeat; + background-position: 10 bottom; + overflow: auto; + height: 45.938rem; +} + +.introduction .content { + color: white; + text-align: center; + padding-top: 400px; +} \ No newline at end of file From 8f6b0c142c9c13db597741b7131a4f0463ab3a90 Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 21:11:20 +0200 Subject: [PATCH 10/15] button styling done --- css/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/css/style.css b/css/style.css index 92c06fbdf..82414c103 100755 --- a/css/style.css +++ b/css/style.css @@ -67,4 +67,14 @@ body { color: white; text-align: center; padding-top: 400px; +} + +button { + text-shadow: none; + border-radius: 4px; + background-color: orange; + margin: 0 auto; + padding: 1rem 1.5rem; + color: white; + border-style: none; } \ No newline at end of file From 43cb4f5f04722590443805514077ab164b7b70fe Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 21:16:46 +0200 Subject: [PATCH 11/15] devices styling done --- css/style.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/css/style.css b/css/style.css index 82414c103..c217993e4 100755 --- a/css/style.css +++ b/css/style.css @@ -77,4 +77,20 @@ button { padding: 1rem 1.5rem; color: white; border-style: none; +} + +.stories { + text-align: center; +} + +/* devices */ + +.devices > li { + width: 33%; + box-sizing: border-box; + height: 4em; + display: inline-block; + list-style: none; + margin-left: -5%; + margin-right: -5%; } \ No newline at end of file From 1f946485137405040d378e962d2be0b5ecc48c79 Mon Sep 17 00:00:00 2001 From: BereniceOgundele <102852581+BereniceOgundele@users.noreply.github.com> Date: Fri, 17 Jun 2022 21:27:06 +0200 Subject: [PATCH 12/15] social styling updated, but not working properly. need to check/fix --- css/style.css | 22 +++++++++++++++++++++- index.html | 2 +- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c217993e4..10bd3c34e 100755 --- a/css/style.css +++ b/css/style.css @@ -93,4 +93,24 @@ button { list-style: none; margin-left: -5%; margin-right: -5%; -} \ No newline at end of file +} + +.social .icons { + text-align: center; +} + +.social .icons >li { + border-radius: 1.25rem; + display: inline-block; + height: 2.5rem; + width: 2.5rem; + margin: 1.25rem 5px; + padding: 0.625rem 0; + border: 1px solid #eaebec; + text-align: center; +} + +.social .twitter { + color: #55acee; +} + diff --git a/index.html b/index.html index 7f62b003c..db1e93694 100755 --- a/index.html +++ b/index.html @@ -68,7 +68,7 @@

Pay as you go

-