Huddle landing page — Design to HTML/CSS

Photo by Vadim Sherbakov on Unsplash

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');* {
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.

Complete

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Podcasts drive online searches

Start testing Web Applications in pCloudy

Multithreading in Django Rest Framework APIs, What you need to know

Creating an RPC Server in Go

Building a Developer Portal with Backstage (Part 1)

How Graphic Design Influences Software Engineering

Use Google Translation API in the Product (on GCP)

To Script or Not To Script? That is the Question We Need to Answer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

What is a Frontend Framework and which ones are the most desirable ones?

How to Create a Fish Tank with Html & CSS

Simple JavaScript Animation To Jazz Up Your Application

How To Start npm Project?