resolved tasks 1-5#207
Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Marcelu,
Całość prezentuje się dobrze, ale potrzeba parę poprawek.
Postaraj się je zrobić - jeśli coś jest nie jasne, to pisz na Slacku albo omów się na spotkanie :)
| © All rights reserved. | ||
| </div> | ||
| </footer> | ||
|
|
| } | ||
|
|
||
| .child--last { | ||
| max-width: calc(40% - 10px); |
There was a problem hiding this comment.
Zwróć uwagę, że ostatni nie musi mieć -10px - masz tylko 2 odstępy tj. między 1 i 2 oraz między 2 i 3.
Gdy zmienisz na 40% to w pierwszym zadaniu nie zadziała dlatego, że masz "białe znaki". Wystarczy, że je usuniesz i będzie ok. Po prostu elementy inline (czy też inline-block) interpretują białe znaki co oznacza, że 30% + 30% +40%+ enter, daje więcej niż 100% :)
There was a problem hiding this comment.
Zabrakło mi w tym pliku rozwijania tj. kodu, który po najechaniu zamieni display: none na display: block (lub podobny). Można to zrealizować przez np.
li:hover > .dropdown {
display: block;
}
Czyli należy to rozumieć jako: każdy najechany li, który posiada jako dziecko .dropdown ma ma ten element posiadać "display: block".
Dodatkowy problem jest taki, że Twoje ul ma ustawioną wysokość, która jest mniejsza niż li i taki li traci efekt hover, co nie pozwala utrzymać efektu rozwiniaja. Postaraj się to poprawić.
|
|
||
| } | ||
|
|
||
| .navbar__element:nth-child(2):active > .dropdown, |
There was a problem hiding this comment.
Raczej staramy się pisać bardziej uniwersalne selektory zamiast dokładnie wskazywać :nth-child(2), co jeśli klient będzie chciał rozwinąć sobie element "kontakt". Będziemy specjalnie dopisywać CSS do takiego rozwiązania?
| </div> | ||
| </nav> | ||
|
|
||
| <div class="hero"> |
| </p> | ||
| </div> | ||
|
|
||
| <div class="hero__element"> |
There was a problem hiding this comment.
Skoro mamy h1 i p to raczej dałbym tutaj article
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Marcelu,
Super, o to chodziło! 👍
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!</div> | ||
| <div class="child child--last"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?</div> | ||
| <div class="child child--first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.</div><div class="child child--middle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!</div><div class="child child--last">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?</div> |
There was a problem hiding this comment.
Można też dodać komentarze, aby było to bardziej czytelne tj.
<div>dsadas</div><!--
-->div>...
W takim wypadku zawartość komentarze nie jest interpretowana przez przeglądarkę.
| .child--last { | ||
| max-width: calc(40% - 10px); | ||
| /* max-width: calc(40% - 10px); */ | ||
| max-width: 40%; |
| </nav> | ||
|
|
||
| <div class="hero"> | ||
| <section class="hero"> |
| <div class="hero__container"> | ||
|
|
||
| <div class="hero__element"> | ||
| <article class="hero__element"> |
| </li> | ||
|
|
||
| <li class="dropdown__item"> | ||
| <li class="dropdown__item dropdown__item--children"> |
|
|
||
|
|
||
| .navbar__element:hover .dropdown { | ||
| display: block; |
2 participants
No description provided.