diff --git a/index.html b/index.html index 94ad32b..cd4511a 100755 --- a/index.html +++ b/index.html @@ -1,70 +1,138 @@ - - - - - - - Frontend Mentor | Huddle landing page with alternating feature blocks - - - - - - - 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 - - © Copyright 2018 Huddle. All rights reserved. - - - - \ No newline at end of file + + + + + + + + + + + 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. Get Started For 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 +

+
+ +
+ +
+
+ + + +
+
+ +
+
+

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

+
+
+ + +
+
+

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

+
+ +
+ +
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..5e68f2d --- /dev/null +++ b/style.css @@ -0,0 +1,170 @@ +/* header { + background-image: url(./images/bg-hero-desktop.svg); + background-color: aliceblue; + max-width: 1440em; + height: 300em; + margin: auto; + margin-top: 0px; +} + */ + +* { + margin: 0; + padding: 0; +} +header { + background-image: url(./images/bg-hero-desktop.svg); + background-color: aliceblue; + height: 100vh; + margin: auto; + margin-top: 0px; +} + +.container { + justify-content: space-around; +} + +/* Small screens */ +@media all and (max-width: 500px) { + .navigation { + /* On small screens, we are no longer using row direction but column */ + flex-direction: column; + } +} + +.flex-container-huddle-icon { + /* We first create a flex layout context */ + display: flex; + + /* Then we define the flow direction + and if we allow the items to wrap + * Remember this is the same as: + * flex-direction: row; + * flex-wrap: wrap; + */ + flex-flow: row wrap; + + /* Then we define how is distributed the remaining space */ + justify-content: space-between; + padding: 1em; + align-items: center; +} + +.flex-container-header-row { + /* We first create a flex layout context */ + display: flex; + + /* Then we define the flow direction + and if we allow the items to wrap + * Remember this is the same as: + * flex-direction: row; + * flex-wrap: wrap; + */ + flex-flow: row wrap; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + height: 90vh; +} + +/* +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; +} */ + +.flex-header-item { + max-width: 700px; + + align-items: center; +} + +.mockup { + width: 80%; + margin: 0 10% 0 10%; +} + +.bigTextStyle { + font-size: 1.4em; + margin: 10% 10% 5% 10%; + text-align: center; + font-family: 'Poppins', sans-serif; + font-weight: bold; +} + +.textStyle { + margin: 0 10% 0% 10%; + text-align: center; + font-family: 'Poppins', sans-serif; +} + +.tryButton { + display: inline-block; + cursor: pointer; + text-align: center; + border-radius: 50px; + padding: 5px 20px 5px 20px; + box-shadow: 0 1px 1px #999; + background-color: white; +} + +.getStartedButton { + display: inline-block; + font-weight: bold; + cursor: pointer; + text-align: center; + border-radius: 50px; + color: white; + padding: 10px 15% 10px 15%; + box-shadow: 0 1px 1px #999; + background-color: rgba(249, 95, 204); +} + +/* --------------CONTENT------------- */ + +.flex-container-content-row { + display: flex; + flex-flow: row wrap; + flex-wrap: wrap; + justify-content: space-between; + + align-items: center; + border: 1px solid grey; + border-radius: 50px; + margin: 5% 5% 2% 5%; + min-height: 35vh; +} + +.flex-content-item { + max-width: 700px; + align-items: center; +} + +.contentImage { + width: 40%; + margin: 5% 10% 5% 10%; +} + +.bigTextStyleContent { + margin: 5% 10% 0% 10%; + font-size: 1.2em; + text-align: left; + font-family: 'Poppins', sans-serif; + font-weight: bold; +} + +.textStyleContent { + margin: 0 10% 5% 10%; + text-align: left; + font-family: 'Poppins', sans-serif; +}