Hướng dẫn cắt PSD toàn tập với Leospa design phần 3

Ở bài trước chúng ta đã hoàn thành cơ bản xong phần Header. Hôm nay chúng ta sẽ tiếp tục tới phần About như hình dưới đây. Tiến hành vào làm thôi nào.

# About Info

html

Nhìn vào thiết kế ta thấy đầu tiên là nội dung phần About nằm ở giữa cho nên chúng ta sẽ dùng class container bên trong như đã thiết lập ở các bài trước. Cũng như thêm một class about__inner nằm cùng với container để thiết lập vị trí cho 2 bông hoa nằm một góc bên trái trên cùng và một cái bên phải ở giữa. Chúng ta có thể đặt class lần lượt là about__flower1 và about__flower2.

Về phần nội dung thì mình sẽ đặt class là about__content với thẻ img là logo và thẻ h3 là tiêu đề nhỏ. Còn đoạn tiêu đề lớn và đoạn text ở dưới vì còn tái sử dụng ở các block khác sau này nên mình đặt một block có class là heading với thẻ h2 có class là heading__title và thẻ p là heading__desc.

Dưới cùng là một thẻ a được style dưới dạng button. Như đã phân tích ở bài trước thì thẻ a này có style primary, bo góc nên có class tương ứng là btn btn--primary btn--rounded nhé.

Lúc này chúng ta sẽ có HTML như đã phân tích như sau:

<section class="about">
  <div class="about__inner container">
    <img src="./images/china-rose.png" alt="" class="about__flower1" />
    <img src="./images/jasmine.png" alt="" class="about__flower2" />
    <div class="about__content">
      <img src="./images/butterfly.png" alt="" />
      <h3>About our spa center</h3>
      <div class="heading">
        <h2 class="heading__title">Come and you will be Inspired</h2>
        <p class="heading__desc">
          It’s the end of summer the sweltering heat makes human sweat in
          the night and makes the plants and trees wilt even in the
          moonlit nights. The eastern wind breeze brings an eerie feeling,
          that the monsoon clouds are soon coming, there is a strange
          silence in the ears, the sky gets darker and darker.
        </p>
      </div>
      <a href="#" class="btn btn--primary btn--rounded">Read more</a>
    </div>
  </div>
</section>

css

Khoảng cách trên dưới của block About là 14rem, để 2 bông hoa hiển thị như phân tích thì ta dùng thuộc tính position: absolute để căn chỉnh cho 2 bông hoa này. Lúc này class about__inner sẽ có position: relative. Ở đây chỉ đơn giản là CSS kích thước chữ, kiểu chữ và màu sắc nên mình không có giải thích thêm nhé. Ta có CSS cho đoạn about__content như sau

.about__inner {
  position: relative;
  padding-top: 14rem;
  padding-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .about__inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.about__flower1 {
  position: absolute;
  max-width: 13.5rem;
  top: 0;
  left: 0;
}
.about__flower2 {
  position: absolute;
  max-width: 7rem;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.about__content {
  position: relative;
  z-index: 5;
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .about__content {
    max-width: 72%;
  }
}
.about__content img {
  margin: 0 auto 4rem;
  max-width: 8rem;
}
.about__content h3 {
  text-transform: uppercase;
  color: var(--gray-light);
  font-weight: 300;
  font-size: 2rem;
  margin-bottom: 4rem;
}

responsive

Mình thấy block About này khi ở mobile thì khoảng cách trên dưới 14rem lớn quá nên mình giảm xuống còn 4rem cho nó ngắn lại. Cũng như trên màn hình máy tính thì chỗ about__content chỉ chiếm 72% thôi.

# About Images

html

Ở phần này thì chúng ta thấy nó là một danh sách có 4 tấm hình dàn hàng ngang, cao bằng nhau. Chúng ta có thể đặt class cho một thẻ ul là about__list chẳng hạn và các phần tử bên trong là thẻ li có class là about__item có nội dung là một tấm hình, và một class khác có tên about__item-content sẽ chứa một tấm hình nhỏ khác kèm theo đoạn chữ “Body Treatment” và màu nền là màu chủ đạo phủ lên tấm hình khi chúng ta :hover vào.

Từ đây chúng ta có HTML như sau. Lưu ý là class about__list này nằm cùng cấp với class about__inner mình nói ở trên nhé. Nó không nằm trong container là bởi vì nó chiếm 100% chiều rộng của thiết kế.

<ul class="about__list">
  <li class="about__item">
    <img src="./images/11.jpg" alt="" />
    <div class="about__item-content">
      <img src="./images/1.png" alt="" />
      <span>Body treatment</span>
    </div>
  </li>
  <li class="about__item">
    <img src="./images/20.jpg" alt="" />
    <div class="about__item-content">
      <img src="./images/1.png" alt="" />
      <span>Body treatment</span>
    </div>
  </li>
  <li class="about__item">
    <img src="./images/30.jpg" alt="" />
    <div class="about__item-content">
      <img src="./images/1.png" alt="" />
      <span>Body treatment</span>
    </div>
  </li>
  <li class="about__item">
    <img src="./images/4.jpg" alt="" />
    <div class="about__item-content">
      <img src="./images/1.png" alt="" />
      <span>Body treatment</span>
    </div>
  </li>
</ul>

css

Vì các phần tử nằm ngang cao bằng nhau luôn nên mình sẽ dùng display: flex cho about__list và cho các phần tử cách nhau thì chúng ta dùng justify-content: space-between nhé. Các phần tử này có độ rộng là 476px / 1920px * 100% ta được khoảng 24.8%. Và các bạn để ý khi :hover thì hiện lên một cái nền màu chủ đạo kèm nội dung bên trong đó chính là class about__item-content dùng position: absolute.

Do đó ở about__item phải có thêm thuộc tính position: relative nhé. Để about__item-content phủ lên hết thì chúng ta dùng ngoài position: absolute kết hợp các thuộc tính top, right, bottom left đều là 0 để phủ kín toàn about__item. Kết hợp thêm tí Flexbox cho nội dung ra giữa, background-color, z-index cao để nó nằm lên trên và chúng ta sẽ cho ẩn đi bằng thuộc tính opacity: 0 và visibility: hidden.

Để khi hover vào about__item thì chúng ta sẽ trỏ tới about__item-content có opacity: 1 và visibility: visible để nó hiện ra là ngon lành. Ta có CSS như sau:

.about__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.about__item {
  width: 24.8%;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .about__item {
    width: 49.6%;
  }
}
@media screen and (max-width: 767px) {
  .about__item {
    width: 100%;
  }
}
.about__item:hover .about__item-content {
  opacity: 1;
  visibility: visible;
}
.about__item-content {
  background-color: var(--primary-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--secondary-font);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear, visibility 0.2s linear;
}
.about__item-content > img {
  max-width: 5rem;
  margin-bottom: 1rem;
}
.about__item-content > span {
  font-size: 2.2rem;
  font-weight: bold;
}

responsive

Phần này khi co giãn xuống màn hình Tablet thì mình cho mỗi bên một cái nên là độ rộng gấp đôi ở hiện tại là 24.8 x 2 = 49.6% và khi ở Mobile mình cho nó chiếm hết chiều ngang là 100% nhé.

# Tạm kết

Sau khi hoàn thành xong và chúng ta sẽ có kết quả như sau. Đừng quên tham khảo code của mình tại đây. Chúc các bạn một ngày tốt lành nhé.

.