From 16e73fd4b59457a120a484587884ddb91a6ded0f Mon Sep 17 00:00:00 2001 From: Shadi <89422699+shadiwin@users.noreply.github.com> Date: Fri, 19 Nov 2021 09:15:32 +0000 Subject: [PATCH 1/2] Final changes --- css/style.css | 149 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 111 ++++++++++++++++++++++++++++++++----- 2 files changed, 242 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..87c25d5ca 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,8 @@ - - /* 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; } /** @@ -15,5 +14,147 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +.topnav { + background-color: rgb(255, 255, 255); + overflow: hidden; + margin-right: 60px; +} + +/* nav bar */ +.topnav a { + float: right; + color: #5a5a5a; + text-align: center; + padding: 1vw 2vw; + text-decoration: none; + font-size: 2vw; + background-color: white; + margin-top: 2vw; +} + +/* the color of links on hover */ +.topnav a:hover { + color: orangered; +} + +/* Adding bold font to the active/current link */ +.topnav a.active { + font-weight: bold; +} +.logo { + margin-left: 4vw; + margin-top: 2vw; + height: 3vw; + width: 2vw; +} +/* styling background image & texts on the image */ + +.big-image { + width: 97%; + margin: 0; +} + +.container { + position: relative; + text-align: center; +} +h1 { + font-family: "Roboto", sans-serif; + font-weight: 50; + font-size: 6vw; + font-stretch: condensed; +} +h5 { + font-family: "Roboto", sans-serif; + font-weight: 50; + font-size: 2.5vw; + font-stretch: condensed; + width: 100%; +} +.text-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + text-align: center; +} +.button1 { + background-color: orangered; + border: 2vw solid orangered; + border-radius: 3%; + width: 30%; + font-size: 1.5vw; +} + +.article-summary { + text-align: center; +} + +#title-main { + color: rgb(70, 69, 69); + text-align: center; + margin-top: 10vw; +} +.icon { + width: 15vw; + height: 15vw; +} +#thumbnail:hover { + position: relative; + top: -2vw; + left: -2vw; + width: 25vw; + height: auto; + display: block; +} +.sub-title { + margin-top: 3vw; + display: block; + font-size: 2vw; + color: rgb(70, 69, 69); +} +#item { + vertical-align: top; + display: inline-block; + text-align: center; + width: 30vw; +} +/* styling the footer */ +.footer { + bottom: 0; + margin-top: 10vw; +} +.social { + max-height: 2vw; + width: 2vw; + padding: 0.2vw; + border-radius: 5vw; + border: solid #dddddd 0.1vw; + margin: 2vw; +} +.social_icon { + max-height: 2vw; + width: auto; +} +p { + text-align: center; + margin-top: 3vw; +} +hr { + width: 80%; + height: 2px; + border-width: 0; + color: rgb(196, 196, 196); + background-color: rgb(196, 196, 196); +} +footer { + display: flex; + justify-content: center; +} +.footer-text { + margin-top: 1vw; + color: rgb(196, 196, 196); +} diff --git a/index.html b/index.html index 3e742ef04..b7d252224 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,102 @@ - - - + + + Karma - - - - - - + + + + + + + +
+ +
- - - - - +
+
+ working with your tablet +
+

+ Introducing Karma +

+
+ Bring WiFi with you, everywhere you go. +
+ +
+
+
+ +
+

Everyone needs a little Karma

+
+
+ PC + Internet for all devices +
+
+ coffee + Boost your productivity +
+
+ re-fill + Pay as you go +
+
+
+ +
+
+

Join us on

+ +

+ © + Karma Mobility, Inc +

+ +
+ From 5540de8234c46539481421e9fbf7a1ed54436d83 Mon Sep 17 00:00:00 2001 From: Shadi <89422699+shadiwin@users.noreply.github.com> Date: Mon, 22 Nov 2021 15:24:35 +0000 Subject: [PATCH 2/2] Some codes amended Based on TA`s comments, some codes are changed --- css/style.css | 162 +++++++++++++++++++++++++++----------------------- index.html | 113 +++++++++++++++++------------------ 2 files changed, 141 insertions(+), 134 deletions(-) diff --git a/css/style.css b/css/style.css index 87c25d5ca..053d37f9f 100755 --- a/css/style.css +++ b/css/style.css @@ -14,87 +14,102 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ -.topnav { - background-color: rgb(255, 255, 255); - overflow: hidden; - margin-right: 60px; -} +header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 20px 5%; + height: 5%; + align-items: center; +} /* nav bar */ -.topnav a { - float: right; - color: #5a5a5a; - text-align: center; - padding: 1vw 2vw; + +nav { + display: block; +} +.nav__links { + list-style: none; +} +.nav__links li { + display: inline-block; + padding: 0px 15px; +} +a { text-decoration: none; - font-size: 2vw; - background-color: white; - margin-top: 2vw; + color: rgb(116, 114, 114); } /* the color of links on hover */ -.topnav a:hover { +.nav__links li a:hover { color: orangered; } /* Adding bold font to the active/current link */ -.topnav a.active { +.active { font-weight: bold; } +/* logo */ .logo { - margin-left: 4vw; - margin-top: 2vw; - height: 3vw; - width: 2vw; + height: 30px; + width: 25px; + cursor: pointer; } -/* styling background image & texts on the image */ - -.big-image { - width: 97%; - margin: 0; +.logo-top { + width: 25%; + padding: 10px; } -.container { - position: relative; +/* styling background image & texts on the image */ + +.hero { + background-image: url("https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Coursework-Week2/master/img/first-background.jpg"); + background-size: cover; + background-position: 60% 100%; + background-repeat: no-repeat; + padding: 150px 50px; + display: flex; + flex-direction: column; + align-items: center; + color: #fff; + font-family: "Roboto", Arial, sans-serif; text-align: center; } + h1 { - font-family: "Roboto", sans-serif; - font-weight: 50; - font-size: 6vw; - font-stretch: condensed; + font-weight: 300; + font-size: 42px; + margin-bottom: 0; } -h5 { - font-family: "Roboto", sans-serif; - font-weight: 50; - font-size: 2.5vw; - font-stretch: condensed; - width: 100%; -} -.text-container { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - text-align: center; + +p { + font-size: 24px; + font-weight: 300; +} + +.hero p { + margin-bottom: 50px; } -.button1 { - background-color: orangered; - border: 2vw solid orangered; - border-radius: 3%; - width: 30%; - font-size: 1.5vw; + +button { + background-color: #ef5d07; + border: 0; + border-radius: 3px; + color: #fff; + font-family: "Roboto", Arial, sans-serif; + font-weight: 400; + padding: 10px 20px; } .article-summary { text-align: center; } -#title-main { +.title-main { color: rgb(70, 69, 69); text-align: center; margin-top: 10vw; + margin-bottom: 10vw; } .icon { width: 15vw; @@ -114,32 +129,18 @@ h5 { font-size: 2vw; color: rgb(70, 69, 69); } -#item { +.item { vertical-align: top; display: inline-block; text-align: center; width: 30vw; } /* styling the footer */ -.footer { - bottom: 0; - margin-top: 10vw; -} -.social { - max-height: 2vw; - width: 2vw; - padding: 0.2vw; - border-radius: 5vw; - border: solid #dddddd 0.1vw; - margin: 2vw; -} -.social_icon { - max-height: 2vw; - width: auto; -} -p { - text-align: center; - margin-top: 3vw; + +footer { + flex-direction: column; + justify-content: center; + margin-top: 100px; } hr { width: 80%; @@ -148,13 +149,26 @@ hr { color: rgb(196, 196, 196); background-color: rgb(196, 196, 196); } - -footer { +.social { display: flex; justify-content: center; } +.social_icon { + max-height: 2vw; + width: 2vw; + padding: 0.2vw; + border-radius: 5vw; + border: solid #dddddd 0.1vw; + margin-left: 5px; + margin-right: 5px; +} +p { + text-align: center; + margin-top: 1vw; + font-size: medium; +} .footer-text { - margin-top: 1vw; + margin-top: 2vw; color: rgb(196, 196, 196); } diff --git a/index.html b/index.html index b7d252224..11413e262 100755 --- a/index.html +++ b/index.html @@ -19,84 +19,77 @@
- + +
-
-
- working with your tablet -
-

- Introducing Karma -

-
- Bring WiFi with you, everywhere you go. -
- -
-
-
+
+
+

Introducing Karma

+

Bring wifi with you, everywhere you go.

+ +
+
-

Everyone needs a little Karma

+

Everyone needs a little Karma

-
- PC +
+ graffiti of a PC Internet for all devices
-
- coffee +
+ graffiti of an steaming cup of coffee Boost your productivity
-
- re-fill +
+ graffiti of re-fill Pay as you go
- -
+
+ + +