practice-html-and-css-rwd module tasks complete#162
practice-html-and-css-rwd module tasks complete#162kacpermak1 wants to merge 6 commits intodevmentor-pl:masterfrom
Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Kacprze,
Zadania wykonane super! 👍
Mam tylko uwagę do samych selektorów css - szczegóły w komentarzach ;)
| border: 150px solid #dcdcdc; | ||
| border-right-color: transparent; | ||
| border-bottom-color: transparent; | ||
| shape-outside: polygon(0 0, 100% 0, 0 100%); |
| .c { | ||
| grid-column: 1; | ||
| grid-row: 2; | ||
| } |
| <div class="container"> | ||
| <header class="p"> | ||
| <picture> | ||
| <source media="(min-width: 1200px)" srcset="assets/images/frog-large.jpg"> |
There was a problem hiding this comment.
Warto dodać parę, aby było widać kiedy, jaki obraz się wczytuje :)
| .v { | ||
| grid-column: 1; | ||
| grid-row: 2; | ||
| } |
| <span class="header-nav__title"> | ||
| Items | ||
| <span class="header-nav__arrow header-nav__arrow--down">></span> | ||
| </span> |
There was a problem hiding this comment.
Można też dodać odpowiednią klasę do span i utworzyć strzałkę z poziomu css :)
| .header-nav__list>.header-nav__item>.header-nav__link, | ||
| .header-nav__list>.header-nav__item>.header-nav__title, |
There was a problem hiding this comment.
Lepiej nadać klasę i ją wykorzystać. Wtedy selektor CSS jest mniej skomplikowany, jest mniej zależności, co czyni go czytelniejszym :)
PS. Nie pisząc osobiście tego znacznika, trudno jest mi się zorientować na pierwszy rzut oka co to za element ;)
| <span class="header__hamburger-inner"> | ||
| <span class="header__hamburger-line"></span> | ||
| <span class="header__hamburger-line"></span> | ||
| <span class="header__hamburger-line"></span> | ||
| </span> |
There was a problem hiding this comment.
Można też kombinować z border top-bottom oraz ::after ;)
| .content-section--two-columns .content-section__column:not(:last-child), | ||
| .content-section--three-columns .content-section__column:not(:last-child) { |
There was a problem hiding this comment.
Tak jak pisałem wcześniej - może wystarczy najprostsza klasa ;)
PS. Nie narzucam, sam oceń jak Ci wygodniej - tylko zwracam uwagę ;)
2 participants
No description provided.