CodeYourFuture · carterd888 · May 17, 2020 · May 18, 2020 · May 19, 2020 · May 19, 2020
diff --git a/week2/.vscode/settings.json b/week2/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css
@@ -1,5 +1,4 @@
-
- /* 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;
@@ -16,4 +15,148 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+/* General Styles */
+
+h1 {
+    font-size: 3em;
+    font-weight: lighter;
+}
+
+h2 {
+    font-weight: lighter;
+}
+
+/* Nav Bar */
+
+nav {
+    display: flex;
+    color: gray;
+}
+
+nav ul {
+    text-decoration: none;
+    list-style: none;
+
+}
+
+nav ul li {
+    display: inline;
+    padding: 5px;
+    margin: 5px;
+}
 
+nav ul li:first-child {
+
+    font-weight: bold;
+}
+
+nav ul li:hover {
+
+    color: black;
+}
+
+.navigation-container {
+    background-color: white;
+    width: 100%;
+    text-align: center;
+    align-items: center;
+    border-bottom: 1px solid black;
+    position: fixed;
+    padding-top: 15px;
+}
+
+#karma-logo {
+    margin-left: 20%;
+    float: left;
+    height: auto;
+    width: auto;
+    padding: 15px;
+    max-height: 40px;
+    max-width: 50px;
+}
+
+/* Section 1 Style */
+
+#first-background {
+    width: 100%;
+    height: auto;
+}
+
+#introducing-karma {
+    background-image: url("../img/first-background.jpg");
+    max-width: 100%;
+    height: auto;
+    background-repeat: no-repeat;
+    color: white;
+    padding-top: 50px;
+    text-align: center;
+    padding: 270px 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+#learn-more {
+    background-color: rgb(255, 81, 0);
+    color: white;
+    box-shadow: none;
+    border: 0px;
+    padding: 10px 20px 10px 20px;
+    border-radius: 5px;
+}
+
+#learn-more:hover {
+    background-color: orangered;
+}
+
+/* Section 2 Style */
+
+#everyone-needs-karma {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    width: 50%;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.karma-flexbox-1 {
+    width: 100%;
+    align-self: center;
+    justify-self: center;
+}
+
+.karma-flexbox-2 {
+    width: 20%;
+    align-self: center;
+    justify-self: center;
+    padding: 5%;
+}
+
+
+/* Footer Style */
+
+#icon-container {
+    display: flex;
+    justify-content: center;
+}
+
+#icon-container i {
+    margin: 5px;
+    padding-top: 5px;
+}
+
+.icon-border {
+    margin: 5px;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 40px;
+    border: 1px solid lightgrey;
+}
+
+footer {
+    text-align: center;
+    font-size: 10px;
+    font-weight: bold;
+    font-family: 'Roboto', sans-serif;
+}
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">
+    <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
+    <link href="http://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">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
 </head>
-<body>
 
+<body>
+    <!-- header>nav>ul>(li>a)*6 -->
+    <header>
+        <nav>
+            <div class="navigation-container">
+                <img id="karma-logo" src="./img/karma-logo.svg" alt="karma logo">
+                <ul>
+                    <li><a href="#"></a>Meet Karma</li>
+                    <li><a href="#"></a>How it Works</li>
+                    <li><a href="#"></a>Store</li>
+                    <li><a href="#"></a>Blog</li>
+                    <li><a href="#"></a>Help</li>
+                    <li><a href="#"></a>Login</li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <section id="introducing-karma">
+        <h1>Introducing Karma</h1>
+        <h2>Bring WiFi with you, everywhere you go.</h2>
+        <button id="learn-more">Learn More</button>
+    </section>
+    <section id="everyone-needs-karma">
+        <div class="karma-flexbox-1">
+            <h1>Everyone needs a little Karma.</h1>
+        </div>
+        <div class="karma-flexbox-2">
+            <img id="device" src="./img/icon-devices.svg" alt="device logo">
+            <h2>Internet for all devices</h2>
+        </div>
+        <div class="karma-flexbox-2">
+            <img id="coffee" src="./img/icon-coffee.svg" alt="coffee logo">
+            <h2>Boost your productivity</h2>
+        </div>
+        <div class="karma-flexbox-2">
+            <img id="refill" src="./img/icon-refill.svg" alt="device logo">
+            <h2>Pay as you go</h2>
+        </div>
+    </section>
+    <footer>
+        <hr>
+        <h2>Join us on</h2>
+        <div id="icon-container">
+            <div class="icon-border">
+                <i class="fa fa-twitter" style="font-size:20px;color:lightblue;" aria-hidden="true"></i>
+            </div>
+            <div class="icon-border">
+                <i class="fa fa-facebook" style="font-size:20px;color:blue;" aria-hidden="true"></i>
+            </div>
+            <div class="icon-border">
+                <i class="fa fa-instagram" style="font-size:20px;color:darkblue;" aria-hidden="true"></i>
+            </div>
+        </div>
+        <h2> &copy; Karma Mobility, Inc.</h2>
+    </footer>
     <!-- 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>
-</html>
+<!-- Test Comment-->
+
+</html>