Bootstrap Team Member Page Layout

An about page, team member layout for Bootstrap 4 - created by Start Bootstrap

by master1991

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div id="content">
  <!-- Header -->
  <header class="bg-primary text-center py-5 mb-4 forshadow" style="background-color: #671d9d !important;">
    <div class="container">
      <h1 class="font-weight-light text-white">Meet the Team</h1>
    </div>
  </header>

  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <!-- Team Member 1 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow">

          <div class="card-body text-center forshadow2">
            <h5 class="card-title mb-0">Team Member</h5>
            <div class="card-text text-black-50">Web Developer</div>
          </div>
        </div>
      </div>
      <!-- Team Member 2 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow">

          <div class="card-body text-center forshadow3">
            <h5 class="card-title mb-0">Team Member</h5>
            <div class="card-text text-black-50">Web Developer</div>
          </div>
        </div>
      </div>
      <!-- Team Member 3 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow">

          <div class="card-body text-center forshadow2">
            <h5 class="card-title mb-0">Team Member</h5>
            <div class="card-text text-black-50">Web Developer</div>
          </div>
        </div>
      </div>
      <!-- Team Member 4 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow">

          <div class="card-body text-center forshadow3">
            <h5 class="card-title mb-0">Team Member</h5>
            <div class="card-text text-black-50">Web Developer</div>
          </div>
       ...

CSS

body {
    background-color: #8458B3;
}

#background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #a28089;
    z-index: 1;
}

#content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.forshadow {
    border: solid white 1px;
    -webkit-box-shadow: 0 0 40px white;
    -moz-box-shadow: 0 0 20px white;
    box-shadow: 0 0 20px white;  
}

.forshadow2 {
    border: solid #8458B3 1px;
    -webkit-box-shadow: 0 0 20px white;
    -moz-box-shadow: 0 0 20px white;
    box-shadow: 0 0 20px white;  
}

.forshadow3 {
    border: solid #a28089 1px;
    -webkit-box-shadow: 0 0 20px white;
    -moz-box-shadow: 0 0 20px white;
    box-shadow: 0 0 20px white;  
}