Website in Team Members

Bootstrap is a potent front-end framework used to create modern websites and web apps. It's open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.
*Use Bootstrap 5

Font Awesome is a robust icon set that contains scalable vector icons. And amazingly enough, it is free (icons sets can be quite expensive, making this a pretty sweet deal). There are many important types of icons that come with Font Awesome: social media, UI/web-related, and more!
*Use Font Awesome

Design #1

<== HTML ==>
<div class="dd-box">
   <div class="dd-img">
      <div class="dd-border"></div>
      <img src="img path">
   </div>
</div>
	

	
<== CSS ==>
<style>

   .dd-box{
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
   }
   
   .dd-img img{
      width: 100%;
      height: 100%;
      object-fit: fill;
      border-radius: 50%;
      padding: 20px;
   }
   
   .dd-border{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 10px solid;
      border-color: #fd3f30 #535353 #535353 #fd3f30;
      border-radius: 50%;
      transition: .3s;
   }
   
   .dd-box:hover .dd-border{
      transform: rotate(180deg);
   }

</style>

Design #2

<== HTML ==>
<div class="dd-box">
   <div class="dd-img">
      <div class="dd-border"></div>
      <div class="dd-border2"></div>
      <img src="img path">
   </div>
</div>
	

	
<== CSS ==>
<style>

   .dd-box{
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
   }

   .dd-img img{
      width: 100%;
      height: 100%;
      object-fit: fill;
      border-radius: 50%;
      padding: 20px;
   }

   .dd-border{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 6px solid #535353;
      border-radius: 50%;
      transition: .3s;
      z-index: 2;
   }

   .dd-border2{
      position: absolute;
      top: -12px;
      left: -12px;
      right: -12px;
      bottom: -12px;
      border: 10px solid #fd3f30;
      border-radius: 50%;
      transition: .3s;
      z-index: 1;
   }

   .dd-box:hover .dd-border{
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
   }

   .dd-box:hover .dd-border2{
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
   }

</style>

Design #3

USER

Name Name

User Post 
<== HTML ==>
<div class="dd-img overflow-hidden">
   <img src="img path">
   <div class="dd-data">
      <h4 class="name1 bg-dark text-light py-2 px-3">Name Name</h4>
      <span class="name2 d-inline-block bg-dark text-light py-1 px-3">Name Name</span>
   </div>
</div>
	

	
<== CSS ==>
<style>

   .dd-img{
      position: relative;
      width: 300px;
      height: 340px;
      margin: auto;
   }

   .dd-img img{
      width: 100%;
      height: 100%;
   }

   .dd-data{
      position: absolute;
      left: -100%;
      bottom: 4px;
      transition: .3s;
   }

   .dd-img:hover .dd-data{
      left: 0;
   }
   
</style>

Design #4

Person Name
Post Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, eum officia! Nisi delectus, ea ipsum id aperiam fugiat, voluptatem laudantium doloremque ut odit a nemo nulla voluptas excepturi temporibus in. 
<== HTML ==>
<div class="dd-box shadow">
   <div class="angle d2"></div>
   <div class="angle d3"></div>

   <div class="dd-img">
      <img src="img path">
   </div>
   
   <div class="dd-data">
      <hr class="m-0 w-75 mt-2 mx-auto">
      <h5 class="head elli text-center pt-1 m-0">Person Name</h5>
      <div class="post elli text-center">Post Title</div>
      <hr class="m-0 w-75 mx-auto">
      <div class="p-tag p-m-0">
         Lorem ipsum dolor sit amet consectetur 
         adipisicing elit.Est, eum officia! Nisi 
         delectus, ea ipsumid aperiam fugiat, 
         voluptatem laudantium doloremque ut odit 
         a nemo nulla voluptas excepturi 
         temporibus in.
      </div>
   </div>
</div>
	

	
<== CSS ==>
<style>

.dd-img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 6px double #fd3f30;
  margin: auto;
}

.dd-img img{
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 50%;
}

.dd-box{
  position: relative;
  max-width: 306px;
  padding: 20px;
  margin: auto;
}

.dd-box .head{
  color: #fd3f30;
}

.dd-box .post{
  display: block;
  font-size: 14px;
  text-transform: capitalize;
  color: #505050;
  font-weight: 500;
  margin: 0;
}

