hackyourfuturecanada · iwaseem · Aug 15, 2019
diff --git a/index.html b/index.html
@@ -5,66 +5,78 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-
-  <title>Frontend Mentor | Huddle landing page with alternating feature blocks</title>
-
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
-</head>
-<body>
-
-  Try It Free
-
-  Build The Community Your Fans Will Love
-
-  Huddle re-imagines the way we build communities. You have a voice, but so does your audience. 
-  Create connections with your users as you engage in genuine discussion. 
-
-  Get Started For Free
-
-  Grow Together
-
-  Generate meaningful discussions with your audience and build a strong, loyal community. 
-  Think of the insightful conversations you miss out on with a feedback form. 
+<link rel="stylesheet" type="text/css" href="style.css">
 
-  Flowing Conversations
+  <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
 
-  You wouldn't paginate a conversation in real life, so why do it online? Our threads 
-  have just-in-time loading for a more natural flow.
 
-  Your Users
-
-  It takes no time at all to integrate Huddle with your app's authentication solution. 
-  This means, once signed in to your app, your users can start chatting immediately.
-
-  Ready To Build Your Community?
-
-  Get Started For Free
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
-  incididunt ut labore et dolore magna aliqua
-
-  +1-543-123-4567
-  example@huddle.com
-
-  About Us
-  What We Do
-  FAQ
+  <title>Frontend Mentor | Huddle landing page with alternating feature blocks</title>
 
-  Career
-  Blog
-  Contact Us
+</head>
+<body>
+  <header>
+    <img src="images/logo.svg" alt="Home">
+    <h1>Build The Community Your Fans Will Love</h1>'
+    <p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience.
+    Create connections with your users as you engage in genuine discussion. </p>
+    <button type="button" name="button">Get Started For Free</button>
+    <img src="images/illustration-mockups.svg" alt="Responsive mockups">
+    </header>
+
+    <section class="part_one">
+      <img src="images/illustration-grow-together.svg" alt="Grow Together">
+      <h1>Grow Together</h1>
+      <p>Generate meaningful discussions with your audience and build a strong, loyal community.
+      Think of the insightful conversations you miss out on with a feedback form.</p>
+    </section>
+
+<section class="part_two">
+  <img src="images/illustration-flowing-conversation.svg" alt="Flowing Conversation">
+  <h1>Flowing Conversations</h1>
+  <p>You wouldn't paginate a conversation in real life, so why do it online? Our threads have just-in-time loading for a more natural flow.</p>
+  </section>
+
+  <section class="part_three">
+    <img src="images/illustration-your-users.svg" alt="Flowing Conversation">
+    <h1>Your Users</h1>
+    <p>It takes no time at all to integrate Huddle with your app's authentication solution.
+    This means, once signed in to your app, your users can start chatting immediately.</p>
+    </section>
+
+    <section class="part_four">
+      <h1>Ready To Build Your Community?</h1>
+      <button type="button" name="button">Get Started For Free</button>
+      </section>
+
+      <footer>
+<img src="images/logo.svg" alt="logo">
+<img src="images/icon-location.svg" alt="location">
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+<img src="images/icon-phone.svg" alt="location">
+<p>+1-543-123-4567</p>
+
+<img src="images/icon-phone.svg" alt="phone No.">
+<p>example@huddle.com</p>
+
+<ul>
+  <li>About Us</li>
+  <li>What We Do</li>
+  <li>FAQ</li>
+  <li>Career</li>
+  <li>Blog</li>
+  <li>Contact Us</li>
+</ul>
+<i class="fab fa-facebook-square"></i>
+<i class="fab fa-twitter-square"></i>
+<i class="fab fa-instagram"></i>
 
   &copy; Copyright 2018 Huddle. All rights reserved.
 
-  <footer>
     <p class="attribution">
-      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
       Coded by <a href="#">Your Name Here</a>.
     </p>
   </footer>
 </body>
-</html>
+</html>
diff --git a/style-guide.md b/style-guide.md
@@ -1,6 +1,13 @@
 # Front-end Style Guide
 
 ## Layout
+header {
+  background-image:URL("images/bg-hero-mobile.svg");
+
+}
+
+
+
 
 The designs were created to the following widths:
 
@@ -21,12 +28,23 @@ The designs were created to the following widths:
 
 ## Typography
 
+
+
 ### Body Copy
+p {
+  font-family: 'Fira Sans', sans-serif;
+  color: gray;
+  font-size:18px;
 
+}
 - Font size: 18px
 
 ### Headings
-
+h1{
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 32px;
+  color: #910BFF;
+}
 - Family: [Poppins](https://fonts.google.com/specimen/Poppins)
 - Weights: 600
 
@@ -41,4 +59,8 @@ For the social icons, you can use a font icon library. Some suggestions can be f
 
 - [Font Awesome](https://fontawesome.com/)
 - [IcoMoon](https://icomoon.io/)
-- [Ionicons](https://ionicons.com/)
+- [Ionicons](https://ionicons.com/)
+
+
+/* .attribution { font-size: 11px; text-align: center; }
+  .attribution a { color: hsl(228, 45%, 44%); } */
diff --git a/style.css b/style.css
@@ -0,0 +1,22 @@
+header {
+  background-image:url("images/bg-hero-mobile.svg");
+  }
+
+  p {
+    font-family: 'Fira Sans', sans-serif;
+    color: gray;
+    font-size:18px;
+    text-align: center;
+    }
+
+  h1{
+    font-family: 'Fira Sans', sans-serif;
+    font-size: 32px;
+    color: #910BFF;
+    text-align: center;
+  }
+
+  img{
+    max-width: 250px;
+
+  }