hackyourfuturecanada · aalitenaye · Aug 15, 2019
diff --git a/index.html b/index.html
@@ -3,68 +3,69 @@
 <head>
   <meta charset="UTF-8">
   <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">
-
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
   <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>
+<header>
+  <img src="images/logo.svg" style="width:200px;">
+  <button class="button-one">Try It Free</button>
+  <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 class="button-two">Get Started For Free</button>
+</header>
 <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. 
-
-  Flowing Conversations
-
-  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
-
-  Career
-  Blog
-  Contact Us
+<section>
+  <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>
+  <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>
+  <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>
+  <h1>Ready To Build Your Community?</h1>
+  <button>Get Started For Free</button>
+</section>
+<section>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua</p>
+
+  <p>+1-543-123-4567</p>
+  <p>example@huddle.com</p>
+
+  <h2>About Us</h2>
+  <h2>What We Do</h2>
+  <h2>FAQ</h2>
+
+  <h2>Career</h2>
+  <h2>Blog</h2>
+  <h2>Contact Us</h2>
 
   &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>. 
-      Coded by <a href="#">Your Name Here</a>.
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
+      Coded by <a href="#">Aalitenaye Sattari</a>.
     </p>
+    <div class="connect">
+      <a href="https://www.instagram.com/altynaisattari"><i class="fab fa-instagram fa-2x"></i></a>
+      <a href="https://www.linkedin.com/in/aalitenaye-sattari"><i class="fab fa-linkedin fa-2x"></i></a>
+      <a href="https://www.facebook.com/aalitenaye.sattari"><i class="fab fa-facebook fa-2x"></i></a>
+    </div>
   </footer>
+</section>
 </body>
-</html>
+</html>
diff --git a/style-guide.md b/style-guide.md
@@ -41,4 +41,4 @@ 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/)
diff --git a/style.css b/style.css
@@ -0,0 +1,36 @@
+:root {
+  --pink:hsl(322, 100%, 66%);
+  --very-pale-cyan: hsl(193, 100%, 96%);
+  --very-dark-cyan: hsl(192, 100%, 9%);
+  --grayish-blue: hsl(208, 11%, 55%);
+}
+
+body {
+  font-size: 18px;
+  font-family: 'Open Sans', sans-serif;
+}
+h1 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+}
+.button-one {
+  border-radius: 12px;
+  background-color: var(--very-pale-cyan);
+  float: right;
+  width: 100px;
+}
+.button-two {
+  border-radius: 12px;
+  background-color: var(--pink);
+  margin:auto;
+  display: block;
+  width: 300px;
+}
+header {
+  background-image: url(images/bg-hero-mobile.svg);
+}
+
+
+
+.attribution { font-size: 11px; text-align: center; }
+.attribution a { color: hsl(228, 45%, 44%); }