.dd-data .p-tag{
  height: 92px;
  line-height: 18px;
  overflow-y: auto;
  margin-top: 15px;
}

.dd-data .p-tag::-webkit-scrollbar {
  width: 4px;
}

.dd-data .p-tag::-webkit-scrollbar-thumb {
  background: rgb(172, 172, 172); 
}

.dd-box .angle{
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 20px;
  border: 6px solid #fd3f30;
}

.dd-box .d1{
  top: 0;
  right: 0;
  border-color: #fd3f30 #fd3f30 transparent transparent;
}

.dd-box .d2{
  bottom: 0;
  right: 0;
  border-color: transparent #fd3f30 #fd3f30 transparent;
}

.dd-box .d3{
  top: 0;
  left: 0;
  border-color: #fd3f30 transparent transparent #fd3f30;
}

.dd-box .d4{
  bottom: 0;
  left: 0;
  border-color: transparent transparent #fd3f30 #fd3f30;
}

</style>

Design #5

<== HTML ==>
<div class="dd-box">
   <div class="dd-img shadow">
      <div class="dd-icon">
         <i class="fa fa-user"></i>
      </div>
      <img src="img path">
   </div>
</div>
	

	
<== CSS ==>
<style>

.dd-img{
   position: relative;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   margin: auto;
}

.dd-img img {
   width: 100%;
   height: 100%;
   object-fit: fill;
   border-radius: 50%;
}

.dd-icon{
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 55px;
   height: 55px;
   color: white;
   background: #fd3f30;
   font-size: 20px;
   text-shadow: 0 0 4px #000;
   border-radius: 50%;
   transition: .3s;
}

.dd-box:hover .dd-icon{
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   background: rgba(253, 62, 48, 0.2);
}

.dd-box:hover .dd-icon i{
   opacity: 0;
}

</style>

Design #6

Person Name

-Post Title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam animi ipsum dolorum eum minima. Inventore, debitis suscipit beatae deleniti dolore aspernatur molestias! Error eveniet nesciunt esse, beatae fugiat enim doloremque. 
<== HTML ==>
<div class="dd-box shadow">
   <div class="row justify-content-between align-items-end">
      <div class="col-6">
         <div class="dd-img p-0">
            <img src="img path">
         </div>
      </div>
      <div class="col-6">
         <h5 class="name text-end m-0">Person Name</h5>
         <p class="post text-end m-0">-Post Title</p>
      </div>
   </div>

   <div class="mt-3 ps-3 position-relative">
      <div class="dd-info">
         Lorem ipsum, dolor sit amet consectetur 
            adipisicing elit. Numquam animi ipsum 
            dolorum eum minima. Inventore, debitis 
            suscipit beatae deleniti dolore aspernatur 
            molestias! Error eveniet nesciunt esse, 
            beatae fugiat enim doloremque.
      </div>
   </div>
   


	
<== CSS ==>
<style>

.dd-box{
   position: relative;
   max-width: 600px;
   padding: 20px 40px;
   margin: 20px auto;
}

.dd-box::after{
   position: absolute;
   content: "";
   top: 0px;
   right: 0px;
   width: 50px;
   height: 50px;
   text-align: center;
   color: #ddd;
   border: 18px solid;
   border-color: #fd3f30 #fd3f30 transparent transparent;
   padding: 0 0 0 10px;
}

.dd-img{
   width: 120px;
   height: 120px;
   border-radius: 50%;
   overflow: hidden;
   border: 4px solid #fd3f30;
   box-shadow: 0 0 5px #ddd;
}

.dd-img img{
   width: 100%;
   height: 100%;
   object-fit: fill;
}

.dd-info::after{
   position: absolute;
   content: "";
   width: 86%;
   height: 0.1px;
   left: 4%;
   top: -4px;
   background-color: #007acc;
}

.dd-info::before{
   position: absolute;
   content: "\26E4";
   width: 12px;
   height: 12px;
   left: 90%;
   top: -16px;
   border-radius: 50%;
   color: #007acc;
   font-size: 16px;
   font-weight: 900;
}

</style>

Design #7

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis aperiam est magnam officia excepturi molestiae! Molestias excepturi perspiciatis velit nisi, distinctio cumque debitis cum aliquid eligendi beatae quidem ipsam unde.

Person Name Post Title 

