Responsive Team Section using Materialize CSS

Welcome to today's blog. Today we will learn how to design an interesting and responsive team section using Materialize CSS. We have already shared a lot of source code on various topics of front-end development in this blog. You can visit and see those if you want. Before getting this source code, I would advise you to have a look at the video tutorial below. The video will help you understand the source code later. We regularly share tutorials and source code on our YouTube channel. You can subscribe to our channel if you want.

I guess you watched the whole video and understood what we were going to make. Here we have designed a visually pleasing team section using Materialize CSS. Before doing this snippet, the question that naturally comes to mind is, what is Materialize CSS? The simple answer is that Materialize is a modern responsive CSS framework based on Google's Material Design. Materialize CSS helps to create attractive, consistent, and functional web pages following modern web design principles.

In this snippet, we have created team boxes using Materialize CSS grid system. Inside, I have given all the information including the picture of the team member. This information includes the member's name, designation, some descriptions, and their social media links. Then I styled each of the snippet elements by using some basic CSS. We used an awesome gradient color in the hover effect of each team box which gave the project a different dimension.

You May Like this:

Team Section using Materialize CSS [ Source Code ]:

To create this project, you need to create two files. One of them is the HTML file and, the other is the CSS file. Materialize CSS CDN need to be added to the file. Then you have to add the external CSS file. Copy and paste the source code below into your files and save. If you have a problem with the source code below, you can download the source code from the download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Responsive Team Section using Materialize CSS</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<h1 class="header">Our <span>Team</span></h1>
		<p class="sub-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, magnam recusandae nulla quasi fugit ea.</p>
		<div class="row">
			<div class="col s12 m6 l4">
				<div class="single-service center-align">
					<div class="img-area"><img alt="" src="1.jpg"></div>
					<h2>Jason Doe</h2>
					<h4>Web Developer</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, esse dignissimos. Illo, cum, reiciendis?</p>
					<p class="socials"><i class="fa fa-instagram"></i> <i class="fa fa-dribbble"></i> <i class="fa fa-tumblr"></i> <i class="fa fa-youtube"></i></p>
				</div>
			</div>
			<div class="col s12 m6 l4">
				<div class="single-service center-align">
					<div class="img-area"><img alt="" src="2.jpg"></div>
					<h2>Jason Holder</h2>
					<h4>Graphics Designer</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, esse dignissimos. Illo, cum, reiciendis?</p>
					<p class="socials"><i class="fa fa-instagram"></i> <i class="fa fa-dribbble"></i> <i class="fa fa-tumblr"></i> <i class="fa fa-youtube"></i></p>
				</div>
			</div>
			<div class="col s12 m6 l4">
				<div class="single-service center-align">
					<div class="img-area"><img alt="" src="3.jpg"></div>
					<h2>Malvin Jones</h2>
					<h4>Digital Marketer</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, esse dignissimos. Illo, cum, reiciendis?</p>
					<p class="socials"><i class="fa fa-instagram"></i> <i class="fa fa-dribbble"></i> <i class="fa fa-tumblr"></i> <i class="fa fa-youtube"></i></p>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
	</script>
</body>
</html>

ADD CSS:

body {
	background: #f1f3f3;
	font-family: montserrat;
}
.header {
	text-align: center;
	font-size: 50px;
	text-transform: uppercase;
	font-weight: 700;
}
.header span {
	color: #c04848;
}
.sub-text {
	text-align: center;
	width: 50%;
	margin: 0 auto 5%;
}
.single-service {
	padding: 35px;
	transition: all .5s ease;
}
.img-area {
	width: 120px;
	height: 120px;
	overflow: hidden;
	display: inline-block;
	border-radius: 50%;
}
.img-area img {
	width: 100%;
}
.single-service h2 {
	font-size: 25px;
	font-weight: 500;
}
.single-service h4 {
	font-size: 16px;
	font-weight: 500;
}
.socials i {
	margin: 0 15px;
}
.single-service:hover {
	background: radial-gradient(circle, #c04848, #480048);
	color: #fff;
}

We hope you have successfully implemented the snippet. Stay tuned for more projects like this. Thank you very much for visiting this blog.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Team Section using Materialize CSS

You might like

Post a Comment

Post a Comment

Contact Form