box sizing border box у меня подключен прямо к HTML
ссылка на него почему то не скидывается
Что за странная логика, выводить первым то, что вообще использует хз кто
id="Ellipse 3"<section style="padding: 1em; border-left: 4px solid #d9a83a ; border-radius: 8px; background:rgb(252,246,230); color: #49390d; box-shadow: 0 2px 0 #efefef">
<h2 style="margin-top: 0; text-transform:uppercase;">⚠ Предупреждение</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet natus laborum eveniet? Unde nesciunt, architecto error iste accusamus veritatis? Fuga!</p>
</section>Если я буду использовать 100px
Adobe Photoshop
:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");
--icon-name2: url("data:image/svg+xml,%3Csvg width='200' height='100' viewBox='0 0 200 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H200V100H0V0Z' fill='%23FF6392'/%3E%3C/svg%3E%0A");;
}
.block {
&::before {
// разное нужное
mask: var(--icon) no-repeat center;
bg: red;
}
}
.block--mod1 {
--icon: var(--icon-name);
}
.block--mod2 {
--icon: var(--icon-name2);
}А как вы вставлять будете иконку через псевдоэлемент? Так:
content: url(path/to/your.svg);
:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");
}
.block {
&::before {
// разное нужное
mask: var(--icon-name) no-repeat center;
bg: red;
}
}.elem {
--width: 50px;
bg: linear-gradient(to right, transparent var(--width), white var(--width));
&::before {
width: var(--width);
}
}closest для поиска нужно элемента.
var items = 5;
var elements = document.getElementsByClassName("elem");
var length = (items < elements.length) ? items : elements.length;
for (var i = 0; i < length; i++) {
elements[i].classList.add("red");
}
Начнем с правды.
В коде нет ни семантики ни БЭМа.
1.
Хотелось бы конкретный пример о чем вообще речь. Зачем враппер после контента?
Если под словом "после", вы имеете в виду снаружи секция, внутри обертка-центровщик, то именно так.
Удобно создать один класс хелпер для этого.
2. Вчера я вам говорила, что неверно подключены шрифты, три повторения. Всё так и осталось.
3. Про БЭМ.
Если начать как раз с семантики, то и блоки легче выделятся и их элементы тоже.
Секции делать section, хедер header, навигацию nav и т.д.
Сейчас у вас вместо БЭМ просто классы с
__4.
nav__wrapper- нет родительского блока с классом nav.И аналогичные ошибки.
5. Логотип это всегда блок. Его переиспользуют много раз.
И аналогичные ошибки.
6.
nav__right- не лучшее название класса. Очень странно будет выглядеть такой блок, когда при адаптиве окажется под левым. Называйте по смыслу и назначению.Если нормального названия не придумывается, то очень может быть, что эта обертка вообще лишняя. Сейчас именно так.
7. Очень много лишних оберток.
background__enjoy- задавайте фон секции.Enjoy Your Morning Coffee.- этому достаточно одно тега h2. Вместо по крайней мере трёх div.и аналогичные проблемы.
8. Ни поиск ни другие иконки не являются контентными изображениями, их можно смело убрать в стили. Вместо этого написать текст и доступно скрыть его. Гуглите visually-hidden.
9.
<span class="number__card">01</span>меняется на псевдоэлементы и ol (или ul, если в действительности порядок не важен)
Ещё почему-то меню у вас нумерованный список вместо маркированного. В нём что, поменяется смысл от перемены порядка?
Звезды в 5 тегов img это дичь.
-----
Хватит пока