Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 1 follower
- 71 replies
- 47.4k views
Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В …
Last reply by nightgremlin, -
- 146 replies
- 79.7k views
Кто ищет что бы поверстать, велком - ещё одна PSD'шка. [Скачать] 7.27mb
Last reply by Dlynnyj, -
Дизайнер: Егор Кашлинов. Уровень сложности: средний.
Last reply by Skip, -
Макет от ctpz 1 2
by psywalker- 35 replies
- 22.4k views
Здравствуйте дорогие форумчане, да и просто человеки, любящие поверстать! Представляю вашему вниманию, свеженький макетик, который любезно предоставил нам, один из наших постоянных жителей ctpz Ссылка Макет Макет взят с http://www.free-psd....e-psd-templates Задание 1. Резина по ширине. Сайт должен тянуться на всю ширину экрана, при любых разрешениях, и должен быть отступ по бокам. 2. Резина по высоте, т.е. фон так же должен тянутся вниз при заполнении контента. Причём если контента нет, то фон должен растягиваться от верха до низа всё равно. 3. По бокам тень, не забудьте про неё. 4. Шапка. Так же тянется, вкладки у верхнего меню должны всегда находится так же, как на м…
Last reply by virtas, -
- 1 follower
- 8 replies
- 14.8k views
Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В …
Last reply by klierik, -
- 1 follower
- 18 replies
- 19.9k views
Привет. Скажу сразу -- в тексте будут опечатки так как задание писалось на планшете. Я не заморачивался поверкой текста и писал все ниже изложенное на коленке. Все написано, так скзать, на одном дыхании. Но если ты найдешь ошибку и укажешь на нее я с внесу правки. Для чего это я написал это задание? Большинство заданий тут представленных направлены на самых что ни есть новичков. Ну или тех разработчиков которые познали хотя бы азы в верстке. В итоге сверстав пару макетов новоиспеченный верстальщик идет или на фриланс или в мелкую компанию и верстает такие же по уровню сложности сайты. Как правило это хомяки, не большие промо сайты, ну или в крайнем случае что-то похоже…
Last reply by СергейРусков, -
Заказчик - небольшой кредитный банк. Разумеется, название и некоторая другая информация (в том числе некоторые картинки) заменены. Некоторые изображения вообще убраны, так как являются собственностью заказчика. Макет конца 2008г. В данный момент дорабатывается, будет сдаваться в июне-июле. Думаю, что некоторым будет интересно над этим макетом поработать. Несмотря на кажушуюся простоту верстка может оказаться довольно сложной. Требования к верстке (такие же, как предъявил заказчик). 1. Резиновый дизайн под мин. разрешение 1024х768 и до бесконечности. 2. Использование таблиц, блоков - на усмотрение верстальщика (продвижение будет покупаться) - главное 100% аутентичность…
Last reply by kitaka, -
-
- 62 replies
- 34.7k views
Привет, народ, верстальщики в частности Для вас имеется хорошая новость. У нашего постоянного посетителя Softlink-а появился отличный макет для вёрстки, который он любезно нам предоставил Скачать Макет Скачать Задание опишет сам автор макета, т.е. Softlink. Удачи!
Last reply by lexxcode, -
Дизайнер: Сергей Опанасенко. Уровень сложности: средний.
Last reply by psics, -
Дизайнер: Александр Опарин. Уровень сложности: низкий.
Last reply by ыра, -
- 0 replies
- 23.1k views
Это раздел, который содержит в себе топики, предлагающие поверстать что-то для общего блага и повышения своего уровня, как профессионала. В топиках этого раздела должно идти обсуждение макета, но не более того. Обсуждение самоё вёрстки идёт в соответствующем разделе форума. Если у вас есть что выложить, напишите мне ПМ.
Last reply by Dimitry Wolotko, -
- 1 reply
- 1.4k views
добрый день всем, я начинающий верстальщик. Ищу макеты в основном в телеграме и верстаю их, н, ради интереса я решил забить один из макетов в гугл и обнаружил что существует сайт на этом макете, причем такой навороченный сайт. Стоит ли верстать такие макеты для портфолио ?
Last reply by klierik, -
- 2 replies
- 2k views
Вопрос вроде тривиальный. При наведении на кнопку текста стрелка не закрашивается в белый цвет. как быть? https://jsfiddle.net/dimasgrig1575/dgLupco3/
Last reply by daggi, -
- 1 reply
- 1.7k views
Правильно ли будет сверстать блок из макета так, что блоку с картинкой и блоку с обратной связью нужно будет задавать фиксированную ширину и высоту? Или есть способ более правильный? Макет https://www.figma.com/file/zwa7oxqCS43WTsPEAQhMik/Форма-заказа?node-id=1%3A40
Last reply by Switch74, -
- 5 replies
- 1.6k views
Так выглядит слайдер на ПК. Тут всё ок. А вот так всё плохо на телефоне, планшетах или на ПК с низким разрешением. Стрелки перелистывания фотографии немного выходят. Фотоальбом весь автоматом масштабируется благодаря: "width: 98%; max-width: 700px;", кроме стрелок. Стрелки почему то не хотят, по этому я сделал им ограничитель "max-height: 78%". Подскажите как пофиксить этот нюанс. Простите, если не корректно объяснил, я тот ещё Сусанин.
Last reply by klierik, -
- 1 reply
- 1.4k views
Простите за мой программный язык, не владею и описать точно не могу(. Проблема в меню(навигатор). есть 2 блока <div> (вообще <nav>)ссылок и по середине логотип картинка png(1 картинка). На моём мониторе широкоформатном всё хорошо, а если у человека fhd и меньше разрешение, то у человека будешь в логотипе ссылки(4 картинка, логотип убрал, ссылки в ссылках). Лого и ссылки в коллизии. Помогите пожалуйста! Должно получиться, что при сужении сайта всё будет на своём месте, а не съезжаться. На счёт телефонов, планшетов там бургер меню. body { margin: 0; line-height: 1.0; } .bar { } .bar span { /* bar menu */ top: 4px; position: fixed; …
Last reply by Igor Schnaider, -
- 1 reply
- 1.4k views
Last reply by klierik, -
- 2 replies
- 3.1k views
Возникала такая проблема блок banner выходит за пределы родителя header(он должен занимать весь экран) Подскажите как сделать так чтобы картинка в блоке banner занимала оставшуюся часть экрана и не вылазила за пределы <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="asecs/css/style.css"> <title>Five Stars Room</title> <link rel="preconnect" href="https://fonts.gstatic.com"> </head> <body> <header> <div class="container"> <div class="top-bar"> <h1>Logo</h1> </div>…
Last reply by rustamXx, -
- 3 replies
- 2k views
Подскажите что не так с кодом, не могу вставить фон в intro
Last reply by npofopr, -
- 8 replies
- 2.3k views
Всем привет Меня зовут Павел, занимаюсь версткой довольно продолжительное время, изучаю параллельно другие технологии фронта, все пытаюсь в общем стать крепкой боевой Frontend единицей. Постоянно возникают вопросы как это сделать лучше, перфекционист внутри просит с каждым проектом сделать это лучше, но постоянно какой-то определенный подход заключает в себе свои за и против. Возможно мне нужен ментор? Если да, где можно найти хорошего? Возможно есть какие менторы с почасовой оплатой, которые подскажут и направят на путь истинный. В этом топике хотел бы задать такой вопрос. Мне очень нравится способ задания единиц в rem'ах (62.5% у html, что удобно высчитывать …
Last reply by klierik, -
- 3 replies
- 2k views
Подскажите как мне сделать подменю как на нижнем скрине( мой вариант верхний) там расстояния между строками меньше чем на моём <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание: многоуровневое меню</title> </head> <body> <ul class="main-menu"> <li class="active"> <a href="/courses">Курсы</a> <ul> <li><a href="/courses/4">Знакомство</a></li> <li><a href="/courses/42">Селекторы</a></li&…
Last reply by AlexZaw, -
- 1 reply
- 2.5k views
Нужен сабж. От самых простых до саааамых сложных. С адаптивностью и без. Для самостоятельного обучения верстки.
Last reply by klierik, -
- 5 replies
- 2.3k views
Всем доброго времени суток, друзья! Возник вопрос по поводу верстки изображения в блоке header. для того, чтобы установить изображение фоном в шапке сайта, применяют background-image, я соглашусь с этим конечно. Но тут и возникает ситуация с адаптивностью изображения. Мне нужно, чтобы картинка сжималась, а не обрезалась по краям. Да, при обрезании изображение тоже получается адаптивным, но нужно полностью все изображение в ширину при адаптиве. Есть такое изображение: Таким же оно должно быть и в мобильной версии: С этим прекрасно справляется тег img: img { width: 100%; height: 100%; object-fit: cover; object-position: top; } Но чере…
Last reply by vados, -
- 1 reply
- 3k views
Выполняю рабочий проект для заказчика Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка И как совместить картинки с задними блоками на секции Продукция И еще такой момент, сталкивались ли вы с тем что картинки-исходники разного размера в исходниках, допустим в секции продукция картинка листовок сплющена, если сталкивались может быть подскажите как решать такие моменты. Буду рад конструктивным советам, спасибо Прикладываю макет https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
Last reply by Igor Schnaider, -
- 1 reply
- 3k views
Всем привет! Помогите пожалуйста решить проблему. На сайте размещены картинки и линии тега <hr>, все это заполнило видимую область страницы, но не появляется полоса прокрутки страницы, а мне необходимо опускать эти картинки ниже. Как быть?
Last reply by klierik,
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
-
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number">
-
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-