Hello everyone. Welcome to another exciting tutorial from Coding Artist. In this tutorial, we will learn how to create a responsive ‘Our Team’ section. To build this responsive design we need HTML and Pure CSS. We do not need any framework or library to implement this design.
If you are interested in more of such CSS tutorials, you can check out this playlist from my youtube channel. I have added various tutorials to create responsive designs using just CSS.
Video Tutorial:
If you would prefer to code along with me rather than reading this blog post, you should check out this video here down below. Also, subscribe to my youtube channel, where I post regular tutorials, tips and tricks. Apart from this resource I also post multiple-choice questions to help you test your coding skills.
Project Folder Structure:
Now let us begin the tutorial. Before we start coding let us first create the project folder structure. We create a project folder called – “Responsive Our Team Section”. Within this folder, we have five files. Out of these five files, three are the image files. We will be using them as profile images.
Next, we have files called – ‘index.html’ and ‘style.css’. These are the HTML document and the stylesheet.
HTML:
We start with the HTML code. Please copy the code below and paste it into your HTML document. HTML builds the structure necessary for our cards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Our Team Section</title>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
<div class="row">
<h1>Our Team</h1>
</div>
<div class="row">
<!-- Column 1-->
<div class="column">
<div class="card">
<div class="img-container">
<img src="profile-img-1.png" />
</div>
<h3>Luna Turner</h3>
<p>Founder</p>
<div class="icons">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-linkedin"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
<a href="#">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
<!-- Column 2-->
<div class="column">
<div class="card">
<div class="img-container">
<img src="profile-img-2.png" />
</div>
<h3>Bryant Hall</h3>
<p>Developer</p>
<div class="icons">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-linkedin"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
<a href="#">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
<!-- Column 3-->
<div class="column">
<div class="card">
<div class="img-container">
<img src="profile-img-3.png" />
</div>
<h3>Hope Watkins</h3>
<p>Designer</p>
<div class="icons">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-linkedin"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
<a href="#">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS:
Next, to style and make these cards responsive we use CSS. Now copy the code provided to you below and paste it into your stylesheet.
Other Tutorial You Might Like:
- RGB Color Slider | Javascript Project
- Glassmorphism Skills Bar | HTML & CSS
- Layered Text Hover Effect
Your responsive Our Team section is now ready. Now you can go ahead and customize it the way you want to.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f5f5f5;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 2em 1em;
text-align: center;
}
.column {
width: 100%;
padding: 0.5em 0;
}
h1 {
width: 100%;
text-align: center;
font-size: 3.5em;
color: #1f003b;
}
.card {
box-shadow: 0 0 2.4em rgba(25, 0, 58, 0.1);
padding: 3.5em 1em;
border-radius: 0.6em;
color: #1f003b;
cursor: pointer;
transition: 0.3s;
background-color: #ffffff;
}
.card .img-container {
width: 8em;
height: 8em;
background-color: #a993ff;
padding: 0.5em;
border-radius: 50%;
margin: 0 auto 2em auto;
}
.card img {
width: 100%;
border-radius: 50%;
}
.card h3 {
font-weight: 500;
}
.card p {
font-weight: 300;
text-transform: uppercase;
margin: 0.5em 0 2em 0;
letter-spacing: 2px;
}
.icons {
width: 50%;
min-width: 180px;
margin: auto;
display: flex;
justify-content: space-between;
}
.card a {
text-decoration: none;
color: inherit;
font-size: 1.4em;
}
.card:hover {
background: linear-gradient(#6045ea, #8567f7);
color: #ffffff;
}
.card:hover .img-container {
transform: scale(1.15);
}
@media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
@media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 1em;
}
.column {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 0 1em;
}
}
If you have any issues while creating this code you can download the source code by clicking on the ‘download code’ button below. Also don’t forget to drop your queries, suggestions and feedback in the comments below.
See you next time with yet another exciting and useful tutorial. Until then Happy Coding!
very nice and explanatory
loved the video
Very cool but the size of image is intimidating me, can I know it please?