Bootstrap -tiimin jäsen -widget parallaksitaustalla

Viimeisin päivitys touko 10, 2022

Sisältö

Kun sinulla on tiimi, on hyvä esitellä heidät sivustossasi. Tämä parantaa käyttäjien uskottavuutta ja saa heidät uskomaan työskentelevänsä todellisten ihmisten kanssa. Tässä artikkelissa kerromme askel askeleelta, kuinka luodaan parallaksitaustainen tiimijäsen -widget suositulla Bootstrap -kehyksellä.

Tiimin jäsen -widget näyttää tältä:

Widgetissä on kaksi osaa:

Otsikko-osa sisältää Bootstrapin, fonttimaisen ja mukautetun CSS: n.
HTML -osa neljälle tiimin jäsenelle, profiilikuvat, otsikko, kuvaus ja sosiaaliset kuvakkeet.

Linkitä ensin Bootstrap ja fontti mahtava CSS kuten alla sivusi… tunnisteiden sisällä. Olemme käyttäneet CDN -linkkejä, voit joko käyttää CDN -linkkejä tai isännöidä palvelimellasi olevia tiedostoja ja linkittää tähän.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

Lisää seuraava mukautettu CSS ennen sulkutunnistetta.


<style>
#team {
background: url(https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team.jpg) no-repeat center center fixed;
padding: 60px 0;
text-align: center;
background-size: cover;
}
#team h2 {
color: #fff;
}
#team p {
color: #fff;
line-height: 25px;
}
#team h4 {
padding-top: 10px;
color: #fff;
font-weight:bold;
}
#team p.large {
margin-top: 60px;
margin-bottom: 30px;
}
#team .fa {
width: 30px;
height: 30px;
margin: 0 3px;
border-radius: 100%;
font-size: 15px;
line-height: 30px;
outline: 0;
color: #fff;
background-color: #e91e63;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#team .fa:hover {
background-color: #673ab7;
}
.teamborder {
border: 1px solid lightgray;
padding: 20px;
}
hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff);
width: 50%;
left: 25%;
position: relative;
border: none;
}
#team hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
width: 50%;
left: 25%;
position: relative;
border: none;
}
.row {
margin: 10px;
}
.btn-md {
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
transition: .2s ease-out;
cursor: pointer;
}
.team-md {
box-shadow: inset 0px 0px 22px 2px #e3d1d1;
transition: .2s ease-out;
}    
</style>

Muokattu CSS on erittäin helppo ymmärtää. Periaatteessa olemme määrittäneet vaakasuuntaisen jakajan (hr), kappaleen (p), otsikoiden (h2, h4) ja kirjasinkuvakkeiden (fa) tyylin. Myös "team-md" -luokkaa käytetään laatikon varjotehosteen luomiseen.

Widgetin HTML

HTML -osa on erittäin yksinkertainen kuin CSS. Alla on yksittäisen tiimin jäsenen HTML -koodi:


<div class="col-lg-3 teamborder team-md">
<!-- Profile Image -->
<img class="img img-circle"  data-src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt="">
<!-- Title -->
<h4>Team Member 1</h4>
<!-- Description -->
<p>Here is a short description to explain the profile of the member.</p>
<!-- Social Icons -->
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>

Tehdään täydellinen HTML -koodi neljälle tiimin jäsenelle:


<div id="team" name="team">
<div class="container">
<div class="row centered">
<h2 class="centered">MEET OUR AWESOME TEAM</h2>
<hr>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt="">
<h4>Team Member 1</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a> 
</div>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team02.jpg" height="120px" width="120px" alt="">
<h4>Team Member 2</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a> 
</div>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team03.jpg" height="120px" width="120px" alt="">
<h4>Team Member 3</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a> 
</div>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team04.jpg" height="120px" width="120px" alt="">
<h4>Team Member 4</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a> 
</div>
<div class="col-lg-8 col-lg-offset-2 centered">
<p class="large">Enter any additional information to be provided here.</p>
</div>
</div>
</div>
</div>

Yhdistäminen

Nyt CSS ja HTML ovat valmiita !!! Jut kokosi sen kuten alla, jotta saat täydellisen widgetin. Muista käyttää omia kuviasi ja lisätä alt -tunnisteet kaikille kuville.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
#team {
background: url(https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team.jpg) no-repeat center center fixed;
padding: 60px 0;
text-align: center;
background-size: cover;
}
#team h2 {
color: #fff;
}
#team p {
color: #fff;
line-height: 25px;
}
#team h4 {
padding-top: 10px;
color: #fff;
font-weight:bold;
}
#team p.large {
margin-top: 60px;
margin-bottom: 30px;
}
#team .fa {
width: 30px;
height: 30px;
margin: 0 3px;
border-radius: 100%;
font-size: 15px;
line-height: 30px;
outline: 0;
color: #fff;
background-color: #e91e63;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#team .fa:hover {
background-color: #673ab7;
}
.teamborder {
border: 1px solid lightgray;
padding: 20px;
}
hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff);
width: 50%;
left: 25%;
position: relative;
border: none;
}
#team hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
width: 50%;
left: 25%;
position: relative;
border: none;
}
.row {
margin: 10px;
}
.team-md {
box-shadow: inset 0px 0px 22px 2px #e3d1d1;
transition: .2s ease-out;
}    
</style>
</head>
<body>
<!-- Team Section -->
<div id="team" name="team">
<div class="container">
<div class="row centered">
<h2 class="centered">MEET OUR AWESOME TEAM</h2>
<hr>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt="">
<h4>Team Member 1</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a> 
</div>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team02.jpg" height="120px" width="120px" alt="">
<h4>Team Member 2</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team03.jpg" height="120px" width="120px" alt="">
<h4>Team Member 3</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a> 
</div>
<div class="col-lg-3 teamborder team-md"> 
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team04.jpg" height="120px" width="120px" alt="">
<h4>Team Member 4</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a> 
<a href="#"><i class="fa fa-facebook"></i></a> 
<a href="#"><i class="fa fa-linkedin"></i></a> 
</div>
<div class="col-lg-8 col-lg-offset-2 centered">
<p class="large">Enter any additional information to be provided here.</p>
</div>
</div>
</div>
</div>
</body>
</html>

Voit käyttää yllä olevaa koodia Bootstrap -sivustosi uuden tiimin jäsensivuna. Muussa tapauksessa kopioi vain mukautettu CSS- ja HTML -osa ja lisää ylätunniste- ja runko -osiot, jotta voit lisätä tiimin jäsen -widgetin mihin tahansa sivustollesi.

: www.webnots.com