Huddle landing page — Design to HTML/CSS

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>
&copy; 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');

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;
}

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;
}

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;
}

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;
}

Now, our mobile site is also complete.

Mobile

Now, our project is complete. You can find the code for the same here.

Complete

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger