From 0b6b7b853de8a8d6bd9c8ef704788150c9792bb8 Mon Sep 17 00:00:00 2001 From: PERicci Date: Wed, 27 Sep 2023 16:36:14 +0100 Subject: [PATCH 01/16] html structure done, header almost done, page width done --- css/style.css | 122 +++++++++++++++++++++++++++++++++++++++++++++----- index.html | 49 +++++++++++++++++--- 2 files changed, 152 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..3083e4342 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,117 @@ +/* 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; +} + +/* Variables */ +:root { + --color-brand: #e0633a; + --color-light: #ffffff; + --color-dark: #3c3c3c; + --color-mid: #8d8d8d; + --color-cr: #cccccc; + + --fs-h1: 3rem; + --fs-h2: 2.25rem; + --fs-h3: 1.75rem; + --fs-navbar: 1.25rem; + --fs-p: 1rem; + --fs-obs: 0.875rem; + --fs-notation: 0.75rem; +} + +/* General */ body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + padding: 0; + margin: 0; + background-color: var(--color-dark); +} + +h1, +h2, +h3 { +} + +h1 { + font-size: var(--fs-h1); + line-height: calc(var(--fs-h1) * 1.5); +} + +h2 { + font-size: var(--fs-h2); + line-height: calc(var(--fs-h2) * 1.5); +} + +h3 { + font-size: var(--fs-h3); + line-height: calc(var(--fs-h3) * 1.5); +} + +p { + font-size: var(--fs-p); + line-height: calc(var(--fs-p) * 1.5); +} + +a:any-link { + color: var(--color-mid); + text-decoration: none; + transition: all 0.2s; } -/** - * 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' - */ +a:hover { + color: var(--color-brand); + transition: all 0.2s; +} + +/* Header */ + +header { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + padding: 1.25rem 8%; + margin: 0 3%; + background-color: var(--color-light); +} + +header nav { + width: 55%; + font-size: var(--fs-navbar); +} + +header img { + height: 3rem; +} + +#navbar { + display: flex; + justify-content: space-between; + list-style: none; + padding: 0; + margin: 0; + color: var(--color-mid); +} + +.navbar__item:first-child a { + font-weight: bold; + color: var(--color-dark); +} + +/* Main */ + +main { + margin: 0 3%; +} + +/* Footer */ + +footer { + margin: 0 3%; +} diff --git a/index.html b/index.html index 3e742ef04..8f65e706d 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,13 +8,47 @@ - + - - - - - + +
+ Karma Logo + +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ Learn More +
+
+

Everyone needs a little Karma.

+
+
Internet for all devices
+
Boost your productivity
+
Pay as You Go
+
+
+
+ - + + \ No newline at end of file From b156438c53dde8a90c8423b82ddb6b0801804025 Mon Sep 17 00:00:00 2001 From: PERicci Date: Wed, 27 Sep 2023 16:41:20 +0100 Subject: [PATCH 02/16] background color problem solved --- css/style.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 3083e4342..b73ac6349 100755 --- a/css/style.css +++ b/css/style.css @@ -9,6 +9,7 @@ body { :root { --color-brand: #e0633a; --color-light: #ffffff; + --color-darker: #1c1c1c; --color-dark: #3c3c3c; --color-mid: #8d8d8d; --color-cr: #cccccc; @@ -24,10 +25,13 @@ body { /* General */ +html { + background-color: var(--color-darker); +} + body { - padding: 0; - margin: 0; - background-color: var(--color-dark); + background-color: var(--color-light); + margin: 0 3%; } h1, @@ -75,12 +79,10 @@ header { justify-content: space-between; align-items: center; padding: 1.25rem 8%; - margin: 0 3%; - background-color: var(--color-light); } header nav { - width: 55%; + width: 50%; font-size: var(--fs-navbar); } From 678d5b9c357e1262ca417e520f4b0dc0427077f2 Mon Sep 17 00:00:00 2001 From: PERicci Date: Wed, 27 Sep 2023 17:20:26 +0100 Subject: [PATCH 03/16] hero done --- css/normalize.css | 137 +++++++++++++++++++++++----------------------- css/style.css | 60 +++++++++++++++++--- index.html | 12 ++-- 3 files changed, 125 insertions(+), 84 deletions(-) diff --git a/css/normalize.css b/css/normalize.css index 957605911..530917b6f 100755 --- a/css/normalize.css +++ b/css/normalize.css @@ -1,4 +1,3 @@ - /** * --------------------------------------- * DO NOT EDIT THIS FILE. @@ -6,7 +5,6 @@ * --------------------------------------- */ - /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** @@ -16,17 +14,19 @@ */ html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ } /** - * Remove default margin. + * Remove default margin and padding, and change box-sizing to border-box. */ -body { - margin: 0; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } /* HTML5 display definitions @@ -52,7 +52,7 @@ menu, nav, section, summary { - display: block; + display: block; } /** @@ -64,8 +64,8 @@ audio, canvas, progress, video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -74,8 +74,8 @@ video { */ audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } /** @@ -85,7 +85,7 @@ audio:not([controls]) { [hidden], template { - display: none; + display: none; } /* Links @@ -96,7 +96,7 @@ template { */ a { - background-color: transparent; + background-color: transparent; } /** @@ -105,7 +105,7 @@ a { a:active, a:hover { - outline: 0; + outline: 0; } /* Text-level semantics @@ -116,7 +116,7 @@ a:hover { */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } /** @@ -125,7 +125,7 @@ abbr[title] { b, strong { - font-weight: bold; + font-weight: bold; } /** @@ -133,7 +133,7 @@ strong { */ dfn { - font-style: italic; + font-style: italic; } /** @@ -142,8 +142,7 @@ dfn { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; } /** @@ -151,8 +150,8 @@ h1 { */ mark { - background: #ff0; - color: #000; + background: #ff0; + color: #000; } /** @@ -160,7 +159,7 @@ mark { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -169,18 +168,18 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } /* Embedded content @@ -191,7 +190,7 @@ sub { */ img { - border: 0; + border: 0; } /** @@ -199,7 +198,7 @@ img { */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } /* Grouping content @@ -210,7 +209,7 @@ svg:not(:root) { */ figure { - margin: 1em 40px; + margin: 1em 40px; } /** @@ -218,9 +217,9 @@ figure { */ hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } /** @@ -228,7 +227,7 @@ hr { */ pre { - overflow: auto; + overflow: auto; } /** @@ -239,8 +238,8 @@ code, kbd, pre, samp { - font-family: monospace, monospace; - font-size: 1em; + font-family: monospace, monospace; + font-size: 1em; } /* Forms @@ -263,9 +262,9 @@ input, optgroup, select, textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ } /** @@ -273,7 +272,7 @@ textarea { */ button { - overflow: visible; + overflow: visible; } /** @@ -285,7 +284,7 @@ button { button, select { - text-transform: none; + text-transform: none; } /** @@ -300,8 +299,8 @@ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ } /** @@ -310,7 +309,7 @@ input[type="submit"] { button[disabled], html input[disabled] { - cursor: default; + cursor: default; } /** @@ -319,8 +318,8 @@ html input[disabled] { button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } /** @@ -329,7 +328,7 @@ input::-moz-focus-inner { */ input { - line-height: normal; + line-height: normal; } /** @@ -342,8 +341,8 @@ input { input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** @@ -354,7 +353,7 @@ input[type="radio"] { input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } /** @@ -364,10 +363,10 @@ input[type="number"]::-webkit-outer-spin-button { */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; } /** @@ -378,7 +377,7 @@ input[type="search"] { input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** @@ -386,9 +385,9 @@ input[type="search"]::-webkit-search-decoration { */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** @@ -397,8 +396,8 @@ fieldset { */ legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ + border: 0; /* 1 */ + padding: 0; /* 2 */ } /** @@ -406,7 +405,7 @@ legend { */ textarea { - overflow: auto; + overflow: auto; } /** @@ -415,7 +414,7 @@ textarea { */ optgroup { - font-weight: bold; + font-weight: bold; } /* Tables @@ -426,11 +425,11 @@ optgroup { */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } td, th { - padding: 0; -} \ No newline at end of file + padding: 0; +} diff --git a/css/style.css b/css/style.css index b73ac6349..7e0465e74 100755 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,4 @@ /* 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; @@ -8,17 +7,19 @@ body { /* Variables */ :root { --color-brand: #e0633a; + --color-brand-dark:rgb(129, 58, 34); --color-light: #ffffff; - --color-darker: #1c1c1c; + --color-darker: #151515; --color-dark: #3c3c3c; --color-mid: #8d8d8d; --color-cr: #cccccc; - --fs-h1: 3rem; - --fs-h2: 2.25rem; - --fs-h3: 1.75rem; + --fs-h1: 4.5rem; + --fs-hero-description: 2.5rem; + --fs-h2: 3.5rem; + --fs-h3: 2.5rem; --fs-navbar: 1.25rem; - --fs-p: 1rem; + --fs-p: 2rem; --fs-obs: 0.875rem; --fs-notation: 0.75rem; } @@ -37,6 +38,7 @@ body { h1, h2, h3 { + font-weight: lighter; } h1 { @@ -106,10 +108,50 @@ header img { color: var(--color-dark); } -/* Main */ +/* Hero */ -main { - margin: 0 3%; +#hero { + background: url("../img/first-background.jpg") no-repeat top center; + background-size: auto 100%; + height: 95vh; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2rem; + + color: var(--color-light); +} + +#hero p { + font-size: var(--fs-hero-description); + line-height: var(--fs-hero-description); +} + +#hero a { + margin-top: 2rem; + padding: 1.25rem 2.75rem; + border-radius: 0.25rem; + + background-color: var(--color-brand); + color: var(--color-light); + font-size: var(--fs-navbar); + + transition: all 0.2s; +} + +#hero a:hover { + background-color: var(--color-brand-dark); + transform: scale(1.05); + transition: all 0.2s; +} + +/* Benefits */ + +#benefits { + padding: 10rem 20% 6rem; + text-align: center; } /* Footer */ diff --git a/index.html b/index.html index 8f65e706d..ae650fdb0 100755 --- a/index.html +++ b/index.html @@ -29,14 +29,14 @@

Introducing Karma

Bring WiFi with you, everywhere you go.

- Learn More + Learn More
-
+

Everyone needs a little Karma.

-
-
Internet for all devices
-
Boost your productivity
-
Pay as You Go
+
+

Internet for all devices

+

Boost your productivity

+

Pay as You Go

From dcb66b941cd45077c769419d51672e0c5b8fe3f0 Mon Sep 17 00:00:00 2001 From: PERicci Date: Wed, 27 Sep 2023 18:07:40 +0100 Subject: [PATCH 04/16] social media links added, hover animation done --- css/style.css | 123 +++++++++++++++++++++++++++++++++++++++++--------- index.html | 14 +++--- 2 files changed, 109 insertions(+), 28 deletions(-) diff --git a/css/style.css b/css/style.css index 7e0465e74..444d28a68 100755 --- a/css/style.css +++ b/css/style.css @@ -7,21 +7,22 @@ body { /* Variables */ :root { --color-brand: #e0633a; - --color-brand-dark:rgb(129, 58, 34); + --color-brand-dark: rgb(129, 58, 34); --color-light: #ffffff; --color-darker: #151515; --color-dark: #3c3c3c; --color-mid: #8d8d8d; - --color-cr: #cccccc; + --color-cr: #dbdbdb; --fs-h1: 4.5rem; --fs-hero-description: 2.5rem; --fs-h2: 3.5rem; - --fs-h3: 2.5rem; + --fs-h3: 1.25rem; --fs-navbar: 1.25rem; --fs-p: 2rem; - --fs-obs: 0.875rem; - --fs-notation: 0.75rem; + --fs-obs: 1rem; + + --gap-vertical: 3rem; } /* General */ @@ -54,6 +55,7 @@ h2 { h3 { font-size: var(--fs-h3); line-height: calc(var(--fs-h3) * 1.5); + font-weight: normal; } p { @@ -125,37 +127,116 @@ header img { } #hero p { - font-size: var(--fs-hero-description); - line-height: var(--fs-hero-description); + font-size: var(--fs-hero-description); + line-height: var(--fs-hero-description); } #hero a { - margin-top: 2rem; - padding: 1.25rem 2.75rem; - border-radius: 0.25rem; - - background-color: var(--color-brand); - color: var(--color-light); - font-size: var(--fs-navbar); + margin-top: var(--gap-vertical); + padding: 1.25rem 2.75rem; + border-radius: 0.25rem; - transition: all 0.2s; + background-color: var(--color-brand); + color: var(--color-light); + font-size: var(--fs-navbar); + + transition: all 0.2s; } #hero a:hover { - background-color: var(--color-brand-dark); - transform: scale(1.05); - transition: all 0.2s; + background-color: var(--color-brand-dark); + transform: scale(1.05); + transition: all 0.2s; } /* Benefits */ #benefits { - padding: 10rem 20% 6rem; - text-align: center; + padding: 10rem 10% 8rem; + text-align: center; + width: 100%; +} + +#benefits h2 { + margin-bottom: var(--gap-vertical); +} + +#benefits-list { + display: flex; + justify-content: space-between; +} + +.benefit { + display: flex; + flex-direction: column; + align-content: space-between; +} + +.benefit img { + height: 150px; + margin-bottom: var(--gap-vertical); } /* Footer */ footer { - margin: 0 3%; + text-align: center; + display: grid; + justify-items: center; +} + +footer h3 { + width: 85%; + border-top: solid var(--color-cr) 2px; + padding-top: 2rem; +} + +#social-media-list { + display: flex; + width: 250px; + justify-content: space-evenly; + + margin: calc(var(--gap-vertical) / 2) 0; +} + +.social-media-link { + --size-media: 3rem; + height: var(--size-media); + width: var(--size-media); + border: solid var(--color-cr) 2px; + border-radius: 50%; +} + +.social-media-link img { + height: 50%; + margin: 25%; +} + +.social-media-link:hover, .social-media-link:focus { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); + transform: scale(1); + animation: pulse 2s infinite; + } + +#copyright { + font-size: var(--fs-obs); + margin-bottom: calc(var(--gap-vertical) * 1.5); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); +} + +@keyframes pulse { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); + } } diff --git a/index.html b/index.html index ae650fdb0..da3d0c2b5 100755 --- a/index.html +++ b/index.html @@ -34,18 +34,18 @@

Introducing Karma

Everyone needs a little Karma.

-

Internet for all devices

-

Boost your productivity

-

Pay as You Go

+
Illustration of devices

Internet for all devices

+
Illustration of a coffee

Boost your productivity

+
Illustration of an iPod

Pay as You Go

Join us on

-
From 05b04b1ccf600b84adfb24dde2606e12b0193b68 Mon Sep 17 00:00:00 2001 From: PERicci Date: Wed, 27 Sep 2023 18:21:13 +0100 Subject: [PATCH 05/16] minor adjustments in hover and focus effects --- css/style.css | 46 +++++++++++++++++++++++++--------------------- index.html | 6 +++--- 2 files changed, 28 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index 444d28a68..38dc8fbe9 100755 --- a/css/style.css +++ b/css/style.css @@ -69,7 +69,7 @@ a:any-link { transition: all 0.2s; } -a:hover { +a:hover, a:focus { color: var(--color-brand); transition: all 0.2s; } @@ -105,9 +105,12 @@ header img { color: var(--color-mid); } +.navbar__item:first-child a:not(:hover):not(:focus) { + color: var(--color-dark); +} + .navbar__item:first-child a { font-weight: bold; - color: var(--color-dark); } /* Hero */ @@ -212,11 +215,12 @@ footer h3 { margin: 25%; } -.social-media-link:hover, .social-media-link:focus { - box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); - transform: scale(1); - animation: pulse 2s infinite; - } +.social-media-link:hover, +.social-media-link:focus { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); + transform: scale(1); + animation: pulse 2s infinite; +} #copyright { font-size: var(--fs-obs); @@ -225,18 +229,18 @@ footer h3 { } @keyframes pulse { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); - } - - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); - } - - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); - } + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); + } } diff --git a/index.html b/index.html index da3d0c2b5..25a4e2fb6 100755 --- a/index.html +++ b/index.html @@ -43,9 +43,9 @@

Everyone needs a little Karma.

Join us on

- - - + + +
From 8dbfc3f0c6678c98336f6278d340ed99614959ab Mon Sep 17 00:00:00 2001 From: PERicci Date: Thu, 28 Sep 2023 09:23:29 +0100 Subject: [PATCH 06/16] hero background size updated --- css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 38dc8fbe9..d23e2af4a 100755 --- a/css/style.css +++ b/css/style.css @@ -117,8 +117,8 @@ header img { #hero { background: url("../img/first-background.jpg") no-repeat top center; - background-size: auto 100%; - height: 95vh; + background-size: cover; + height: 96vh; display: flex; flex-direction: column; From 374063a3d7c990e519525387530bbcc812300330 Mon Sep 17 00:00:00 2001 From: PERicci Date: Thu, 28 Sep 2023 10:37:49 +0100 Subject: [PATCH 07/16] added some responsiveness --- css/style.css | 28 +++++++++++++++++++++++++--- index.html | 2 +- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index d23e2af4a..0a5e49308 100755 --- a/css/style.css +++ b/css/style.css @@ -33,7 +33,9 @@ html { body { background-color: var(--color-light); - margin: 0 3%; + width: calc(1790px + ((100vw - 1910px) / (10 / 9))); + max-width: 100vw; + margin: 0 auto; } h1, @@ -69,7 +71,8 @@ a:any-link { transition: all 0.2s; } -a:hover, a:focus { +a:hover, +a:focus { color: var(--color-brand); transition: all 0.2s; } @@ -94,7 +97,7 @@ header img { height: 3rem; } -#navbar { +#navbar__items { display: flex; justify-content: space-between; @@ -166,7 +169,9 @@ header img { #benefits-list { display: flex; + flex-wrap: wrap; justify-content: space-between; + max-width: 100vw; } .benefit { @@ -244,3 +249,20 @@ footer h3 { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); } } + +@media screen and (max-width: 500px) { + + :root { + --fs-h1: 3.375rem; + --fs-hero-description: 2.5; + --fs-h2: 2.75rem; + --fs-h3: 1.5rem; + --fs-navbar: 1.25rem; + --fs-p: 2.5rem; + --fs-obs: 1rem; + } + + nav { + display: none; + } +} diff --git a/index.html b/index.html index 25a4e2fb6..97709a96d 100755 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
Karma Logo
+
+ +

"Wherever I am, I just don't worry about my connection anymore!"

Get Karma today
+