WebNewbe

Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции. Мое портфолио: https://alex2033.github.io/sites/BlackDone/index.html https://alex2033.github.io/sites/Sandeo/index.html https://alex2033.github.io/sites/Barbershop/index.html https://alex2033.github.io/sites/Skylith/index.html https://alex2033.github.io/sites/Unicorn/index.html https://alex2033.github.io/sites/Bouncy/index.html Остальные работы вы можете посмотреть здесь: https://alex2033.github.io/ Навыки: - Знание HTML5, CSS3 - Опыт адаптивной, семантической, кроссбраузерной верстки - CSS3 анимация - знания Javascript на уровне jQuery - Использование препроцессоров LESS/SASS/Stylus + Pug - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode - Именование классов по методологии БЭМ-нейминг - Gulp, npm, bower - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid) - Умение работать с фреймворками bootstrap 3, 4, foundation - Знание английского на уровне чтения документации - Навык работы с векторной графикой SVG - Умение использовать flexbox, css-grid там где это необходимо Форма связи: Email - XoxlofAlexandr@yandex.ru - преимущественно Skype - Xronaliz Также можете написать на этом сайте Благодарю за внимание и хорошего дня:)

Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции. Мое портфолио: https://alex2033.github.io/sites/BlackDone/index.html https://alex2033.github.io/sites/Sandeo/index.html https://alex2033.github.io/sites/Barbershop/index.html https://alex2033.github.io/sites/Skylith/index.html https://alex2033.github.io/sites/Unicorn/index.html https://alex2033.github.io/sites/Bouncy/index.html Остальные работы вы можете посмотреть здесь: https://alex2033.github.io/ Навыки: - Знание HTML5, CSS3 - Опыт адаптивной, семантической, кроссбраузерной верстки - CSS3 анимация - знания Javascript на уровне jQuery - Использование препроцессоров LESS/SASS/Stylus + Pug - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode - Именование классов по методологии БЭМ-нейминг - Gulp, npm, bower - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid) - Умение работать с фреймворками bootstrap 3, 4, foundation - Знание английского на уровне чтения документации - Навык работы с векторной графикой SVG - Умение использовать flexbox, css-grid там где это необходимо Форма связи: Email - XoxlofAlexandr@yandex.ru - преимущественно Skype - Xronaliz Также можете написать на этом сайте Благодарю за внимание и хорошего дня:)

Не знаю насчет градиента, я делал так: данный прогресс бар делал блоком закрашивал соответственно в серый цвет, и накладывал псевдэлемент ::before, который по высоте равняется данному прогресс бару, а ширина уже от задачи, если у вас 75%, просто прописываете width: 75% ну и соответственный цвет, вот и все, по-моему довольно легки вариант) https://codepen.io/anon/pen/yjvwMR

А в чем именно проблема? Вроде выглядит не слишком сложно, под справкой как я понимаю табы либо же проще - переход на другие страницы, Там, где компьютер android ios - тоже самое Знаете, есть неплохой метод - скрин скиньте в пэинт в выделите разными цветами блоки, которые вы видите на странице, так станет проще. Как мне кажется, особо трудного здесь нет ничего

На всю жизнь хватит https://cssauthor.com/templates/ https://psdfreebies.com/psd/category/web-elements/web-templates/ https://psdrepo.com/tag/free-psd-website-templates/ http://www.pcklab.com/templates https://freebiesbug.com/psd-freebies/website-template/ http://www.os-templates.com/free-psd-templates https://colorlib.com/wp/free-psd-website-templates/ https://speckyboy.com/free-photoshop-psd-web-design-template/ https://dcrazed.com/free-photoshop-psd-website-templates/ https://dcrazed.com/best-free-blogger-templates/ https://cssauthor.com/corporate-business-web-templates/ https://freshdesignweb.com/free-travel-website-templates/ https://inscribemag.com/free-psd-website-templates/ https://www.freepik.com/ http://blazrobar.com/tag/free-psds/ http://devfloat.net/business-corporate-bootstrap-templates/ https://freedesignresources.net/category/free-templates/psd-templates/

