Не окажите ли помощь с версткой?

Question

[Станислав Ботев]

Недавно задавал вопросы по поводу этого макета. Вновь взялся за него, написал с нуля (в третий раз) уже на флексбоксах. Радует то, что верстка больше не съезжает. Всё оказалось гораздо проще, чем в прошлый раз.
Вопросы такие:
1. Стоит ли реализовывать переход на другие страницы таким меню?
2. Как прикрутить переход на другие страницы спустя время (~ сек)?
3. Внизу страницы должна быть тень. Однако наложить её при помощи box-shadow не удается.
4. Для мобилок адаптивность прикручивать через @media? Так понимаю, что придется с нуля писать.
5. Продолжать ли допиливать макет напильником или бросить в портфолио?
6. Как сделать эти флекбоксы резиновыми? При указании width & height в процентах съезжает верстка.

Comments

[Hyubert]

1) какие страницы? я никуда перейти не могу
3) покажите макет, а то не понятно где должна бить тень, и почему у Вас не получаеться
4) да media, нет полностю с нуля писать не надо, перебиваете стили и все
5) для портфолио это очень слабый макет

[Станислав Ботев]

Hyubert:
Здесь

[Hyubert]

Станислав Ботев: по макету вы упустили некоторие моменты

[Станислав Ботев]

Hyubert: да, повернутое на 90 градусов предложение никак не влезало. Забыл про него.

[Hyubert]

Станислав Ботев: не только -
- нет активных состояный
- нет слайдера
- шрифты не отображаються из-за ошибки в стилях (у вас font-style а должно быть font-family)
- растояния не правильные
- левый блок не правильно сверстан, по структуре

[Hyubert]

фиксированая высота?

[Danila]

Станислав Ботев: там не должно быть тени, страница на всю высоту и ширину окна браузера
https://dribbble.com/shots/3408173-Interica/attach...
должно оно работать примерно как тут

[alex]

Станислав Ботев: этот макет должен быть размером с весь вьюпорт и быть отзывчивым. у вас сейчас кирпич размером 1360 x 768, который ни растягивается ни сжимается до размеров вьюпорта

5. Продолжать ли допиливать макет напильником или бросить в портфолио?

вам нужны молотки и гвозди, до напильника тут еще очень далеко

[alex]

Данила: там есть тень, хотя это и не тень в прямом смысле, а скорее затенение. сделать это можно градиентом

[Danila]

Alex: в данном случае автор говорит о тени на превьюшке макета, которая никакого отношения не имеет к конечному результату, то о чем вы говорите тенью или затемнением не является, это просто картинка

[alex]

Данила: посмотрите в макет, там это затенение выполнено градиентом отдельным слоем, значит нельзя исключать возможно того, что это затенение нужно верстать также отдельно от картинки, а не мержить его с ней при экспорте

Answer 1

[Полина Емельянова]

1. Для "мобилок" - ГДЕ МЕТАТЕГ ВЬЮПОРТА??????????????? О какой адаптации может идти речь, если у вас его нет и в помине?
2. О какой адаптации может идти речь, если у вас ширина контейнера задана жестко??? Я молчу о его высоте, которая тоже, эм, задана.
3. Про media - прошу, прочтите что это такое и как с этим работать
4. Не продолжать допиливать, а переверстывать с нуля на %, rem, em, flexbox на чем хотите.

СМОТРЕТЬ
1. Не идеально, но основы дает https://www.youtube.com/playlist?list=PLcVuGt1dXgc...

2. https://www.youtube.com/watch?v=Au6d1d-vFjU&list=P...

Забыть про Бутстрапы-флексбоксы пока не освоите блочную модель и начнете понимать разницу между флоатами и инлайн-блоами и не будете строить сетку сами, руками, с нуля.

ЧИТАТЬ
1. https://habrahabr.ru/post/144003/
2. https://habrahabr.ru/sandbox/89063/

Думаю, коллеги еще подкинут чего годного. Я начинала с этого.

И верстать головой, а не "в портфолио".

Comments

[Станислав Ботев]

Прошу прощения, один вопрос: чтобы задать "резиновость" блокам (в моем случае - трем колонкам), необходимо задать им ширину в %?
P.S. Какая-то клиника один и тот же макет по нескольку раз переделывать. Вроде не тупой я, а выходит ерунда.

[Полина Емельянова]

У вас формально нет 3 клонок. У вас есть 2 вертикальных меню, которые настолько узки, что задавать им проценты - не имеет смысла. Вам надо отрезинить контент. Для этого убрать на классе grid АДъ из width: 1360px;, а уж тем более из height: 768px; Поставить max-width: 1360px; height: 100vh; адальше вступит в силу магия ФБоксов. Удивитесь.. И поставьте в шапку

[Станислав Ботев]

Полина Емельянова: Спасибо за подсказку! Однако таким образом съехала верстка и появился другой вопрос: в чем рассчитывать отступы и размеры блоков?

[Полина Емельянова]

Станислав Ботев: Станислав, простите, но вам не сюда, вам htmlbook.ru и на курсы. Я окончила ЛофтСкул.

[Станислав Ботев]

Полина Емельянова: Уже разобрался, но всё равно - спасибо!

[Станислав Ботев]

Полина Емельянова: Наверное, я даже лучше поставлю фоном эту же картинку, но с разрешением 1920х1080. Отыскал в Интернете

Answer 2

[Максим Тимофеев]

Стоит ли реализовывать переход на другие страницы таким меню?

каким таким?

Как прикрутить переход на другие страницы спустя время (~ сек)?

https://www.sitepoint.com/jquery-settimeout-functi...

Внизу страницы должна быть тень. Однако наложить её при помощи box-shadow не удается

Тень не растягивает блок родителя

Для мобилок адаптивность прикручивать через media? Так понимаю, что придется с нуля писать.

Что значит с нуля? Вносите правки через media для тех стилей которые надо изменить.

Продолжать ли допиливать макет напильником или бросить в портфолио

Если Вы считаете, что в таком виде - все классно - кидайте в портфолио. Я считаю, что тут до напильника еще далеко.