Table of Contents

Our team page template

Share Now :

Title : Our team page template | W3pupil

Description

Hello W3PUPIL!!! We offer you a dynamic and visually appealing team page template that presents your information at a glance. Our team page template snippet was created with precision using HTML and CSS.
Enhance your team’s online visibility with our modern and customizable Team Cards HTML/CSS. This modern and responsive Team Card effortlessly shows off your team members. It’s got avatars, name, role, social media links, and more. The thoughtfully designed layout makes it easy to integrate your Team Card into your website. It enhances both functionality and looks. You can customize each card with easy to use customization options. Each card reflects the unique identity of your team. Make a great impression and build a strong connection with your Team Card. Our team page template is the perfect combination of form & function for showing off your talented people. It has a fully responsive team page template that works on desktops, laptops, tablets, and smartphones.
So by using this HTML and CSS Team page template snippet, you’re not just sharing information – you’re demonstrating your dedication to professionalism and contemporary web design. Overall, show off and interact with the world with this innovative and creative team page snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is critical for smooth development. Below is a step-by-step guide.

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After successfully completing the download and installation, open Visual Studio Code.
  • Create a new folder on your desktop.
  • Go to the file and then open the folder you created.
  • Then add a file for HTML with the extension “.html” or “.htm”.
  • Also add another file for CSS with the extension “.css”.
  • Now you have an empty HTML file and a CSS file ready for your code.

Let's know how to open a downloaded file..

  • After you download the snippet file from W3pupil, you will get a zip file.
  • After unzipping, you can open the file in Visual Studio Code.
  • Now you have the HTML file and the CSS file to work with.
  • Take your time to fully understand the functionality of the code before making the changes you want in Our team page template snippet.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  <!--Hello Future Developer Thanks for Using w3pupil.com, Share & Support us-->
<div class="container">
    <div class="parent">
        <div class="head1">
            <h1>Profile Cards</h1>
        </div>
        <div class="head2">
            <div class="box1">
                <div class="pic">
                    <img src="https://cdn.pixabay.com/photo/2021/11/19/00/12/man-6807759_1280.jpg" alt="user image 1">
                </div>
                <div class="content">
                    <span>Patrick Wood</span>
                    <p class="desg">CEO / Co-Founder</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio commodi laborum deserunt reiciendis aspernatur perspiciatis beatae animi.</p>
                    <div class="logo">
                        <div class="icon1">
                            <i class="fa-brands fa-twitter fa-xl" style="color: #ffffff"></i>
                        </div>
                        <div class="icon2">
                            <i class="fa-brands fa-pinterest fa-xl" style="color: #ffffff"></i>
                        </div>
                        <div class="icon3">
                            <i class="fa-solid fa-globe fa-xl" style="color: #ffffff"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box2">
                <div class="pic">
                    <img src="https://cdn.pixabay.com/photo/2021/11/19/00/12/man-6807759_1280.jpg" alt="user image 2">
                </div>
                <div class="content">
                    <span>John Doe</span>
                    <p class="desg">Software Tester</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio commodi laborum deserunt reiciendis aspernatur perspiciatis beatae animi.</p>
                    <div class="logo">
                        <div class="icon1">
                            <i class="fa-brands fa-twitter fa-xl" style="color: #ffffff"></i>
                        </div>
                        <div class="icon2">  
                            <i class="fa-brands fa-pinterest fa-xl" style="color: #ffffff"></i>
                        </div>
                        <div class="icon3">
                            <i class="fa-solid fa-globe fa-xl" style="color: #ffffff"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box3">
                <div class="pic">
                    <img src="https://cdn.pixabay.com/photo/2021/11/19/00/12/man-6807759_1280.jpg" alt="user image 3">
                </div>
                <div class="content">
                    <span>Rose Jay</span>
                    <p class="desg">Asistant Dev</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio commodi laborum deserunt reiciendis aspernatur perspiciatis beatae animi.</p>
                    <div class="logo">
                        <div class="icon1">
                            <i class="fa-brands fa-twitter fa-xl" style="color: #ffffff"></i>
                        </div>
                        <div class="icon2">
                            <i class="fa-brands fa-pinterest fa-xl" style="color: #ffffff"></i>
                        </div>
                        <div class="icon3">
                            <i class="fa-solid fa-globe fa-xl" style="color: #ffffff"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/"> W3pupil</a></div>
