From 57f29c8f587d62c47135dad7f03132b32f2dddce Mon Sep 17 00:00:00 2001 From: Cecilia Date: Sun, 15 Nov 2020 12:58:17 +0000 Subject: [PATCH 1/5] added HTML and style --- css/style.css | 352 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 67 ++++++++++ 2 files changed, 415 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..a249cbd2a 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; } /** @@ -16,4 +15,349 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; +} +/** + * HTML5 display-role reset for older browsers + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +/** + * End of Reset + */ +/** + * Start of Custom Styles + */ +body { + /*background-color: LightGray;*/ + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; +} +div { + /*border: 1px solid Chocolate;*/ +} +.content { + padding: 0 0.938rem; + margin: 0 auto; + min-width: 37.5rem; +} +:focus { + outline: none; +} + +/** + * Navigation Section + */ +.top-navigation { + background-color: #fff; + position: fixed; + width: 100%; + border-bottom: 1px solid #ddd; + z-index: 9999; +} +.top-navigation > .content { + height: 4.375rem; +} +.top-navigation .logo { + height: 4.375rem; +} +.top-navigation .links { + float: right; + color: #838994; + font-size: 1.04rem; + margin-top: 1.7rem; +} +.top-navigation .links li { + display: inline-block; + margin-left: 1.563rem; +} +.top-navigation .links li.active { + color: #4c5058; + font-weight: 500; +} +.top-navigation .links li:hover { + cursor: pointer; + color: #333333; +} +/** + * Introduction Section + */ +.introduction { + background-image: url("../img/first-background.jpg"); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 45.938rem; + overflow: auto; +} +.introduction h1, +.introduction h3 { + color: white; + text-align: center; + font-weight: 300; +} +.introduction h1 { + margin-top: 17.5rem; + font-size: 3.125rem; +} +.introduction h3 { + margin-top: 1.25rem; + font-size: 1.563rem; +} +/** + * The buttons + */ +.introduction .buttons { + color: white; + text-align: center; + margin-top: 1.563rem; +} +.introduction .half { + width: 49%; + padding: 0 0.938rem; + display: inline-block; + vertical-align: bottom; + font-size: 1.125rem; + line-height: 1.2; +} + +/** + * The Three Case Images + */ +.cases { + background-color: #fff; + overflow: hidden; + padding-bottom: 5rem; +} +.cases .content { + margin-top: 7.875rem; + padding: none; + color: #1d1e21; + text-align: center; +} +.cases h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; +} +.cases .devices > li { + width: 33.3333333%; + float: left; +} +.cases .devices h3 { + font-weight: 400; + font-size: 1.563rem; + margin: 2.5rem 0px 1.875rem; +} +.cases .devices p { + font-weight: 300; + font-size: 1.313rem; +} + +/** + * Footer + */ +.social { + background-color: #fff; + overflow: auto; + padding-bottom: 9.375rem; + text-align: center; +} +.social hr { + border: 0; + border-top: 1px solid #eaebec; + margin: 1.313rem 0; +} +.social .icons > li { + border-radius: 1.25rem; + width: 2.5rem; + height: 2.5rem; + display: inline-block; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; +} +.social .icons > li:hover { + cursor: pointer; +} +.social .twitter { + color: #55acee; +} +.social .facebook { + color: #4c66a4; +} +.social .instagram { + color: #3f729b; +} +.social .copy { + font-size: 0.9rem; + font-weight: 300; + color: #838994; +} + +/** + * Responsive Design + */ +@media (min-width: 48rem) { + .content { + width: 46rem; + } +} +@media (min-width: 62rem) { + .content { + width: 60rem; + } +} +@media (min-width: 75rem) { + .content { + width: 60%; + } +} + +/* Chrome, Safari, Opera */ +@-webkit-keyframes bounce { + 0%, + 100% { + margin-top: 0px; + } + 50% { + margin-top: 2rem; + } +} +/* Standard syntax */ +@keyframes bounce { + 0%, + 100% { + margin-top: 0px; + } + 50% { + margin-top: 2rem; + } +} + +/** + * button + */ +button { + width: 9.688rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; +} +button:hover { + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} diff --git a/index.html b/index.html index 876b59d64..a0290ef75 100755 --- a/index.html +++ b/index.html @@ -16,6 +16,73 @@ + +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
+ +
+
+
+
+
+

Everyone needs a little Karma.

+
    +
  • + Internet for all devices image +
    +

    Internet for all devices

    +
    +
    • +
  • + Boost your productivity image +
    +

    Boost your productivity

    +
    +
    • +
  • + Pay as You Go image +
    +

    Pay as You Go

    +
    +
    • +
+
+
+ From d5fb69c92cea7cbc3ab2b023a373ce9fa51898b0 Mon Sep 17 00:00:00 2001 From: Cecilia Date: Sun, 15 Nov 2020 15:13:41 +0000 Subject: [PATCH 2/5] First commit --- css/style.css | 345 +++++++++++--------------------------------------- index.html | 9 +- 2 files changed, 77 insertions(+), 277 deletions(-) diff --git a/css/style.css b/css/style.css index a249cbd2a..8a6fb77fc 100755 --- a/css/style.css +++ b/css/style.css @@ -1,279 +1,144 @@ -/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +/* General styles */ body { + display: flex; + flex-direction: column; font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; } -/** - * 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' - */ - -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - box-sizing: border-box; -} -/** - * HTML5 display-role reset for older browsers - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} -body { - line-height: 1; -} -ol, ul { list-style: none; } -/** - * End of Reset - */ -/** - * Start of Custom Styles - */ -body { - /*background-color: LightGray;*/ - font-family: "Roboto", sans-serif; - -webkit-font-smoothing: antialiased; -} -div { - /*border: 1px solid Chocolate;*/ + +ul li { + display: inline-block; } + .content { - padding: 0 0.938rem; + padding: 0 0.9rem; margin: 0 auto; min-width: 37.5rem; } -:focus { - outline: none; -} -/** - * Navigation Section - */ -.top-navigation { - background-color: #fff; - position: fixed; - width: 100%; - border-bottom: 1px solid #ddd; - z-index: 9999; +/* Navbar styles */ + +.top-navigation .content { + display: flex; + flex-direction: row; + justify-content: space-around; } -.top-navigation > .content { - height: 4.375rem; + +.logo, +.links { + display: inline-flex; } -.top-navigation .logo { + +.logo { height: 4.375rem; } -.top-navigation .links { - float: right; + +.links { + justify-items: space-around; + align-items: center; color: #838994; - font-size: 1.04rem; - margin-top: 1.7rem; } -.top-navigation .links li { - display: inline-block; + +.links > li { margin-left: 1.563rem; } -.top-navigation .links li.active { + +.active { color: #4c5058; font-weight: 500; } -.top-navigation .links li:hover { - cursor: pointer; - color: #333333; -} -/** - * Introduction Section - */ +/* Introduction styles */ + .introduction { background-image: url("../img/first-background.jpg"); background-position: center bottom; background-repeat: no-repeat; background-size: cover; - height: 45.938rem; + height: 46rem; overflow: auto; } + .introduction h1, .introduction h3 { color: white; text-align: center; font-weight: 300; } + .introduction h1 { margin-top: 17.5rem; - font-size: 3.125rem; + font-size: 3rem; } -.introduction h3 { - margin-top: 1.25rem; - font-size: 1.563rem; -} -/** - * The buttons - */ -.introduction .buttons { + +button { + width: 10rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; color: white; + font-size: 1.1rem; text-align: center; - margin-top: 1.563rem; } -.introduction .half { - width: 49%; - padding: 0 0.938rem; - display: inline-block; - vertical-align: bottom; - font-size: 1.125rem; - line-height: 1.2; + +.buttons { + display: flex; + justify-content: center; } -/** - * The Three Case Images - */ +/* Cases styles */ .cases { background-color: #fff; overflow: hidden; padding-bottom: 5rem; } -.cases .content { - margin-top: 7.875rem; - padding: none; - color: #1d1e21; - text-align: center; -} + .cases h2 { font-size: 2.75rem; margin: 1.625rem 0 3.125rem; font-weight: 300; } -.cases .devices > li { - width: 33.3333333%; - float: left; + +.cases .content { + margin-top: 8rem; + color: #1d1e21; + text-align: center; } + .cases .devices h3 { font-weight: 400; - font-size: 1.563rem; - margin: 2.5rem 0px 1.875rem; -} -.cases .devices p { - font-weight: 300; - font-size: 1.313rem; + font-size: 1.5rem; + margin: 2.5rem 0px 1.9rem; } -/** - * Footer - */ +/* Footer styles */ + .social { background-color: #fff; overflow: auto; - padding-bottom: 9.375rem; + padding-bottom: 9rem; text-align: center; } -.social hr { - border: 0; - border-top: 1px solid #eaebec; - margin: 1.313rem 0; + +.social .copy { + font-size: 0.9rem; + font-weight: 300; + color: #838994; +} + +.social .icons { + display: flex; + justify-content: center; } + .social .icons > li { border-radius: 1.25rem; width: 2.5rem; @@ -284,6 +149,7 @@ div { padding: 0.625rem 0; text-align: center; } + .social .icons > li:hover { cursor: pointer; } @@ -296,68 +162,3 @@ div { .social .instagram { color: #3f729b; } -.social .copy { - font-size: 0.9rem; - font-weight: 300; - color: #838994; -} - -/** - * Responsive Design - */ -@media (min-width: 48rem) { - .content { - width: 46rem; - } -} -@media (min-width: 62rem) { - .content { - width: 60rem; - } -} -@media (min-width: 75rem) { - .content { - width: 60%; - } -} - -/* Chrome, Safari, Opera */ -@-webkit-keyframes bounce { - 0%, - 100% { - margin-top: 0px; - } - 50% { - margin-top: 2rem; - } -} -/* Standard syntax */ -@keyframes bounce { - 0%, - 100% { - margin-top: 0px; - } - 50% { - margin-top: 2rem; - } -} - -/** - * button - */ -button { - width: 9.688rem; - background-color: #f15a29; - border-color: #f15a29; - text-shadow: none; - border-style: none; - border-radius: 4px; - padding: 1rem 1.5rem; - color: white; - font-size: 1.125rem; -} -button:hover { - background-color: #d9400e; - border-color: #cf3d0e; - cursor: pointer; -} diff --git a/index.html b/index.html index a0290ef75..9169120e2 100755 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ Karma - - + + @@ -18,6 +18,7 @@
@@ -65,7 +65,6 @@

Pay as You Go

-
Join us on
- +

© Karma Mobility, Inc. - +

From c66212050547f820f10a58c61c801dd02ac63fbc Mon Sep 17 00:00:00 2001 From: Cecilia Date: Mon, 16 Nov 2020 14:02:10 +0000 Subject: [PATCH 4/5] Fixed cases alignment --- css/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 3e8280981..f2ff7e32a 100755 --- a/css/style.css +++ b/css/style.css @@ -15,11 +15,6 @@ ul li { display: inline-block; } -.content { - padding: 0 0.9rem; - margin: 0 auto; - min-width: 37.5rem; -} h5 { font-size: 1rem; text-align: center; @@ -132,6 +127,11 @@ button { margin: 2.5rem 0px 1.9rem; } +.cases .devices > li { + width: 33.3333333%; + float: left; +} + /* Footer styles */ .social { From d4fb02a10c8e6190b95aa1608f605ba08824fc7a Mon Sep 17 00:00:00 2001 From: Cecilia Date: Mon, 16 Nov 2020 14:15:47 +0000 Subject: [PATCH 5/5] Added button:hover pseudo classs --- css/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/css/style.css b/css/style.css index f2ff7e32a..1a5be2733 100755 --- a/css/style.css +++ b/css/style.css @@ -97,6 +97,12 @@ button { text-align: center; } +button:hover { + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} + .buttons { display: flex; justify-content: center;