Code Footer Section

Lập trình CSS và SASS nâng cao với dự án website Landing Page

0.0 (0 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 13:28 17-11-2019 960 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

Code Footer Section

Dẫn nhập

Trong bài học trước chúng ta đã cùng nhau code HOÀN THIỆN CSS CHO FORM COMPONENT.

Trong bài hôm này chúng ta sẽ Code Section Footer.


Nội dung

Để tiếp thu tốt bài học này các bạn cần:

Trong bài này chúng ta sẽ cùng nhau:

  • Code HTML Footer
  • Code CSS cho Footer

Code HTML Footer

Tương tự các bài trước chúng ta sẽ cùng nhìn qua sản phẩm cuối cùng mà chúng ta sẽ làm được

Ở đây ta thấy bố cục footer gồm 3 phần chính: Phần 1 là logo, 2 phần còn lại gồm bên phải là copy right, bên trái là là các đường link

<footer class="footer">
        <div class="footer__logo-box">
            <img src="./img/logopng.png" class="footer__logo">
            <h3 class="heading-secondary footer__title">
                SelfTaught
            </h3>
        </div>
        <div class="row">
            <div class="col-1-of-2">
                <div class="footer__navigation">
                    <ul class="footer__list">
                        <li class="footer__item">
                            <a href="/redirect?Id=Ok7QNCdcSHCUf3tyR7o94w%3d%3d" class="footer__link">Address</a>
                        </li>
                        <li class="footer__item">
                            <a href="/redirect?Id=Ok7QNCdcSHCUf3tyR7o94w%3d%3d" class="footer__link">Contacts</a>
                        </li>
                        <li class="footer__item">
                            <a href="/redirect?Id=Ok7QNCdcSHCUf3tyR7o94w%3d%3d" class="footer__link">Policy</a>
                        </li>
                        <li class="footer__item">
                            <a href="/redirect?Id=Ok7QNCdcSHCUf3tyR7o94w%3d%3d" class="footer__link">Sponsors</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-1-of-2">
                <p class="footer__copyright">
                    Copyright &copy; by Selftaught Team. You are 100% allowed to use this webpages for both personal and commercial use, but NOT to claim it as your personal design.
                </p>
            </div>
        </div>
    </footer>

Phần 1 gồm footer__logo footer__title được đặt trong thẻ div chung là footer__logo-box

Phần 2 và 3 tách ra sử dụng grid và được bọc trong 2 thẻ div có tên là footer__navigation (chứa các link), footer__copyright (chứa nội dung copyright)

Bên trong footer__navigation footer__list chứa các footer__item chứa các footer__link

Vậy là chúng ta đã code xong phần HTML của footer.

Giờ thì bắt tay vào code CSS thui nào.


Code CSS cho Footer

Chúng ta sẽ code CSS của Footer trong file _footer.scss để trong folder layout và import nó vào trong file main.scss

Ta thêm 1 variable vào _variables.scss để làm màu nền cho footer, tạm thời sẽ đặt tên màu là $color-grey-dark-1: #333

//abstracts/_variables.scss
$color-grey-dark-1: #333;

Giờ thì chúng ta sẽ code chung cho phần footer trước:

Trước hết sẽ là màu của background sử dụng variable $color-grey-dark-1 và màu của chữ sẽ để là $color-grey-light-1

Ta cũng set luôn fontsize trong phần footer này là 1.4rem và 1 chút margin cho top và bottom của footer.

.footer{
    background-color: $color-grey-dark-1;
    padding: 10rem 0;
    font-size: 1.4rem;
    color: $color-grey-light-1;
}

Tiếp chúng ta set property cho logo. Chúng ta sẽ để footer__logo-box ở giữa sử dụng text-align:center, và cho nó có khoảng cách với các phần còn lại bằng cách để margin-bottom

&__logo-box{
         text-align: center;
         margin-bottom: 8rem;
    }

Và ta sẽ set tiếp luôn thuộc tính cho &__logo&__title

&__logo thì ta chỉ set width cho nó sao cho phù hợp, và height để auto

&__logo{
        width: 20rem;
        height: auto;
    }

&__title thì ta sẽ để display: block thì nó sẽ khồng còn nằm trên cùng 1 hàng với logo nữa và để color nó là $color-primary

&__title{
        display: block;
        color: $color-primary;
    }

Ta sẽ giải quyết thằng footer__copyright trước, như các bạn thấy ở cả copyright lẫn navigation thì chúng đều có border-top, và chúng ta sẽ set up chúng rất đơn giản như sau

&__copyright{
        border-top: 1px solid $color-grey-light-1;
        padding-top: 2rem;
        width: 70%;
        float: right;
    }

Ở đây width:  70% và float right sẽ giúp đoạn paragraph của copy right thu gọn về bên trái.

Giờ thì chúng ta chuyển sang phần footer__navigation

&__navigation{
        border-top: 1px solid $color-grey-light-1;
        padding-top: 2rem;
        display: inline-block;    
    }

Phần này nó có border-top setup hoàn toàn giống footer__copyright

và display để là inline-block sẽ giúp border-top chỉ ôm vừa đủ phần chứa link (các bạn có thể thử bỏ display đi để thấy sự khác biết nhé :P)

Tiếp đến footer__list sẽ để list-style: none;

&__navigation{
        border-top: 1px solid $color-grey-light-1;
        padding-top: 2rem;
        display: inline-block;
    }

    &__list{
      list-style: none;
    }

footer__item sẽ để display: inline block để các link hiển thị trên cùng 1 hàng và ta sẽ set khoảng cách cho chúng bằng cách sử dụng margin-right  

    &__list{
      list-style: none;
    }

    &__item{
      display: inline-block;

      &:not(:last-child){
          margin-right: 1.5rem;
      }
    }

Cuối cùng thì chúng ta sẽ code phần footer__link

Quan sát chúng ta sẽ có, text-transform là uppercase, text-decoration là none, và ta phải để display: inline-block thì mới có thể set border-radius và các thông số khác cho footer__link được

&__link{
          &:link,
          &:visited{
              color: $color-grey-light-1;
              background-color: $color-grey-dark-1;
              text-transform: uppercase;
              text-decoration: none;
              display: inline-block;
              border-radius: 5rem;
          }
    }

Khi hover thì button chuyển màu thành màu $color-primary và xuất hiện shadow cũng như nghiêng 1 chút. Toàn bộ thuộc tích làm thế nào để làm element nghiêng, set shadow đã được giới thiệu ở các bài trước, giờ ta chỉ cần áp dụng vào là được.  

&__link{
          &:hover,
          &:active{
              color: $color-primary;
              box-shadow: 0 1rem 2rem rgba($color-black, .4);
              transform: rotate(5deg) scale(1.05);
          }
    }

Giờ thì set thêm transition cho footer__link nữa là chúng ta đã hoàn thiện phần footer rồi.


Code SASS

.footer{
    background-color: $color-grey-dark-1;
    padding: 10rem 0;
    font-size: 1.4rem;
    color: $color-grey-light-1;
    

    &__logo-box{
         text-align: center;
         margin-bottom: 8rem;
    }

    &__logo{
        width: 20rem;
        height: auto;
    }

    &__navigation{
        border-top: 1px solid $color-grey-light-1;
        padding-top: 2rem;
        display: inline-block;
    }

    &__list{
      list-style: none;
    }

    &__item{
      display: inline-block;

      &:not(:last-child){
          margin-right: 1.5rem;
      }
    }

    &__link{
          &:link,
          &:visited{
              color: $color-grey-light-1;
              background-color: $color-grey-dark-1;
              text-transform: uppercase;
              text-decoration: none;
              display: inline-block;
              border-radius: 5rem;
              transition: all .2s;
          }

          &:hover,
          &:active{
              color: $color-primary;
              box-shadow: 0 1rem 2rem rgba($color-black, .4);
              transform: rotate(5deg) scale(1.05);
          }
    }

    &__copyright{
        border-top: 1px solid $color-grey-light-1;
        padding-top: 2rem;
        width: 70%;
        float: right;
    }

    &__title{
        display: block;
        color: $color-primary;
    }
}

Kết luận

Ở bài này chúng ta đã cùng nhau kết thúc phần Code Footer

Trong bài học sau chúng ta sẽ cùng nhau CODE PHẦN POPUP khi click vào button “enroll now” trong course section.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triền bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó"


Tải xuống

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Tác giả/Dịch giả

Khóa học

Lập trình CSS và SASS nâng cao với dự án website Landing Page

Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về  HTML và CSS.

Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.

  • Phần 1: CSS và SASS Nâng Cao
  • Phần 2: Flexbox và CSS grid layouts

Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.

Bạn cũng có thể truy cập vào đường link bên dưới để xem bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé! 

LANDING PAGE WEBSITE SELFTAUGHT 2019

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.