From ceaa3668044d97ef39b2cf77e8bf583c01a4c07d Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Wed, 1 Feb 2023 18:41:23 +0000 Subject: [PATCH 1/9] First Commit: added semantic html tags --- index.html | 61 +++++++++++++++++++++++++++++++++++++++++++----------- store.html | 29 ++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 12 deletions(-) create mode 100644 store.html diff --git a/index.html b/index.html index 3e742ef04..f710bfefb 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,56 @@ - - - + + + Karma - - - - - - - + + + + + + - - +
+ + +
+
+
+

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

+
+
+ + diff --git a/store.html b/store.html new file mode 100644 index 000000000..bef6df5b3 --- /dev/null +++ b/store.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + +
+ + +
+
+ + + From d3abfc2c8ee4208b3d3f41c6938cd216f2d914e1 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Sun, 12 Feb 2023 13:51:40 +0000 Subject: [PATCH 2/9] main-container-up is done Includes background-image --- .vscode/settings.json | 3 ++ css/style.css | 84 ++++++++++++++++++++++++++++++++++++++++--- index.html | 43 +++++++++++++++------- 3 files changed, 114 insertions(+), 16 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/style.css b/css/style.css index 5cb025cef..416c14544 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,8 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +/* 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; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; } /** @@ -16,4 +15,81 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* HEADER style */ + +.header { + display: flex; + justify-content: space-around; + gap: 300px; + border: 2px solid grey; + height: 80px; + align-items: center; +} + +.nav-list { + color: rgb(160, 158, 158); + display: flex; + list-style: none; + justify-content: space-between; + border: 2px solid grey; + width: 500px; +} + +/* END of HEADER style */ + +/* MAIN style */ +.main { + display: flex; + flex-direction: column; + text-align: center; +} + +.main-container-up { + background-image: url("../img/first-background.jpg"); /* The image used */ + background-color: #cccccc; /* Used if the image is unavailable */ + height: 500px; /* You must set a specified height */ + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: cover; /* Resize the background image to cover the entire container */ +/* background-size: cover; + background-repeat: no-repeat; + position: fixed; */ + display: flex; + flex-direction: column; + border-bottom: 2px solid grey; + color: white; + height: 670px; + align-items: center; + justify-content: center; +} + +.up-button{ + background-color: orange; + color: white; + padding: 10px 30px; + border-radius: 5px; +} + +.main-container-down { + align-content: center; +} + +/* END of MAIN style */ + +/* FOOTER style */ +.footer { + border-top: 3px solid grey; + text-align: center; +} +.social-media-icons { + justify-content: center; +} + +.social_media_icon { + height: 18px; + border: 1px solid gray; + border-radius: 50%; + padding: 10px; +} +/* END of FOOTER style */ diff --git a/index.html b/index.html index f710bfefb..b95a1152d 100755 --- a/index.html +++ b/index.html @@ -20,37 +20,56 @@ +
+
-
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- +
+

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 788a06466b9fca5aa3262060693ac1c4f2720246 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Sun, 12 Feb 2023 19:27:39 +0000 Subject: [PATCH 3/9] container-down is done --- css/style.css | 23 +++++++++++++++++++---- index.html | 34 ++++++++++++++++++++++++---------- 2 files changed, 43 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index 416c14544..8f9da4299 100755 --- a/css/style.css +++ b/css/style.css @@ -27,14 +27,15 @@ body { } .nav-list { - color: rgb(160, 158, 158); display: flex; list-style: none; justify-content: space-between; border: 2px solid grey; width: 500px; } - +.nav-item{ + color: grey; +} /* END of HEADER style */ /* MAIN style */ @@ -72,13 +73,27 @@ body { .main-container-down { align-content: center; + height: 500px; +} +.down-h1{ + margin-top: 150px; + margin-bottom: 80px; +} +.icons{ + display: flex; + justify-content: center; + gap: 140px; + margin: 0 100px 100px 100px; +} +.line{ + border-bottom: 2px solid grey; + margin-left: 275px; + margin-right: 280px; } - /* END of MAIN style */ /* FOOTER style */ .footer { - border-top: 3px solid grey; text-align: center; } .social-media-icons { diff --git a/index.html b/index.html index b95a1152d..d87b272aa 100755 --- a/index.html +++ b/index.html @@ -25,12 +25,14 @@ @@ -43,11 +45,23 @@

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

+
+
+