diff --git a/css/style.css b/css/style.css
index 5cb025cef..043764ee2 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,10 +1,216 @@
- /* 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-size: 15px;
+}
+/* Header Section */
+header {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+}
+header img {
+ height: 2.4rem;
+ padding: 1rem 0 1rem 2rem;
+}
+
+/* Navigation Section */
+
+nav ul {
+ display: flex;
+ list-style: none;
+}
+
+nav ul a {
+ text-decoration: none;
+ color: #9c9fa7;
+ padding: 1rem;
+}
+nav ul a:focus, nav ul a:hover {
+ color: #e0633a;
}
+li:first-child a {
+ color: rgb(117, 114, 114);
+ font-weight: 500;
+}
+
+/* Main Content Section */
+
+.hero {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-image: url("../img/first-background.jpg");
+ max-width: 73rem;
+ height: 76vh;
+ margin: 0 auto;
+ background-position-x: -200px;
+ background-position-y: -25px;
+ background-repeat: no-repeat;
+}
+.hero h1, .hero h2 {
+ color: white;
+ font-weight: 100;
+ margin: 0;
+}
+.hero h1 {
+ font-size: 3.5rem;
+}
+.hero h2 {
+ letter-spacing: 2px;
+ padding: 1rem 0 3.5rem;
+}
+.hero button {
+ background-color: #d35a32;
+ color: white;
+ padding: 0.8rem 1.2rem;
+ border-radius: 5%;
+ border: none;
+}
+
+/* Features Icon Section */
+
+.features {
+ width: 44rem;
+ margin: 0 auto;
+ padding: 5rem 0;
+ box-shadow: 0px 1px 0px #eae5e5;
+}
+.features h2 {
+ color: black;
+ text-align: center;
+ font-weight: 300;
+ font-size: 1.8rem;
+ padding-bottom: 3rem;
+}
+.icon-container {
+ display: flex;
+}
+.icons {
+ padding: 0 2rem;
+}
+.icons p {
+ width: 11.5rem;
+}
+.features img {
+ width: 10rem;
+ height: 6rem;
+}
+
+/* Footer Section */
+
+footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+footer section {
+ display: flex;
+}
+footer img {
+ height: 1.6rem;
+ padding: 0.3rem 0;
+ border-radius: 100%;
+}
+footer h3 {
+ font-size: 1rem;
+ font-weight: 400;
+}
+footer small {
+ padding: 1rem;
+ color: #92949b;
+}
+
+/* Media Queries */
+@media screen and (max-width: 375px) {
+ body{
+ width: fit-content;
+ }
+ main {
+ display: flex;
+ flex-direction: column;
+
+ }
+ header {
+ width: 100vh;
+ }
+ header nav ul {
+ overflow: hidden;
+ height:0;
+ }
+ header nav ul.open {
+ height: auto;
+ font-size: 1.8rem;
+ margin-top: 3rem;
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid grey;
+ border-top: 1px solid grey;
+ }
+ header nav ul li {
+ display: block;
+ width: 100%;
+ margin:0;
+ }
+ header nav ul li a {
+ display: block;
+ padding: 10px;
+ margin:0;
+ }
+ header img{
+ height: 3.4rem;
+ padding: 2rem 0 1rem 4rem;
+ }
+ .hero {
+ width: 46rem;
+ height: 116vh;
+
+ background-position: center;
+ }
+ .icon-container {
+ flex-direction: column;
+ align-items: center;
+ }
+ .features {
+ width: 46rem;
+ }
+ .features h2{
+ font-size: 3.6rem;
+ }
+ footer {
+ width: 50rem;
+ height: 4vh;
+ }
+ .icons img{
+ width: 21.7rem;
+ height: 7rem;
+ }
+ .icons p{
+ font-size: 2rem;
+ width: 21rem;
+ text-align: center;
+ }
+ .burger-nav {
+ display: block;
+ height: 40px;
+ width: 100%;
+ background: url("../img/menu-hamburger.svg") no-repeat 98% center;
+ background-size: 2.5rem;
+ cursor: pointer;
+ }
+ footer h3{
+ font-size: 1.2rem;
+ }
+ footer img{
+ height: 2.4rem;
+ }
+ footer small{
+ font-size: 1.2rem;
+ }
+}
+
/**
* Add your custom styles below
diff --git a/index.html b/index.html
index 3e742ef04..8c1afb901 100755
--- a/index.html
+++ b/index.html
@@ -1,19 +1,69 @@
+
+
-
-
+
+
Karma
-
-
-
-
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 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
+
+
+
+
-
-
-
+
+
+
-
+