diff --git a/index.html b/index.html index 94ad32b..1f0f0af 100755 --- a/index.html +++ b/index.html @@ -5,58 +5,95 @@ - + + + Frontend Mentor | Huddle landing page with alternating feature blocks - Try It Free + +
+ + - Build The Community Your Fans Will Love +

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.

+ + - 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 +
+ + 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 + +
+ +
+ + 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? + +
+ + - 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 + © Copyright 2018 Huddle. All rights reserved. diff --git a/style.css b/style.css new file mode 100644 index 0000000..18eb19d --- /dev/null +++ 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%; \ No newline at end of file