How to create a simple team page?

on




Creating a team page is a great way to introduce the members of your team and highlight their skills and expertise. In this tutorial, we will walk you through how to create a simple team page using HTML and CSS.

Step 1: Set Up the HTML

The first step in creating a team page is to set up the HTML code for the page. This can be done by creating a container element for the team section and then creating individual sections for each team member. Here is an example of the HTML code for a simple team page:

In this code, we have created a section element with an id of team to identify the team section. Inside the section, we have created a div element with a class of container to contain the team members. Each team member is represented by a div element with a class of member. Inside each member div, we have added an image, a heading (h3) for the team member's name, and a paragraph (p) for their job title.

Step 2: Style the Team Page with CSS

The next step is to style the team page using CSS. This can be done by targeting the section, container, and member elements and applying styling properties such as background color, font size, and margin. Here is an example of the CSS code for a simple team page:

In this code, we have targeted the #team element and applied a background color of #f7f7f7 and a padding of 50px on the top and bottom. We have also targeted the .container element and set a max-width of 1200px, set margin to 0 auto to center the container on the page, and set the display to flex with flex-wrap set to wrap and justify-content set to center to center the team member divs. Finally, we have targeted the .member element and set the width to 300px, added a margin of 20px to create space between each member,


HTML CODE


<h1>DEDICATER TEAM</h1>
    <h2>Our Team</h2>
    <div class="main_in_div">
        <div class="team_div">
            <div class="image">
                <img src="bg.jpg">
            </div>
            <h2>Balvinder Kumar</h2>
            <p>WEB DESIGINER</p>
            <div class="icon_div">
                <ion-icon name="logo-instagram"></ion-icon>
                <ion-icon name="logo-facebook"></ion-icon>
                <ion-icon name="logo-twitter"></ion-icon>
            </div>
        </div>
        <div class="team_div">
            <div class="image">
                <img
                    src="https://images.pexels.com/photos/415829/pexels-photo-415829
                                               .jpeg?auto=compress&cs=tinysrgb&w=600">
            </div>
            <h2>Jennifer Doe</h2>
            <p>WEB DESIGINER</p>
            <div class="icon_div">
                <ion-icon name="logo-instagram"></ion-icon>
                <ion-icon name="logo-facebook"></ion-icon>
                <ion-icon name="logo-twitter"></ion-icon>
            </div>
        </div>
        <div class="team_div">
            <div class="image">
                <img
                    src="https://images.pexels.com/photos/769772/pexels-photo-769772
                                               .jpeg?auto=compress&cs=tinysrgb&w=600">
            </div>
            <h2>Raman</h2>
            <p>WEB DESIGINER</p>
            <div class="icon_div">
                <ion-icon name="logo-instagram"></ion-icon>
                <ion-icon name="logo-facebook"></ion-icon>
                <ion-icon name="logo-twitter"></ion-icon>
            </div>
        </div>
    </div>
    </div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>


CSS CODE


        * {
            margin: 0;
            padding: 0;
            font-family: arial;
            transition: 2s;
        }

        .main {
            width: 100%;
            height: 700px;
            /*background-color: dimgray;*/
            text-align: center;
        }

        .main h1,
        h2 {
            font-size: 35px;
            color: darkred;
            position: relative;
            top: 70px;
        }

        .main_in_div {
            width: 1300px;
            height: 480px;
            /*background-color: #EEEEEE;*/
            margin: auto;
            position: relative;
            top: 100px;
        }

        .team_div {
            width: 300px;
            height: 100%;
            background-color: #EEEEEE;
            float: left;
            margin-left: 100px;
            overflow: hidden;
            text-align: center;
            border-radius: 50px;
        }

        .team_div:hover {
            box-shadow: 5px 5px 20px 0px #888;
        }

        .image {
            width: 250px;
            height: 250px;
            background-color: white;
            border-radius: 50%;
            margin: auto;
            position: relative;
            top: 20px;
        }

        .image img {
            width: 95%;
            height: 95%;
            border-radius: 50%;
            padding: 7px;
        }

        .team_div:hover .image {
            background-color: black;
        }

        .team_div h2 {
            color: gray;
            position: relative;
            top: 25px;
            font-size: 25px;
        }

        .team_div p {
            color: gray;
            position: relative;
            top: 30px;
        }

        .icon_div {
            width: 105%;
            height: 70px;
            background-color: black;
            margin-top: 70px;
            position: relative;
            left: -350px;
            border-radius: 50px;
        }

        .team_div:hover .icon_div {
            left: -40px;
        }

        .icon_div ion-icon {
            color: white;
            font-size: 30px;
            padding: 20px;
        }

        .icon_div ion-icon:hover {
            background-color: white;
            color: black;
            border-radius: 50%;
        }




Comments

Post a Comment