diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..de6bbe050
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/style.css b/css/style.css
index 5cb025cef..523bb4c5d 100755
--- a/css/style.css
+++ b/css/style.css
@@ -4,8 +4,9 @@
body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
+ display: flex;
+ flex-direction: column;
}
-
/**
* Add your custom styles below
*
@@ -16,4 +17,365 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/
+/* header, main, .cases, footer {
+ display: flex;
+ flex-direction: column;
+} */
+
+ul {
+ list-style: none;
+ display: flex;
+}
+
+.content {
+ padding: 0 0.938rem;
+ margin: 0 auto;
+ min-width: 37.5rem;
+ display: flex;
+ flex-direction: column;
+}
+
+/* top nav*/
+header .content {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+}
+
+.top-nav li {
+ margin-left: 1rem;
+ color: #838994;
+ font-size: 1.04rem;
+}
+
+.top-nav .active{
+ color: #4c5058;
+ font-weight: 500;
+}
+
+.top-nav li:hover {
+ cursor: pointer;
+ color: #333333;
+}
+
+/* main */
+main {
+ background-image: url('img/first-background.jpg');
+ background-position: center bottom;
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: 45.938rem;
+ overflow: auto;
+}
+
+main h1,
+main h3 {
+ color: white;
+ text-align: center;
+ font-weight: 300;
+}
+
+main h1 {
+ margin-top: 17.5rem;
+ font-size: 3rem;
+}
+
+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;
+ text-align: center;
+}
+button:hover {
+ background-color: #d9400e;
+ border-color: #cf3d0e;
+ cursor: pointer;
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+}
+
+/* cases */
+/*.cases .content {
+ display: flex;
+ justify-content: center;
+}*/
+.cases .content h2 {
+ font-size: 2.75rem;
+ margin: 1.625rem 0 3.125rem;
+ font-weight: 300;
+ text-align: center;
+}
+
+.devices {
+ justify-content: space-evenly;
+ text-align: center;
+}
+
+/* footer */
+footer .content {
+ background-color: #fff;
+ text-align: center;
+ align-items: center;
+}
+
+.bottom-nav li {
+ border-radius: 1.25rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ border: 1px solid #eaebec;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+footer .bottom-nav li:hover {
+ cursor: pointer;
+}
+
+footer .twitter {
+ color: #55acee;
+}
+
+footer .facebook {
+ color: #4c66a4;
+}
+
+footer .instagram {
+ color: #3f729b;
+}
+
+
+footer .copy {
+ font-size: 0.9rem;
+ font-weight: 300;
+ color: #838994;
+}
+
+@media (min-width: 48rem) {
+ .content {
+ width: 46rem;
+ }
+}
+@media (min-width: 62rem) {
+ .content {
+ width: 60rem;
+ }
+}
+@media (min-width: 75rem) {
+ .content {
+ width: 60%;
+ }
+}
+/**
+ * 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..d5328bb2a 100755
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
@@ -9,13 +10,187 @@
-
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+ Introducing Karma
+
+
+ Bring WiFi with you, everywhere you go,
+
+
+
+
+
+
+ Everyone needs a little Karma
+
+
+ -
+
+
+ Internet for all devices
+
+
+ -
+
+
+ Boost your productivity
+
+
+ -
+
+
+ Pay as You Go
+
+
+
+