who 的页面制作

1. html 结构

<!-- section: Who we are -->
  <section id="who">
    <div class="who-img"></div>
    <div class="who-text bg-dark p-2">
      <h2 class="m-heading"><span class="text-primary">Who</span> We Are</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus labore doloremque nihil, assumenda exercitationem ad odio, consequatur natus iure ab delectus quod et quibusdam dignissimos quisquam, quis corrupti velit. Repudiandae quae incidunt exercitationem ad harum.</p>
      <h3>Our Team</h3>
      <ul class="list">
        <li>Mark Smith: CEO</li>
        <li>Shannon Johnson: CFO</li>
        <li>John Corbit: Lead Accountant</li>
        <li>Janet Williams: Investment ManagerKara</li>
        <li>Jackson: Senior Accountant</li>
      </ul>
    </div>
  </section>

2. css 样式

#who {
  display: flex;
}
#who div {
  flex: 1;
  flex-basis: 50%;
}
#who .who-img {
  background: url('../img/2.jpg') no-repeat center center/cover;
}

.container {

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 2rem;

  overflow: hidden;

}

.text-center {

  text-align: center;

}

.bg-light {

  background: #f4f4f4;

  color: #333;

}

.bg-dark {

 background: #333;

 color: #fff;

}

.bg-primary {

  background: #93cb52;

  color: #fff;

}

.p-1 {

  padding: 1.5rem;

}

.p-2 {

  padding: 2rem;

}

.p-3 {

  padding: 3rem;

}

.text-primary {

  color: #32cb52;

}

.l-heading {

  font-size: 4rem;

  margin-bottom: 0.75rem;

  line-height: 1.1;

}

.m-heading {

  font-size: 2rem;

  margin-bottom: 0.75rem;

  line-height: 1.1;

}

.lead {

  font-size: 1.3rem;

  margin-bottom: 2rem;

}

.py-1 {

  padding: 1.5rem 0;

}

.py-2 {

  padding: 2rem 0;

}

.py-3 {

  padding: 3rem 0;

}

.btn {

  display: inline-block;

  color: #fff;

  background-color: #93cb52;

  padding: 0.5rem 2rem;  

  border: none;

  border-radius: 5px;

}

.btn:hover {

  background-color: #7ab436;

}

.btn-dark {

  background: #333;

  color: #fff;

}

.list {

  margin: 0.5rem 0;

  list-style: none;

}

.list li {

  padding: 0.5rem 0;

  border-bottom: #444 dotted 1px;

}