Html & CSS webiste template task completed#185
Html & CSS webiste template task completed#185ArturDevCraft wants to merge 31 commits intodevmentor-pl:masterfrom
Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Arturze,
Projekt prezentuje się super! 👍
Zostawiłem parę drobnych uwag dot. sementyki oraz BEM
index.html
Outdated
| </nav> | ||
| </div> | ||
| <div class="header__container container"> | ||
| <div class="column"> |
There was a problem hiding this comment.
Zrobiłbym article - mało treści, ale spójna wypowiedź dlatego kwalifikuje się na ten znacznik
index.html
Outdated
| <button class="cta-button">Download FREE!</button> | ||
| </div> | ||
| <div class="column"> | ||
| <div class="header__hero-img"> |
index.html
Outdated
| </header> | ||
| <main class="content"> | ||
| <section id="features" class="features content__row row"> | ||
| <div class="features__container container"> |
There was a problem hiding this comment.
Może header - ten znacznik nie tylko występuje w nagłówku całej strony, ale może byc nagłówkiem dla article czy section - tak jak w tym przypadku.
index.html
Outdated
| <div class="features__container container"> | ||
| <div class="column"> |
There was a problem hiding this comment.
Może ul > li jako lista cech?
index.html
Outdated
| </div> | ||
| </section> | ||
| <section class="logos row"> | ||
| <div class="logos__container container"> |
index.html
Outdated
| <div class="team-cards container"> | ||
| <div class="team-cards__card"> |
There was a problem hiding this comment.
"Lista" członków zespołu więc ul > li
styles/index.css
Outdated
| padding-right: 2em; | ||
| } | ||
|
|
||
| .header__logo img { |
There was a problem hiding this comment.
Jeśli BEM to każdy element powinien mieć klasę, nie zagnieżdżamy selektorów.
styles/index.css
Outdated
| height: 3em; | ||
| } | ||
|
|
||
| .header__nav ul { |
styles/index.css
Outdated
| list-style-type: none; | ||
| } | ||
|
|
||
| .header__nav a { |
There was a problem hiding this comment.
Stylowanie po "tagach" w BEM dozwolone jedynie przy reset/normalize
styles/index.css
Outdated
| padding-bottom: 7em; | ||
| } | ||
|
|
||
| .header__container .column { |
There was a problem hiding this comment.
Jeśli potrzebujesz ograniczyć "style" (przyporządkować dla konkretnego przypadku) to robisz Modyfikator tj. np. .column--header i te dwie klasy dodajesz do elementu np. <div class="column column--header">
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Arturze,
Zdecydowanie lepiej to teraz wygląda! 👍
| <ul class="header__nav-menu"> | ||
| <li><a class="header__nav-link" href="#team">The Team</a></li> | ||
| <li><a class="header__nav-link" href="#pricing">Pricing</a></li> | ||
| <li><a class="header__nav-link" href="#features">Features</a></li> |
| <p>A top noth premium qualtiy template for your next web project.</p> | ||
| <article class="column header__column"> | ||
| <h1 class="header__title">Beautiful Free Nova template</h1> | ||
| <p class="header__description">A top noth premium qualtiy template for your next web project.</p> |
| <img class="header__hero-img" src="./images/screen.png" alt="Tablet screen with website"> | ||
|
|
||
| </div> | ||
| </figure> |
| <ul class="features__container container"> | ||
| <li class="column"> | ||
| <div class="features__icon"> | ||
| <img class="features__icon-img" src="./images/responsive.svg" alt="responsive icon"> |
| <article class="column"> | ||
| <h2 class="display__title">SIMPLE AND BEAUTIFUL</h2> | ||
| <p class="display__description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. At omnis | ||
| quidem officiis quis in |
index.html
Outdated
| <img src="./images/team-twitter.svg" alt="twitter logo"> | ||
| <img src="./images/team-facebook.svg" alt="facebook logo"> | ||
| <img class=".team__cards__card-social-img" src="./images/team-twitter.svg" alt="twitter logo"> | ||
| <img class=".team__cards__card-social-img" src="./images/team-facebook.svg" alt="facebook logo"> |
There was a problem hiding this comment.
Tutaj niepotrzebnie pojawiły się kropki w class
index.html
Outdated
| <img src="./images/team-twitter.svg" alt="twitter logo"> | ||
| <img src="./images/team-facebook.svg" alt="facebook logo"> | ||
| <img class=".team__cards__card-social-img" src="./images/team-twitter.svg" alt="twitter logo"> | ||
| <img class=".team__cards__card-social-img" src="./images/team-facebook.svg" alt="facebook logo"> |
| <img src="./images/webscope.svg" alt="webscope logo"> | ||
| </div> | ||
| </figcaption> | ||
| </figure> |
2 participants
No description provided.