Our Team Page Design using HTML CSS

Hey, developers welcome to Day 9 of our 90Days 90Projects challenge. And in Day 9 we are going to create an Our Team Page section design using HTML and CSS.

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

our team page design html css, our team page template,our team html template free, our team page html template html

HTML Code

index.html

<!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">
    <title>Team Section</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-container">
        <h2>Our Team</h2>
        <hr>
        <div class="members">
            <div class="team-member">
                <img src="./user.png">
                <h4>John Doe</h4>
                <p>Web Developer</p>
            </div>
            <div class="team-member">
                <img src="./user.png">
                <h4>John Doe</h4>
                <p>Web Developer</p>
            </div>
            <div class="team-member">
                <img src="./user.png">
                <h4>John Doe</h4>
                <p>Web Developer</p>
            </div>
            <div class="team-member">
                <img src="./user.png">
                <h4>John Doe</h4>
                <p>Web Developer</p>
            </div>
        </div>
    </div>
    <!-- Our Team Page design using HTML CSS by raju_webdev -->
</body>
</html>


CSS Code

style.css

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: linear-gradient(#d66f1b 0%, #ec2eef 100%);
}

.main-container {
    background: #fff;
    border-radius: 15px;
    margin: 1rem;
    padding: 20px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4);
}

h2 {
    text-align: center;
}

hr {
    width: 10rem;
    margin: 10px auto;
}

.members {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.team-member {
    margin: 8px;
    transition: all .3s ease;
    cursor: pointer;
}

.team-member:hover {
    transform: scale(1.1);
}

img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 10px;
}

h4,
p {
    text-align: center;
    font-size: 12px;
    margin: 7px;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad