From cfec3c10d3f65a02d639ae650f3aeb461f812688 Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+karlagLuna@users.noreply.github.com> Date: Wed, 26 Oct 2022 20:56:00 +0100 Subject: [PATCH 01/15] London Class9/Turing - Karla Grajales - HTMl/CSS - Week 1 Header and main --- css/style.css | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 30 +++++++++++++++-- 2 files changed, 119 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..0423c65c4 100755 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ -body { + body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } @@ -17,3 +17,94 @@ body { */ + +header{ + display: flex; + justify-content: space-between; + height: 4rem; + width: 100%; + margin-bottom: 1rem; +} + +img{ + padding-top: 1rem; + margin-left: 4rem; +} + +nav { + padding-top: 1rem; + width: 50rem; + margin-right: 4rem; + /* background-color: yellow; */ +} + +.bar{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +li { + display: inline; + text-decoration: none; + list-style: none; +} + +.karma{ + font-weight: 900; +} + +a { + text-decoration: none; + color: rgb(121, 139, 145); +} + + +a:hover {color: rgb(243, 112, 56);} + +section { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +main { + background-image: url("/img/first-background.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + /* margin: 1rem 4rem 1rem 4rem; */ + width: 95%; + display: flex; + flex-direction: column; + align-items: center; + height: 30rem; + padding-top: 11rem; + color: rgb(246, 241, 241); +} + +h2{ + /* color: white; */ + font-size: 4rem; + font-weight: 350; + margin-bottom: 0rem; +} + +p{ + /* color: white; */ + font-size: 2rem; + margin-bottom: 4rem; + font-weight: 200; +} + +.btn { + background-color:rgb(243, 112, 56); + margin-bottom: 1rem; + border: none; + padding: 15px 32px; + border-radius: 0.2rem; + font-size: 17px; +} + + diff --git a/index.html b/index.html index 3e742ef04..7532c6601 100755 --- a/index.html +++ b/index.html @@ -11,9 +11,33 @@ - - - +
+ karma-logo + +
+ +
+
+

Introducing Karma

+

Bring WIFI with you, everywhere you go.

+ +
+
+ + +
+ +
+ From 62e54e3b4751808f9289daddae23cca20d56efff Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+karlagLuna@users.noreply.github.com> Date: Thu, 27 Oct 2022 01:41:16 +0100 Subject: [PATCH 02/15] London Class9/Turing - Karla Grajales - HTMl/CSS - Week 1 main and content --- css/style.css | 54 ++++++++++++++++++++++++++++++++++++++------------- index.html | 18 +++++++++++++---- 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 0423c65c4..31897d52b 100755 --- a/css/style.css +++ b/css/style.css @@ -28,13 +28,13 @@ header{ img{ padding-top: 1rem; - margin-left: 4rem; + margin-left: 5rem; } nav { padding-top: 1rem; width: 50rem; - margin-right: 4rem; + margin-right: 5rem; /* background-color: yellow; */ } @@ -56,7 +56,7 @@ li { a { text-decoration: none; - color: rgb(121, 139, 145); + color: rgb(118, 123, 125); } @@ -74,37 +74,63 @@ main { background-size: cover; background-repeat: no-repeat; background-position: center; - /* margin: 1rem 4rem 1rem 4rem; */ width: 95%; display: flex; flex-direction: column; align-items: center; - height: 30rem; - padding-top: 11rem; + height: 35rem; + padding-top: 13rem; color: rgb(246, 241, 241); } -h2{ - /* color: white; */ +main h2{ font-size: 4rem; font-weight: 350; margin-bottom: 0rem; } -p{ - /* color: white; */ +main p{ font-size: 2rem; - margin-bottom: 4rem; - font-weight: 200; + font-weight: 150; } .btn { background-color:rgb(243, 112, 56); - margin-bottom: 1rem; + margin-top: 2rem; border: none; - padding: 15px 32px; + padding: 20px 32px; border-radius: 0.2rem; font-size: 17px; } +h3{ + font-size: 3rem; + font-weight: 200; + padding-top: 5rem; + margin: 0px; +} + + +.content{ + width: 80%; + height: 20rem; + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.content div { + width: 35%; + height: 100%; + text-align: center; + color: rgb(16, 15, 15); + font-size: 2rem; + font-weight: 500; +} + +div img{ + padding-top: 2rem; + width: 40%; + margin: auto; +} diff --git a/index.html b/index.html index 7532c6601..4ed71e21f 100755 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
- karma-logo + karma-logo