From 6ab3dbe068310a13a1bc98041468884f7f7b90f5 Mon Sep 17 00:00:00 2001 From: nohetekelmariyam <127329572+nohetekelmariyam@users.noreply.github.com> Date: Tue, 26 Sep 2023 23:10:25 +0100 Subject: [PATCH 1/5] module project --- .vscode/settings.json | 3 ++ css/style.css | 85 +++++++++++++++++++++++++++++++++++++++++++ index.html | 67 ++++++++++++++++++++++++++++++++++ 3 files changed, 155 insertions(+) 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/style.css b/css/style.css index 5cb025cef..706abd8f9 100755 --- a/css/style.css +++ b/css/style.css @@ -4,8 +4,93 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + +} + /*Header*/ + + .karam-logo{ + width: 30px; + margin-left: 4em; +} +.nav{display: flex; + float: right; + margin-right: 3em;} + +.nav-link {text-decoration: none; + color: black; + padding-left: 2em;} + +.nav-item{ + display: inline; + list-style-type: none; + } +.nav-link:hover{color: orangered;} + /*hero*/ + .hero{ + padding: 200px; + background-size: cover; + background-image: url("/img/first-background.jpg"); + } + .hero h1{ + margin-left: 340px; + color:white; + } + .hero p{ + margin-left: 280px; + font-size: 20px; + margin-top: 0px; + color:white;} + + .hero-button{ + padding: 0.4em 1em; + border-style: none; + border-radius: 2px; + background-color: orangered; + color: white; + margin-left: 400px;} + /*icon*/ + + .section{ + margin-top: 80px;} + .section-p{ + font-size: 38px; + text-align: center; + + } + .icon-imag{ + margin-left: 3em; + width: 100px;} +.icon-discribtion{ + font-size: 20px; } + .section-icon{ + display: flex; + padding-left: 7em; + + } + .section-icon div{ + padding-left: 7em; + padding-bottom: 3em; + border-bottom: 1px solid rgb(184, 180, 180); + } + /*footer*/ + .social-media-icon{ + border: 1px solid rgb(185, 179, 179); + padding: 5px; + width: 30px; + border-radius: 25px; + margin-left: 7px; + cursor: pointer; + } + +footer h3{ + text-align: center; +} +footer p{ + color: rgb(178, 177, 177); + text-align: center; +} /** * Add your custom styles below * diff --git a/index.html b/index.html index 3e742ef04..871990c88 100755 --- a/index.html +++ b/index.html @@ -10,7 +10,74 @@ +
+ + + +
+ +
+
+
+

introducing Karma

+

Bring WiFi with you, everywhere you go.

+ + +
+
+
+ +
+

Everyone needs a little Karma.

+ +
+
+ device picture +

internet for all devices

+
+ +
+ icon coffee picture +

Boost your productivity

+
+ +
+ icon coffee picture +

Pay as You Go

+
+
+
+ + From cff639f0efec84e8953e32e4c33479a65ae90e7d Mon Sep 17 00:00:00 2001 From: nohetekelmariyam <127329572+nohetekelmariyam@users.noreply.github.com> Date: Mon, 2 Oct 2023 19:18:40 +0100 Subject: [PATCH 2/5] added storage page --- {level-2 => css}/store-desktop.png | Bin css/style.css | 161 +++++++++++++++++++++++++++-- index.html | 19 +++- store.html | 121 ++++++++++++++++++++++ 4 files changed, 289 insertions(+), 12 deletions(-) rename {level-2 => css}/store-desktop.png (100%) create mode 100644 store.html diff --git a/level-2/store-desktop.png b/css/store-desktop.png similarity index 100% rename from level-2/store-desktop.png rename to css/store-desktop.png diff --git a/css/style.css b/css/style.css index 706abd8f9..efe0ded72 100755 --- a/css/style.css +++ b/css/style.css @@ -4,10 +4,11 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; - + margin: 0px; + padding: 0px; } /*Header*/ - + .header{background-color: rgb(248, 248, 248);} .karam-logo{ width: 30px; margin-left: 4em; @@ -42,12 +43,20 @@ body { color:white;} .hero-button{ - padding: 0.4em 1em; - border-style: none; - border-radius: 2px; - background-color: orangered; - color: white; - margin-left: 400px;} + margin-left: 25em} + /*hero-button and article-button*/ + .hero-button, .article-button{ + padding: 0.4em 1em; + border-style: none; + border-radius: 2px; + background-color: orangered; + color: white; + } + + .hero-button:hover{ + background-color: white; + color: orangered; + } /*icon*/ .section{ @@ -71,11 +80,38 @@ body { .section-icon div{ padding-left: 7em; padding-bottom: 3em; - border-bottom: 1px solid rgb(184, 180, 180); + + } + .homepage-img{ + max-width: 100%; + max-height: 100%;} + .article{ + display: flex; + align-items: center; + background-color: rgb(245, 220, 224); + + } + .article-p { + } + + .article-quote{ + font-size: 30px; + font-style: italic; + padding-left: 2.5em; + color: rgb(31, 31, 31); + text-align: center; + } + .article-button{ + + margin-left: 12em; + } + .article-button:hover{ + background-color: white; + color: orangered;} /*footer*/ .social-media-icon{ - border: 1px solid rgb(185, 179, 179); + border: 1px solid rgb(118, 118, 118); padding: 5px; width: 30px; border-radius: 25px; @@ -88,9 +124,112 @@ footer h3{ } footer p{ - color: rgb(178, 177, 177); + color: rgb(118, 118, 118); text-align: center; } + + + /*Store*/ + + + /*section*/ + + /*Nameiput*/ +#karam-logo{ + margin-left: 8em; +} + +.form-name{ + padding: 0.5em; + margin-bottom: 2em; + margin-top: 0.5em; + border: 1.5px solid rgb(118, 118, 118); + border-radius: 3px; +} + + +.form-section h2 { + color: rgb(230, 73, 16); +} +.name-div{ + display: flex; + } +#name-div{ + margin-top: 2em; +} +.lastname-div +{ margin-left: 1.5em;} + +/*address input*/ + +.address{ + padding: 0.5em 8em ; + border: 1.5px solid rgb(108, 106, 106); + border-radius: 3px; +} + +.address2-div{ + margin-top: 2em; +} +.colorselct-p{ + margin-bottom: 7px; + color: rgb(118, 118, 118); +} +.ch_color{ + accent-color: red; +} +.cheakbox-section{ + margin-top: 1.5em; +} +.cheakbox-link{ + color: orangered; +} + + .store-img{ + width: 500px; + height: 650px; + margin-left: 50px; +} + +.img-section +{ + margin-left: 12em; + } + + + + +.section-flex +{ display: flex; + margin-left: 135px; + border-bottom: 1.2px solid rgb(212, 201, 201); +} +#placeorder-button{ + margin-top: 1em; + margin-bottom: 2em; + padding: 10px 20px; + background-color: rgb(208, 66, 14); + border-style: none; + color: white; + font-size: 1em; + border-radius: 3px; + margin-left: 1em; + cursor: pointer; +} + +#placeorder-button:hover{ + background-color: white; + color: rgb(208, 66, 14); +} + + + + + + +.cheakbox{ + padding: 60px; +} /** * Add your custom styles below * diff --git a/index.html b/index.html index 871990c88..8b38c81e1 100755 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Karma @@ -67,6 +67,23 @@

introducing Karma

Pay as You Go

+ +
+
+ +
+ +
+

“ Whenever i am, i just don't
worry about my connection
+ anymore! ”

+ + + + + +
+ +