diff --git a/css/normalize.css b/css/normalize.css
index 957605911..14fa92997 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,9 +14,9 @@
*/
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 */
}
/**
@@ -26,7 +24,7 @@ html {
*/
body {
- margin: 0;
+ margin: 0;
}
/* HTML5 display definitions
@@ -52,7 +50,7 @@ menu,
nav,
section,
summary {
- display: block;
+ display: block;
}
/**
@@ -64,8 +62,8 @@ audio,
canvas,
progress,
video {
- display: inline-block; /* 1 */
- vertical-align: baseline; /* 2 */
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
}
/**
@@ -74,8 +72,8 @@ video {
*/
audio:not([controls]) {
- display: none;
- height: 0;
+ display: none;
+ height: 0;
}
/**
@@ -85,7 +83,7 @@ audio:not([controls]) {
[hidden],
template {
- display: none;
+ display: none;
}
/* Links
@@ -96,7 +94,7 @@ template {
*/
a {
- background-color: transparent;
+ background-color: transparent;
}
/**
@@ -105,7 +103,7 @@ a {
a:active,
a:hover {
- outline: 0;
+ outline: 0;
}
/* Text-level semantics
@@ -116,7 +114,7 @@ a:hover {
*/
abbr[title] {
- border-bottom: 1px dotted;
+ border-bottom: 1px dotted;
}
/**
@@ -125,7 +123,7 @@ abbr[title] {
b,
strong {
- font-weight: bold;
+ font-weight: bold;
}
/**
@@ -133,7 +131,7 @@ strong {
*/
dfn {
- font-style: italic;
+ font-style: italic;
}
/**
@@ -142,8 +140,8 @@ dfn {
*/
h1 {
- font-size: 2em;
- margin: 0.67em 0;
+ font-size: 2em;
+ margin: 0.67em 0;
}
/**
@@ -151,8 +149,8 @@ h1 {
*/
mark {
- background: #ff0;
- color: #000;
+ background: #ff0;
+ color: #000;
}
/**
@@ -160,7 +158,7 @@ mark {
*/
small {
- font-size: 80%;
+ font-size: 80%;
}
/**
@@ -169,18 +167,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 +189,7 @@ sub {
*/
img {
- border: 0;
+ border: 0;
}
/**
@@ -199,7 +197,7 @@ img {
*/
svg:not(:root) {
- overflow: hidden;
+ overflow: hidden;
}
/* Grouping content
@@ -210,7 +208,7 @@ svg:not(:root) {
*/
figure {
- margin: 1em 40px;
+ margin: 1em 40px;
}
/**
@@ -218,9 +216,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 +226,7 @@ hr {
*/
pre {
- overflow: auto;
+ overflow: auto;
}
/**
@@ -239,8 +237,8 @@ code,
kbd,
pre,
samp {
- font-family: monospace, monospace;
- font-size: 1em;
+ font-family: monospace, monospace;
+ font-size: 1em;
}
/* Forms
@@ -263,9 +261,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 +271,7 @@ textarea {
*/
button {
- overflow: visible;
+ overflow: visible;
}
/**
@@ -285,7 +283,7 @@ button {
button,
select {
- text-transform: none;
+ text-transform: none;
}
/**
@@ -300,8 +298,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 +308,7 @@ input[type="submit"] {
button[disabled],
html input[disabled] {
- cursor: default;
+ cursor: default;
}
/**
@@ -319,8 +317,8 @@ html input[disabled] {
button::-moz-focus-inner,
input::-moz-focus-inner {
- border: 0;
- padding: 0;
+ border: 0;
+ padding: 0;
}
/**
@@ -329,7 +327,7 @@ input::-moz-focus-inner {
*/
input {
- line-height: normal;
+ line-height: normal;
}
/**
@@ -342,8 +340,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 +352,7 @@ input[type="radio"] {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
- height: auto;
+ height: auto;
}
/**
@@ -364,10 +362,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 +376,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 +384,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 +395,8 @@ fieldset {
*/
legend {
- border: 0; /* 1 */
- padding: 0; /* 2 */
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
}
/**
@@ -406,7 +404,7 @@ legend {
*/
textarea {
- overflow: auto;
+ overflow: auto;
}
/**
@@ -415,7 +413,7 @@ textarea {
*/
optgroup {
- font-weight: bold;
+ font-weight: bold;
}
/* Tables
@@ -426,11 +424,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 5cb025cef..c4936a84e 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,145 @@
-
- /* 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;
+ background-size: contain;
+}
+.background {
+ background-image: url("../img/first-background.jpg");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ height: 60vh;
+ position: top;
+}
+.navbar {
+ background-color: white;
+ margin: 0px;
+ padding: 0px;
+ list-style-type: none;
+ text-align: right;
+}
+.nav-item {
+ padding: 0px;
+ margin: 10px;
+ color: gray;
+ display: inline-block;
+}
+.nav-item:hover {
+ color: orange;
+}
+#nav-link1 {
+ color: black;
+}
+.logo {
+ margin: 5px;
+ padding: 0px;
+ width: 30px;
+ float: left;
+}
+nav select {
+ display: none;
+}
+h1 {
+ margin: 0px;
+ color: white;
+ text-align: center;
+ font-weight: normal;
+}
+p {
+ color: white;
+ text-align: center;
+}
+div {
+ color: white;
+ text-align: center;
+ border: 0px;
+}
+button {
+ background-color: rgb(240, 128, 0);
+}
+.p {
+ text-align: center;
+ color: black;
+}
+
+.all-icon {
+ display: flex;
+ position: relative;
+ justify-content: space-evenly;
+}
+img{
+ max-width: 100px;
+ height:auto;
+
+}
+.p1 {
+ text-align: center;
+ color: black;
+}
+.nav-img {
+ display: none;
+}
+h6{
+ text-align: center;
+ font-weight: normal;
+}
+.social{
+ display:flex;
+ margin: 50px;
+ padding: 0px;
+ margin:auto;
+ justify-content: center;
+
+}
+
+footer img{
+ margin: 10px;
+ height: auto;
+ max-width: 30px;
+
+}
+h5{
+ color: gray;
+ text-align: center;
+ font-weight: normal;
+}
+
+@media screen and (max-width: 675px) {
+ nav ul {
+ display: none;
+ }
+ .nav-img {
+ float: right;
+ width: 100px;
+ height: 100px;
+ display: block;
+ }
+ .background {
+ height: fit-content;
+ }
+ .all-icon {
+ display: block;
+ position: top;
+ }
+ .logo {
+ width: 15px;
+ position: top;
+ margin: 5px;
+ }
+ .background {
+ position: relative;
+ top: 40px;
+ }
+
}
/**
* Add your custom styles below
*
* Remember:
- * - Be organised, use comments and separate your styles into meaningful chunks
+ * - Be organized, 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'
+ * - When using flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/
-
-
diff --git a/index.html b/index.html
index 3e742ef04..f204f6c7b 100755
--- a/index.html
+++ b/index.html
@@ -1,19 +1,83 @@
-
-
-
+
+
+
Karma
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ 
+
+
+
+
+
introducing karma
+
+
Bring WI-FI with you everywhere you go
+
+
-
-
+
+ Everyone needs a little karma
+
+
+
+
Internet for all devices
+
+
+
+
Boost your productivity
+
+
+
+
Pay as you go
+
+