From fede5eccbc3229fb8e72fa2685be8ea6dc59bcbe Mon Sep 17 00:00:00 2001 From: Ebtesam Date: Tue, 24 Sep 2024 01:25:20 +0200 Subject: [PATCH 1/9] module project 1 --- .vscode/settings.json | 3 + css/normalize.css | 3 +- css/style.css | 168 +++++++++++++++++++++++++++++++++++++++++- index.html | 83 +++++++++++++++++++++ 4 files changed, 253 insertions(+), 4 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/css/normalize.css b/css/normalize.css index 957605911..cddb546d4 100755 --- a/css/normalize.css +++ b/css/normalize.css @@ -433,4 +433,5 @@ table { td, th { padding: 0; -} \ No newline at end of file +} + diff --git a/css/style.css b/css/style.css index 5cb025cef..d49579749 100755 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,19 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ -body { +body{ font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; -} + font-size: 16px; + +} + + + /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + + + + + /** * Add your custom styles below @@ -17,3 +26,156 @@ body { */ + + + + +.header-container{ + + display: flex; + align-items: flex-end; + justify-content: space-between; +} + + .logo{ + padding-left: 50px; + padding-top: 20px; + width:30px; + } + + + .navbar{ + list-style-type: none; + margin: 0; + padding:0; + display: flex; + justify-content: flex-end; + margin-right: 30px; + gap:10px; + + + } + + .navbar, a{ + text-decoration: none; + color:#333333be; + } + + .navbar a:hover{ + color:rgb(255, 94, 0); + } + + + .main-cover{ + width:300px; + + } + + .section-one{ + text-align: center; + padding:10vw; + background-image: url("/img/first-background.jpg" ); + background-size: cover; + color:white; + + + + } + +button { + background-color:rgb(255, 94, 0); + border-radius: 4px; + border: rgb(255, 128, 0) ; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 20px; + padding-right: 20px; + margin-top: 30px; + + } + + + + + .section-two-bar,ul{ + + list-style-type: none; + display: flex; + gap:10rem; + justify-content: center; + + + + } + + .section-two-bar img{ + width: 150px; + + } + + h4{ + text-align: center; + padding: 20px; + } + + hr{ + border: none; + border-top: 2px solid #ddd; + } + + + + + + .media{ + display: flex; + gap:10rem; + justify-content: center; + + } + + .media img{ + height: 50px; + width: 50px; + border: 1px solid #6159596c; + border-radius: 70px; + padding: 10px; + + + } + + + +@media (max-width:568px){ + + .section-two-bar,ul{ + list-style-type: none; + display: flex; + gap: 10rem; + justify-content: center; + flex-direction: column; + align-items: center; + } + .header-container { + display: flex; + align-items: center; + flex-wrap: nowrap; + flex-direction: column; + +} +.logo { + /* padding-left: 50px; */ + padding-top: 20px; + width: 30px; + padding-right: 60px; + padding-bottom: 30px; +} +.media { + display: flex; + gap: 10rem; + justify-content: center; + flex-direction: column-reverse; + align-content: center; + align-items: center; +} +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..8f47970c0 100755 --- a/index.html +++ b/index.html @@ -15,5 +15,88 @@ + +
+
+ + +
+
+ +
+
+
+ +
+

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

    +
    • + +
+
+ + + +
+ +
+ +
+ +

Join us

+

+
+ + + +
+

+

© karma mobility

+ +
+ +
+ + + + + + + From e7e5834597c92eb1c924aa62c52c562c91274dc6 Mon Sep 17 00:00:00 2001 From: Ebtesam Date: Tue, 1 Oct 2024 15:34:47 +0200 Subject: [PATCH 2/9] level 1 --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 8f47970c0..31e6c670f 100755 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@

introducing karma

-

Bring wifi with you,everywhere you go

+

Bring wifi with you,everywhere you go

From 63acb1498026f7d9fc3ebe04b42fa59d1412e271 Mon Sep 17 00:00:00 2001 From: Ebtesam Date: Tue, 1 Oct 2024 17:53:35 +0200 Subject: [PATCH 3/9] level 2 --- css/style.css | 39 ++++++++++++++++++++++++++++++++++++++- index.html | 18 +++++++++++++++++- level-2/store.html | 11 +++++++++++ 3 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 level-2/store.html diff --git a/css/style.css b/css/style.css index d49579749..908c2c461 100755 --- a/css/style.css +++ b/css/style.css @@ -144,7 +144,40 @@ button { } - +.quote-container{ + background-color: bisque; +display: flex; +color: rgba(0, 0, 0, 0.541); + + +} + +.quote-position{ + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + line-height: 2em; + padding: 5em; + +} + + + + + + +.button-quote{ + + background-color:rgb(255, 94, 0); + border-radius: 4px; + border: rgb(255, 128, 0) ; + color: white; + + +} + + @media (max-width:568px){ @@ -178,4 +211,8 @@ button { align-content: center; align-items: center; } +.quote-container { + display: flex; + flex-direction: column; +} } \ No newline at end of file diff --git a/index.html b/index.html index 31e6c670f..5e56f301d 100755 --- a/index.html +++ b/index.html @@ -70,7 +70,23 @@

Everyone needs a little Karma


-
+ + +
+ + +
+

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

+ +
+ + + +
+ + + +
diff --git a/level-2/store.html b/level-2/store.html new file mode 100644 index 000000000..d01f779ff --- /dev/null +++ b/level-2/store.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file From 2c7b4c6f4497bed5fe28a64d7759b24ca60691da Mon Sep 17 00:00:00 2001 From: Ebtesam Date: Tue, 1 Oct 2024 18:14:41 +0200 Subject: [PATCH 4/9] store file --- store.html | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 store.html diff --git a/store.html b/store.html new file mode 100644 index 000000000..ad77fd3d6 --- /dev/null +++ b/store.html @@ -0,0 +1,29 @@ + + + + + + Store + + + + + + +
+
+ + +
+
+ + + \ No newline at end of file From 1e9900ffdc5aa963a701285f3e20ed56c1e4e680 Mon Sep 17 00:00:00 2001 From: Ebtesam Date: Tue, 1 Oct 2024 20:19:42 +0200 Subject: [PATCH 5/9] store page --- css/style.css | 75 +++++++++++++++++++++- level-2/store.html | 11 ---- store.html | 151 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 225 insertions(+), 12 deletions(-) delete mode 100644 level-2/store.html diff --git a/css/style.css b/css/style.css index 908c2c461..54b2d5aa4 100755 --- a/css/style.css +++ b/css/style.css @@ -176,9 +176,82 @@ color: rgba(0, 0, 0, 0.541); } +/* + +.store-container{ + display: flex; + justify-content: space-between; + + +} + +.store-img{ + width:50vw; + +} + +.aside-img-store{ + display: flex; +} + +.form-section{ + display: grid; + grid-template-columns: 300px ; + +} + +.grid-item { + display: flex; + flex-direction: column; +} + + */ + + + + + .store-container { + display: flex; + justify-content: space-evenly + align-items: flex-start; +} + +.store-img { + width: 100%; + max-width: 400px; + object-fit: cover; +} + +.aside-img-store { + display: flex; + flex: 1; + justify-content: flex-end; +} + +.form-section { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(1, 1fr); + gap: 20px; + flex: 1; +} + +.grid-item { + display: flex; + flex-direction: column; + +} + +button { + grid-column: span 2; + padding: 10px; + background-color: #f5763c; + color: white; + border: none; + cursor: pointer; +} - @media (max-width:568px){ .section-two-bar,ul{ diff --git a/level-2/store.html b/level-2/store.html deleted file mode 100644 index d01f779ff..000000000 --- a/level-2/store.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - Document - - - - - \ No newline at end of file diff --git a/store.html b/store.html index ad77fd3d6..604c2c152 100644 --- a/store.html +++ b/store.html @@ -24,6 +24,157 @@ +
+ + + + +
+
+
+

Order your Karma wifi device today!

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ Karma orange + Space Grey +
+ +
+

By placing your order, you agree to Karma's Terms and Conditions.

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

Join us

+

+
+ + + +
+

+

© karma mobility

+ +
\ No newline at end of file From d4cfd371a6d03fb0ca87c7467889c35801bb924a Mon Sep 17 00:00:00 2001 From: Ebtesam Date: Thu, 3 Oct 2024 15:54:25 +0200 Subject: [PATCH 6/9] update level 1 and 2 --- css/style.css | 167 +++++++++++++++++++++++++-------------------- store.html | 183 ++++++++++++++------------------------------------ 2 files changed, 148 insertions(+), 202 deletions(-) diff --git a/css/style.css b/css/style.css index 54b2d5aa4..a493f31e1 100755 --- a/css/style.css +++ b/css/style.css @@ -176,80 +176,89 @@ color: rgba(0, 0, 0, 0.541); } -/* -.store-container{ - display: flex; - justify-content: space-between; + .store-container { + display: flex; + justify-content: space-between; + align-items: stretch; + padding: 20px; + gap: 20px; + min-height: 100vh; + } + + .form-container { + width: 50%; + padding: 20px; + + } + + h1 { + font-size: 24px; + margin-bottom: 20px; + color: #f4623a; + } + + form { + display: flex; + flex-direction: column; + gap: 20px; + } + + .color-selection, + .terms-container { + display: flex; + + gap: 10px; + } + + input[type="text"], + select, + button { + padding: 10px; + margin-top: 5px; + border-radius: 6px; + border: 1px solid #ccc; + width: 100%; + + + } + + .flex-container { + display: flex; + justify-content: space-between; + } + + .half-width { + width: 48%; + } + + button { + background-color: #f4623a; + color: white; + border: none; + cursor: pointer; + padding: 15px; + font-size: 16px; + margin-top: 20px; + } + + button:hover { + background-color: #d04a28; + } + + .store-img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .aside-img-store { + + width: 50%; + justify-content: flex-end; + } -} - -.store-img{ - width:50vw; - -} - -.aside-img-store{ - display: flex; -} - -.form-section{ - display: grid; - grid-template-columns: 300px ; - -} - -.grid-item { - display: flex; - flex-direction: column; -} - - */ - - - - - .store-container { - display: flex; - justify-content: space-evenly - align-items: flex-start; -} - -.store-img { - width: 100%; - max-width: 400px; - object-fit: cover; -} - -.aside-img-store { - display: flex; - flex: 1; - justify-content: flex-end; -} - -.form-section { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(1, 1fr); - gap: 20px; - flex: 1; -} - -.grid-item { - display: flex; - flex-direction: column; - -} - -button { - grid-column: span 2; - padding: 10px; - background-color: #f5763c; - color: white; - border: none; - cursor: pointer; -} @media (max-width:568px){ @@ -288,4 +297,20 @@ button { display: flex; flex-direction: column; } +.flex-container { + display: flex; + flex-direction: column; +} +.store-container { + display: flex; + gap: 20px; + flex-direction: column; + align-items: center; +} +.color-selection, .terms-container { + display: flex; + gap: 10px; + flex-direction: column; + } + } \ No newline at end of file diff --git a/store.html b/store.html index 604c2c152..fd9985103 100644 --- a/store.html +++ b/store.html @@ -26,143 +26,64 @@
- - +
+ + +
+ -
-
-
-

Order your Karma wifi device today!

-
-
- - -
- -
- - -
- -
- - -
- -
- - + +
-
- - -
- -
- - -
- -
- -
- Karma orange - Space Grey -
- -
-

By placing your order, you agree to Karma's Terms and Conditions.

- -
- - - -
-
- - -
+ +