diff --git a/css/store.css b/css/store.css new file mode 100644 index 000000000..5630646b9 --- /dev/null +++ b/css/store.css @@ -0,0 +1,317 @@ +header { + height: 100px; + display: flex; + justify-content: space-between; + position: relative; +} +.burger-button { + display: none; + font-size: 30px; + cursor: pointer; + margin-left: auto; +} +header img { + width: 70px; + height: 50px; + padding: 15px; + margin-left: 2rem; +} +.nav-header { + display: flex; + gap: 10px; + align-items: center; + margin-right: 2rem; +} +a { + text-decoration: none; + color: rgb(129, 121, 121); +} + +a:hover { + color: rgba(240, 81, 18, 0.904); + font-weight: bold; +} + +.nav-header .active { + font-weight: bold; + color: rgb(85, 81, 81); +} +.nav-header .active:hover { + color: rgba(240, 81, 18, 0.904); +} + +.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; +} +.address { + 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; +} +.checkbox label span { + text-decoration: underline; + color: rgba(240, 81, 18, 0.904); +} +button { + margin-top: 1rem; + background-color: rgba(240, 81, 18, 0.904); + border-color: rgba(240, 81, 18, 0.904); + padding: 10px; + width: 200px; + text-decoration: none; + font-size: 1.2rem; + color: white; +} +button:hover { + transform: scale(1.05); +} +.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: 900px) { + h1 { + margin-top: 1rem; + font-size: 18px; + } + .form { + margin-top: 0.3rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + margin-bottom: 0.5rem; + } + + .input-group { + width: 80%; + } + .address { + margin-top: 0.3rem; + width: 80%; + } + + legend { + margin-left: 1.5rem; + margin-bottom: 10px; + } + .radio-group { + display: flex; + flex-direction: column; + margin-left: 10px; + } + + .radio { + padding: 10px; + width: 150px; + } +} +@media (max-width: 768px) { + 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; + } + .burger-button { + display: block; + } + .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%; + } + .address { + 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: 3rem; + } + .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%; + } + .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/css/style.css b/css/style.css index 5cb025cef..b0150dd95 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,250 @@ 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; + justify-content: space-between; + position: relative; +} +.burger-button { + display: none; + font-size: 30px; + cursor: pointer; + margin-left: auto; +} +header img { + width: 70px; + height: 50px; + padding: 15px; + margin-left: 2rem; +} +.nav-header { + display: flex; + gap: 10px; + align-items: center; + margin-right: 2rem; +} +a { + text-decoration: none; + color: rgb(129, 121, 121); +} +a:hover { + font-weight: bold; + color: rgba(240, 81, 18, 0.904); +} +.nav-header .active { + font-weight: bold; + color: rgb(85, 81, 81); +} +.nav-header .active:hover { + color: rgba(240, 81, 18, 0.904); +} +.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; + width: 150px; + text-decoration: none; + font-size: 1.2rem; + border-color: rgba(240, 81, 18, 0.904); +} +button:hover { + transform: scale(1.05); +} +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; + background-color: #fcefeb; + align-items: center; +} +.level2 div:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.responsive-img { + max-width: 100%; + height: auto; +} +.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 { + 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: 8px; + } + h3 { + font-size: 1.2rem; + } + + .section1 p { + font-size: 0.9rem; + } + .section1 img { + height: 240px; + } + + button { + font-size: 0.675rem; + padding: 10px; + width: 90px; + } + .container { + flex-direction: column; + } + h1 { + font-size: 1.5rem; + } + .level2 { + display: flex; + flex-direction: column; + } + .level2 div:nth-child(2) { + width: 100%; + } + .responsive-img { + width: 100%; + } + .sec_2cont button { + width: 110px; + } + + .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; + } + .sec_2cont p { + font-size: 1.1rem; + width: 50%; + } + .nav-header.active { + display: flex; + } + + header :nth-child(2) { + margin-left: 0; + } +} diff --git a/index.html b/index.html index 3e742ef04..d9ad43e02 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,70 @@ - +
+ + +
+ ☰ +
+
+ +
+ 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

+
+
+ +
+
+ kar +
+
+

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

+ +
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 000000000..efce5511b --- /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 new file mode 100644 index 000000000..298e90a96 --- /dev/null +++ b/store.html @@ -0,0 +1,141 @@ + + + + + + + + + + + +
+ + +
+ ☰ + +
+
+ +
+
+

Order your Karma Wifi Device Today!

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