<== HTML ==>
<div class="dd-box">
   <div class="dd-data">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis 
         aperiam est magnam officia excepturi molestiae! Molestias 
         excepturi perspiciatis velit nisi, distinctio cumque debitis cum 
         aliquid eligendi beatae quidem ipsam unde.
      </p>
      <h3 class="head">
         Person Name
         <small>
            Post Title
         </small>
      </h3>
   </div>
   <div class="dd-img">
      <img src="img path">
   </div>
</div>
   

	
<== CSS ==>
<style>

.dd-box{
   max-width: 400px;
   margin: auto;
}
.dd-box .dd-data{
   padding:15px ;
   background:#f1f1f1;
   border-radius: 0 40px 0 40px;
   border-bottom:3px solid #007acc;
}
.dd-box p{
   height: 120px;
   font-size: 15px;
   color:#333;
   line-height:24px;
   margin-bottom:20px;
}
.dd-box .head{
   font-size: 16px;
   font-weight: bold;
   color:#007acc;
   text-transform:capitalize;
   text-align:center;
   display: block;
   margin: 10px 0  0 0;
}
.dd-box .head small{
   display: block;
   /* margin: 20px 0 0; */
   color:#212529;
   font-size: 14px;
   font-weight: 500;
}
.dd-box .dd-img{
   width: 100px;
   height: 100px;
   border-bottom: 4px solid #007acc;
   border-radius: 50%;
   margin: 15px auto;
   box-shadow: 0 0 5px;
   overflow: hidden;
}
.dd-box .dd-img img{
   width: 100%;
   height: 100%;
   object-fit: fill;
   border: 1px solid #808080;
   border-radius: 50%;
   margin-top: -1px;
}

</style>

Design #8

Person Name

Post Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci impedit at mollitia similique sunt omnis quisquam, quaerat esse quam iste. Error voluptatibus molestias quia, libero quaerat dolor odit illo cum. 

<== HTML ==>
<div class="dd-box shadow">
   <div class="row justify-content-center align-items-center">
      <div class="dd-img col-lg-3">
         <img src="img path">
      </div>
      <div class="dd-data col-lg-9">
         <h4 class="head text-center text-lg-start pt-lg-0 pt-4">Person Name</h4>
         <span class="post text-center text-lg-start">Post Title</span>
         <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci impedit 
            at mollitia similique sunt omnis quisquam, quaerat esse quam iste. 
            Error voluptatibus molestias quia, libero quaerat dolor odit illo cum.
         </p>
      </div>
   </div>
</div>
   

	
<== CSS ==>
<style>

.dd-img{
   max-width: 250px;
   position: relative;
   padding: 10px 0;
   z-index: 1;
 }
.dd-img::after,
.dd-img::before{
   content: "";
   width: 100px;
   height: 130px;
   background: #007acc;
   position: absolute;
   z-index: -1;
}
.dd-img::before{
   top: 0;
   right: -10px;
}
.dd-img::after{
   bottom: 0;
   left: -10px;
}
.dd-img img{
   width: 100%;
   height: 280px;
   object-fit: fill;
   border: 4px solid #007acc;
}
.dd-data{
   z-index: 1;
}
.dd-data .head{
   display: block;
   font-size: 20px;
   font-weight: 600;
   color: #fd3f30;
   margin: 0;
   padding-left: 15px;
}
.dd-data .post{
   display: block;
   font-weight: 500;
   color: #212529;
   margin-bottom: 25px;
   padding-left: 15px;
}
.dd-data p{
   font-size: 16px;
   color: #111;
   padding: 0 15px;
   margin: 0;
   position: relative;
}
.dd-data p:before{
   font-family: "FontAwesome";
   font-weight: 900;
   font-size: 17px;
   color: #fd3f30;
   position: relative;
}
.dd-data p:before{
   content: "\f10d";
   margin-right: 5px;
   top: 0;
   left: 0;
}

</style>

Design #9

Person Name

Post Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi sapiente quaerat, iusto perspiciatis ipsa atque maiores fugit. Debitis aliquid rem, quasi ab eos exercitationem fugiat vitae laborum blanditiis nemo! Explicabo! 
<== HTML ==>
<div class="dd-box">
   <div class="dd-img">
      <img src="img path">
   </div>
   <div class="dd-data">
      <h5 class="head">Person Name</h5>
      <p class="post">Post Title</p>
      <div class="dd-desc">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi 
         sapiente quaerat, iusto perspiciatis ipsa atque maiores fugit. 
         Debitis aliquid rem, quasi ab eos exercitationem fugiat vitae 
         laborum blanditiis nemo! Explicabo!
      </div>
   </div>
