Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 146 replies
- 80k views
Кто ищет что бы поверстать, велком - ещё одна PSD'шка. [Скачать] 7.27mb
Last reply by Dlynnyj, -
Заказчик - небольшой кредитный банк. Разумеется, название и некоторая другая информация (в том числе некоторые картинки) заменены. Некоторые изображения вообще убраны, так как являются собственностью заказчика. Макет конца 2008г. В данный момент дорабатывается, будет сдаваться в июне-июле. Думаю, что некоторым будет интересно над этим макетом поработать. Несмотря на кажушуюся простоту верстка может оказаться довольно сложной. Требования к верстке (такие же, как предъявил заказчик). 1. Резиновый дизайн под мин. разрешение 1024х768 и до бесконечности. 2. Использование таблиц, блоков - на усмотрение верстальщика (продвижение будет покупаться) - главное 100% аутентичность…
Last reply by kitaka, -
-
- 1 follower
- 71 replies
- 47.5k views
Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В …
Last reply by nightgremlin, -
- 62 replies
- 34.8k views
Привет, народ, верстальщики в частности Для вас имеется хорошая новость. У нашего постоянного посетителя Softlink-а появился отличный макет для вёрстки, который он любезно нам предоставил Скачать Макет Скачать Задание опишет сам автор макета, т.е. Softlink. Удачи!
Last reply by lexxcode, -
Макет от ctpz 1 2
by psywalker- 35 replies
- 22.5k views
Здравствуйте дорогие форумчане, да и просто человеки, любящие поверстать! Представляю вашему вниманию, свеженький макетик, который любезно предоставил нам, один из наших постоянных жителей ctpz Ссылка Макет Макет взят с http://www.free-psd....e-psd-templates Задание 1. Резина по ширине. Сайт должен тянуться на всю ширину экрана, при любых разрешениях, и должен быть отступ по бокам. 2. Резина по высоте, т.е. фон так же должен тянутся вниз при заполнении контента. Причём если контента нет, то фон должен растягиваться от верха до низа всё равно. 3. По бокам тень, не забудьте про неё. 4. Шапка. Так же тянется, вкладки у верхнего меню должны всегда находится так же, как на м…
Last reply by virtas, -
- 1 follower
- 18 replies
- 19.9k views
Привет. Скажу сразу -- в тексте будут опечатки так как задание писалось на планшете. Я не заморачивался поверкой текста и писал все ниже изложенное на коленке. Все написано, так скзать, на одном дыхании. Но если ты найдешь ошибку и укажешь на нее я с внесу правки. Для чего это я написал это задание? Большинство заданий тут представленных направлены на самых что ни есть новичков. Ну или тех разработчиков которые познали хотя бы азы в верстке. В итоге сверстав пару макетов новоиспеченный верстальщик идет или на фриланс или в мелкую компанию и верстает такие же по уровню сложности сайты. Как правило это хомяки, не большие промо сайты, ну или в крайнем случае что-то похоже…
Last reply by СергейРусков, -
Дизайнер: Александр Опарин. Уровень сложности: низкий.
Last reply by ыра, -
- 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, -
Дизайнер: Егор Кашлинов. Уровень сложности: средний.
Last reply by Skip, -
Дизайнер: Сергей Опанасенко. Уровень сложности: средний.
Last reply by psics, -
- 0 replies
- 23.1k views
Это раздел, который содержит в себе топики, предлагающие поверстать что-то для общего блага и повышения своего уровня, как профессионала. В топиках этого раздела должно идти обсуждение макета, но не более того. Обсуждение самоё вёрстки идёт в соответствующем разделе форума. Если у вас есть что выложить, напишите мне ПМ.
Last reply by Dimitry Wolotko, -
- 146 replies
- 83k views
Так, выполняю своё обещание. Для всех желающих поверстать для души, Антон Иванов (@ontozhka) поделился PSD'шником, который он потерял пару лет назад. Шаблон несложный, но и не шибко элементарный. Учитесь и набирайтесь опыта. А вот и сам PSD'ник. Только помните, что автор не вы, и разрешения использовать этот макет никто не давал - вёрстка, для набора опыта, не больше.
Last reply by yura1-2, -
- 39 replies
- 42.3k views
Предлагаю вот такую совсем простую форму. Вкладки переключатся должны простым JS - без сторонних библиотек.
Last reply by Тёмик, -
- 28 replies
- 4.9k views
https://jsfiddle.net/tot8kbbn/ почему не работает вторая картинка с локальной ссылкой?
Last reply by ya novenkiy, -
Дизайнер: Сергей Романюк. Уровень сложности: низкий.
Last reply by Parzifal, -
-
- 19 replies
- 3.4k views
Здравствуйте целую неделю сижу над этим у меня на сайте страница, на которую я добавляю ячейки, когда я вставляю <table> то ячейки автоматом срастаются с фоном страницы как сделать чтобы они не имели ни чего общего с фоном ? За ранее благодарен.
Last reply by lorddipo, -
Переношу сайт на ворд пресс. И возникла трудность, не могу найти скрипт который отвечает за кнопку спойлера РАСКРЫТЬ. Целиком код копирую с question.html, но не работает
Last reply by Николя223, -
- 13 replies
- 2.6k views
Всем привет, столкнулся с проблемой: у меня в css прописано: * { margin: 0; padding: 0; } body { font-family: "MyriadPro"; font-size: 14px; } .content-bottom { font-size: 40px; font-weight: bold; background-color: #ccc; } Подскажите, как убрать верхний и нижний отступ у текста.. Заранее спасибо!
Last reply by Launder, -
- 10 replies
- 1.8k views
Подскажите, пожалуйста, как убрать слишком большой отступ между контентом и футером в HTML
Last reply by sovsemnovichok, -
- 8 replies
- 2.5k views
Добрый вечер! поступило тестовое задание - разработать адаптивную страницу вакансии. Дан текст вакансии и корпоративный сайт компании. ни макета, ни требований,только креатив и собственная смекалка.Подскажите,как правильно сделать эту страницу, и что там должно быть .спасибо.
Last reply by yulshaz@mail.ru, -
- 8 replies
- 2.3k views
Всем привет Меня зовут Павел, занимаюсь версткой довольно продолжительное время, изучаю параллельно другие технологии фронта, все пытаюсь в общем стать крепкой боевой Frontend единицей. Постоянно возникают вопросы как это сделать лучше, перфекционист внутри просит с каждым проектом сделать это лучше, но постоянно какой-то определенный подход заключает в себе свои за и против. Возможно мне нужен ментор? Если да, где можно найти хорошего? Возможно есть какие менторы с почасовой оплатой, которые подскажут и направят на путь истинный. В этом топике хотел бы задать такой вопрос. Мне очень нравится способ задания единиц в rem'ах (62.5% у html, что удобно высчитывать …
Last reply by klierik, -
- 7 replies
- 4k views
Можно ли с помощью css выровнять блоки одинакового по уровню ? вот картинка. Высота блока должна быть не фиксированной .Контент может быть в любом количестве . Блоки с контентом должны быть на одном уровне . Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим описание , цена на одном уровне с ценой. Каким способом можно реализовать данное решение ? спасибо за внимание.
Last reply by AlexZaw, -
- 7 replies
- 3.4k views
Не могу избавить от перекрытия textare-и картинки. Совсем новичок в верстке.
Last reply by DisplayName, -
- 6 replies
- 2.1k views
Мне нужно сделать <button>, по которой выводилась бы новая вкладка с сайтом каким-нибудь. С <a> работает, <button> не знаю как, всё перепробывал. Можете показать и объяснить так же код новичку? Или так невозможно. Заранее благодарю.
Last reply by klierik, -
В макете, созданном блочной версткой, две колонки (левая с меню, правая с текстом), хедер и футер. Условия задания: Левая колонка фиксированной ширины, правая резиновая. Футер нельзя прижимать к низу экрана. При широком окне браузера колонка с меню должна быть больше по высоте чем правая колонка. Подвал должен располагаться сразу после текста любой из колонок, смотря что длиннее. Проблема: Футер наезжает на колонку с меню при широком экране. Пробовала воспользоваться padding-bottom для блока с колонками, но тогда не выполняется последнее условие: при более узком экране между подвалом и текстом остается расстояние. П…
Last reply by lizaveta,
-
Обсуждения
-
Актуальные контакты: 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-