From 203ec7c95f64d194c77af9220b18fb77311d3b24 Mon Sep 17 00:00:00 2001 From: Nishka-Kisten <103143568+Nishka-Kisten@users.noreply.github.com> Date: Sun, 12 Jun 2022 23:48:42 +0200 Subject: [PATCH 1/2] Nishka-Kisten --- css/style.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 48 +++++++++++++++++++++++--- 2 files changed, 138 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..6f6aa744d 100755 --- a/css/style.css +++ b/css/style.css @@ -16,4 +16,99 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +*{ box-sizing: border-box; + margin: 0; + padding: 0; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 10%; + background-color: #ffffff; + +} +.logo{ + width: 28px; + cursor: pointer; + +} +.nav a{ + list-style-type: none; + text-decoration: none; + font-size: 18px ; + +} + .nav li { + display: inline-block; + padding: 0px 10px; + +} +.main{ + color:#5c5f66; + +} + .links { + color: #9297a0; +} +body{ +/* background-image: url(/img/first-background.jpg); */ + /* background-size: cover; + background-position: center; */ + +} + +.first-background{ + max-width: 100%; + height: auto; +} +h1{ + color: #ffffff; + position: absolute; + top: 39%; + left: 44%; + transform: translate(-50%, -50%); + font-size: 65px; +} +.head_p { + color: #ffffff; + position: absolute; + top: 56%; + left: 44%; + transform: translate(-50%, -50%); + font-size: 33px; +} +h2{ + text-align: center; + padding: 40px; +} +.devices{ + width: 160px; +} + +.one{ + display: flex; + flex-direction: row; + justify-content:space-around; + align-items: center; + margin: 0 20px 80px 20px ; +} + +footer{ + text-align: center; + margin: 60px; +} +.icons{ + width:30px; + padding-top: 15px ; + +} + +hr { + border: none; + border-top: 1px solid lightgray; + width: 80%; + margin:auto; +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..9885ca957 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,48 @@ - - - - - +
+ + +
+
+ +

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 7ca4cd31f738b473521ac8275cd40953e26409fe Mon Sep 17 00:00:00 2001 From: Nishka-Kisten <103143568+Nishka-Kisten@users.noreply.github.com> Date: Mon, 13 Jun 2022 21:37:38 +0200 Subject: [PATCH 2/2] Changes made so code is easier to read. --- css/style.css | 110 ++++++++++++++++++++++++++++++++++++++------------ index.html | 19 ++++----- 2 files changed, 94 insertions(+), 35 deletions(-) diff --git a/css/style.css b/css/style.css index 6f6aa744d..537e5a2a8 100755 --- a/css/style.css +++ b/css/style.css @@ -16,10 +16,12 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ -*{ box-sizing: border-box; +* { box-sizing: border-box; margin: 0; padding: 0; + font-weight: normal; } +/* NAV STYLES START */ header { display: flex; @@ -52,17 +54,20 @@ header { .links { color: #9297a0; } -body{ -/* background-image: url(/img/first-background.jpg); */ - /* background-size: cover; - background-position: center; */ - -} -.first-background{ +.nav li a:hover { + color: #e1643b; + } + +/* NAV STYLES END */ + +/* HERO STYLES START */ +.hero_img{ max-width: 100%; height: auto; -} + +} + h1{ color: #ffffff; position: absolute; @@ -70,8 +75,10 @@ h1{ left: 44%; transform: translate(-50%, -50%); font-size: 65px; + } -.head_p { + +.hero_p { color: #ffffff; position: absolute; top: 56%; @@ -79,36 +86,87 @@ h1{ transform: translate(-50%, -50%); font-size: 33px; } +.btn{ + position:absolute; + top: 70%; + left: 44%; + transform: translate(-50%, -45%); + z-index: 10; + text-decoration: none; + background-color: #e0633a; + border: none; + color: white; + padding: 12px 28px; + display: inline-block; + font-size: 14px; + border-radius: 4px; + +} + +.btn:hover { + background-color: #c24015; + } + +/* HERO STYLES END */ + +/* GENERAL STYLES START */ h2{ text-align: center; padding: 40px; + font-size: 50px; + margin-top: 50px; } .devices{ - width: 160px; -} - -.one{ + width: 120px; + +} +.container{ display: flex; - flex-direction: row; + flex-direction:row; justify-content:space-around; - align-items: center; - margin: 0 20px 80px 20px ; + margin-bottom: 80px ; + font-size: 20px; + text-align:center; + align-content: center; + padding: 20px; +} +.img_p{ + margin-top: 20px; +} +/* GENERAL STYLES END */ + +/* FOOTER START */ + +hr { + border: none; + border-top: 1px solid lightgray; + width: 80%; + margin:auto; + } footer{ text-align: center; - margin: 60px; + margin-top: 20px; + margin-bottom: 80px; } .icons{ - width:30px; - padding-top: 15px ; + width:40px; + background-color:#fff; + border:1px solid lightgray; + height:40px; + border-radius:50%; + padding: 10px; + margin:20px 4px; + cursor: pointer; + } +.icons:hover{ + filter:contrast(90%); } -hr { - border: none; - border-top: 1px solid lightgray; - width: 80%; - margin:auto; +.inc { + color: #9297a0; +} -} \ No newline at end of file +/* FOOTER END */ \ No newline at end of file diff --git a/index.html b/index.html index 9885ca957..63c6aebb0 100755 --- a/index.html +++ b/index.html @@ -24,33 +24,34 @@
- +

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

+

Internet for all devices

-

Boost your productivity

+

Boost your productivity

-

Pay as You Go

+

Pay as You Go