Neumorphism, also known as soft UI, is a design trend that involves creating 3D-like elements with subtle gradients and shadows to give a sense of depth and dimension. It can be a great way to add visual interest and uniqueness to your website’s “Our Team” section. Here’s how you can use HTML and CSS to create a neumorphic “Our Team” section:
- Start by creating a container element for your team members, such as a div with a class of “team-container”. Inside this element, create a div for each team member, with a class of “team-member”.
- Add an image of each team member to the “team-member” div. You can use the img element and set the src attribute to the URL of the image.
- Add some content for each team member, such as their name and role within the company. You can use the h3 element for the name and the p element for the role.
- To add the neumorphic effect, you’ll need to use CSS. First, set the background-color of the “team-member” div to a light color, such as white or a pastel shade.
- Next, add a subtle gradient to the background-color using the linear-gradient function. Set the start color to a slightly darker version of the base background-color, and the end color to a slightly lighter version.
- Add a shadow to the “team-member” div using the box-shadow property. Set the x and y offsets to 0, the blur radius to 15px, and the spread radius to 5px. Set the color of the shadow to a slightly darker version of the base background-color.
- Repeat the above steps for each team member, adjusting the colors and gradients as needed to create a cohesive look.
- To style the name and role elements, you can use the font-size, font-weight, and color properties.
By following these steps, you can create a visually appealing and unique “Our Team” section using neumorphism in HTML and CSS.
Video Tutorial of Creative Our Team Section Using HTML & CSS Neumorphism
As mentioned in the video tutorial on creating a creative “Our Team” section using HTML and CSS with a neumorphism design, if you’re finding the video to be boring, you can find the code below to copy or download.
To create this section, you’ll need to create two files – an HTML file and a CSS file. Once you’ve created these files, simply paste the provided code into each file.
First, create an HTML document and paste the given code into it. Remember to save the file with a ‘.html’ extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="style.css">
<title>Creative Our Team Section Using HTML & CSS | CSS Neumorphism</title>
<!-- Created by S-Tech04 -->
</head>
<body>
<div class="container">
<div class="card">
<div class="content">
<div class="imgBx">
<img src="./team1.jpg" alt="">
</div>
<div class="contentBx">
<h4>James Ford</h4>
<h5>Director General</h5>
</div>
<div class="sci">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="imgBx">
<img src="./team2.jpg" alt="">
</div>
<div class="contentBx">
<h4>Ann Brown</h4>
<h5>Mannager</h5>
</div>
<div class="sci">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="imgBx">
<img src="./team3.jpg" alt="">
</div>
<div class="contentBx">
<h4>Ben Jason</h4>
<h5>Developer</h5>
</div>
<div class="sci">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Bellota Text', cursive;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
background: #f2f3f7;
}
.container
{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .card
{
width: 330px;
height: 416px;
padding: 60px 30px;
margin: 20px;
background: #f2f3f7;
box-shadow: 0.6em 0.6em 1.2em #d2dce9,
-0.5em -0.5em 1em #ffffff;
border-radius: 20px;
}
.container .card .content
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container .card .content .imgBx
{
width: 180px;
height: 180px;
border-radius: 50%;
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.container .card .content .imgBx img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .card .content .contentBx h4
{
color: #36187d;
font-size: 1.7rem;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
}
.container .card .content .contentBx h5
{
color: #6c758f;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
.container .card .content .sci
{
margin-top: 20px;
}
.container .card .content .sci a
{
text-decoration: none;
color: #6c758f;
font-size: 30px;
margin: 10px;
transition: color 0.4s;
}
.container .card .content .sci a:hover
{
color: #0196e3;
}
/* colors
#f2f3f7
#d2dce9
#36187d
#6c758f
#0196e3
*/
In summary, creating a creative “Our Team” section on your website using HTML and CSS Neumorphism can be a fun and unique way to showcase the personalities and talents of your team members. By utilizing the neumorphism design trend and incorporating interactive hover effects, you can create an engaging and visually appealing section on your site. With a little bit of coding knowledge and some creativity, you can easily create a professional and stylish “Our Team” section that will impress your visitors. Remember to keep things simple and consistent, and have fun with it!
Click on the following download button to download all source code files.