Сразу видно в чем проблема, это я про header. Вы используете float'ы, но при этом родителям не прописываете clearfix. Зайдите с браузера в режим разработчика и посмотрите, что у вашего header высота 0. <br> выкидывайте из кода вообще, я так понимаю вы начинающий верстальщик, и пока что легче отказаться насовсем от br, потом как разберетесь с ним, можете юзать. Он на самом деле довольно редко, когда нужен. Как легко центрировать элемент по горизонтали и вертикали в 2018? Смотрите, юзайте flexbox. родитель { display: flex; align-items: center; justify-content: center; } По поводу иконки, саму иконку search можно смело брать с fontawesome. Можно и запариться и нарисовать самому, но зачем? Окружающий его квадрат с закругленными бордерами пишем сами на css. Далее, футер. Никогда не называйте классы так, как называете их вы в этой работе. Почитайте на тему наименование элементов страницы, это несложно. Footer с названием margin-top это жесть:D Не знаю в чем у вас тут проблема, я поставил пару clearfix на header .container и navbar, послего чего перешел к подвалу страницы, убрал оттуда этот ужасный margin и все работало как надо.

Почему в вашей навигации нет линков? Как переходить на другие страницы сайта? Добавьте в li тег a. Далее, корзина и поиск. Делайте иконками, а не изображениями, они не кликабельны, при наведении никакй реакции. Надо править. На кнопки добавьте hover эффекты. В секции about, добавьте плавность на hover и не совсем понятно, они должны быть кликабельными или нет, если да, то добавьте внутрь линк a. Вообще немного странная структура страницы. Класс футер должен быть в элементе footer, вместо div'ов на месте секций пропишите section. По поводу тега main, ознакомьтесь с ним по спецификации W3C. Сам я использую такую структуру, может и вам по душе окажется <body> <!-- WRAPPER --> <div class="wrapper"> <!-- HEADER --> <header class="header"> </header> <!-- MAIN-CONTENT --> <main class="main-content"> </main> </div> <!-- FOOTER --> <footer class="footer"> </footer> <!-- scripts --> <script src="js/scripts.min.js"></script> </body> Едем дальше, аккордеоны в секции услуг, добавьте плавности им, и желательно при повторном нажатии на элемент его закрывать, в ином случае мы можем его закрыть, только нажав на другой блок. У слайдеров стрелкам добавьте hover + cursor: pointer при наведении В секции team, тоже самое, добавляем плавность при наведении. С соц линками у вас трабл, вы лучше не тегу li присвивайте высоту и ширину, а тегу <a> лучше, так как, чтобы перейти по этим линками приходится тыкать в самоу иконку, а это не удобно Секцию с клиентами сделайте кликабельной и добавьте тут в линки target="_blank", чтобы при нажатии открывалась другая вкладка. Вашему юзеру не нужно лишний раз уходить с сайта:) В секции работ, сделайте изображения ссылками, можно добавить сюда плагин magnific-popup В общем тут везде одно, и в футере и в блогах и тд добавить ссылок, плавных hover-эффектов

Приветствую. Оцените, пожалуйста, верстку. Особое внимание прошу обратить на секцию How We Work. НАсколько корректно выполнена данная верстка? https://alex2033.github.io/Orion/index.html

Решение: https://jsfiddle.net/v37posyf/52/

Большое спасибо за помощь На данный момент вот так: https://jsfiddle.net/ywh2fd3f/55/ Похоже, но не совсем то

можно и так, конечно, но удобно ли это? Вдруг, понадобится у блока менять цвет рамки, это тогда и заново изображение вырезать с другим цветом

Добрый вечер, подскажите пожалуйста как сверстать такой треугольник?

Прежде всего нужно избавиться от горизонтального скролла Было бы неплохо добавить hover эффекты на кнопки, на изображения в секции порфтолио, на иконки соц. сетей в футере Было бы неплохо сделать логотип кликабельным. Насчет выезда содержимого header уже сказали, остается добавить, что у вас есть в хедере стрелка вниз. Зачем она? Как правило их ставят, чтобы пользователь мог на них кликнуть и последовать к следующей секции, у вас же она просто бросает в верх сайта. То есть сделайте якорь на следующую после шапки секцию Смотрите, есть еще такая тема. Если видите, что, например, у секций одинаковые отступы в макете, то почему бы им тогда сразу не прописать падинги? section {padding: 50px 0;} - это как пример

Итак, изменения: 1) Было решено уменьшить высоту фиксированной панели навигации. Да не по макету, но что-то слишком она большая 2) Решена проблема с сокрытием навигации при переходе с мобильного на десктопное разрешение 3) Был баг с не совсем корректным центрированием табов в секции Works, исправлено 4) Подправил код html и css, код прошел валидацию В IE11(не в Edge) какая-то дичь творится, а именно: - в шапке сайта отцентрированный текст прилип к верху - при клике на меню при мобильном разрешении иконка гамбургера смещается в центр панели навигации

не-не) Это за 5 минут сделанная страница, чтобы сюда размещать работы, позже уже сайт-портфолио полноценный буду делать. Вот сама работа, про которую тут идет речь https://alex2033.github.io/Brandi/index.html