HEADER ADS 728X90

How to make creative team card section design for your website using html and css | By CodePrime

css,html,tutorial,code prime,responsive our team section,css cards,html cards,creative css card,css creative product card ui design,team card design,creative our team section using html & css,create card using html and css,how to create our team section using html and css,css our team card hover effects,css hover effects,css user card,our team page html template,our team page website design,creative team section,css transition & transform effects,team work, codeprime, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "CodePrime" Blog . In this post you are going to learn How to make creative team card section design for your website using html and css . First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.

HTML CODE

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Creative Team Card section</title>
</head>
<body>

    <div class="team-contaner">

        <div class="tm-btn">Alfa Team</div>

        <div class="team-box">
            <div class="team-img"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7TJrubuaurKlgjwrWrIBkHQMErRuJaKS1hsUGUFcrOnA1UeK5OR6oMzdhRA_VWzcPAo0nk18iytH2SPuERWGT1daf3j_3zCv6FDnmT-VoiRLZK0DBXZqXxUPY0IzlkczT7CUg_tk8GhM1D66jX5_5bBPdvSqdWbEewe9Hc-_2DMd-Xua9NWdG4C5dw/s1600/alfred.png" ></div>
            <div class="team-name">Alfres</div>
        </div>
        <div class="team-box">
            <div class="team-img"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXQch35fj5_vMehs4gSdBLitQKAIA4exj9dxc9k_iyWBwwDV-pdmBHPxbSOx1uhvlX-Ta_sCXg5mUdaloRszswX2WuxSQepsSy5iqiTifbBdQemh0Q5Gdyo0BY5QvLhG3--iiH2OzW-Z6i9kBDu0LUpSrXZKHL66eK-O0e1MNvtfip9qudrGB5x4kvA/s1600/georgi.png" ></div>
            <div class="team-name">Georgi</div>
        </div>
        <div class="team-box">
            <div class="team-img"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0mJeIx0wBbtB2LWT5-OYeNYPhn95VWOsIXVJWbSLjwdur2iojpLtuB6lreujdlVVqfdNRo-FfthMoqnjsoLbuMed7-3dtFstMHraZqCquIyf0BPSXf7kek8eRTcEi1Qx_c8oPoZYKPwpbuFlofAlq4cPZe_MGzB_32IfD5CCQFRWaR914n-tnCxg3Bw/s1600/mario.png" ></div>
            <div class="team-name">Mario</div>
        </div>
        <div class="team-box">
            <div class="team-img"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2tmY8Jcpce-fMyDcmTynT3l_-cqzUky96c5qJuuScfjdc3bdOT-WwhAPL9Oex8482FcUybj69ZGGOZb1Hc96uz3gUHr4bZBjq1hi3k6An41J2VnRuQVfL4DQKPUb4N-EDrh6CBdky4GJQg2-OwU3J1bvBuiKHQXpfuxaU5hwaRt_-wiNZl1lM1WCQxw/s1600/perry.png" ></div>
            <div class="team-name">Perry</div>
        </div>

    </div>
   
</body>
</html>

CSS CODE

*{
    font-family: sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
    text-align: center;
    width: 100%;
    background: #263551;
}

.team-contaner{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center ;
    position: relative;
    background: linear-gradient(45deg, #263551, #414a5f);
    /* width: 900px; */
    /* height: 250px; */
    padding: 30px;
    border-radius: 10px;
    padding-top: 80px;
    box-shadow: 0 0 4px #ccc;
   


}

.tm-btn{
    position: absolute;
    top: -30px;
    margin: 0 auto;
    background: linear-gradient(45deg, orange,yellow);
    padding:10px 20px ;
    border-radius: 5px;
    color: #000;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    box-shadow: 0 0 3px #ccc;
}
.team-box{
    width: 200px;
    height: 200px;
    margin: 5px;
}
.team-box .team-img{
    width: 190px;
    height: 190px;
   
   
}
.team-img img{
    width: 100%;
}

.team-box:hover .team-img img{
    transform: scale(1.1);
    transition: 0.5s;
}


.team-box .team-name{
    color: #afafaf;
    margin-top:-10px;
}


/* responsive */



Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram