Code responsive cho các Section

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

5.0 (1 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 11:41 14-05-2020 516 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

Code responsive cho các Section

Dẫn nhập

Ở bài học trước chúng ta đã cùng nhau tìm hiểu về SỬ DỤNG MIXIN ĐỂ CODE RESPONSIVE.

Trong bài học này chúng ta sẽ cùng nhau Code responsive cho các Section.


Nội dung

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

  • Nắm rõ kiến thức cơ bản về Sass và Css.

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

  • Code responsive about section
  • Code responsive courses section
  • Code responsive testimonials section
  • Code responsive enroll section

Code responsive about section

Trước hết ta sẽ chỉnh trong file _home.scss trước

   

   

Ta sẽ giảm margin và padding cho .section-about

.section-about{
    @include respond(phone) {
        padding: 20rem 0;
        margin-top: -40rem;
    }
}

Tiếp theo 1 component nằmtrong section about (composition)

Ta thấy composition bị đề lên phần features section bởi position: absolute, chỉnh lại position cho chúng là relative, Lúc này các photo sẽ hiển thị theo hàng dọc, ta thêm cho nó float:left và chỉnh ảnh nhỏ lại (width: 33.3333%). Ta cũng chỉnh lại box shadow nhỏ hơn phù hợp với size mới của photo. Thêm 1 chút margin bottom để phân tách giữa composition với features section.

 

         

.composition {
    position: relative;

    &__photo {
        @include respond(tab-port) {
            float: left;
            position: relative;
            width: 33.3333%;
            box-shadow: 0 1.5rem 3rem rgba($color-black, .2);
            margin-bottom: 3rem;
        }
    }
}

Các photo vẫn đang lệch do vị trí của chúng được chỉnh bên dưới, chúng ta sẽ tiếp tục chỉnh vị trí từng photo cho phù hợp. Phóng ta ảnh ra 1 chút (các bạn chú ý khi responsive cho mobile hoặc ipad size thì do mobile  với ipad không có tác vụ hover nên toàn bộ code dùng cho pseudo-class hover đều không hoạt động)

.composition{
    &__photo{
        &--p1{
            @include respond(tab-port) {
                top: 0;
                transform: scale(1.1);
            }
        }
        &--p2{
            @include respond(tab-port){
                top: -1rem;
                right: 0;
                transform: scale(1.2);
                z-index: 12;
            }
        }
        &--p3{
            @include respond(tab-port){
                top: 0;
                left: 0;
                transform: scale(1.1);
            }
        }
    }

Code responsive courses section.

Phần này nhìn chung thì không có gì cần chỉnh nhưng các bạn nhớ rằng mobile và ipad không có hiệu ứng hover, do đó chúng ta phải đưa toàn bộ phần back side của các card ra front side.

Do phần này chỉnh khá nhiều nên ta sẽ chỉnh responsive và nhét chúng vào cùng 1 mixin @include respond(tab-port). Nhưng trước hết ta sẽ chỉnh height cho card thành auto.

.card {
     @include respond(tab-port){
        height: auto; 
    	  //CONTENT HERE
}
}

Tiếp đến chỉnh card__side

position để thành relative và chỉnh border radius để side—frontside—back khít với nha, và nhớ ta sẽ rotate side—back

  &__side {
            border-radius: 5rem 5rem 0rem 0rem;
            position: relative;

            &--back {
                transform: rotateY(0);
                border-radius: 0rem 0rem 5rem 5rem;
            }
        }

Và chỉnh luôn là :hover, side—front cũng sẽ không rotate nữa

&:hover &__side--front {
            transform: rotateY(0);
        }

Ta để height của side sẽ vừa đủ với content mà nó chứa thì để height: auto

&__side {
            height: auto;
        }

Giờ thì để hiển thị phần back side ta sẽ chỉnh position card__cta thành relative, để width chỉnh lại thành 100% và đặc biệt transform: translate(0), ta cũng set padding cho nó là 4 rem

    &__cta {
            position: relative;
            top: 0;
            left: 0;
            transform: translate(0);
            width: 100%;
            padding: 4rem;
        }

  &__price-box {
            margin-bottom: 3rem;
        }

        &__price-value {
            font-size: 6rem;
        }

Ta chỉnh 1 chút về price. Vậy là đã kết thúc phần code responsive cho course section.


Code responsive cho Testimonials Section

Phần này khá đơn giản, ta chỉ cần chỉnh width và margin-left của component testimonial là được, ứng với tab-port, phone.

.testimonial{
    @include respond(tab-port){
         width: 140%;
         margin-left: -20%;
    }

    @include respond(phone){
        width: 100%;
        margin-left: auto;
    }
}


Code Responsive cho Enroll Section

Ta sẽ chỉnh lại kích cỡ của background-image gradient và width của form là được

.enroll {
    @include respond(tab-land){
        background-image: 
        radial-gradient( 150% 200% ellipse at -15%, 
            rgba($color-white, .8) 0%,
            rgba($color-white, .8) 65%,
            transparent 35%),
        url("../img/background3.jpg");
    }

    @include respond(tab-port){
        background-image: 
        linear-gradient( to right, 
            rgba($color-white, .8) 0%,
            rgba($color-white, .8) 100%),
        url("../img/background3.jpg");
    }

    &__form{
        @include respond(tab-land){
            width: 65%;
        }
        @include respond(tab-port){
            width: 100%;
        }
    }
}


Kết luận

Ở bài học này chúng ta đã cùng nhau CODE RESPONSIVE CHO CÁC SECTIONS.

Trong bài học sau chúng ta sẽ TÌM HIỂU VỀ RESPONSIVE IMAGE.

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á

12312thaipro đã đánh giá 18:00 20-05-2020

Chat luong 1 sao

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.