bootstrap六款自适应团队图文卡片介绍UI效果代码-html代码-BFW代码库

代码语言：html
所属分类：响应式
代码描述：bootstrap六款自适应团队图文卡片介绍UI效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;800;900&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.1.2.css">

    <style>
        pre{background-color:#000;color:#fff}
        
body {
        color:#1d1d1d;
        background-color:#f5f5f5
}
#global .nav-link {
        color:#1d1d1d;
        padding:0 16px;
        letter-spacing:2px;
        text-align:center
}
#global .nav-link.active {
        color:#ed1849
}
#global {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        display:block;
        z-index:5;
        transition:all .3s ease-in-out
}
#global+div {
        padding-top:60px
}
#global.active {
        background-color:#fff;
        box-shadow:0 0 10px rgba(0,0,0,0.4)
}
.section {
        position:relative;
        padding-top:60px;
        padding-bottom:60px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center
}
@media(min-width:1024px) {
        .section {
        height:100vh
}
}.home-banner {
        position:relative;
        padding-top:96px
}
.home-banner .banner-content {
        display:flex;
        flex-direction:column;
        justify-content:center;
        height:100%
}
.home-banner .banner-content .wgroup {
        width:60%
}
.home-banner .tech-stack {
        list-style-type:none;
        padding-left:0;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap
}
.home-banner .tech-stack li .stack {
        font-size:32px;
        padding:12px
}
footer {
        background-color:#666f80;
        color:#fff;
        padding:8px 0
}
.team-ui--item {
        position:relative
}
.team-ui--item figure {
        margin:0
}
.team-title,.team-subheading {
        letter-spacing:1px;
        text-transform:uppercase
}
.team-title {
        font-size:.875rem;
        font-weight:500;
        margin:0
}
.team-subheading {
        font-size:.75rem;
        color:#a8a8a8
}
.team-body {
        font-size:.875rem
}
.bg-white {
        background-color:#fff
}
.bg-shade-f9 {
        background-color:#f9f9f9
}
@media(max-width:1023px) {
        .mobile-gap {
        row-gap:26px
}
}.overlay-bg {
        position:absolute;
        width:100%;
        height:0;
        display:block;
        bottom:0;
        right:0;
        left:0;
        opacity:0;
        background-color:#000;
        overflow:hidden;
        transition:all .3s ease
}
.overlay-bg-gradient {
        position:absolute;
        width:100%;
        height:100%;
        display:block;
        bottom:0;
        right:0;
        left:0;
        background:linear-gradient(0deg,rgba(0,0,0,0.8) 0,rgba(255,255,255,0) 31%);
        overflow:hidden;
        transition:all .3s ease
}
img {
        max-width:100%;
        height:100%
}
.ui-team--social {
        margin-top:6px
}
.ui-team--social .social-item--icon {
        display:inline-block;
        text-align:center
}
.ui-team--social .social-item--icon a {
        color:#2b2b2b;
        padding:8px
}
.hgroup-spacer--btm {
        margin-bottom:48px
}
.hgroup-spacer--top {
        margin-top:48px
}
.style-1 {
        border-radius:10px;
        box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)
}
.style-1 figure {
        margin:0;
        position:relative;
        height:100%;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        height:250px
}
@media(max-width:1023px) {
        .style-1 figure {
        flex-direction:column
}
}@media(max-width:1023px) {
        .style-1 figure {
        height:auto
}
}.style-1 .team-col--sm {
        flex:0 0 auto;
        width:41.6667%
}
.style-1 .team-col--lg {
        flex:0 0 auto;
        width:58.3333%
}
@media(max-width:1023px) {
        .style-1 .team-col--sm,.style-1 .team-col--lg {
        width:100%
}
}.style-1 .team-image {
        overflow:hidden
}
.style-1 img {
        width:100%;
        height:100%;
        border-radius:10px 0 0 10px
}
@media(max-width:1023px) {
        .style-1 img {
        border-radius:10px 10px 0 0
}
}.style-1 .team-subheading+.team-body {
        margin-top:18px;
        margin-bottom:0
}
.style-1 .team-title {
        margin:0
}
.style-1 .ui-team--social {
        margin-top:16px
}
.style-1 figcaption {
        padding:32px
}
.style-2 {
        background-color:#fff;
        box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);
        border-radius:10px
}
.style-2 img {
        width:100%
}
.style-2 .team-ui--content {
        padding:16px 16px 24px
}
.style-2 figure img {
        border-radius:10px 10px 0 0
}
.style-3 {
        position:relative;
        min-height:389px;
        overflow:hidden
}
.style-3 figcaption {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%
}
.style-3 .team-col,.style-3 .team-image,.style-3 figure,.style-3 .team-image img {
        height:100%
}
.style-3 .team-image img {
        width:100%;
        height:auto
}
.style-3 .team-overlay--content {
        position:absolute;
        display:block;
        top:-100%;
        left:0;
        height:100%;
        width:100%;
        text-align:center;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        transition:all .3s ease-in-out;
        padding:0 6%
}
.style-3 .team-overlay--content .ui-team--social a {
        color:#fff
}
.style-3 .team-overlay--content p {
        color:#fff;
        font-size:.875rem
}
.style-3 .team-overlay--content .content-divider {
        background-color:#fff;
        height:1px;
        width:90%;
        display:block;
        margin:0 auto 8px
}
.style-3 .team-ui--content {
        padding:32px;
        color:#fff;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        transition:all .3s ease-in-out
}
.style-3 .team-subheading {
        color:#fff
}
.style-3:hover,.style-3:active {
        transition-duration:.2s ease-in-out
}
.style-3:hover .team-ui--content,.style-3:active .team-ui--content {
        bottom:-30%
}
.style-3:hover .team-overlay--content,.style-3:active .team-overlay--content {
        top:0
}
.style-3:hover .overlay-bg,.style-3:active .overlay-bg {
        height:100%;
        opacity:.5
}
.style-3:hover .overlay-bg-gradient,.style-3:active .overlay-bg-gradient {
        height:100%;
        background-color:rgba(0,0,0,0.5)
}
.style-4 figure {
        display:flex;
        flex-direction:column;
        align-items:center
}
.style-4 figure .team-image {
        width:200px;
        height:200px
}
.style-4 figure .team-image img {
        width:100%;
        border-radius:100%
}
.style-4 .team-ui--content {
        margin-top:24px
}
.style-5 {
        overflow:hidden
}
.style-5 .team-col,.style-5 .team-image,.style-5 figure,.style-5 .team-image img {
        height:100%
}
.style-5 .team-image {
        position:relative
}
.style-5 .team-image img {
        max-width:100%;
        width:100%;
        height:100%
}
.style-5 .team-ui--content {
        margin-top:24px
}
.style-5 .team-overlay--content {
        opacity:0;
        position:absolute;
        height:100%;
        width:100%;
        bottom:-15px;
        left:0;
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        transition:all .3s ease 0s
}
.style-5 .team-overlay--content .team-ui--content {
        padding:32px
}
.style-5 .team-overlay--content .ui-team--social a {
        color:#fff
}
.style-5:hover {
        transition-duration:.2s ease-in-out
}
.style-5:hover .team-overlay--content {
        opacity:1;
        z-index:2;
        bottom:0
}
.style-5:hover .overlay-bg {
        opacity:.5
}
.style-5 .overlay-bg {
        height:100%
}
.style-6 {
        padding:24px;
        box-shadow:0 0 0 0 rgba(0,0,0,0);
        transition:all .3s cubic-bezier(0.17,0.67,0.83,0.67);
        border-radius:10px
}
.style-6 img {
        width:100%
}
.style-6 .team-ui--content {
        padding:16px 16px 24px
}
.style-6:hover {
        background-color:#fff;
        box-shadow:0 0 15px 3px rgba(0,0,0,0.1)
}
.style-6 .ui-team--social .social-item--icon {
        padding:2px
}
.style-6 .ui-team--social .social-item--icon.fb:hover {
        color:#fff;
        border-radius:3px;
        background-color:#4267B2
}
.style-6 .ui-team--social .social-item--icon.fb:hover a {
        color:#fff
}
.style-6 .ui-team--social .social-item--icon.twt:hover {
        border-radius:3px;
        background-color:#1DA1F2
}
.style-6 .ui-team--social .social-item--icon.twt:hover a {
        color:#fff
}
.style-6 .ui-team--social .social-item--icon.insta:hover {
        border-radius:3px;
        background-color:#833AB4
}
.style-6 .ui-team--social .social-item--icon.insta:hover a {
        color:#fff
}
    </style>
