WebNewbe
-
Posts
65 -
Joined
-
Last visited
-
Days Won
2
Content Type
Profiles
Forums
Calendar
Store
Everything posted by WebNewbe
-
Здравствуйте. Оцените пожалуйста данную верстку. Судить строго! https://alex2033.github.io/ Использовал: сетку с поддержкой флексов (Flexbox Grid) На данный момент пока самый сложный макет, который верстал. Реализованы: - слайдеры - плавные переходы по ссылкам на якори - адаптивное меню Toggle(специально верхнюю часть хедера делал через флоаты, т.к. с флексами Toggle несколько конфликтует) - табы - scroll up - всплывающие окна и прочее
-
Идея у меня тоже такая была, единственное что не понравилось так это сложность адаптации под разные разрешения. Очень много придется писать медиа запросов тк каждые 100-150px круги с абсолютным позиционированием будут слетать
-
Подскажите как правильно такое нарисовать? Может быть canvas? Пробовал на нем, но линия какая-то размытая получается и не знаю как в произвольных точках этой кривой рисовать круги Возможно за это отвечает какой-нибудь jquery плагин? Вот скриншот http://www.fotolink.su/v.php?id=03b5a0c45dd734ab866094f13307e8a5
-
Так у вас же min-height: 702px там, разве нет? То есть нет никаких отступов, просто минимальная высота, вот и все Например, что вам мешает поставить min-height: 560px например и кнопке поставить margin-bottom: 20px?
-
Благодарю
-
То о чем я говорю представлено на скриншоте. Через padding-top по пикселям делал, как-то неудобно получается. Есть ли еще варианты?
-
Благодарю за отзыв. 1) Кнопка поиска и поле ввода. Я так понимаю вы говорите о высоте? Потому что ширина ну никак одинаковой у них быть не должна. Теперь с высотой. Высота у этих двух блоков одинаковая. Однако, если достаточно приблизить, можно увидеть, что высота кнопки вот буквально чуть-чуть больше. Уменьшив хотя бы на один пиксель, мы получим картинку еще хуже. Ну а вообще, не считаю это проблемой, потому что заметить эту разницу можно только очень хорошо вглядевшись. Если у вас есть решение, подсобите) 2) Социконки. Опять же, так ведь и должно выглядеть). Понятное дело, я могу убрать последнюю и все будет как надо. Но я пытался сделать верстку как можно гибче, то есть, если вдруг мне взбредет в голову добавить туда еще какое-то кол-во иконок, все не полетит в тартарары. Есть блок социконок, и если количество элементов этого блока заходит за ширину его самого, то они переносятся на другую строку. Вроде все правильно. Не совсем понял, что вам именно здесь не нравится) 3) Нижнее левое меню. Исправлено, решил до определенного размера сделать их просто в виде колонок. 4) Внешний вид. Вообще во мне, как мне кажется, очень мало от дизайнера:D Но я сделал несколько изменений, посмотрите. Но я не знаю, как тут все кардинально можно поменять, чтобы стало все прекрасно) 5) Секция Expertise. Расстояния между блоками были увеличены. 6) Разделитель в секции expertise. Вообще это из разряда "не баг, а фича":D. Я посчитал, что делать разделитель под каждым блоком излишне и решил каждую тройку делить этой прямой. 7) Признаюсь честно, не хотел сильно париться насчет меню, просто если тот же togle использовать, то на флексах там возникают некоторые проблемы. Решил посмотреть как будет выглядеть меню в том виде, в котором оно сейчас находится. В следующих работах будут уже, конечно, делать через раскрывающиеся меню. Хотя по факту это меню так же можно назвать адаптивным) Ну по крайне мере мне так хочется думать
-
Под разные разрешения сам придумывал
-
Кстати, если в взгляните на код, то в том же логотипе заместо img вы увидите код svg и текст, и в других иконках, например, в секции expertise тоже самое. Делал не просто так, мне, внезапно, взбрело в голову мысль: "А давай я в sass сделают основной цвет сайта(в данном случае сине-зеленый) в виде переменной и соответственно, если заказчик(воображаемый) скажет: "а пусть вместо сине-зеленого цвет сайта будет красным", то мне будет достаточно в одной переменной изменить цвет, как все на сайте,что нужно, измениться на нужный лад. Как считаете это того стоит?) Просто, наблюдая верстки других людей и видеоуроки, я заметил, что в том же лого просто через img вставляют и все
-
1) Насчет музыки. В коде вроде прописано volume - 10%. Зашел с разных браузерах. Не работает. Автоматически всегда 100 стоит, что очень раздражает. Либо фиксить, либо убирать. 2) Как сказали выше, плеер закрывает кнопку. Нужно фиксить 3) Смотрите первый скрин. Это при ширине 320px , то есть на телефонах. Текст заходит за рамки блока. Сам блок странный. Вы либо отцентрируйте его, либо на всю ширину родителя делайте. 4) Скрин два. Каким-то странным образом подобраны размеры блоков и расстояния между ними 5) Скриншот три. Стоит ли что-нибудь здесь комментировать. Черный текст на темном фоне... 6) Скрин 4. Опять же, при ширине 768 и более у вас плеер просто гуляет по странице, загораживает текст кнопки и тд. Блок, где указан ваш тимспик тоже сделан криво. В общем, возможно разумней и менее нервотрепно переделать верстку полностью.
-
Я сам новичок, но, черт возьми, я бы уже по всем параметрам дал бы твоей страничке -1000/10 за эту резкую громкую музыку при входе на страницу
-
Добрый вечер. Вот только закончил верстать свой второй адаптивный дизайн. Первый делал на бустрапе. Здесь же я решил использовать flexbox причем сразу же с сеткой. Вот что получилось: https://alex2033.github.io/ Оцените пожалуйста и покритикуйте, если есть что) P.s. Вот действительно практика - лучший инструмент обучения. Когда только начинал этот макет верстать, о флексах ничего не знал и не понимал как они работают. А щас чувствую себя этаким специалистом:DD
-
Все все, я разобрался и оказалось, что достаточно background у слайдера сделать transparent Использовал первоначально bxslider. Сейчас поменял на slick
-
Добрый день, нужно сделать слайдер в шапке сайта. Причем меняется только выделенная красной зоной область, то есть не вся шапка. Как сделать так, чтобы у слайдера не было фона? Должен быть прозрачным как на скриншоте.
-
Начал верстать новый макет с помощью flexbox, более менее разобрался, однако, чем больше верстаю тем больше для меня очевидней становится один вопрос: а стоит ли верстать макет полностью на flexbox или же лучше использовать обычную сетку для адаптивности и использовать флексы там, где без них никак(как это было в секции с our team)? А то я, несколько разобравшись с этой технологией, на радостях все блоки начал по флексу верстать.
-
Здравствуйте,все никак не могу понять как правильнее реализовать данную форму? Как видите рамки ссылки(по совместительству кнопка) несколько больше рамок поля, притом, что размеры их рамок, высота поля и ссылки одинаковы. Вообще такое ощущение,будто это одно поле, но каким-то образом разделенное, но не понимаю как. Я же "лепил"их с помощью отрицательного марджина ссылки.
-
1. А вот это странно. Какая это секция? Вижу, что в секции клиентов можно и поменьше сделать(уменьшил), но зайдя с телефона и в адаптивном режиме браузера такой картины нет. 2. Ссылки в навигации увеличены до 20px(хотя по мне так уже лишнее). По-моему кнопки слайдера будут уж слишком громадными. 3. Да, проверил, видимо действительно дело в гитхабе.
-
Не понимаю что за косяк с моей стороны, но соц. кнопки в футере не перенаправляют на соответствующие сайты при клике левой кнопки мыши, однако, если на колесико нажимать то в доп. вкладке заходит.
-
https://alex2033.github.io/ 1. Логотип теперь прописан текстом. Изображения брендов-клиентов были векторизированы 2. Было решено убрать синее выделение ссылок при нажатии 3. Стрелка в header теперь ведет к следующей секции 4. В списке секции about us поставлены доп. марджины между элементами списка 5. Увеличены размеры иконки навигации для телефонов, а также сами элементы навигации 6. Увеличены размеры кнопок слайдеров для телефонов 7. Вертикальные отступы заголовков секций главного контента были уменьшены 8. Ссылки соц. сетей в футере слегка увеличены для моб. устройств 9. Проблема с выравниванием высоты блоков в зависимости от контента в секции our team была решена путем использования flexbox
-
1. Нет, только один psd. К сожалению уточнить не у кого, т.к. качал с интернета, но к сведению принял. По поводу кнопок у слайдеров, пока не уверен, что стоит убирать. Например, в мозиле нельзя мышкой менять слайдеры перетаскивая их, а только нажатием на эти самые кнопки.Поэтому пока думаю... 2. Большое спасибо, ознакомился 3. Исправлено 4. Посматриваю Джедай Верстки, и там автор говорил, что делается это для CMS вот линк (ыhttps://youtu.be/vWfRHtxy81Q?t=1h18m47s). Я понимаю, что сейчас я насаживать верстку на системы управления не буду. Но может быть стоит это взять в привычку? Ведь в будущем я собираюсь освоить и CMS и умение насаживать свою верстку. 5. Эврика! Я-таки более менее освоил flexbox и с помощью него решил проблему. Теперь у блоков одинаковая высота, и если в одном из описаний сотрудников будет больше текста чем у других сотрудников, сетка не полетит!) Большое спасибо за фидбэк. Завтра предоставлю несколько измененный сайт, и опишу, что именно исправил
-
Благодарю за такой подробный разбор! По поводу моментов связанных с дизайном, тут уж я не виноват:D Если серьезно, я не являюсь дизайнером, что создал макет, который был сверстан. Я взял его в интернете и попытался воссоздать точь-в-точь. Тоже поймите) По вопросам благодарю: 1. Да видимо это у них такая "болезнь" или что-то вроде этого 2. Благодарю, буду знать 3. Суть: вы наводите курсор мыши на блок(то есть на пример работы) и вам через псевдокласс :hover отображается краткое описание этой работы. Кликаю на него вас переносит на другую страницу с подробным описанием этой работы и чего-нибудь там еще=) То есть на этом макете ничего и не должно происходить. А !important я догадываюсь почему необходим. Я прописал все изображения этих работ инлайново, а :hover соответственно в css. Возможно поэтому, пока не уверен, буду проверять 4. С этим буду разбираться, насчет нестандартных разрешений согласен Другие комментарии: В целом: 1. Полностью согласен, тоже это заметил, буду менять 2. А вот здесь уже момент, связанный с дизайном. Признаюсь, не знаю зачем она, точнее догадываюсь ведь судя по стрелочке, она ведет куда-то вниз. Но нигде не указано к какой конкретно секции, поэтому я просто отправил вниз) 3. Сделаю, по поводу точек, также были в макете, поэтому я их и поставил С телефона: 1. Меня тоже несколько напрягало это, поставлю по центру. Пожалуй я увеличу размер самого меню и несколько увеличу шрифт ссылок в ней. 2. Вы намекаете на стрелки, которые будут на это указывать? Полагаю да, однако, опять же я подобрал слайдер, а их как мы знаем много, наиболее похожий на слайдер в макете. 3. Насчет неудобства кликать согласен, но опять же вопрос по дизайну 4. Согласен, уменьшу 5. Посмотрю, но работая с font-size специально сделал, так чтобы они по высоте и ширине были точь-в-точь как на макете 6. Да, я думал, что пофиксил эту проблему на всех разрешениях, видимо нет, исправлю! Возникли еще вопросы: 1. В секции Meet Our Team, если в одном из блоков увеличить количество текста, то все станет крайне печальным, и то пришлось костыле-строительством заниматься всего лишь из-за одной доп. строчки в третьем блоке. Что с этим делать? Я слышал, что flexbox отлично такие проблемы решает, но пока в нем ничего не мыслю, может быть есть еще способы? 2. Возможно стоит на моб. устройствах в этой секции элементы делать не по одному в строчку, а по два? Вроде выглядеть будет лучше. Но опять же, добавишь строчку текста, и все, блоки слетают и получается черт знает что.
-
Я правильно понимаю, что спустившись к секции со слайдерами, вы хотите дальше спускаться к остальным секциям, но не можете, потому что вместо промотки вниз происходит прокрутка слайдов?
-
Благодарю, можете что-нибудь сказать по поводу вопросов, что я написал выше? Учусь пока, мб для кого-то все это очевидно, но я еще не знаю)
-
Добрый вечер. Создал свой первый адаптивный сайт. Оцените пожалуйста! https://alex2033.github.io/ Есть несколько вопросов, которые возникли, пока верстал: 1) На телефоне при нажатии на любую ссылку возникает синее выделение на полсекунды,можно ли это как-то убрать или это стандартная тема для телефонов? 2) Не считается дурным тоном прописывать колонки бутстрапа следующим образом:col-md-3 col-sm-2? Вопрос к тому, что при небольших разрешениях я хочу, чтобы в портфолио в строку отображалось не четыре работы, а две например. 3) Стоит ли в секции, где представлены работы, делать наложение темного блока на изображение с текстом и иконкой плюса с помощью background-image, притом, что возникает необходимость прописывать для ховера !important? 4)Нужно ли прописывать медиа-запросы для нестандартных разрешений? Например, у меня в коде есть: min-width: 600px and (max-width: 768px) Стоит ли это прописывать?
-
Благодарю
