Our Team Section Design Html Css Simple Example Gradient Background

Our Team Section Design Html Css Simple Example Gradient Background








  


<!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>HTML VS CSS</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient( 109.8deg,  rgba(62,5,116,1) -5.2%, rgba(41,14,151,1) -5.2%, rgba(216,68,148,1) 103.3% );
        }

        .section-heading {
            font-family: "Dancing Script", cursive;
            text-align: center;
            font-size: 64px;
            color: #ffffff;
            margin: 0 0 70px;
        }

        .container {
            display: flex;
            justify-content: center;
            width: 90%;
            max-width: 1440px;
            margin: 0 auto;
        }

        .profile {
            position: relative;
            transition: all 0.3s;
        }

        .profile:hover {
            transform: translateY(25px);
        }

        .profile img {
            max-width: 100%;
            border-radius: 50%;
            border: 5px solid #f7f7f7;
            filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1));
            cursor: pointer;
        }

        .profile:not(:first-child) img {
            margin-left: -20px;
        }

        .profile .name {
            position: absolute;
            background-color: #ffd000;
            color: #fff;
            font-family: "Bebas Neue", cursive;
            padding: 15px 30px;
            border-radius: 100px;
            bottom: -80px;
            left: 50%;
            white-space: nowrap;
            transform: translate(-50%, -50px);
            letter-spacing: 1px;
            font-size: 20px;
            opacity: 0;
            transition: all 0.3s;
        }

        .profile .name::before {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            background-color: #00ffff;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .profile img:hover+.name {
            opacity: 1;
            transform: translateX(-50%);
            box-shadow: 0 10px 20px rgba(86, 86, 198, 0.3);
        }
    </style>
</head>

<body>

   

    <section class="team">
        <h2 class="section-heading">Our Team</h2>
        <div class="container">
            <div class="profile">
                <img src="https://images.unsplash.com/photo-1530577197743-7adf14294584?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=801&q=80"
                alt="" /><span class="name">Suchitra Tiwari</span>
            </div>
            
            <div class="profile">
                <img src="https://images.unsplash.com/photo-1598641795816-a84ac9eac40c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=801&q=80"
                alt="" /><span class="name">Sajid Ghani</span>
            </div>
            <div class="profile">
                <img src="https://images.unsplash.com/photo-1484186139897-d5fc6b908812?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                    alt="" /><span class="name">Dhriti</span>
            </div>
            <div class="profile">
                <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                    alt="" /><span class="name">Kalyan</span>
            </div>
            <div class="profile">
                <img src="https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
                    alt="" /><span class="name">Major Sameer</span>
            </div>
            <div class="profile">
                <img src="https://images.unsplash.com/photo-1618018352910-72bdafdc82a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                    alt="" /><span class="name">Milind</span>
            </div>
            <div class="profile">
                <img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=801&q=80"
                    alt="" /><span class="name">Srikant Tiwari</span>
            </div>
        </div>
    </section>

</body>

</html>


  • Meet The Team Template
  • Meet The Team Social Media Posts
  • Our Team Content For Website
  • Team Section Design 10
  • Our Team Ui Design
  • Meet The Team Captions
  • Our Team - Company Profile
  • Meet Our Team Of Professionals

How To Use This Cord

steps

  1. Fast One Copy Html File.
  2. Copy CSS File And Past Head Part Top Fo Html File.  
  3. File Save Name.html
  4. Ran Html File 
  5. Ready To Use
Tags

You may like these posts

Show more

Post a Comment

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