From 8e4351daa705216da96d16e4ebbf4e792f1b9f55 Mon Sep 17 00:00:00 2001 From: Fathi Date: Fri, 29 Sep 2023 14:18:43 +0100 Subject: [PATCH 1/6] Html and Css updated --- css/style.css | 114 +++++++++++++++++++++++++++++++++++++++++++++++--- index.html | 107 ++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 202 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..1eef6098b 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,115 @@ - - /* 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; +} +/*Header*/ + +.Karma-logo { + width: 30px; + margin-left: 4em; +} +/* Updated CSS to make nav items appear in one row with gaps */ + +.nav { + display: flex; + justify-content: flex-end; /* Align items to the left */ + margin-left: 2em; /* Add left margin for spacing */ +} + +.nav-item { + list-style-type: none; + margin-right: 1em; +} + +.nav-link { + text-decoration: none; + color: black; + margin-right: 1em; +} + +.nav-link:hover { + color: orangered; +} + +.nav li { + text-decoration: none; + gap: 1px; + float: left; +} +.nav ul { + list-style-type: none; + margin-left: 1em; +} + +/*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 * @@ -15,5 +119,3 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - - diff --git a/index.html b/index.html index 3e742ef04..db074e52d 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,100 @@ - - - + + + Karma - - - - - - + + + + + + +
+ + +
- - - +
+
+
+

Introducing Karma

+

Take WiFi with you, wherever you go.

+ +
+
+
- +
+

Everybody needs a bit of Karma.

+
+
+ Device icon +

Internet for all your devices

+
+
+ Coffee icon +

Boost your productivity

+
+
+ Refill icon +

Pay as you go

+
+
+
+ + + +
+ +
+ From 920e0342b1cd278e2d075c163466e26a3b343ffb Mon Sep 17 00:00:00 2001 From: Fathi Date: Wed, 4 Oct 2023 14:25:33 +0100 Subject: [PATCH 2/6] Part two added --- css/style.css | 56 ++++++++++++++++++++++++++++++--- index.html | 87 +++++++++++++++++++++++++++++++++------------------ 2 files changed, 109 insertions(+), 34 deletions(-) diff --git a/css/style.css b/css/style.css index 1eef6098b..140656bf0 100755 --- a/css/style.css +++ b/css/style.css @@ -6,11 +6,16 @@ body { } /*Header*/ -.Karma-logo { +.logo { + display: flex; + align-items: center; /* Center the logo vertically within the header */ +} + +.karam-logo { width: 30px; - margin-left: 4em; + height: 30px; /* Set height to maintain aspect ratio */ + margin-right: 620px; /* Add spacing between logo and nav items */ } -/* Updated CSS to make nav items appear in one row with gaps */ .nav { display: flex; @@ -91,7 +96,50 @@ 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(118, 118, 118); + padding: 5px; + width: 30px; + border-radius: 25px; + margin-left: 7px; + cursor: pointer; +} +/*footer*/ +.social-media-icon { + border: 1px solid rgb(118, 118, 118); + padding: 5px; + width: 30px; + border-radius: 25px; + margin-left: 7px; + cursor: pointer; } /*footer*/ .social-media-icon { diff --git a/index.html b/index.html index db074e52d..8af5e7a67 100755 --- a/index.html +++ b/index.html @@ -1,38 +1,49 @@ + - - - + + + Karma - - - - - - -
- - +
+ + +
-
+

Introducing Karma

Take WiFi with you, wherever you go.

@@ -61,7 +72,23 @@

Introducing Karma

Pay as you go

- +
+
+ +
+ +
+

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

+ + + + + +
+ +
+