</div>
<!--Check our website Regularly For New Snippets Post-->  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

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

Share & Support us
**/
*{
    box-sizing: border-box;
}
body{
    font-family: 'Roboto Slab', serif;
    margin: 0%;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:end;
}
.parent{
    height: 80vh;
    display: flex;
    flex-direction: column;
}
.head1{
    height: 10vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head1 h1{
    margin: 0%;
    font-weight: bolder;
}
.head2{
    height: 70vh;
    background-color: #aaaaaa;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background: #C9CCD3;
    background-image: linear-gradient(-180deg, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
    background-blend-mode: lighten;
}
.box1{
    width: 350px;
    height: 350px;
    background-color: white;
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px grey;
    padding:10px;
}
.box2{
    width: 350px;
    height: 350px;
    background-color: white;
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px grey;
    padding:10px;
}
.box3{
    width: 350px;
    height: 350px;
    background-color: white;
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px grey;
    padding:10px;
}
.pic{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: -50px auto;
    box-shadow: 5px 5px 20px grey;
}
img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}
.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    row-gap: 10px;
    margin-top: 15px;
}
span{
    margin: 0%;
    font-weight: bolder;
    font-size: 25px;
    letter-spacing: 1px;
}
p{
    margin: 0px 15px;
    font-size: 14px;
    font-weight: bold;
}
.desg{
    font-weight: bold;
    color: grey;
}
.logo{
    width: 50%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 15px;
}
.icon1{
    width: 50px;
    height: 50px;
    background-color: #1D9BF0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px grey;
}
.icon2{
    width: 50px;
    height: 50px;
    background-color: #B7081B;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px grey;
}
.icon3{
    width: 50px;
    height: 50px;
    background-color: tomato;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px grey;
}
@media screen and (max-width:1024px){
    .container{
        height: max-content;
    }
    .parent{
        height: fit-content;
    }
    .head1{
        height: 30vh;
    }
    .head2{
        justify-content: start;
        height: fit-content;
        flex-wrap: wrap;
        gap:60px;
        padding:60px 30px;
    }
    .box1{
        width:45%;
        height: max-content;
    }
    .box2{
        width:45%;
        height: max-content;
    }
    .box3{
        width:45%;
        height: max-content;
    }
    .logo{
        height: fit-content;
        width: fit-content;
        column-gap: 10px;
    }
    .icon1,.icon2,.icon3{
        width: 40px;
        height: 40px;
    }
}
@media screen and (max-width:630px){
    .container{
        height: fit-content;
    }
    .parent{
        height: fit-content;
    }
    .head2{
        flex-direction: column;
        row-gap: 70px;
        background-color: white;
    }
    .box1{
        height: 350px;
        width: fit-content;
    }
    .box2{
        height: 350px;
        width: fit-content;
    }
    .box3{
        height: 350px;
        width: fit-content;
    }
}
.credit a{
    text-decoration: none;
    color: black;
    font-weight: 800;
}
.credit{
    color: black;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}  

Note :

  • We have coded CSS in a separate file and linked to the HTML file for creating Our team page template snippet.

Download :

Share and Support W3pupil.com

Conclusion :

To change the code, you can download the source code files of the snippet. To improve your HTML and CSS skills, you can try rebuilding other creative HTML and CSS snippets available on W3pupil. If you have any technical questions, feel free to contact W3pupil. As soon as possible, we will do our best to resolve your request.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :