From 52339c02b1ead43c154e9d4b796c07b1a5e0333f Mon Sep 17 00:00:00 2001 From: Mpanasetckiy Date: Sun, 5 Feb 2023 17:38:27 +0000 Subject: [PATCH 01/17] main and second section developed --- .gitignore | 2 ++ css/style.css | 62 +++++++++++++++++++++++++++++++++++++++++++-------- index.html | 42 ++++++++++++++++++++++++++++++---- 3 files changed, 93 insertions(+), 13 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..3e3bb147d --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.history +.DS_Store \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5cb025cef..630a00fcf 100755 --- a/css/style.css +++ b/css/style.css @@ -4,16 +4,60 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + margin: 0 auto; + height: 100%; } -/** - * 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' - */ +a { + text-decoration: none; +} + +a:hover { + cursor: pointer; + color: coral; +} + +.main { + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/first-background.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + height: 735px; +} + +.main__container { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} + +.main__container button { + border: none; + outline: 0; + display: inline-block; + padding: 10px 25px; + color: black; + background-color: #f4861f; + text-align: center; + cursor: pointer; +} +section { + height: 500px; + text-align: center; +} +.section__container { + display: flex; + justify-content: space-evenly; +} +.section__container img { + width: 140px; +} +.section__container div { + width: 170px; +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..4d4ba98fe 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,44 @@ - - - - +
+
+ Meet Karma + How it Works + Store + Blog + Help + Login +
+
+
+
+
+

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

+
+
+ +
From ab6adb1c194c001779410b1a592f06d92b4605c2 Mon Sep 17 00:00:00 2001 From: Mpanasetckiy Date: Sun, 5 Feb 2023 20:41:46 +0000 Subject: [PATCH 02/17] start webpage is ready --- css/normalize.css | 2 +- css/style.css | 85 +++++++++++++++++++++++++++++++++++++++++------ index.html | 41 +++++++++++++++-------- 3 files changed, 104 insertions(+), 24 deletions(-) diff --git a/css/normalize.css b/css/normalize.css index 957605911..488f86b2d 100755 --- a/css/normalize.css +++ b/css/normalize.css @@ -142,7 +142,7 @@ dfn { */ h1 { - font-size: 2em; + font-size: 4em; margin: 0.67em 0; } diff --git a/css/style.css b/css/style.css index 630a00fcf..7b14d9f5e 100755 --- a/css/style.css +++ b/css/style.css @@ -8,8 +8,31 @@ body { height: 100%; } +header { + height: 79px; +} + +.header__container { + display: flex; + /* flex-direction: row; */ + justify-content: space-between; + padding: 0px 6rem 0 6rem; + height: 100%; +} + +.menu { + display: flex; + column-gap: 3rem; + align-items: center; +} + a { text-decoration: none; + color: black; +} + +a:nth-child(1) { + font-weight: bold; } a:hover { @@ -18,18 +41,18 @@ a:hover { } .main { - background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/first-background.jpg"); + background-image: url("/img/first-background.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; - height: 735px; + height: 750px; } .main__container { text-align: center; position: absolute; - top: 50%; + top: 41%; left: 50%; transform: translate(-50%, -50%); color: white; @@ -37,27 +60,69 @@ a:hover { .main__container button { border: none; - outline: 0; display: inline-block; - padding: 10px 25px; - color: black; + padding: 15px 35px; background-color: #f4861f; text-align: center; cursor: pointer; + margin-top: 2rem; + border-radius: 5px; + font-size: 20px; } section { - height: 500px; + height: 565px; text-align: center; } + .section__container { display: flex; - justify-content: space-evenly; + flex-direction: column; + justify-content: center; + height: 100%; + row-gap: 2rem; +} + +.container__icon { + display: flex; + justify-content: center; + column-gap: 3rem; } .section__container img { width: 140px; } -.section__container div { - width: 170px; +.container__icon div { + width: 300px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 2rem; +} + +.container__icon p { + font-size: 29px; + height: 25px; + margin: 0; +} + +.footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 3rem; + height: 150px; + border-top: #000 solid 1px; + row-gap: 1rem; +} + +.footer img { + width: 30px; +} + +.footer div { + display: flex; + width: 110px; + justify-content: space-between; } \ No newline at end of file diff --git a/index.html b/index.html index 4d4ba98fe..c2ccd77d0 100755 --- a/index.html +++ b/index.html @@ -4,35 +4,40 @@ Karma - + + +
-
- Meet Karma - How it Works - Store - Blog - Help - Login +
+ +
+ Meet Karma + How it Works + Store + Blog + Help + Login +

Introducing Karma

-

Bring WiFi with you, everywhere you go.

+

Bring WiFi with you, everywhere you go.

- -

Everyone needs a little Karma

-
+
+

Everyone needs a little Karma

+

Internet for all devices

@@ -46,8 +51,18 @@

Everyone needs a little Karma

Pay as You Go

- +
+
+ +
From ce1b88cf7983d63418617b703caf886986dae72a Mon Sep 17 00:00:00 2001 From: Mpanasetckiy Date: Sun, 5 Feb 2023 21:24:29 +0000 Subject: [PATCH 03/17] desktop done, removed inline styles --- .gitignore | 3 ++- css/style.css | 16 ++++++++++++++-- index.html | 31 ++++++++++++++++--------------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/.gitignore b/.gitignore index 3e3bb147d..b2580b0d9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .history -.DS_Store \ No newline at end of file +.DS_Store +.vscode \ No newline at end of file diff --git a/css/style.css b/css/style.css index 7b14d9f5e..38fa9c4b4 100755 --- a/css/style.css +++ b/css/style.css @@ -14,12 +14,15 @@ header { .header__container { display: flex; - /* flex-direction: row; */ justify-content: space-between; padding: 0px 6rem 0 6rem; height: 100%; } +.header__container img { + width: 35px; +} + .menu { display: flex; column-gap: 3rem; @@ -58,6 +61,11 @@ a:hover { color: white; } +.main__container h2 { + font-size: 2em; + font-weight: 100; +} + .main__container button { border: none; display: inline-block; @@ -83,6 +91,10 @@ section { row-gap: 2rem; } +.section__container h2 { + font-size: 3rem; +} + .container__icon { display: flex; justify-content: center; @@ -118,7 +130,7 @@ section { } .footer img { - width: 30px; + width: 25px; } .footer div { diff --git a/index.html b/index.html index c2ccd77d0..6064641e1 100755 --- a/index.html +++ b/index.html @@ -14,14 +14,14 @@
- + karma-logo
- Meet Karma - How it Works - Store - Blog - Help - Login + Meet Karma + How it Works + Store + Blog + Help + Login
@@ -29,25 +29,25 @@

Introducing Karma

-

Bring WiFi with you, everywhere you go.

+

Bring WiFi with you, everywhere you go.

-

Everyone needs a little Karma

+

Everyone needs a little Karma

- + Devices

Internet for all devices

- + Coffee

Boost your productivity

- + Refill

Pay as You Go

@@ -55,10 +55,11 @@

Everyone needs a little Karma