From 44850f11132eefe26b08d0b23deeaff8a0d13883 Mon Sep 17 00:00:00 2001 From: Peter Armstrong Date: Tue, 15 Jun 2021 11:21:16 +0100 Subject: [PATCH 1/7] finished html? start css --- css/style.css | 1 + index.html | 70 +++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 61 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..6e8f0ef81 100755 --- a/css/style.css +++ b/css/style.css @@ -4,6 +4,7 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + font-size: 15px; } /** diff --git a/index.html b/index.html index 3e742ef04..8c1afb901 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,69 @@ + + - - + + Karma - - - - + + + + + +
+ Logo + +
+ +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+
+
+ different internet devices +

Internet for all devices

+
+
+ coffee cup +

Boost your productivity

+
+
+ Gas refill tank +

Pay as You Go

+
+
+
+
- - - + + + - + \ No newline at end of file From 810be8a5a8445aaff0e040a3790f54338b6e6b14 Mon Sep 17 00:00:00 2001 From: Peter Armstrong Date: Tue, 15 Jun 2021 11:29:37 +0100 Subject: [PATCH 2/7] header style --- css/style.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 6e8f0ef81..088a0cf0b 100755 --- a/css/style.css +++ b/css/style.css @@ -6,7 +6,18 @@ body { -webkit-font-smoothing: antialiased; font-size: 15px; } - +/* Header Section */ +header { + display: flex; + justify-content: space-evenly; + align-items: center; +} +header img { + height: 2.4rem; + padding: 1rem 0 1rem 2rem; +} + + /** * Add your custom styles below * From 25d24305117d37fa411571b9a0ba88a1958e1708 Mon Sep 17 00:00:00 2001 From: Peter Armstrong Date: Tue, 15 Jun 2021 11:35:23 +0100 Subject: [PATCH 3/7] nav css style --- css/style.css | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 088a0cf0b..a6e6bab4e 100755 --- a/css/style.css +++ b/css/style.css @@ -16,8 +16,26 @@ header img { height: 2.4rem; padding: 1rem 0 1rem 2rem; } - - + +/* Navigation Section */ + +nav ul { + display: flex; + list-style: none; +} + +nav ul a { + text-decoration: none; + color: #9c9fa7; + padding: 1rem; +} +nav ul a:focus, nav ul a:hover { + color: #e0633a; +} +li:first-child a { + color: rgb(117, 114, 114); + font-weight: 500; +} /** * Add your custom styles below * From c9c99de7edd14ce6c7b17e85d836afcb2aafd7aa Mon Sep 17 00:00:00 2001 From: Peter Armstrong Date: Tue, 15 Jun 2021 11:49:45 +0100 Subject: [PATCH 4/7] hero picture css styles --- css/style.css | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/css/style.css b/css/style.css index a6e6bab4e..46a967924 100755 --- a/css/style.css +++ b/css/style.css @@ -36,6 +36,42 @@ li:first-child a { color: rgb(117, 114, 114); font-weight: 500; } + +/* Main Content Section */ + +.hero { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-image: url("../img/first-background.jpg"); + width: 73rem; + height: 76vh; + margin: 0 auto; + background-position-x: -200px; + background-position-y: -25px; + background-repeat: no-repeat; +} +.hero h1, .hero h2 { + color: white; + font-weight: 100; + margin: 0; +} +.hero h1 { + font-size: 3.5rem; +} +.hero h2 { + letter-spacing: 2px; + padding: 1rem 0 3.5rem; +} +.hero button { + background-color: #d35a32; + color: white; + padding: 0.8rem 1.2rem; + border-radius: 5%; + border: none; +} + /** * Add your custom styles below * From 209af0d910f2ac5b91355528ec091b16248a90c6 Mon Sep 17 00:00:00 2001 From: Peter Armstrong Date: Tue, 15 Jun 2021 11:54:55 +0100 Subject: [PATCH 5/7] features css styles --- css/style.css | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 46a967924..d01f567ae 100755 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,4 @@ - /* 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; @@ -45,7 +43,7 @@ li:first-child a { justify-content: center; align-items: center; background-image: url("../img/first-background.jpg"); - width: 73rem; + max-width: 73rem; height: 76vh; margin: 0 auto; background-position-x: -200px; @@ -72,6 +70,34 @@ li:first-child a { border: none; } +/* Features Icon Section */ + +.features { + width: 44rem; + margin: 0 auto; + padding: 5rem 0; + box-shadow: 0px 1px 0px #eae5e5; +} +.features h2 { + color: black; + text-align: center; + font-weight: 300; + font-size: 1.8rem; + padding-bottom: 3rem; +} +.icon-container { + display: flex; +} +.icons { + padding: 0 2rem; +} +.icons p { + width: 11.5rem; +} +.features img { + width: 10rem; + height: 6rem; +} /** * Add your custom styles below * From 362c1d9958a588115e5cfba0691e1d5c9eb8a296 Mon Sep 17 00:00:00 2001 From: Peter Armstrong Date: Tue, 15 Jun 2021 12:00:00 +0100 Subject: [PATCH 6/7] footer css styles --- css/style.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/css/style.css b/css/style.css index d01f567ae..6e302a2b9 100755 --- a/css/style.css +++ b/css/style.css @@ -98,6 +98,31 @@ li:first-child a { width: 10rem; height: 6rem; } + +/* Footer Section */ + +footer { + display: flex; + flex-direction: column; + align-items: center; +} +footer section { + display: flex; +} +footer img { + height: 1.6rem; + padding: 0.3rem 0; + border-radius: 100%; +} +footer h3 { + font-size: 1rem; + font-weight: 400; +} +footer small { + padding: 1rem; + color: #92949b; +} + /** * Add your custom styles below * From 86b852140fe9cc2d9c248563ac691b018cd234c1 Mon Sep 17 00:00:00 2001 From: Peter Armstrong Date: Tue, 15 Jun 2021 12:07:33 +0100 Subject: [PATCH 7/7] media queries finished? --- css/style.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/css/style.css b/css/style.css index 6e302a2b9..043764ee2 100755 --- a/css/style.css +++ b/css/style.css @@ -123,6 +123,95 @@ footer small { color: #92949b; } +/* Media Queries */ +@media screen and (max-width: 375px) { + body{ + width: fit-content; + } + main { + display: flex; + flex-direction: column; + + } + header { + width: 100vh; + } + header nav ul { + overflow: hidden; + height:0; + } + header nav ul.open { + height: auto; + font-size: 1.8rem; + margin-top: 3rem; + display: flex; + flex-direction: column; + border-bottom: 1px solid grey; + border-top: 1px solid grey; + } + header nav ul li { + display: block; + width: 100%; + margin:0; + } + header nav ul li a { + display: block; + padding: 10px; + margin:0; + } + header img{ + height: 3.4rem; + padding: 2rem 0 1rem 4rem; + } + .hero { + width: 46rem; + height: 116vh; + + background-position: center; + } + .icon-container { + flex-direction: column; + align-items: center; + } + .features { + width: 46rem; + } + .features h2{ + font-size: 3.6rem; + } + footer { + width: 50rem; + height: 4vh; + } + .icons img{ + width: 21.7rem; + height: 7rem; + } + .icons p{ + font-size: 2rem; + width: 21rem; + text-align: center; + } + .burger-nav { + display: block; + height: 40px; + width: 100%; + background: url("../img/menu-hamburger.svg") no-repeat 98% center; + background-size: 2.5rem; + cursor: pointer; + } + footer h3{ + font-size: 1.2rem; + } + footer img{ + height: 2.4rem; + } + footer small{ + font-size: 1.2rem; + } +} + + /** * Add your custom styles below *