bootstrap六款自适应团队图文卡片介绍UI效果代码
代码语言：html
所属分类：响应式
代码描述：bootstrap六款自适应团队图文卡片介绍UI效果代码
代码标签： 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>
<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">Sharon Rose</h3><span class="team-subheading">Co-Founder/Design</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">Paul Hammer</h3><span class="team-subheading">Studio Head</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>
</div>
</div>
<!-- Style 03 -->
<div class="section bg-shade-f9" id="three">
<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-3">
<figure>
<div class="team-image"><img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png" alt="image" class="team-ui--image">
<div class="overlay-bg-gradient"></div>
<figcaption>
<div class="team-ui--content">
<h3 class="team-title">Nala Smith</h3><span class="team-subheading">Creative Director</span></div>
<div class="team-overlay--content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint incidunt eligendi aliquid fugiat voluptate recusandae alias animi?</p>
<div class="content-divider"></div>
<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>
</div>
</figcaption>
</div>
</figure>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="team-ui--item style-3">
<div class="team-image"><img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png" alt="image" class="team-ui--image">
<div class="overlay-bg-gradient"></div>
<figcaption>
<div class="team-ui--content">
<h3 class="team-title">Susan Man</h3><span class="team-subheading">Marketing</span></div>
<div class="team-overlay--content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint incidunt eligendi aliquid fugiat voluptate recusandae alias animi?</p>
<div class="content-divider"></div>
<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>
</div>
</figcaption>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="team-ui--item style-3">
<figure>
<div class="team-image"><img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png" alt="image" class="team-ui--image">
<div class="overlay-bg-gradient"></div>
<figcaption>
<div class="team-ui--content">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0