From b8f91e2713bc444815a40f256a94dc74a9634b29 Mon Sep 17 00:00:00 2001 From: haythem-f Date: Sun, 1 Oct 2023 23:23:51 +0100 Subject: [PATCH 1/8] KarmaUpdate1 --- css/style.css | 19 ---------- index.html | 46 +++++++++++++++++++++++- style.css | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 144 insertions(+), 20 deletions(-) delete mode 100755 css/style.css create mode 100755 style.css diff --git a/css/style.css b/css/style.css deleted file mode 100755 index 5cb025cef..000000000 --- a/css/style.css +++ /dev/null @@ -1,19 +0,0 @@ - - /* 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; -} - -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ - - diff --git a/index.html b/index.html index 3e742ef04..797129559 100755 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ Karma - + @@ -14,6 +14,50 @@ +
+ Logo + +
+ +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+
+

Everyone needs a little Karma

+ +
+ Device + Coffee + Refill +
+
+

Internet for all Devices

+

Boost your productivity

+

Pay As You go

+
+
diff --git a/style.css b/style.css new file mode 100755 index 000000000..7a521f6cc --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ + + /* 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; +} + +/** + * Add your custom styles below + * + * Remember: + * - Be organised, use comments and separate your styles into meaningful chunks + * for example: General styles, Navigation styles, Hero styles, Footer etc. + * + * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' + */ + +.Karmanav { + text-align: right; + height: 30px; + display: flex; + flex-direction: row; + justify-content: right; + margin-right: 20px; + +} +.ulnav { + display: flex; + /* list-style-type: none; */ + /* justify-content: right; */ + /* flex-direction: row; */ + /* text-align: right; */ + + + +} +.ulnav li { + padding: 20px; + color: gray; + list-style-type: none; +} +a { + color: gray; + text-decoration: none; +} + +.Bkgimg { + background-image: url("/img/first-background.jpg"); + width: 1500px; + height: 700px; + margin-top: 50px; +} +.bkgtext { + text-align: center; + color: white; + padding-top: 200px; +} +.karmabtn { + background-color: #f96c07; + height: 40px; + width: 160px; +} +.h1class { + font-size: 60px; + font-weight: lighter; +} +.pclass { + font-size: 35px; + font-weight: lighter; +} +.kmain { + margin-top: 100px; + text-align: center; + +} +.h2class { + font-size: 50px; + font-weight: lighter; +} +.imgsclass { + width: 500px; + flex-direction: row; + display: flex; + align-items: center; + margin-left: 20%; +} +.imgsclass img{ + padding: 95px; +} +.imgsclass h3 { + text-align: center; + margin-top: 20px; + padding: 90px; +} +.logoclass { + margin-top: 20px; + margin-left: 20px; +} \ No newline at end of file From e289ba99ee8307dc6c2c336282c184e44e2487fb Mon Sep 17 00:00:00 2001 From: haythem-f Date: Sat, 7 Oct 2023 11:59:32 +0100 Subject: [PATCH 2/8] UpdatedTheDisplayofImages --- index.html | 29 +++++++++++++++++++---------- style.css | 24 +++++++++++++++--------- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 797129559..deb0e8c63 100755 --- a/index.html +++ b/index.html @@ -47,16 +47,25 @@

Introducing Karma

Everyone needs a little Karma

-
- Device - Coffee - Refill -
-
-

Internet for all Devices

-

Boost your productivity

-

Pay As You go

-
+
+
+ Device +

Internet for all Devices

+ +
+
+ Coffee +

Boost your productivity

+ +
+
+ Refill +

Pay As You go

+
+ +
+ +
diff --git a/style.css b/style.css index 7a521f6cc..d04b54672 100755 --- a/style.css +++ b/style.css @@ -78,22 +78,28 @@ a { font-size: 50px; font-weight: lighter; } -.imgsclass { - width: 500px; - flex-direction: row; +.brandDescription { display: flex; - align-items: center; - margin-left: 20%; + flex-direction: row; + justify-content: center; + column-gap:100px; + +} +.imgsclass { + display: flex; + flex-direction: column; } .imgsclass img{ - padding: 95px; + width: 200px; } .imgsclass h3 { - text-align: center; - margin-top: 20px; - padding: 90px; } + .logoclass { margin-top: 20px; margin-left: 20px; +} +.infoclass { + + } \ No newline at end of file From 8e83045d78f22273aea2f7ba331b196d22f9028b Mon Sep 17 00:00:00 2001 From: haythem-f Date: Fri, 13 Oct 2023 03:46:55 +0100 Subject: [PATCH 3/8] AddedNewSection --- .vscode/settings.json | 3 ++ index.html | 38 ++++++++++++++++++++++++ style.css | 67 +++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index deb0e8c63..12c81f016 100755 --- a/index.html +++ b/index.html @@ -68,5 +68,43 @@

Pay As You go

+
+ +
+ Karma Store +
+ + + + +
+
+

"When Ever I am, I Just don't worry about my connection anymore"

+
+
+ +
+
+ +
+ + +
+
+
+
Join us On:
+
+ +
+ Twitter + Facebook + Instgram + +
+
+
@ Karma Mobility Inc.
+
+
+
diff --git a/style.css b/style.css index d04b54672..342b27702 100755 --- a/style.css +++ b/style.css @@ -99,7 +99,68 @@ a { margin-top: 20px; margin-left: 20px; } -.infoclass { - - +.bodybottomtxt { + display: flex; + flex-direction: column; + padding: 100px; + justify-content: center; +} +.bodybottom { + background-color: #f3dccc; + display: flex; + justify-content: center; +} +.bbtstyle { + font-style: italic; + font-family:'Times New Roman', Times, serif; + font-stretch: extra-expanded; + font-size: large; + font-weight: bold; + +} +.karmabtn2 { + justify-content: center; + background-color: #f96c07; + text-decoration: aliceblue; + color: #f3dccc; + font-weight: bold; + height: 40px; + width: 160px; + margin-left: 100px; +} +.karmafooter { + padding-top: 50px; + text-align: center; + justify-content: center; + border-top: #6940ef; + border-radius: 80px; +} +.footericons { + display: flex; +flex-direction: row; +gap: 50px; +justify-content: center; + +} +.inst { + width: 40px; + height: 40px; +} +.face { + width: 40px; + height: 40px; +} +.twit { + width: 40px; + height: 40px; +} +.allfooter { + justify-content: center; +} +.ftr { + display: flex; + font-style: italic; + font-family: Arial, Helvetica, sans-serif; + font-weight: lighter; + justify-content: center; } \ No newline at end of file From 4859fac28c89eefa907cf825e7fb935e445d3a47 Mon Sep 17 00:00:00 2001 From: haythem-f Date: Sat, 14 Oct 2023 05:27:18 +0100 Subject: [PATCH 4/8] StorePageAdded --- index.html | 7 +++- store.html | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 65 +++++++++++++++++++++++++++++ 3 files changed, 188 insertions(+), 2 deletions(-) create mode 100644 store.html diff --git a/index.html b/index.html index 12c81f016..5b48667fa 100755 --- a/index.html +++ b/index.html @@ -22,7 +22,10 @@ Meet Karma
  • - store + How it works +
    • +
  • + store
  • Blog @@ -82,7 +85,7 @@

    Pay As You go

    "When Ever I am, I Just don't worry about my connection anymore"

    - +
    diff --git a/store.html b/store.html new file mode 100644 index 000000000..cde8072e2 --- /dev/null +++ b/store.html @@ -0,0 +1,118 @@ + + + + + + Karma Store + + + + + + +
    + Logo + +
    + +
    +
    +
    +

    Order your Karma WiFi device today!

    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + + + +
    +
    + + +
    +
    + + +
    + +
    +
    Select a color:
    + +
    + +
    + + + +
    +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    + Store Image +
    +
    + +
    +
    +
    +
    Join us On:
    +
    + +
    + Twitter + Facebook + Instgram + +
    +
    +
    @ Karma Mobility Inc.
    +
    +
    +
    + diff --git a/style.css b/style.css index 342b27702..cb43468e3 100755 --- a/style.css +++ b/style.css @@ -163,4 +163,69 @@ justify-content: center; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; justify-content: center; +} +.storeimg { + height: 800px; + width: 600px; + justify-content: center; +} +.storemain { + padding: 80px; + display: flex; + gap: 30px; +} + +.formtop { +color: #f96c07; +font-size: larger; +} + +.frmlable { + display: flex; + gap: 120px; + padding-top: 40px; +} +.frminput { + display: flex; + gap: 20px; +} +.frmaddress { + padding-top: 15px; + display: flex; + flex-direction: column; + gap: 10px; +} +.storeleft { + display: flex; + flex-direction: column; +} +.frmlable2 { + display: flex; + gap: 120px; + padding-top: 20px; +} +#city { + width: 145px; + height: 20px; +} +.ordercolor { + padding-top: 20px; +} +.terms1 { + font-size: large; + padding-left: 10px; +} +.terms2 { + color: #f96c07; + text-decoration: underline; + +} +.orderbtn { + background-color: #f96c07; + color: aliceblue; + height: 40px; + width: 160px; + + + } \ No newline at end of file From 5140a6401583821b66a3e0b8deab1d01d9f48f77 Mon Sep 17 00:00:00 2001 From: haythem-f Date: Sat, 14 Oct 2023 13:32:22 +0100 Subject: [PATCH 5/8] styleupdate --- store.html | 8 ++++---- style.css | 34 +++++++++++++++++++++++++++++----- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/store.html b/store.html index cde8072e2..25eaf3700 100644 --- a/store.html +++ b/store.html @@ -61,7 +61,7 @@

    Order your Karma WiFi device today!

    -
    +
    + - +



    -
    +


    diff --git a/style.css b/style.css index cb43468e3..bd47246ed 100755 --- a/style.css +++ b/style.css @@ -182,18 +182,34 @@ font-size: larger; .frmlable { display: flex; - gap: 120px; + gap: 140px; padding-top: 40px; } .frminput { + padding-top: 15px; display: flex; gap: 20px; + +} +.frminput input { + border: 1px solid black; + height: 30px; + border-radius: 5px; + } .frmaddress { padding-top: 15px; display: flex; flex-direction: column; gap: 10px; +} +.frmaddress input { + width: 430px; + border: 1px solid black; + height: 30px; + border-radius: 5px; + + } .storeleft { display: flex; @@ -201,13 +217,21 @@ font-size: larger; } .frmlable2 { display: flex; - gap: 120px; + gap: 200px; padding-top: 20px; } -#city { - width: 145px; - height: 20px; +.frminput2 #city { + border: 1px solid black; + width: 230px; + height: 30px; +} +.frminput2 input { + border: 1px solid black; + width: 200px; + height: 30px; + border-radius: 5px; } + .ordercolor { padding-top: 20px; } From f7c35886014c9a97bb187c6753748d04f02e9912 Mon Sep 17 00:00:00 2001 From: haythem-f Date: Sat, 18 Nov 2023 03:11:42 +0000 Subject: [PATCH 6/8] Responsive-Store --- .DS_Store | Bin 0 -> 6148 bytes index.html | 3 -- store.html | 103 +++++++++++++++++++++++++++-------------------------- style.css | 31 +++++++++++++--- 4 files changed, 80 insertions(+), 57 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5c6870fca6cd1b65347aad12ab1b638c29fe225d GIT binary patch literal 6148 zcmeHK%We}f6g}=lB1xqZAr@>Z<_8jq_6H^*5v^#TYKpoHZ378n@=(%7u$w*N7y1ho zAH&D6f^)AelyN3qBGmdy_VL*FT>GAJ#xVfXx*og$Y5>YCf~6{}0+VqmYqsTj9utkk zm|k9_(+fUHxL`qnpuqpGfc$nNTw;O6VVe8>HaXJxt)@wA<0HJF1w40TW-D3DhmvX3=6|2v!S z|9Mh)3JL@T?v( - - -
    Logo
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    -
    -
    Select a color:
    - -
    +
    +
    Select a color:
    + +
    + + + + + +
    +
    +
    +
    +
    +
    +
    + - - - - -
    -
    -
    -
    - -
    -
    -
    - - -
    -
    - Store Image -
    + +
    + Store Image +
    -
    -
    Join us On:
    -
    - -
    - Twitter - Facebook - Instgram - -
    -
    -
    @ Karma Mobility Inc.
    -
    -
    +
    +
    Join us On:
    +
    + +
    + Twitter + Facebook + Instgram + +
    +
    +
    @ Karma Mobility Inc.
    +
    +
    + diff --git a/style.css b/style.css index bd47246ed..e3338cbf9 100755 --- a/style.css +++ b/style.css @@ -165,15 +165,30 @@ justify-content: center; justify-content: center; } .storeimg { - height: 800px; - width: 600px; + border-radius: 25px; + height:100%; + width: 100%; + + + max-height: 800px; + max-width: 600px; + justify-content: center; } .storemain { - padding: 80px; - display: flex; + width: fit-content; + /* border: 5px solid blue; */ + padding: 30px; + display: grid; gap: 30px; } +@media screen and (min-width: 40em) { + .storemain { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } +} .formtop { color: #f96c07; @@ -214,6 +229,14 @@ font-size: larger; .storeleft { display: flex; flex-direction: column; + /* border: 5px solid red; */ + align-content: center; + justify-content: center; + width: fit-content; +} +.imgmain { + /* border: 5px solid red; */ + width: 600px; } .frmlable2 { display: flex; From a63510de810a170919b2b1b5ab90926e75c9134e Mon Sep 17 00:00:00 2001 From: haythem-f Date: Sat, 18 Nov 2023 03:25:28 +0000 Subject: [PATCH 7/8] update-StorePage --- store.html | 218 +++++++++++++++++++++++++++-------------------------- 1 file changed, 112 insertions(+), 106 deletions(-) diff --git a/store.html b/store.html index 56a74daae..f1e0aff43 100644 --- a/store.html +++ b/store.html @@ -1,121 +1,127 @@ - + - - + + Karma Store - - - - - - + + + + + +
    - Logo - + Logo +
    - -
    -
    -
    -

    Order your Karma WiFi device today!

    -
    -
    -
    + +
    +
    +
    +

    Order your Karma WiFi device today!

    +
    +
    +
    - - + +
    - - -
    -
    - - - - -
    -
    - - -
    -
    - - -
    - -
    -
    Select a color:
    - -
    - - - - - -
    -
    -
    -
    -
    -
    -
    - - + + +
    +
    + + + + +
    +
    + + +
    +
    + + +
    -
    -
    -
    - Store Image -
    -
    - -
    -
    -
    -
    Join us On:
    -
    - -
    - Twitter - Facebook - Instgram - +
    +
    Select a color:
    +
    + + + + +
    +
    +
    +
    + +
    +
    +
    +
    -
    -
    @ Karma Mobility Inc.
    -
    +
    +
    + Store Image +
    - - + +
    +
    +
    +
    Join us On:
    +
    +
    + Twitter + Facebook + Instgram +
    +
    +
    @ Karma Mobility Inc.
    +
    +
    +
    + From 8c7fce3cf10c87f7bb40b93c3e9f22167be36066 Mon Sep 17 00:00:00 2001 From: haythem-f Date: Sat, 2 Dec 2023 00:32:39 +0000 Subject: [PATCH 8/8] Update-to-responsive --- index.html | 191 +++++++++++++++++++++++++++-------------------------- style.css | 159 ++++++++++++++++++++++++++++++++------------ 2 files changed, 213 insertions(+), 137 deletions(-) diff --git a/index.html b/index.html index ae82fcc2e..24375dd61 100755 --- a/index.html +++ b/index.html @@ -1,110 +1,111 @@ - - - + + + + Karma - - - - - - + + + + +
    - Logo - + Logo +
    - +
    -
    -

    Introducing Karma

    -

    Bring WiFi with you, everywhere you go.

    - -
    +
    +

    Introducing Karma

    +

    Bring WiFi with you, everywhere you go.

    + +
    -
    -

    Everyone needs a little Karma

    - -
    -
    - Device -

    Internet for all Devices

    - -
    -
    - Coffee -

    Boost your productivity

    - -
    -
    - Refill -

    Pay As You go

    -
    - -
    - - -
    - -
    - -
    - Karma Store -
    - - +
    +

    Everyone needs a little Karma

    +
    +
    + Device +

    Internet for all Devices

    +
    +
    + Coffee +

    Boost your productivity

    +
    +
    + Refill +

    Pay As You go

    +
    +
    +
    -
    -
    -

    "When Ever I am, I Just don't worry about my connection anymore"

    -
    -
    - -
    -
    - -
    +
    +
    + Karma Store +
    - - -
    +
    +
    +

    + "When Ever I am, I Just don't worry about my connection anymore" +

    +
    +
    + +
    +
    +
    + +
    -
    +
    Join us On:
    -
    +
    -
    - Twitter - Facebook - Instgram - -
    -
    -
    @ Karma Mobility Inc.
    -
    -
    -
    +
    + Twitter + Facebook + Instgram +
    +
    +
    @ Karma Mobility Inc.
    +
    +
    + diff --git a/style.css b/style.css index e3338cbf9..b35663cc1 100755 --- a/style.css +++ b/style.css @@ -1,20 +1,8 @@ - - /* 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; } -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ .Karmanav { text-align: right; @@ -27,11 +15,7 @@ body { } .ulnav { display: flex; - /* list-style-type: none; */ - /* justify-content: right; */ - /* flex-direction: row; */ - /* text-align: right; */ - + } @@ -47,14 +31,45 @@ a { .Bkgimg { background-image: url("/img/first-background.jpg"); - width: 1500px; - height: 700px; + width: 100%; + height: auto; margin-top: 50px; } + +.imgxx { + width: 400px; + height: 400px; +} + +@media only screen and (max-width: 620px) { + + .bodybottomimg { + max-width: 100%; + height: auto; + } + + .Bkgimg { + height: auto; + max-width: 100%; + + } + + .bkgtext { + width: auto; + height: auto; + text-align: center; + color: white; + padding-top: 200px; + } + +} .bkgtext { + width: auto; + height: auto; text-align: center; color: white; padding-top: 200px; + } .karmabtn { background-color: #f96c07; @@ -70,45 +85,77 @@ a { font-weight: lighter; } .kmain { - margin-top: 100px; + + margin-top: 25px; + margin-bottom: 25px; text-align: center; - + justify-items: center; } .h2class { font-size: 50px; font-weight: lighter; } .brandDescription { - display: flex; - flex-direction: row; - justify-content: center; - column-gap:100px; - -} -.imgsclass { - display: flex; - flex-direction: column; -} -.imgsclass img{ + display: grid; + grid-template-columns: 3fr; + column-gap: 20px; + width: 100%; + align-content: space-between; + align-items: center; + justify-content: space-between; + justify-items: center; + height: auto; + } +.imgsclass1 { width: 200px; } -.imgsclass h3 { -} - +.imgsclass2 { + width: 200px; + margin-top: 20px; + + } + .imgsclass3 { + width: 200px; + margin-top: 20px; + } + + .logoclass { margin-top: 20px; margin-left: 20px; } + +.bodybottomimg { +width: 100%; +height: auto; +height: fit-content; +width: fit-content; +display: grid; + +} + .bodybottomtxt { - display: flex; - flex-direction: column; + display: grid; + grid-template-rows: auto; + justify-content: center; + justify-items: center; + + padding: 100px; justify-content: center; + width: fit-content; + height: fit-content; } .bodybottom { + display: grid; + grid-template-rows: auto; background-color: #f3dccc; - display: flex; - justify-content: center; + align-content: space-between; + justify-content: space-around; + justify-items: center; + width: 100%; + height: auto; + } .bbtstyle { font-style: italic; @@ -177,17 +224,47 @@ justify-content: center; } .storemain { width: fit-content; - /* border: 5px solid blue; */ padding: 30px; display: grid; gap: 30px; } + +@media screen and (min-width: 40em) { + .brandDescription { + display: grid; + grid-template-columns: auto auto auto; + column-gap: 20px; + + width: 100%; + height: auto; + justify-content: space-around; + } + .bodybottom { + display: grid; + grid-template-columns: auto auto; + align-items: center; + align-content: center; + background-color: #f3dccc; + justify-content: center; + } +} + + + @media screen and (min-width: 40em) { + .kmain { + display: grid; + grid-template-rows: auto; + row-gap: 20px; + justify-items: center; + } + .storemain { display: grid; grid-template-columns: 3fr 1fr; column-gap: 20px; } + } .formtop { @@ -229,13 +306,11 @@ font-size: larger; .storeleft { display: flex; flex-direction: column; - /* border: 5px solid red; */ align-content: center; justify-content: center; width: fit-content; } .imgmain { - /* border: 5px solid red; */ width: 600px; } .frmlable2 {