</head>

<body>
    <main class="wrapper">
        <!-- Style 01 -->
        <div class="section bg-shade-f9" id="one">
            <div class="container">
                <div class="row mobile-gap">
                    <div class="col-xl-2 align-items-center">
                        <h2 class="team-ui--heading-line">Our Team</h2>
                    </div>
                    <div class="col-md-6 col-xl-5">
                        <div class="team-ui--item style-1 bg-white">
                            <figure>
                                <div class="team-col--sm team-image"><img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png" alt="image" class="team-ui--image"></div>
                                <div class="team-col--lg team-ui--content">
                                    <figcaption>
                                        <h3 class="team-title">Stacey Ferman</h3><span class="team-subheading">Co-Founder/COO</span>
                                        <p class="team-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text.</p>
                                        <div class="ui-team--social"><span class="social-item--icon"><a href=""><i class="fa fa-qq"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-twitter"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-tumblr"></i></a></span></div>
                                    </figcaption>
                                </div>
                            </figure>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-5">
                        <div class="team-ui--item style-1 bg-white">
                            <figure>
                                <div class="team-col--sm team-image"><img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png" alt="image" class="team-ui--image"></div>
                                <div class="team-col--lg team-ui--content">
                                    <figcaption>
                                        <h3 class="team-title">Janet Murray</h3><span class="team-subheading">Business Development</span>
                                        <p class="team-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text.</p>
                                        <div class="ui-team--social"><span class="social-item--icon"><a href=""><i class="fa fa-qq"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-twitter"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-tumblr"></i></a></span></div>
                                    </figcaption>
                                </div>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Style 02 -->
        <div class="section" id="two">
            <div class="container">
                <div class="row justify-content-center hgroup-spacer--btm">
                    <div class="col-md-10 col-lg-8 text-center"><span class="overline">Our awesome team</span>
                        <h2 class="section-heading">Meet the Team</h2>
                    </div>
                </div>
                <div class="row mobile-gap">
                    <div class="col-md-6 col-lg-3">
                        <div class="team-ui--item style-2 text-center">
                            <figure>
                                <div class="team-image"><img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png" alt="image" class="team-ui--image"></div>
                                <div class="team-ui--content">
                                    <figcaption>
                                        <h3 class="team-title">Bill Jones</h3><span class="team-subheading">Founder/CEO</span>
                                        <div class="ui-team--social"><span class="social-item--icon"><a href=""><i class="fa fa-qq"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-twitter"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-tumblr"></i></a></span></div>
                                    </figcaption>
                                </div>
                            </figure>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="team-ui--item style-2 text-center">
                            <figure>
                                <div class="team-image"><img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png" alt="image" class="team-ui--image"></div>
                                <div class="team-ui--content">
                                    <figcaption>
                                        <h3 class="team-title">Amy Garner</h3><span class="team-subheading">Creative Director</span>
                                        <div class="ui-team--social"><span class="social-item--icon"><a href=""><i class="fa fa-qq"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-twitter"></i></a></span><span class="social-item--icon"><a href=""><i class="fa fa-tumblr"></i></a></span></div>
                                    </figcaption>
                                </div>
                            </figure>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="team-ui--item style-2 text-center">
                            <figure>
                              .........完整代码请登录后点击上方下载按钮下载查看