From f402e512a47a8e1189e8ffee6b21cbbaf9b06dcd Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Wed, 1 Feb 2023 23:32:58 +0000 Subject: [PATCH 1/9] create navbar --- index.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/index.html b/index.html index 3e742ef04..73dc99bc5 100755 --- a/index.html +++ b/index.html @@ -14,6 +14,19 @@ +
+ + + +
From 10956560b79be2509eecfd68d89b799d6acf38cd Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Thu, 9 Feb 2023 13:31:44 +0000 Subject: [PATCH 2/9] finishing the navbar --- css/style.css | 23 +++++++++++++++++++++++ index.html | 7 ++++--- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..90149040f 100755 --- a/css/style.css +++ b/css/style.css @@ -15,5 +15,28 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ + .navbar { + display: flex; + + } + .navbar img { + width: 30px; + height: 30px; + margin-left: 50px; + } + .navbar a { + text-decoration: none; + color:grey; + } + .navbar a:hover { + color: coral; + } + .meet_karma { + margin-left: auto; + } + .how_it_works, .meet_karma, .store, .blog, .help, .log_in { + margin-right: 40px; + } + diff --git a/index.html b/index.html index 73dc99bc5..88ce75470 100755 --- a/index.html +++ b/index.html @@ -15,8 +15,9 @@
-
From 6efdec533dc8cbed74e1c6ce48591efbb530c852 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Thu, 9 Feb 2023 14:56:47 +0000 Subject: [PATCH 3/9] finishing the upper part of the main --- css/style.css | 35 +++++++++++++++++++++++++++++++++-- index.html | 7 +++++++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 90149040f..bf261c6cf 100755 --- a/css/style.css +++ b/css/style.css @@ -37,6 +37,37 @@ body { .how_it_works, .meet_karma, .store, .blog, .help, .log_in { margin-right: 40px; } - - + .main_upper_part { + background-image:url(../img/first-background.jpg); + background-size: cover; + height: 700px; + display: flex; + flex-direction: column; + align-items: center; + + + } + #main_introduction { + font-size: 80px; + color:beige; + margin-top: 250px; + margin-bottom: 0px; + } + #main_rest { + font-size: 40px; + color: beige; + + } + #learn_more { + background-color: coral; + font-size: 30px; + margin-top: 50px; + + + } +#learn_more a { + text-decoration: none; + color: beige; + +} diff --git a/index.html b/index.html index 88ce75470..369e9c7e1 100755 --- a/index.html +++ b/index.html @@ -28,6 +28,13 @@ +
+
+

Introduction Karma

+

Bring WiFi with you, everywhere you go.

+ Learn More +
+
From 0bc675bae7c1ef3d3f896a517ebb15ab8f78cac5 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Thu, 9 Feb 2023 17:24:06 +0000 Subject: [PATCH 4/9] finish the footer --- css/style.css | 42 ++++++++++++++++++++++++++++++++++++++++++ index.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/css/style.css b/css/style.css index bf261c6cf..ba09fd483 100755 --- a/css/style.css +++ b/css/style.css @@ -69,5 +69,47 @@ body { text-decoration: none; color: beige; +} +#learn_more a:hover { + color: blue; +} +.main_lower_part { + display: flex; + flex-direction: column; + color: grey; + +} +#main_lower_part_title { + font-size: 60px; + padding-top: 60px; + padding-left: 500px; +} +.main_lower_part_section1 { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items:flex-end; + margin-bottom: 100px; +} +.main_lower_part_section1 a { + text-decoration: none; + color: grey; + +} +.main_lower_part_section1 img { + margin-bottom: 20px; +} +footer { + display: flex; + flex-direction: column; + align-items: center; + color: grey; + margin-bottom: 100px; + + } +footer img { + width: 20px; + height: 20px; +} \ No newline at end of file diff --git a/index.html b/index.html index 369e9c7e1..ff9957935 100755 --- a/index.html +++ b/index.html @@ -34,7 +34,37 @@

Bring WiFi with you, everywhere you go.

Learn More +
+

Everyone needs a little Karma.

+
+
+ +

Internet for all devices

+
+
+ +

Boost your productivity

+
+
+ +

Pay as You Go

+
+
+ +
+ +
+ + From ed33a65d4eabcf0f6ba92736dffc59d3811c8781 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Sat, 11 Feb 2023 23:32:48 +0000 Subject: [PATCH 5/9] creating sotre.html --- css/style.css | 66 ++++++++++++++++++++++++++++++++++++--------------- index.html | 9 +++++++ store.html | 44 ++++++++++++++++++++++++++++++++++ 3 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 store.html diff --git a/css/style.css b/css/style.css index ba09fd483..d892a083b 100755 --- a/css/style.css +++ b/css/style.css @@ -17,12 +17,13 @@ body { */ .navbar { display: flex; + align-items: center; } .navbar img { - width: 30px; - height: 30px; - margin-left: 50px; + width: 2rem; + height: 2rem; + margin-left: 3rem; } .navbar a { text-decoration: none; @@ -35,12 +36,12 @@ body { margin-left: auto; } .how_it_works, .meet_karma, .store, .blog, .help, .log_in { - margin-right: 40px; + margin-right: 2rem; } .main_upper_part { background-image:url(../img/first-background.jpg); background-size: cover; - height: 700px; + height: 40rem; display: flex; flex-direction: column; align-items: center; @@ -48,20 +49,20 @@ body { } #main_introduction { - font-size: 80px; + font-size: 4.5rem; color:beige; - margin-top: 250px; + margin-top: 15rem; margin-bottom: 0px; } #main_rest { - font-size: 40px; + font-size: 2.5rem; color: beige; } #learn_more { background-color: coral; - font-size: 30px; - margin-top: 50px; + font-size: 2rem; + margin-top: 3rem; } @@ -80,16 +81,16 @@ body { } #main_lower_part_title { - font-size: 60px; - padding-top: 60px; - padding-left: 500px; + font-size: 4rem; + padding-top: 6rem; + padding-left: 32rem; } .main_lower_part_section1 { display: flex; flex-wrap: wrap; justify-content: space-around; align-items:flex-end; - margin-bottom: 100px; + margin-bottom: 10rem; } .main_lower_part_section1 a { text-decoration: none; @@ -97,19 +98,46 @@ body { } .main_lower_part_section1 img { - margin-bottom: 20px; + margin-bottom: 4rem; } footer { display: flex; flex-direction: column; align-items: center; color: grey; - margin-bottom: 100px; + margin-bottom: 5rem; } footer img { - width: 20px; - height: 20px; -} \ No newline at end of file + width: 4rem; + height: 4rem; +} +.extended_section { + height: 30rem; + width: 100%; + background-color: rgb(243, 230, 214); + display: flex; + + + +} +.extended_section img { + height: 30rem; + width: 45rem; +} +.extended_section_right { + display: flex; + flex-direction: column; + margin-left: 27rem; + justify-content: center; + align-items: center; +} + +/* this section is for store.html*/ +.store_navbar { + background-color: beige; + border-bottom: rgb(218, 221, 223); + border-bottom-style: solid; +} diff --git a/index.html b/index.html index ff9957935..0b8185f17 100755 --- a/index.html +++ b/index.html @@ -52,6 +52,15 @@ +
+ +
+

"Whenever I am, I just don't

+

worry about my connection

+

animore!"

+ Get Karma today +
+
diff --git a/store.html b/store.html new file mode 100644 index 000000000..003b0f4ca --- /dev/null +++ b/store.html @@ -0,0 +1,44 @@ + + + + + + + Store + + + + + + +
+ + + +
+
+ +
+
+ + + + + \ No newline at end of file From ac043dda8a543a2bfb5ffe1ee3ccfd7dea867da9 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Sun, 12 Feb 2023 00:44:42 +0000 Subject: [PATCH 6/9] finish html page --- css/style.css | 39 +++++++++++++++++++++++++++++++++++---- index.html | 12 ++++++------ store.html | 10 ++++++++-- 3 files changed, 49 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index d892a083b..dd8ce1521 100755 --- a/css/style.css +++ b/css/style.css @@ -119,9 +119,7 @@ footer img { width: 100%; background-color: rgb(243, 230, 214); display: flex; - - - + margin-bottom: 8rem; } .extended_section img { height: 30rem; @@ -130,10 +128,28 @@ footer img { .extended_section_right { display: flex; flex-direction: column; - margin-left: 27rem; + margin-left: 20rem; justify-content: center; align-items: center; } +.extended_section_right p { + font-size: 2.5rem; + color: gray; + +} +#quotation_mark { + color: coral; + font-size: 3rem; +} +#anymore { + margin-left: 9rem; +} +#get_karma_today a { + text-decoration: none; + color: beige; + background-color: coral; + font-size: 1.5rem; +} /* this section is for store.html*/ .store_navbar { @@ -141,3 +157,18 @@ footer img { border-bottom: rgb(218, 221, 223); border-bottom-style: solid; } +.main_section { + display: grid; + grid-template-columns: 1fr 1.4fr; + grid-template-rows: 1rem; + grid-template-areas: + "f im"; +} +.main_section_left { + grid-area: f; +} +.main_section_image { + grid-area: im; + width: 10rem; + height: 30rem; +} diff --git a/index.html b/index.html index 0b8185f17..a577a78be 100755 --- a/index.html +++ b/index.html @@ -16,10 +16,10 @@
-

Introduction Karma

+

Introducing Karma

Bring WiFi with you, everywhere you go.

Learn More
@@ -55,9 +55,9 @@
-

"Whenever I am, I just don't

-

worry about my connection

-

animore!"

+

"Whenever I am, I just don't +
worry about my connection +
anymore!"

Get Karma today
diff --git a/store.html b/store.html index 003b0f4ca..f4ba674be 100644 --- a/store.html +++ b/store.html @@ -13,7 +13,7 @@
- +
+
+

Order your Karma wifi
device today!

+
+ +
+
From 403da6fb4aa2cdb19a9c15739557ca42e242e4a3 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Sun, 12 Feb 2023 15:55:13 +0000 Subject: [PATCH 7/9] doing the code in sote.html --- css/style.css | 18 ++++++++++++++---- store.html | 41 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index dd8ce1521..1edb0a422 100755 --- a/css/style.css +++ b/css/style.css @@ -159,8 +159,7 @@ footer img { } .main_section { display: grid; - grid-template-columns: 1fr 1.4fr; - grid-template-rows: 1rem; + grid-template-columns: 60rem 1fr; grid-template-areas: "f im"; } @@ -169,6 +168,17 @@ footer img { } .main_section_image { grid-area: im; - width: 10rem; - height: 30rem; + width: 60rem; + height: 80rem; +} +form { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-left: 11rem; +} +#form_title { + margin-top: 10rem; + font-size: 2.5rem; + color:coral ; } diff --git a/store.html b/store.html index f4ba674be..2d31dbe77 100644 --- a/store.html +++ b/store.html @@ -28,7 +28,46 @@
-

Order your Karma wifi
device today!

+ +
+

Order your Karma wifi
device today!

+
+ + + + +
+
+ + +
+
+ + +
+
+ + + + +
+
+

Select a color

+ + + + + +
+
+ + + +
+ + + +
From f36683c5dd6af2e575ecbc6aeac81f6b9084b530 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Sun, 12 Feb 2023 15:57:46 +0000 Subject: [PATCH 8/9] change the image size in the store.html --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 1edb0a422..7102125d0 100755 --- a/css/style.css +++ b/css/style.css @@ -168,7 +168,7 @@ footer img { } .main_section_image { grid-area: im; - width: 60rem; + width: 55.5rem; height: 80rem; } form { From 1256963fec0ac405c5c838842f5fb6c875c11d86 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Sun, 12 Feb 2023 22:42:19 +0000 Subject: [PATCH 9/9] finish store.html --- css/style.css | 17 +++++++++++++++++ store.html | 6 ++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 7102125d0..a4c751f53 100755 --- a/css/style.css +++ b/css/style.css @@ -182,3 +182,20 @@ form { font-size: 2.5rem; color:coral ; } +.name_form, .address_form, .address2_form, .city_form, .select_color, .terms_form, .submit { + margin-top: 4rem; + + +} +#address, #address2 { + width: 32rem; + height: 2rem; + +} +#first_name, #last_name, #city, #post_code { + height: 2rem; + +} +#space_grey { + margin-left: 3rem; +} diff --git a/store.html b/store.html index 2d31dbe77..f4ecddd4e 100644 --- a/store.html +++ b/store.html @@ -59,12 +59,14 @@ -
+
- +
+ +