hackyourfuturecanada · hamzakoc · Aug 15, 2019
diff --git a/index.html b/index.html
@@ -5,58 +5,95 @@
   <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:600&display=swap" rel="stylesheet">
+
   <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
+
+      <header >
+          <img class="logo" src="images/illustration-grow-together.svg" alt="  huddle logo" >
+          <button class="button1"><strong>Try It Free</strong></button>
 
-  Build The Community Your Fans Will Love
+          <h1>Build The Community <br>  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="button2">Get Started For Free</button> 
 
-  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. 
+          <img class="illustration-mockups" src="images/illustration-mockups.svg" alt=" "  width="320px" height="200px"> 
 
-  Get Started For Free
+      </header>
 
-  Grow Together
+      <section class="section1">
+          <img class="logo" src="images/illustration-grow-together.svg" alt="  huddle logo" >
+          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
+
+      </section>
+
+      <section class="section2">
+          <img class="logo" src="images/illustration-flowing-conversation.svg" alt="  huddle logo" >
+          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.
+      </section>
+      <section class="section3">
+          <img class="logo" src="images/illustration-your-users.svg" alt="  huddle logo" >
+          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.
+      </section>
+      <section class="section4">
+          Ready To Build Your Community?
+
+      </section>
+
+      <footer>
+          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
+      </footer>
 
-  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
+
 
   &copy; Copyright 2018 Huddle. All rights reserved.
 

diff --git a/style.css b/style.css
@@ -0,0 +1,109 @@
+
+*{
+    margin: 0 auto;
+    padding: 0;
+}
+
+:root{
+    --very-pale-cyan:hsl(193, 100%, 96%)
+}
+
+.logo{
+    margin-top: 20px;
+    margin-left: 20px;
+    float: left;
+    width: 100px;
+}
+
+header{
+    background-image: url(images/bg-hero-desktop.svg);
+    height: 500px;
+    width: 100%;
+    background-size: cover;
+    background-color: var(--very-pale-cyan);
+    width:100%;
+    height: 750px;
+    font-family: 'Poppins', sans-serif;
+
+
+}
+
+h1{ 
+
+    text-align: center;
+    line-height: 1.5em;
+    padding-top:80px; 
+    font-weight: 600px;
+    padding-left:20px;
+    padding-right: 20px; 
+    font-size: 25px;
+
+}
+
+p {
+    text-align: center;
+    font-size: 18px;
+    padding: 32px;
+
+}
+
+.button1{
+    border-radius: 20px;
+    padding: 5px;
+    width: 85px;
+    font-family: 'Lato', sans-serif;
+    background-color: white;
+    border: none;
+    box-shadow: 1px 1px 2px 2px rgb(228, 233, 235);
+    float: right;
+    margin-top: 20px;
+    margin-right: 20px;
+
+
+}
+
+.button2{
+    margin: auto;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    width: 180px;
+    top: 10px;
+    border-radius:20px;
+    padding: 15px;
+    background-color:hsl(322, 100%, 66%);
+    color: antiquewhite;
+    border: none;
+    font-weight: bold;
+}
+
+.illustration-mockups{
+    position: relative;
+    top: 80px;
+    display: flex;
+    align-items: center;
+
+
+
+.section1{
+
+    background-color: white;
+    width:300px;
+    height: 100%;
+}
+.section2{
+    background-color: white;
+    width:500px;
+    height: 100%;
+}
+.section3{
+    background-color: white;
+    width:500px;
+    height: 100%;
+}
+.section4{
+    background-color: white;
+    widows: 500px;
+    height: 100%;