diff --git a/index.html b/index.html index 94ad32b..bf2eaea 100755 --- a/index.html +++ b/index.html @@ -3,68 +3,69 @@ - - + + + + Frontend Mentor | Huddle landing page with alternating feature blocks - - - +
+ + +

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.

+ +
- - 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 +
+

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?

+ +
+
+

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. +
- \ No newline at end of file + diff --git a/style-guide.md b/style-guide.md index bd84a4f..51badf6 100755 --- 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/) \ No newline at end of file +- [Ionicons](https://ionicons.com/) diff --git a/style.css b/style.css new file mode 100644 index 0000000..9e313c7 --- /dev/null +++ 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%); }