iggajewski · iggajewski · May 23, 2020 · May 22, 2020 · May 22, 2020 · May 22, 2020
diff --git a/week2/1-flexbox-froggy/Screenshot_2020-05-20 Flexbox Froggy.png b/week2/1-flexbox-froggy/Screenshot_2020-05-20 Flexbox Froggy.png
diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css
@@ -17,3 +17,174 @@ body {
  */
 
 
+/*navbar CSS */
+.navbar {
+    position: fixed;
+    top: 0px;
+    background-color: #fff;
+    height: 4.375rem;
+    width: 100%;
+    border-bottom: 1px solid #ddd;
+    display: flex;
+    justify-content: center;
+}
+
+nav > .content {
+    height: 100%;
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.logo {
+    width: 26px;
+}
+
+.navbar ul {
+    display: flex;
+    align-items: center;
+    list-style: none; 
+}
+
+.navbar ul li {
+    margin-left: 1.563rem;
+}
+
+.navbar ul li a {
+    color: #000;
+    text-decoration: none;
+}
+
+ /*TODO: MAKE THE ACTIVE LINK WORK */
+ #active a {
+    color: #4c5058;
+    font-weight: bold;
+}
+
+/* Header CSS */
+header {
+    height: 46rem;
+    background-image: url("../img/first-background.jpg");
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header > .content {
+    color: #fff;
+    text-align: center;   
+}
+
+h1 {
+    font-weight: 300;
+    font-size: 3rem;
+}
+
+h3 {
+    font-weight: 300;
+    font-size: 1.375rem;
+}
+
+#header-button {
+    background-color: #f15a29;
+    font-size: 1.125rem;
+    padding: 1rem 1.5rem;
+    border-style: none;
+    border-radius: 4px;
+}
+
+#header-button:hover {
+    background-color: #d9400e;
+}
+
+/* Features section CSS */
+#section-1 {
+    display:flex;
+    justify-content: center;
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+}
+
+h2 {
+    font-size: 2.5rem;
+    font-weight: 300;
+}
+
+#section-1 > .content {
+    text-align: center;
+    width: 60%;
+}
+
+.features {
+    display: flex;
+    justify-content: center;
+}
+
+.features > figure {
+    width: 33.33%;
+    font-size: 1.375rem;
+    font-weight: 400;
+}  
+
+.feature-img {
+    width: 127px;
+    height: 127px;
+    margin-bottom: 2.5rem;
+}
+
+/* footer CSS */
+footer
+{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+footer > .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 9.25rem;
+}
+
+#horizontal {
+    width: 60%;
+    border: 0;
+    border-top: 1px solid #eaebec;
+    margin: 1.313rem 0;
+
+}
+
+h4 {
+    font-weight: 300;
+    font-size: 1rem;
+}
+
+.social {
+    display: flex;
+}
+
+.social > a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid #eaebec;
+    border-radius: 1.25rem;
+    margin-left: 5px;
+    margin-right: 5px;
+    }
+
+.social > a > img {
+    width: 16px;
+    height: 16px;
+}
+
+.copyright {
+    font-size: 0.875rem;
+    color: #a9adb5;
+}
diff --git a/week2/2-website/img/iconfinder_1_Facebook2_colored_svg_5296500.svg b/week2/2-website/img/iconfinder_1_Facebook2_colored_svg_5296500.svg
diff --git a/week2/2-website/img/iconfinder_1_Instagram_colored_svg_1_5296765.svg b/week2/2-website/img/iconfinder_1_Instagram_colored_svg_1_5296765.svg
diff --git a/week2/2-website/img/iconfinder_1_Twitter_colored_svg_5296514.svg b/week2/2-website/img/iconfinder_1_Twitter_colored_svg_5296514.svg
diff --git a/week2/2-website/index.html b/week2/2-website/index.html
@@ -1,21 +1,78 @@
 <!DOCTYPE html>
+
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Karma</title>
-    <link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="css/normalize.css">
-    <!-- Add a link to your CSS file here (use the line above to guide you) -->
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
-</head>
-<body>
-
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-    <!-- All the images you need are in the 'img' folder -->
-
-</body>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Karma</title>
+        <link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
+        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="css/normalize.css">
+        <link rel="stylesheet" href="css/style.css">
+        <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+    </head>
+
+    <body>
+
+        <!-- Add your HTML markup here -->
+        <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+        <!-- All the images you need are in the 'img' folder -->
+
+        <nav class="navbar">
+            <div class="content">
+                <img class="logo" src="img/karma-logo.svg" alt="karma logo" width="26"/> <!--TODO: move width to CSS-->
+                <ul>
+                    <li id="active"><a href=#>Meet Karma</a></li>
+                    <li><a href=#>How it Works</a></li>
+                    <li><a href=#>Store</a></li>
+                    <li><a href=#>Blog</a></li>
+                    <li><a href=#>Help</a></li>
+                    <li><a href=#>Login</a></li>
+                </ul>
+            </div>
+        </nav>
+
+        <header>
+            <div class="content">
+                <h1>Introducing Karma</h1>
+                <h3>Bring WiFi with you, everywhere you go.</h3>  
+                <button id="header-button">Learn More</button>  
+            </div>
+
+        </header>
+
+        <section id="section-1">
+            <div class="content">
+                <h2>Everyone needs a little Karma.</h2>
+                <div class="features">
+                    <figure>
+                        <img class="feature-img" src="img/icon-devices.svg" alt="Internet for all devices image">
+                        <figcaption>Internet for all devices</figcaption>
+                    </figure>
+                    <figure>
+                        <img class="feature-img" src="img/icon-coffee.svg" alt="Boost your productivity image">
+                        <figcaption>Boost your productivity</figcaption>
+                    </figure>
+                    <figure>
+                        <img class="feature-img" src="img/icon-refill.svg" alt="Pay as You Go image">
+                        <figcaption>Pay as You Go</figcaption>
+                    </figure>
+                </div>
+            </div>
+        </section>
+
+        <footer> 
+            <hr id="horizontal">
+            <div class="content">
+                <h4>Join us on</h4>
+                <div class="social">
+                    <a class="twitter"><img class="social-logo" src="img/iconfinder_1_Twitter_colored_svg_5296514.svg" alt="twitter"></a>
+                    <a class="facebook"><img class="social-logo" src="img/iconfinder_1_Facebook2_colored_svg_5296500.svg" alt="facebook"></a>
+                    <a class="instagram"><img class="social-logo" src="img/iconfinder_1_Instagram_colored_svg_1_5296765.svg" alt="instagram"></a> 
+                </div>
+                <p class="copyright">© Karma Mobility, Inc.</p>
+            </div>
+        </footer>
+
+    </body>
 </html>