From 7f6c8bbe46258647cbcbe44bc824a0622331819e Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Tue, 17 Sep 2024 09:36:28 +0200 Subject: [PATCH 01/17] first commit --- css/style.css | 145 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 49 ++++++++++++++++- 2 files changed, 193 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..d134eeed8 100755 --- a/css/style.css +++ b/css/style.css @@ -16,4 +16,149 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ + header{ + height: 100px; + display: flex; + } + header :nth-child(2){ + margin-left: auto; + gap: 50px; + margin-right: 30px; + + } + header img{ + width: 70px; + height: 50px; + padding: 15px; + margin-left: 3rem; + } + .nav-header{ + display: flex; + gap: 10px; + padding: 15px; + align-items: center; + } + .nav-header li{ + list-style: none; + color: rgb(129, 121, 121); + } + .nav-header li :hover{ + color: brown; + } + .nav-header :nth-child(1){ + font-weight: bold; + color: rgb(85, 81, 81); + } + .section1{ + position: relative; + text-align: center; + } + h3{ + font-size: 2.5rem; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } +.section1 img{ + width: 100%; + height: auto; + } +.section1_detail{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} +.section1 p{ + font-size: 2rem; +} +button{ + background-color: rgba(240, 81, 18, 0.904); + padding: 20px; + border-radius: 5px; + width: 150px; + text-decoration: none; + font-size: 1.2rem; + + +} +h1{ + margin-top: 8rem; + text-align: center; + padding: 30px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +.container{ + + display: flex; + justify-content: space-around; + align-items: center; + align-items: center; +} +.item{ + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.fot img{ +width: 20px; +} +footer{ + margin-top: 5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; +} +footer :nth-child(1){ + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size: 20px; +} +a{ + padding: 20px; +} +footer :nth-child(3){ + color: rgb(177, 173, 173); +} + + + +@media (max-width: 768px) { + header { + flex-direction: column; + height: auto; + padding: 20px; + } + + header :nth-child(2) { + flex-direction: column; + gap: 10px; + margin-left: 0; + } + + .section1_detail { + padding: 10px; + } + + h3 { + font-size: 1.5rem; + } + + .section1 p { + font-size: 1rem; + } + button { + font-size: 0.675rem; + padding: 10px 15px; + width: 90px; + } + .container { + flex-direction: column; + } + h1{ + font-size: 1.5rem; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..6e78ab799 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,57 @@ - +
+ +
+
  • Meet Karma
    • +
  • How it Works
    • +
  • Store
    • +
  • Blog
    • +
  • Help
    • +
  • Login
    • +
    +
    + +
    + firstImg +
    +

    Introducing Karma

    +

    Bring wifi with you, Everywhere you go

    + +
    +
    +
    +

    Everyone need a little karma.

    +
    +
    +
    + first +

    Internet for all devices

    +
    + +
    + first +

    Boost your productivity

    +
    +
    + first +

    Pay as You Go

    +
    +
    + + From c6c1878f47631af4bda012d856c590728fe261be Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Tue, 17 Sep 2024 15:12:00 +0200 Subject: [PATCH 02/17] Add new section Level 2 --- css/style.css | 40 ++++++++++++++++++++++++++++++++++++++++ index.html | 10 ++++++++++ 2 files changed, 50 insertions(+) diff --git a/css/style.css b/css/style.css index d134eeed8..a11fa45cb 100755 --- a/css/style.css +++ b/css/style.css @@ -123,7 +123,47 @@ footer :nth-child(3){ color: rgb(177, 173, 173); } +.level2{ + margin-top: 5rem; + display: flex; + align-items: center; +} +.level2 div:nth-child(2){ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.sec_2cont p{ + font-size: 2rem; + text-align: center; + width: 40%; + font-family: 'Times New Roman', Times, serif; +} +.sec_2cont button{ + color: white; + width: 200px; + border-color: rgba(240, 81, 18, 0.904); +} +.quote { + color: black; + position: relative; +} +.quote::before, +.quote::after { + color: rgba(240, 81, 18, 0.904);; + font-size: 1.5em; +} + +.quote::before { + content: '“'; + } + +.quote::after { + content: '”'; +} @media (max-width: 768px) { header { diff --git a/index.html b/index.html index 6e78ab799..7720e73a7 100755 --- a/index.html +++ b/index.html @@ -52,6 +52,16 @@

    Everyone need a little karma.

    +
    +
    + kar +
    +
    +

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

    + +
    +
    +

    Join us on

    From d2feb823e75fca512ae1b4eab1526fc0b9c6734a Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Tue, 17 Sep 2024 16:10:32 +0200 Subject: [PATCH 03/17] change li to a tag on header nav --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 7720e73a7..aca70e76d 100755 --- a/index.html +++ b/index.html @@ -16,12 +16,12 @@
    -
  • Meet Karma
    • -
  • How it Works
    • -
  • Store
    • -
  • Blog
    • -
  • Help
    • -
  • Login
    • + Meet Karma + How it Works + Store + Blog + Help + Login
    From bc4ef0d6a8260d31244688d7382fa08c9b2e884c Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Tue, 17 Sep 2024 16:14:25 +0200 Subject: [PATCH 04/17] add some style on header nav element --- css/style.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index a11fa45cb..b5c7285bd 100755 --- a/css/style.css +++ b/css/style.css @@ -38,11 +38,11 @@ body { padding: 15px; align-items: center; } - .nav-header li{ - list-style: none; + a{ + text-decoration: none; color: rgb(129, 121, 121); } - .nav-header li :hover{ + a:hover{ color: brown; } .nav-header :nth-child(1){ @@ -201,4 +201,11 @@ footer :nth-child(3){ h1{ font-size: 1.5rem; } + .level2{ + display: flex; + flex-direction: column; + } + .sec_2cont button { + width: 100px; + } } \ No newline at end of file From 5797317b11d2b99087620c644268fc64ceb5ccb2 Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Wed, 18 Sep 2024 17:18:25 +0200 Subject: [PATCH 05/17] i created store.html file and write all code inside --- store.html | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 store.html diff --git a/store.html b/store.html new file mode 100644 index 000000000..bbd6d916e --- /dev/null +++ b/store.html @@ -0,0 +1,101 @@ + + + + + + + + + + + +
    + +
    + Meet Karma + How it Works + Store + Blog + Help + Login +
    +
    + +
    +
    +

    Order your Karma Wifi Device Today!

    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + Select a Color: +
    +
    + + +
    +
    + + +
    +
    + +
    + + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +

    Join us on

    +
    + + + +
    +

    @ Karma Mobility .Inc

    +
    + + \ No newline at end of file From 1ae7743efb7632c7a4f946499661229c0cf62fdf Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Wed, 18 Sep 2024 17:20:04 +0200 Subject: [PATCH 06/17] i created new css file store.css and make all css inside --- css/store.css | 257 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 css/store.css diff --git a/css/store.css b/css/store.css new file mode 100644 index 000000000..1336ee51b --- /dev/null +++ b/css/store.css @@ -0,0 +1,257 @@ +header { + height: 100px; + display: flex; +} +header :nth-child(2) { + margin-left: auto; + gap: 50px; + margin-right: 30px; +} +header img { + width: 70px; + height: 50px; + padding: 15px; + margin-left: 3rem; +} +.nav-header { + display: flex; + gap: 10px; + padding: 15px; + align-items: center; +} +a{ + text-decoration: none; + color: rgb(129, 121, 121); +} + +a:hover { + color: brown; + font-weight: bold; +} + +.nav-header :nth-child(1) { + font-weight: bold; + color: rgb(85, 81, 81); +} + + +.container{ + display: flex; +} +.element1{ + width: 50%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.element2{ + width: 50%; + height: 100%; +} +.element2 img{ + width: 100%; + height: 100%; + object-fit: cover; +} +h1{ + text-align: center; + font-size: 50px; + padding: 30px; + margin-top: 3rem; + color: rgba(240, 81, 18, 0.904); +} +form{ + width: 80%; + height: auto; +} +.form{ + margin-top: 1rem; + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + margin-bottom: 1rem; +} +label { + display: block; + margin-bottom: 10px; + font-weight: bold; +} +.form-address{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +input[type="text"], +select { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: 10px; + box-sizing: border-box; +} +.address11{ + margin-top: 1rem; + width: 64%; +} +.address12{ + margin-top: 1rem; + width: 64%; +} +.input-group{ + width: 31%; +} +.radio-group{ + width: 66%; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + margin-left: 10px; +} +.radio{ + gap: 7px; + display: flex; +} +legend{ + margin-left: 8rem; + font-weight: bold; + margin-top: 10px; + padding: 10px; + margin-bottom: 10px; +} +.checkbox{ + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + margin-top: 7rem; + margin-bottom: 10px; + width: 350px; + margin-left: 7rem; + +} +span{ + text-decoration: underline; + color: rgba(240, 81, 18, 0.904);; +} +button { + margin-top: 1rem; + background-color: rgba(240, 81, 18, 0.904); + padding: 10px; + border-radius: 5px; + width: 200px; + text-decoration: none; + font-size: 1.2rem; + border-color: rgba(240, 81, 18, 0.904); + color: white; +} +.button_div{ + margin-left: 9rem; +} +.fot img { + width: 20px; +} +footer { + margin-top: 5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; +} + +footer :nth-child(1) { + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size: 20px; +} + +a { + padding: 20px; +} + +footer :nth-child(3) { + color: rgb(177, 173, 173); +} + + + +@media (max-width: 768px) { + +header { + flex-direction: column; + height: auto; + padding: 20px; + } + + header :nth-child(2) { + flex-direction: column; + gap: 10px; + margin-left: 0; + } +.form { + margin-top: 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + margin-bottom: 0.5rem; +} +.input-group { + width: 80%; +} +.address11 { + margin-top: 0.5rem; + width: 80%; +} + +.address12 { + margin-top: 0.5rem; + width: 80%; +} +legend { + margin-left: 2rem; + margin-bottom: 10px; +} +h1{ + font-size: 20px; +} +.checkbox { +margin-left: 2rem; +width: 200px; +} +.button_div { + margin-left: 2rem; +} +.radio-group { + display: flex; + flex-direction: column; + margin-left: 10px; +} +.radio { + padding: 10px; + width: 150px; +} +.container { + display: flex; + flex-direction: column; +} +.element1 { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: center; +} +.element2 { + margin-top: 3rem; + height: auto; + width: 100%; + +} +} \ No newline at end of file From 9b3699306d4c62e918f6d206400cc99068e51a03 Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Wed, 18 Sep 2024 17:23:03 +0200 Subject: [PATCH 07/17] i change html file and add store page link on header store button --- css/style.css | 1 - index.html | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index b5c7285bd..623a118b7 100755 --- a/css/style.css +++ b/css/style.css @@ -79,7 +79,6 @@ button{ text-decoration: none; font-size: 1.2rem; - } h1{ margin-top: 8rem; diff --git a/index.html b/index.html index aca70e76d..5051f1eb1 100755 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
    Meet Karma How it Works - Store + Store Blog Help Login From ce8c5ba5df848b626fb111f4836d3c1b92425128 Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Thu, 19 Sep 2024 11:43:48 +0200 Subject: [PATCH 08/17] add a div on master --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5051f1eb1..9bcbb4d55 100755 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
    - +
    Meet Karma How it Works From 0bafeb35d1dfad8f89e43a3721c18661b96d151b Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Wed, 2 Oct 2024 19:01:42 +0200 Subject: [PATCH 09/17] i add burger button inside both pages when mobile view --- css/store.css | 44 +++++- css/style.css | 394 +++++++++++++++++++++++++++----------------------- index.html | 7 +- script.js | 16 ++ store.html | 8 +- 5 files changed, 282 insertions(+), 187 deletions(-) create mode 100644 script.js diff --git a/css/store.css b/css/store.css index 1336ee51b..768ffd219 100644 --- a/css/store.css +++ b/css/store.css @@ -1,12 +1,20 @@ header { height: 100px; display: flex; + position: relative; } header :nth-child(2) { margin-left: auto; gap: 50px; margin-right: 30px; } +.burger-button { + display: none; + font-size: 30px; + cursor: pointer; + margin-left: auto; + text-decoration: none; +} header img { width: 70px; height: 50px; @@ -134,9 +142,9 @@ legend{ margin-left: 7rem; } -span{ +.checkbox label span{ text-decoration: underline; - color: rgba(240, 81, 18, 0.904);; + color: rgba(240, 81, 18, 0.904); } button { margin-top: 1rem; @@ -183,7 +191,7 @@ footer :nth-child(3) { @media (max-width: 768px) { header { - flex-direction: column; + align-items: center; height: auto; padding: 20px; } @@ -193,6 +201,15 @@ header { gap: 10px; margin-left: 0; } + header img { + width: 50px; + height: 40px; + padding: 15px; + margin-left: 1rem; + } + .burger-button { + display: block; + } .form { margin-top: 0.5rem; display: flex; @@ -254,4 +271,25 @@ width: 200px; width: 100%; } + .nav-header { + display: none; + width: 100vw; + height: 100vh; + flex-direction: column; + gap: 10px; + right: 0; + left: 0; + position: absolute; + top: 100%; + z-index: 10; + background: white; + } + + .nav-header.active { + display: flex; + } + + header :nth-child(2) { + margin-left: 0; + } } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 623a118b7..a38f4600e 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,195 +15,230 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - header{ - height: 100px; - display: flex; - } - header :nth-child(2){ - margin-left: auto; - gap: 50px; - margin-right: 30px; - - } - header img{ - width: 70px; - height: 50px; - padding: 15px; - margin-left: 3rem; - } - .nav-header{ - display: flex; - gap: 10px; - padding: 15px; - align-items: center; - } - a{ - text-decoration: none; - color: rgb(129, 121, 121); - } - a:hover{ - color: brown; - } - .nav-header :nth-child(1){ - font-weight: bold; - color: rgb(85, 81, 81); - } - .section1{ - position: relative; - text-align: center; - } - h3{ - font-size: 2.5rem; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - } -.section1 img{ - width: 100%; - height: auto; - } -.section1_detail{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; -} -.section1 p{ - font-size: 2rem; -} -button{ - background-color: rgba(240, 81, 18, 0.904); - padding: 20px; - border-radius: 5px; - width: 150px; - text-decoration: none; - font-size: 1.2rem; - -} -h1{ - margin-top: 8rem; - text-align: center; - padding: 30px; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; -} -.container{ - - display: flex; - justify-content: space-around; - align-items: center; - align-items: center; -} -.item{ - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; -} -.fot img{ -width: 20px; -} -footer{ - margin-top: 5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 20px; -} -footer :nth-child(1){ - font-weight: bold; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-size: 20px; -} -a{ - padding: 20px; -} -footer :nth-child(3){ - color: rgb(177, 173, 173); +header { + height: 100px; + display: flex; + position: relative; +} +.burger-button { + display: none; + font-size: 30px; + cursor: pointer; + margin-left: auto; +} +header :nth-child(2) { + margin-left: auto; + gap: 50px; + margin-right: 30px; +} +header img { + width: 70px; + height: 50px; + padding: 15px; + margin-left: 3rem; +} +.nav-header { + display: flex; + gap: 10px; + padding: 15px; + align-items: center; +} +a { + text-decoration: none; + color: rgb(129, 121, 121); +} +a:hover { + color: brown; +} +.nav-header :nth-child(1) { + font-weight: bold; + color: rgb(85, 81, 81); +} +.section1 { + position: relative; + text-align: center; +} +h3 { + font-size: 2.5rem; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} +.section1 img { + width: 100%; + height: auto; +} +.section1_detail { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} +.section1 p { + font-size: 2rem; +} +button { + background-color: rgba(240, 81, 18, 0.904); + padding: 20px; + border-radius: 5px; + width: 150px; + text-decoration: none; + font-size: 1.2rem; +} +h1 { + margin-top: 8rem; + text-align: center; + padding: 30px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} +.container { + display: flex; + justify-content: space-around; + align-items: center; + align-items: center; +} +.item { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.fot img { + width: 20px; +} +footer { + margin-top: 5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; +} +footer :nth-child(1) { + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-size: 20px; +} +a { + padding: 20px; +} +footer :nth-child(3) { + color: rgb(177, 173, 173); } -.level2{ - margin-top: 5rem; - display: flex; - align-items: center; -} -.level2 div:nth-child(2){ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; -} -.sec_2cont p{ - font-size: 2rem; - text-align: center; - width: 40%; - font-family: 'Times New Roman', Times, serif; -} -.sec_2cont button{ - color: white; - width: 200px; - border-color: rgba(240, 81, 18, 0.904); +.level2 { + margin-top: 5rem; + display: flex; + align-items: center; +} +.level2 div:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.sec_2cont p { + font-size: 2rem; + text-align: center; + width: 40%; + font-family: "Times New Roman", Times, serif; +} +.sec_2cont button { + color: white; + width: 200px; + border-color: rgba(240, 81, 18, 0.904); } .quote { - color: black; - position: relative; + color: black; + position: relative; } .quote::before, .quote::after { - color: rgba(240, 81, 18, 0.904);; - font-size: 1.5em; + color: rgba(240, 81, 18, 0.904); + font-size: 1.5em; } .quote::before { - content: '“'; - } + content: "“"; +} .quote::after { - content: '”'; + content: "”"; } @media (max-width: 768px) { - header { - flex-direction: column; - height: auto; - padding: 20px; - } - - header :nth-child(2) { - flex-direction: column; - gap: 10px; - margin-left: 0; - } - - .section1_detail { - padding: 10px; - } - - h3 { - font-size: 1.5rem; - } - - .section1 p { - font-size: 1rem; - } - - button { - font-size: 0.675rem; - padding: 10px 15px; - width: 90px; - } - .container { - flex-direction: column; - } - h1{ - font-size: 1.5rem; - } - .level2{ - display: flex; - flex-direction: column; - } - .sec_2cont button { - width: 100px; - } -} \ No newline at end of file + header { + align-items: center; + height: auto; + padding: 20px; + } + + header :nth-child(2) { + flex-direction: column; + gap: 10px; + margin-left: 0; + } + header img { + width: 50px; + height: 40px; + padding: 15px; + margin-left: 1rem; + } + + .section1_detail { + padding: 10px; + } + + h3 { + font-size: 1.5rem; + } + + .section1 p { + font-size: 1rem; + } + + button { + font-size: 0.675rem; + padding: 10px 15px; + width: 90px; + } + .container { + flex-direction: column; + } + h1 { + font-size: 1.5rem; + } + .level2 { + display: flex; + flex-direction: column; + } + .sec_2cont button { + width: 100px; + } + + .burger-button { + display: block; + } + .nav-header { + display: none; + width: 100vw; + height: 100vh; + flex-direction: column; + gap: 10px; + right: 0; + left: 0; + position: absolute; + top: 100%; + z-index: 10; + background: white; + } + + .nav-header.active { + display: flex; + } + + header :nth-child(2) { + margin-left: 0; + } +} diff --git a/index.html b/index.html index 9bcbb4d55..9ed01911c 100755 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
    -
    + +
    + ☰ +
    @@ -71,6 +74,6 @@

    Everyone need a little karma.

    @ Karma Mobility .Inc

    - + diff --git a/script.js b/script.js new file mode 100644 index 000000000..da6e7eeb9 --- /dev/null +++ b/script.js @@ -0,0 +1,16 @@ +const burgerButton = document.getElementById('burger-button'); +const nav = document.querySelector('.nav-header'); +const body = document.querySelector('body'); +const burgerIcon = document.querySelector('.burger-icon'); + +burgerButton.addEventListener('click', () => { + nav.classList.toggle('active'); + + if (nav.classList.contains('active')) { + body.style.overflow = 'hidden'; + burgerIcon.innerHTML = '✖'; // Close icon + } else { + body.style.overflow = 'auto'; + burgerIcon.innerHTML = '☰'; // Burger icon + } +}); \ No newline at end of file diff --git a/store.html b/store.html index bbd6d916e..83a6fdd16 100644 --- a/store.html +++ b/store.html @@ -11,14 +11,17 @@
    -
    + +
    + ☰ +
    @@ -97,5 +100,6 @@

    Order your Karma Wifi Device Today!

    @ Karma Mobility .Inc

    + \ No newline at end of file From 3260cd0d7d90a7ee2d15656f21ed6e75a6b0b7ec Mon Sep 17 00:00:00 2001 From: Syed Arslan Date: Wed, 2 Oct 2024 19:04:40 +0200 Subject: [PATCH 10/17] remove targer=blank on link --- index.html | 2 +- store.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 9ed01911c..01b29676d 100755 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@