Skip to main content

Phân tích cây HTML - LiveRecover marketing site

Trong series này mình sẽ cùng các bạn chọn ra những layout của nhiều website khác nhau, sau đó phân tích cây HTML nhé, có áp dụng quy tắc đặt tên class BEM.

Layout URL: link to screenlane🚀

General Layout​

alt

body
|__ header
|  |__ nav.top-nav
|
|__ main
|  |__ section.banner
|  |__ section.why-us
|  |__ section.clients
|  |__ section.title-box
|  |__ section.step
|  |__ section.step
|  |__ section.step
|  |__ section.step
|  |__ section.feature
|  |__ section.integration
|  |__ section.testimonial
|  |__ section.cta
|
|__ footer

section.top-bar​

alt

nav.top-bar
|__ div.container
|    |__ div.top-bar__row
|       |__ div.top-bar__logo > img
|       |   
|       |__ div.top-bar__menu
|       |   |__ ul.menu-list > li*5 > a 
|       |
|       |__ div.top-bar__actions > button

section.banner​

alt

section.banner
|__ div.container
|   |__ div.banner__row
|       |__ div.banner__col
|       |   |__ div.banner-content
|       |       |__ h1
|       |       |__ p
|       |       |__ button
|       |   
|       |__ div.banner__col
|           |__ div.banner-thumbnail
|               |__img

section.why-us​

alt

section.why-us
|__ div.container
|   |__ ul.why-us__list          
|       |__ li*3
|           |__div.reason-item
|              |__ div.reason-item__icon > i   // icon
|              |__ h3.reason-item__title
|              |__ p.reason-item__desc

section.clients​

alt

section.clients
|__ div.container
|   |__ p.clients__subtitle
|   |
|   |__ ul.clients__list
|       |__ li*5
|           |__ img

section.title-box​

alt

section.title-box
|__ div.container
|   |__ h2.title-box__title

section.step​

  • Các bạn để ý các section dưới đây nó cùng một styles, nên mình cần làm một class chung là được. Còn việc trái phải của hình ảnh thì chỉ cần dùng css order để move hình ảnh lên trước là xong 😜

alt alt alt alt

section.step
|__ div.container
|   |__ div.step__row
|       |__ div.step__col
|       |   |__ div.step__content
|       |       |__ h5
|       |       |__ h4
|       |       |__ p
|       |       |__ small // strong
|       |
|       |__ div.step__col (.step__col--first thêm class này để đẩy image qua bên trái)
|           |__ div.step__image
|               |__ img

section.feature​

alt

section.feature
|__ div.container
|   |__ h2.feature__title
|   |__ p.feature__subtitle
|   |__ ul.feature__list > li*6 > div.feature-item


div.feature-item
|__ div.feature-item__icon
|   |__ img
|
|__ div.feature-item__main
|   |__p.feature-item__title
|   |__p.feature-item__desc

section.integration​

alt

section.integration
|__ div.container
|   |__ div
|       |__ h3.integration__title
|       |__ ul.integration__list > li*6 > a > img

section.testimonial​

alt

section.testimonial
|__ div.container
|   |__ ul.testimontial__list
|       |__ li*3
|           |__ div.testimontial-item
|               |__ img.testimontial-item__avatar
|               |__ p.testimontial-item__feedback
|               |__ p.testimontial-item__name
|               |__ p.testimontial-item__company

section.cta​

alt

section.cta-box
|__ div.cta-box__container
|   |__ h2.cta-box__title
|   |__ p.cta-box__decs
|   |__ button.cta-box__submit

alt

footer.footer
|__ div.container
        |__ div.footer__row
        |   |__ div.footer__col
        |   |          |__ div.footer__logo > img
        |   |          |__ p.footer__subtitle
        |   |          |__ ul.footer__social > li*3 > i // icon
        |   |
        |   |__ div.footer__col
        |       |__ul.footer__menu > li*4 > div.menu-group
        |
        |__ p.footer__copyright


div.menu-group
|__ p.menu-group__title
|__ ul.menu-group__list > li*n > a
Writing in 2021 by HungLe with ❤️ Easy Frontend.