In this post we are going to create the Huddle landing page with alternating feature blocks from Frontend mentor.
Huddle
After downloading the resources, I had extracted the zip file and copied it in the Frontend-mentor-challenges folder. After that opened the index.html file with Live Server.
Huddle landing
Next, we will be removing the unnecessary things from the index.html file and adding the structure. We have also included font-awesome in our project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Huddle landing page with alternating feature blocks</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<div class="container">
<nav class="flex">
<img class="logo" src="./images/logo.svg" alt="logo" />
<button class="btn">
Try It Free
</button>
</nav>
<div class="flex">
<div>
<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="btn btn-primary">
Get Started For Free
</button>
</div>
<div>
<img class="header-img" src="./images/illustration-mockups.svg" alt="mockups" />
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="box flex">
<div>
<h2>Grow Together</h2>
<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>
</div>
<div>
<img src="./images/illustration-grow-together.svg" alt="grow-together" />
</div>
</div>
<div class="box flex box-reverse-mobile">
<div>
<img src="./images/illustration-flowing-conversation.svg" alt="flowing-conversation" />
</div>
<div>
<h2>Flowing Conversations</h2>
<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>
</div>
</div>
<div class="box flex">
<div>
<h2>Your Users</h2>
<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>
</div>
<div>
<img src="./images/illustration-your-users.svg" alt="users" />
</div>
</div>
</div>
</main>
<div class="container center">
<div class="box small-box">
<h2>Ready To Build Your Community?</h2>
<button class="btn btn-primary btn-big">Get Started For Free</button>
</div>
</div>
<footer>
<div class="container">
<img src="./images/logo.svg" alt="logo" />
<div class="flex align-start">
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</li>
<li>+1-543-123-4567</li>
<li>example@huddle.com</li>
</ul>
<ul>
<li>About Us</li>
<li>What We Do</li>
<li>FAQ</li>
</ul>
<ul>
<li>Career</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
<ul class="social-media">
<li>
<a class="circle" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a class="circle" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a class="circle" href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
<p>
© Copyright 2018 Huddle. All rights reserved.
</p>
</div>
</footer>
</body>
</html>
Our website is looking good in localhost.
local
Now, we will first give the basic styling in style.css file.
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Poppins:600&display=swap');
* {
box-sizing: border-box;
}
/* General Styles */
body {
color: hsl(192, 100%, 9%);
font-family: 'Open Sans', sans-serif;
font-size: 1.15em;
margin: 0;
}
h1,
h2 {
font-family: 'Poppins', sans-serif;
}
p {
opacity: 0.6;
}
img {
max-width: 100%;
}
.btn {
border-radius: 50px;
background-color: #fff;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
cursor: pointer;
font-size: 16px;
font-weight: 700;
padding: 15px 60px;
}
.btn-primary {
background-color: hsl(322, 100%, 66%);
color: #fff;
}
.container {
padding: 0 20px;
margin: 0 auto;
max-width: 100%;
width: 1000px;
}
.center {
text-align: center;
}
.flex {
display: flex;
align-items: center;
}
.flex > div,
.flex > ul {
flex: 1;
}
.align-start {
align-items: flex-start;
}
Now, our site is already looking good.
Site looking good
We will fix our header first by creating styles for header and nav tag.
header {
background-image: url('./images/bg-hero-desktop.svg');
background-size: cover;
background-position: center center;
background-color: hsl(193, 100%, 96%);
padding: 40px 0;
}
nav {
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.header-img {
margin-left: 20%;
width: 80%;
}
Now, our header is fixed and looking awesome.
Header
Now, we will add the styles for all the box and also the small-box.
.box {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
margin: 40px 0;
padding: 60px;
}
.small-box {
display: inline-block;
position: relative;
margin-bottom: -50%;
z-index: 1;
}
.box img {
width: 80%;
}
Now, the boxes are created in the section and also the small box is created.
Small box
Now, it’s time to add the style for the footer in style.css file.
footer {
background-color: hsl(192, 100%, 9%);
color: #fff;
padding: 180px 0 60px;
}
footer ul {
list-style-type: none;
}
footer ul li {
margin-bottom: 20px;
}
footer .social-media {
display: flex;
align-items: center;
justify-content: center;
}
footer .circle {
border: 1px solid #fff;
border-radius: 50%;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
height: 40px;
width: 40px;
text-decoration: none;
}
footer p {
text-align: right;
}
Now, our footer is also perfect and our desktop site is done.
Footer
Now, our mobile view is remaining but because of flexbox, most of it is already mobile friendly.
Add the below code in style.css for mobile view.
@media screen and (max-width: 768px) {
body {
text-align: center;
}
nav.flex {
flex-direction: row;
}
.header-img {
margin-top: 40px;
margin-left: 0;
width: 100%;
}
.flex {
flex-direction: column;
}
.box-reverse-mobile {
flex-direction: column-reverse;
}
footer ul {
padding: 0;
width: 100%;
}
footer p {
text-align: center;
}
}
Now, our mobile site is also complete.
Mobile
Now, our project is complete. You can find the code for the same here.