Learn how to create an innovative and stylish Codepen team member list with HTML and CSS. Check out this tutorial with cool CSS styling ideas!
Table of Contents
Codepen is an online community where developers can showcase their work and share ideas. It is a great platform to test and experiment with HTML, CSS, and JavaScript code snippets.
The purpose of this blog post is to guide you through the process of creating an innovative and stylish Codepen team member list with HTML and CSS. A team member list is a great way to showcase the people behind a project or company and give them credit for their work. In this blog post, We will show you how to structure the HTML and style it with CSS to create a unique and visually appealing team member list.
Let's start making an amazing codepen team member list using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our member list.
The document starts with the declaration of a document type (DOCTYPE) and the opening and closing tags of the HTML document.
Within the head element, there are several meta tags. The first one declares the character encoding to be UTF-8, which is a standard character encoding for web documents. The second one sets the width of the viewport, which is the visible area of the web page, to the width of the device.
The head element also contains a link to an external CSS file called "styles.css," which is used to style the content of the page.
The body element contains a div with a class of "content" that wraps the entire list of team members. The team members are listed within an unordered list (ul) with a class of "team." Each team member is represented by an individual list item (li), and each list item has a class indicating their role within the company.
Each team member's information is represented within a div that contains a thumbnail image and a description. The thumbnail image is displayed using the "img" tag with a source attribute that links to the team member's profile picture. The description of the team member includes their name, job title, and a brief summary of their skills and responsibilities. Additionally, there is a link to each team member's CodePen profile.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our codepen team member list using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the list is in place, the next step is to add styling to the member list using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our team member list.
The code starts with an @import statement that imports a font from Google Fonts, specifically the "Lato" font in two different weights: 300 and 400.
The :root selector defines custom CSS variables that can be used throughout the rest of the code. In this case, there are four variables defined: --yellow, --dark, --deg, and --trans. These variables are used to define the background colors, rotation angles, and transition timing for various elements on the page.
The body selector sets the styling for the entire page, including the font family, background gradient, and padding. The content class is used to set the width of the main content area, and the h2 selector sets the styling for any level 2 headings.
The team and member selectors are used to style a list of team members. Each member has a thumbnail image, a name, and a short description. The member class is used to set the background gradient, position, and scaling of each team member element. The thumbnail image is contained within a div with the thumb class, which sets the styling for the thumbnail image itself, including its rotation and hover effects.
The description class is used to set the padding and margin for the team member descriptions. The h3 selector sets the styling for each team member's name, including a rotated background gradient and a hover effect. The co-funder class is used to style the "CO-FUNDER" tag that appears above certain team members' names.
Finally, the description p a selector is used to style any links within the team member descriptions. These links have a hover effect that changes their background and text color, and also include an image that is floated to the left of the link text.
This will give our codepen team member list an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap");
:root {
--yellow: #ffdd40;
--dark: #2f313a;
--deg: -86deg;
--trans: all 0.4s ease 0s;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
font-family: "Lato", Arial, Helvetica, serif;
background: linear-gradient(90deg, #131417, var(--dark) 35% 65%, #131417);
font-size: 1em;
}
body *,
body *:before,
body *:after {
box-sizing: border-box;
}
.content {
width: 90vmin;
}
h2 {
text-align: center;
}
.team {
padding: 2em 0 2em 2.5em;
margin: 0;
}
.member {
margin: 1.5em 0 0.5em;
padding: 0.73em;
background: linear-gradient(
83deg,
var(--yellow) 0 97%,
#fff0 calc(97% + 1px) 100%
);
position: relative;
list-style: none;
display: inline-block;
transform: scale(0.85);
transition: var(--trans);
}
.member:nth-of-type(even) {
text-align: right;
background: linear-gradient(
-83deg,
var(--yellow) 0 97%,
#fff0 calc(97% + 1px) 100%
);
}
.thumb {
width: 13vmin;
height: 13vmin;
float: left;
margin-right: 1.25em;
background: linear-gradient(
var(--deg),
var(--dark) 0 70%,
var(--yellow) 0% 100%
);
transform: rotate(-4deg);
transition: var(--trans);
border-radius: 0.25em;
overflow: hidden;
margin-left: -3em;
padding: 0.5em;
}
.member:nth-of-type(even) .thumb {
--deg: 86deg;
float: right;
margin-left: 2em;
margin-right: -3em;
transform: rotate(4deg);
}
.thumb img {
width: 100%;
height: 100%;
border-radius: 0.25em;
filter: grayscale(1);
background: var(--dark);
}
.member:hover {
transform: scale(1);
transition: var(--trans);
filter: drop-shadow(0px 20px 10px #0008);
}
.member:hover .thumb {
padding: 0.1em;
transition: var(--trans);
transform: rotate(-1deg);
--deg: -89deg;
}
.member:nth-of-type(even):hover .thumb {
--deg: 91deg;
}
.member:hover .thumb img {
filter: none;
transition: var(--trans);
}
.description {
padding-top: 1vmin;
}
.description p {
padding: 0 2em;
margin-bottom: 1em;
}
h3 {
background: linear-gradient(182deg, #fff0 60%, var(--dark) 0 100%);
display: inline;
transform: rotate(-2deg);
position: absolute;
margin: 0;
margin-top: -2.25em;
left: 9vmin;
padding: 0.5em 0.75em;
color: var(--yellow);
border-radius: 0.25em;
font-size: 1.35em;
transform-origin: left bottom;
}
.member:nth-of-type(even) h3 {
left: inherit;
right: 9vmin;
transform: rotate(2deg);
transform-origin: right bottom;
background: linear-gradient(-182deg, #fff0 60%, var(--dark) 0 100%);
}
.member:hover h3 {
transition: var(--trans);
transform: rotate(0deg);
background: linear-gradient(180deg, #fff0 59%, var(--dark) 0 100%);
}
.co-funder:after {
content: "CO-FUNDER";
font-size: 0.75em;
position: absolute;
top: -1.5em;
background: var(--yellow);
right: 4em;
transform: rotate(3deg);
padding: 0.35em 0.75em 0.5em;
border-radius: 0.25em;
color: var(--dark);
font-weight: bold;
}
.co-funder:nth-of-type(even):after {
right: inherit;
left: 4em;
transform: rotate(-3deg);
}
.description p a {
display: inline-block;
margin: 0.5em 0 0 0;
background: var(--dark);
color: var(--yellow);
padding: 0.1em 0.5em 0.35em;
border-radius: 0.5em;
text-decoration: none;
transition: var(--trans);
}
.description p a:hover {
transition: var(--trans);
color: var(--dark);
background: var(--yellow);
font-weight: bold;
}
.description p a img {
float: left;
width: 22px;
filter: invert(1);
border-radius: 0.15em;
padding: 2px;
background: #fff;
margin-right: 2px;
} Final Output:
Conclusion:
Creating a team member list in Codepen with HTML and CSS is a great way to showcase the people behind a project or company. In this blog post, we have shown you how to structure the HTML and style it with CSS to create an innovative and stylish team member list. We started by setting up the HTML boilerplate and creating a basic layout for the team member list. We then added basic styling and focused on styling the images and text to make them visually appealing. By following these easy steps, you can create a unique and visually appealing team member list that you can showcase on your website or portfolio. Remember to experiment with different styles and layouts to create something that reflects your personal style or brand. We hope you found this tutorial helpful, and we look forward to seeing your team member list on Codepen!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
