From 82860472f6f26d5d91f69a8a9d329aa8cb2f675a Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 26 Sep 2023 17:30:01 +0100 Subject: [PATCH 01/18] I edit html and css to re-create the design --- css/style.css | 188 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 128 +++++++++++++++++++++++++++++++--- 2 files changed, 300 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..d26d780a1 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,197 @@ - - /* 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; + margin: 0; } +body, +button { + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + color: var(--grey-dark); + font-size: 1rem; +} /** * 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' */ +h1 { + margin-top: 0; + margin-bottom: 0; +} +p { + margin-top: 0; + margin-bottom: 0; +} + +.header, +.content, +.footer { + padding: 0 1.5rem; + max-width: 1200px; + margin: 0 auto; +} + +/*Header*/ + +.header { + display: flex; + align-items: center; + justify-content: space-between; + height: 5rem; + margin-bottom: 0.2rem; + padding-top: 0.1rem; +} + +.header__logo { + max-height: 70px; + width: 1.5rem; + padding-left: 100px; +} + +/*Navigation*/ +.nav-list { + display: flex; + gap: 2rem; + list-style: none; +} +.nav__item { + padding: 0.5rem 0; +} + +.nav__link { + color: gray; + font-weight: 600; + text-transform: uppercase; + text-decoration: none; +} + +.nav__link:hover { + color: orange; +} + +/*Button*/ + +button { + padding: 1rem 1rem 1rem 1rem; + background-color: #c05326; + color: white; + border-radius: 5px; +} + +button:hover { + background-color: gray; +} +.btn { + padding-left: 25rem; +} + +/*Content*/ + +.content { + display: flex; + flex-direction: column; + padding-right: 30px; +} + +/*Introduction*/ + +.introduction { + background-image: url("../img/first-background.jpg"); + width: 92%; + height: 600px; + background-color: var(--grey-light); + padding-left: 100px; +} + +.introduction h1 { + padding-top: 200px; + padding-left: 300px; + margin-bottom: 1rem; + font-size: 2.5rem; + color: white; +} + +.introduction p { + font-size: 2rem; + margin-bottom: 2rem; + padding-left: 200px; + padding-top: 30px; + color: white; +} + +.main { + position: relative; + margin-bottom: 3rem; + padding-bottom: 4rem; + font-size: 2rem; + font-weight: 50; + padding-top: 100px; + padding-left: 350px; +} + +/*Caption*/ +.more__caption { + padding-left: 12rem; + display: flex; + gap: 2rem; + flex-direction: row; + flex-wrap: wrap; + text-align: center; +} + +/*articles*/ + +.art-area { + display: flex; + flex-direction: column; + align-content: center; + font-size: 1.6rem; +} + +.article__img { + padding-left: 5rem; + width: 8rem; +} + +/*Footer*/ + +hr.new { + border-top: 1px solid gray; + width: 60rem; + margin-top: 4rem; +} + +.footer { + /* align-items: center; + padding-left: 38rem; + font-size: 0.8rem; */ + margin-top: 2rem; + text-align: center; +} + +.footer p { + padding-bottom: 1rem; + text-align: center; + font-size: 0.85rem; +} + +.text { + color: gray; +} + +.img__footer { + text-align: center; + width: 1rem; + border: 1px solid gray; + border-radius: 100%; + overflow: hidden; +} diff --git a/index.html b/index.html index 3e742ef04..9b5d2b2cf 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,125 @@ - - - + + + Karma - - - - - - - + + + + + HTML-CSS-Module-Project + + +
+ + + +
+ + + +

Introduction Karma

+

Bring WiFi with you, everywhere you go

+
+ +
+ + + +

Everyone Needs a little Karma

+ + +
+
+ device icon +

Internat for all devices

+
+ +
+ coffee icon +

Boost your productivity

+
+ +
+ coffee icon +

Pay us You Go

+
+
+ + - +
+ + + From a60b14f2a046b58c70b22829f09680754f8afab0 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 27 Sep 2023 15:06:29 +0100 Subject: [PATCH 02/18] I did change the first img size --- css/style.css | 4 ++-- index.html | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index d26d780a1..1f406fe7c 100755 --- a/css/style.css +++ b/css/style.css @@ -106,8 +106,8 @@ button:hover { .introduction { background-image: url("../img/first-background.jpg"); - width: 92%; - height: 600px; + width: 98%; + height: 40rem; background-color: var(--grey-light); padding-left: 100px; } diff --git a/index.html b/index.html index 9b5d2b2cf..dacaaf8d9 100755 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@
@@ -69,7 +69,7 @@

Introduction Karma

device icon

Internat for all devices

@@ -78,7 +78,7 @@

Introduction Karma

coffee icon

Boost your productivity

@@ -87,7 +87,7 @@

Introduction Karma

coffee icon

Pay us You Go

@@ -104,19 +104,19 @@

Introduction Karma

twitter-icon facebook icon instagram-icon icon

@ Karma Mobility, Ink

From 07e850cc4c3afcc090b19e53d06754f6353a5f62 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 30 Sep 2023 16:05:00 +0100 Subject: [PATCH 03/18] I added margine on my nav tag --- css/style.css | 18 ++++++++++++------ index.html | 1 - 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 1f406fe7c..7af10d880 100755 --- a/css/style.css +++ b/css/style.css @@ -56,10 +56,15 @@ p { } /*Navigation*/ + +nav { + margin-right: 10%; +} .nav-list { display: flex; gap: 2rem; list-style: none; + align-items: center; } .nav__item { @@ -69,7 +74,7 @@ p { .nav__link { color: gray; font-weight: 600; - text-transform: uppercase; + text-transform: capitalize; text-decoration: none; } @@ -106,15 +111,15 @@ button:hover { .introduction { background-image: url("../img/first-background.jpg"); - width: 98%; - height: 40rem; + width: 93.9%; + height: 38rem; background-color: var(--grey-light); - padding-left: 100px; + padding-left: 79px; } .introduction h1 { padding-top: 200px; - padding-left: 300px; + padding-left: 302px; margin-bottom: 1rem; font-size: 2.5rem; color: white; @@ -192,6 +197,7 @@ hr.new { text-align: center; width: 1rem; border: 1px solid gray; - border-radius: 100%; + border-radius: 50%; + padding: 10px; overflow: hidden; } diff --git a/index.html b/index.html index dacaaf8d9..465846fc2 100755 --- a/index.html +++ b/index.html @@ -26,7 +26,6 @@ alt="it is used for website" class="header__logo" /> -