Team Members Card Design using HTML and CSS

0

                                                                                



























Hello Developers, we are excited to introduce an attractive and functional team members card snippet, designed with precision using HTML and CSS. This snippet allows you to showcase your team members in a visually appealing manner, highlighting their roles and expertise. The team members card snippet is fully responsive, ensuring that it looks great on any device, from desktops to smartphones. The layout is clean and modern, with each card neatly organized to present the team members professionally. The use of hover effects can add an interactive element, making the cards more engaging when users explore the team details. You can also include social media icons to connect each team member with their respective profiles, fostering a sense of authenticity and connection. Incorporating this HTML and CSS team members card snippet into your website not only enhances its visual appeal but also emphasizes the importance of your team. It demonstrates your commitment to transparency and acknowledges the contributions of each team member. Showcase the talent and diversity of your team with this stylish and functional card design, adding a professional and personal touch to your website.

How to make Team Members card Design using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <title>Responsive Team card Using HTML & CSS</title> <meta name="description" content="Responsive team card Using HTML & CSSt. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="responsive,learningrobo.com,html & css projects,project,footer card"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="heading"><span>MEET OUR TEAM</span></div> <div class="down"> <div class="a"> <div class="up"> <div class="cir"> <div class="circ"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814051_1280.png" alt=""></div> </div> <div class="content"> <span id="nam">MR BATEMAN</span> <span id="role">CEO</span> </div> </div> <div class="name"> <q>Success bows to relentless effort</q> </div> </div> <div class="a"> <div class="up"> <div class="cir"> <div class="circ"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814051_1280.png" alt=""></div> </div> <div class="content"> <span id="nam">MR GUSTAVO</span> <span id="role">Developer</span> </div> </div> <div class="name"> <q>Diligence fuels achievement's flame</q> </div> </div> <div class="a"> <div class="up"> <div class="cir"> <div class="circ"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814051_1280.png" alt=""></div> </div> <div class="content"> <span id="nam">MR MAXIMUS</span> <span id="role">Developer</span> </div> </div> <div class="name"> <q>Effort ignites triumphant paths</q> </div> </div> <div class="a"> <div class="up"> <div class="cir"> <div class="circ"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814051_1280.png" alt=""></div> </div> <div class="content"> <span id="nam">MR RACKON</span> <span id="role">Developer</span> </div> </div> <div class="name"> <q>Persistence paves victory's road</q> </div> </div> </div> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/"> Learningrobo</a></div> <!--Check our website Regularly For New Snippets Post--> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
*{
    box-sizing: border-box;
}
.container{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(177, 174, 174);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    justify-content: space-evenly;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}
.heading{
    height:15%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.heading span{
    font-weight: 900;
    font-size: 2em;
    color: white;
}
.down{
    height: 85%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.a{
    height: 300px;
    width: 300px;
    background: linear-gradient(to right,aliceblue,rgb(88, 87, 87),rgb(0, 0, 0));
    border-radius: 20px;
    justify-content: center;
    align-items: end;
    display: flex;
    flex-direction: column;
    box-shadow: rgb(255, 255, 255) 0px 20px 30px -10px;
    transition: all 0.2s ease-in-out;
}
.a:hover{
    transform: scale(1.04);
}
.circ{
    height: 100px;
    width: 100px;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cir{
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.content{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.name{
    height: 35%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    color: white;
    border-radius:40px 0px 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.up{
    height: 65%;
    width: 100%;
    background-color: aliceblue;
    border-radius: 20px 20px 40px 0px;
    display: flex;
}
#nam{
    font-weight: 800;
    font-size: 15px;
}
#role{
    font-size: 12px;
    font-weight: 400;
}
q{
    font-weight: 500;
}
img{
    height: 95px;
    width: 95px;
    border-radius: 50%;
}
.credit a {
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
  
.credit {
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:#000;
    font-size:20px;
}
We hope you would like this Team Members Card Design using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Team Members Card Design using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.












Tags:

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome