From 3e08025779c21d8fffba0be6feeefcd180e1389b Mon Sep 17 00:00:00 2001 From: Fathi Date: Tue, 26 Sep 2023 13:18:20 +0100 Subject: [PATCH 1/3] html updated --- index.html | 81 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 68 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..fc134efc3 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,74 @@ - - - + + + Karma - - - - - - - + + + + + + - - + + + +
+ +

+
+

Introducing Our Products

+

One line of text describing your product.

+ +
+
+

Everyone Needs This Product

+ +
+
+
+

Feature 1

+ Product 1 +

Description of Product 1.

+
+
+

Feature 2

+ Product 2 +

Description of Product 2.

+
+
+

Feature 3

+ Product 3 +

Description of Product 3.

+
+
+
- + + From 14270a821b096de90ef2ef1b6d6215b5658a8108 Mon Sep 17 00:00:00 2001 From: Fathi Date: Fri, 29 Sep 2023 11:56:43 +0100 Subject: [PATCH 2/3] Html and CSS updated --- css/style.css | 100 +++++++++++++++++++++++++++++++--- index.html | 145 +++++++++++++++++++++++++++++++++++--------------- 2 files changed, 197 insertions(+), 48 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..979054754 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,101 @@ - - /* 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*/ + +.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("/HTML-CSS-Module-Project/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 +105,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 fc134efc3..1912e2881 100755 --- a/index.html +++ b/index.html @@ -17,58 +17,119 @@ - - +
+ +