</div>
   

	
<== CSS ==>
<style>

.dd-box {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
}

.dd-box .dd-img {
  flex: 25%;
  margin: 0 15px;
}

.dd-box .dd-img img {
  width: 120px;
  height: 120px;
  object-fit: fill;
  border-radius: 50%;
  border: 2px solid #212529;
  transition: all .2s ease-in-out;
  position: relative;
  object-position: top;
}

.dd-box:hover .dd-img img {
  transform: scale(0.9);
  transition: all .2s ease-in-out;
  border: 5px solid #212529;
}

.dd-box .dd-data {
  flex: 75%;
  padding: 25px 30px 25px 60px;
  border-radius: 0 20px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px #ddd;
  position: relative;
  transition: all .5s ease-in-out;
}

.dd-box:hover .dd-data {
  background-color: #212529;
  color: #f0f0f0;
  transition: all .5s ease-in-out;
}

.dd-box .dd-data::after {
  position: absolute;
  content: "\f10d";
  font-family: "FontAwesome";
  top: 20px;
  left: 14px;
  font-size: 35px;
  color: #ddd;
}

.dd-box .dd-data .head {
  color: #212529;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 0px;
}

.dd-box:hover .dd-data .head {
  color: #fd3f30;
}

.dd-box .dd-data .post {
  font-size: 13px;
  font-style: oblique;
  font-weight: 500;
}

.dd-box .dd-data .dd-desc {
  height: 120px;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  overflow-y: auto;
}

.dd-box .dd-data .dd-desc::-webkit-scrollbar {
  width: 2px;
}

.dd-box .dd-data .dd-desc::-webkit-scrollbar-thumb {
  background: #007acc; 
  border-radius: 10px;
}

</style>

Design #10

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat dicta libero odit, aliquam impedit laboriosam quia odio esse suscipit deleniti ad pariatur! Cupiditate cum minus voluptates nisi asperiores natus fugiat?

Person Name Post Title 

<== HTML ==>
<div class="dd-box px-3">
   <div class="dd-data">
      <div class="dd-icon">
         <i class="fa fa-quote-left"></i>
      </div>
      <p>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
         Quaerat dicta libero odit, aliquam impedit laboriosam quia 
         odio esse suscipit deleniti ad pariatur! Cupiditate cum minus 
         voluptates nisi asperiores natus fugiat?
      </p>
   </div>
   <img src="img path" class="dd-img shadow">
   <h3 class="head">
      Person Name
      <span class="post">Post Title</span>
   </h3>
</div>
   

<== CSS ==>
<style>

.dd-box{
  max-width: 500px;
  margin: auto;
}

.dd-data {
  position: relative;
  background: #fff;
  border: 1px solid #f0f0f0;
  padding: 35px 22px 35px 50px;
  margin-bottom: 30px;
}

.dd-data:after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -10px;
  left: 22px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  transform: rotate(45deg);
}

.dd-data .dd-icon {
  width: 50px;
  height: 45px;
  background: #fd3f30;
  text-align: center;
  font-size: 22px;
  color: #212529;
  line-height: 42px;
  position: absolute;
  top: 37px;
  left: -19px;
}

.dd-data .dd-icon:before {
  content: "";
  border-bottom: 16px solid #fd3f30;
  border-left: 18px solid transparent;
  position: absolute;
  top: -16px;
  left: 1px;
}

.dd-data .dd-icon i {
  line-height: 45px;
}

.dd-img {
  display: inline-block !important;
  height: 80px;
  width: 80px !important;
  object-fit: fill;
  border-radius: 50%;
}

.dd-data p {
  font-size: 15px;
  font-style: italic;
  color: #222;
  line-height: 23px;
  margin: 0;
  height: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.head {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: #007acc;
  text-transform: capitalize;
  letter-spacing: 1px;
  margin-left: 20px;
}

.post {
  display: block;
  font-size: 14px;
  color: #212529;
  font-weight: 500;
  margin-top: 5px;
}

</style>