Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 146 replies
- 77.7k views
Кто ищет что бы поверстать, велком - ещё одна PSD'шка. [Скачать] 7.27mb
Last reply by Dlynnyj, -
Заказчик - небольшой кредитный банк. Разумеется, название и некоторая другая информация (в том числе некоторые картинки) заменены. Некоторые изображения вообще убраны, так как являются собственностью заказчика. Макет конца 2008г. В данный момент дорабатывается, будет сдаваться в июне-июле. Думаю, что некоторым будет интересно над этим макетом поработать. Несмотря на кажушуюся простоту верстка может оказаться довольно сложной. Требования к верстке (такие же, как предъявил заказчик). 1. Резиновый дизайн под мин. разрешение 1024х768 и до бесконечности. 2. Использование таблиц, блоков - на усмотрение верстальщика (продвижение будет покупаться) - главное 100% аутентичность…
Last reply by kitaka, -
-
- 1 follower
- 71 replies
- 46.2k 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
- 33.9k views
Привет, народ, верстальщики в частности Для вас имеется хорошая новость. У нашего постоянного посетителя Softlink-а появился отличный макет для вёрстки, который он любезно нам предоставил Скачать Макет Скачать Задание опишет сам автор макета, т.е. Softlink. Удачи!
Last reply by lexxcode, -
- 0 replies
- 23k views
Это раздел, который содержит в себе топики, предлагающие поверстать что-то для общего блага и повышения своего уровня, как профессионала. В топиках этого раздела должно идти обсуждение макета, но не более того. Обсуждение самоё вёрстки идёт в соответствующем разделе форума. Если у вас есть что выложить, напишите мне ПМ.
Last reply by Dimitry Wolotko, -
Макет от ctpz 1 2
by psywalker- 35 replies
- 21.8k views
Здравствуйте дорогие форумчане, да и просто человеки, любящие поверстать! Представляю вашему вниманию, свеженький макетик, который любезно предоставил нам, один из наших постоянных жителей ctpz Ссылка Макет Макет взят с http://www.free-psd....e-psd-templates Задание 1. Резина по ширине. Сайт должен тянуться на всю ширину экрана, при любых разрешениях, и должен быть отступ по бокам. 2. Резина по высоте, т.е. фон так же должен тянутся вниз при заполнении контента. Причём если контента нет, то фон должен растягиваться от верха до низа всё равно. 3. По бокам тень, не забудьте про неё. 4. Шапка. Так же тянется, вкладки у верхнего меню должны всегда находится так же, как на м…
Last reply by virtas, -
- 1 follower
- 18 replies
- 19.6k views
Привет. Скажу сразу -- в тексте будут опечатки так как задание писалось на планшете. Я не заморачивался поверкой текста и писал все ниже изложенное на коленке. Все написано, так скзать, на одном дыхании. Но если ты найдешь ошибку и укажешь на нее я с внесу правки. Для чего это я написал это задание? Большинство заданий тут представленных направлены на самых что ни есть новичков. Ну или тех разработчиков которые познали хотя бы азы в верстке. В итоге сверстав пару макетов новоиспеченный верстальщик идет или на фриланс или в мелкую компанию и верстает такие же по уровню сложности сайты. Как правило это хомяки, не большие промо сайты, ну или в крайнем случае что-то похоже…
Last reply by СергейРусков, -
- 1 follower
- 8 replies
- 14.6k 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 ыра, -
Дизайнер: Сергей Опанасенко. Уровень сложности: средний.
Last reply by psics, -
- 146 replies
- 81.4k views
Так, выполняю своё обещание. Для всех желающих поверстать для души, Антон Иванов (@ontozhka) поделился PSD'шником, который он потерял пару лет назад. Шаблон несложный, но и не шибко элементарный. Учитесь и набирайтесь опыта. А вот и сам PSD'ник. Только помните, что автор не вы, и разрешения использовать этот макет никто не давал - вёрстка, для набора опыта, не больше.
Last reply by yura1-2, -
- 39 replies
- 41.9k views
Предлагаю вот такую совсем простую форму. Вкладки переключатся должны простым JS - без сторонних библиотек.
Last reply by Тёмик, -
Дизайнер: Сергей Романюк. Уровень сложности: низкий.
Last reply by Parzifal, -
-
- 3 replies
- 6.7k views
Попал в неловкую ситуацию в базовом курсе от html академии. В вебинаре верстают шаблон Барбершоп ''Бородинский'', ну так вот в демке есть свой код, который создает подстветку блоков(демки у меня нет естественно). Фон просто напросто задали background(jpg макет), ну и подсветка идет поверх фона. Сетка на float. хочется полноценно идти по курсу и применить на практике знания. Кто проходил этот курс, поделитесь опытом пожалуйста.
Last reply by htmlacademy, -
- 28 replies
- 4.5k views
https://jsfiddle.net/tot8kbbn/ почему не работает вторая картинка с локальной ссылкой?
Last reply by ya novenkiy, -
- 0 replies
- 4.1k views
Прикольный сайт для верстки сайтов в интерактивном режиме devdesire.ru Для новичков прям отлично зайдет
Last reply by timurikvx, -
- 7 replies
- 3.9k views
Можно ли с помощью css выровнять блоки одинакового по уровню ? вот картинка. Высота блока должна быть не фиксированной .Контент может быть в любом количестве . Блоки с контентом должны быть на одном уровне . Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим описание , цена на одном уровне с ценой. Каким способом можно реализовать данное решение ? спасибо за внимание.
Last reply by AlexZaw, -
- 1 reply
- 3.6k views
Появился вопрос на который я так и не смог найти ответа. Нужно создать регистрацию и авторизацию с базой данных и я не понимаю как подключить php файл к html? В остальном попытаюсь разобраться сам
Last reply by npofopr, -
- 1 reply
- 3.4k views
Сразу извиняюсь если не туда, просьба в таком случаи закинуть куда нужно тему. Большая просьба скинуть макеты для верстки, только на html и css, знакомый попросил помощи в изучение, и считая правильным учиться именно на практике (прочитав теорию немного конечно) Спасибо всем за помощь.
Last reply by sigma77, -
- 2 replies
- 3.4k views
Как правильно сверстать картинки(руку, лист салата и тд) на данном шаблоне? Интересуют именно первые 3 изображения, а именно тарелка, рука с дошиком и лист салата. Тарелку можно просто сверстать допустим на флексах разбив блок на 3 столбца. Но вот интересно как сверстать две оставшиеся картинки так еще и с текстом. Я подумал, что можно также сверстать на тех же флексах разбив на те же 3(в случае с рукой) и 2(в случае с листом салата) колонки флекс сетку, но в таком случае изображения толкали бы друг друга так как рука с тарелкой и лист салата имеют общую площадь расположения на странице. Как это сделать? Помогите пожалуйста, может какое-то свойство прилипания …
Last reply by npofopr, -
- 3 replies
- 3.3k views
Добрый вечер, ребята. Вторые сутки блуждаю в сети и не могу найти ответ на свой вопрос. .niz:hover { background: red; этим кодом я получил возможность менять цвет определенного блока наведением курсора, вопрос в следующем. Как делать, что бы после каждого наведения цвет менялся на другой а не на один и тот же. То есть зеленый, красный, оранжевый и так далее, спасибо большое
Last reply by Егор0248, -
- 0 replies
- 3.3k views
Всем привет! Подскажите, пожалуйста - как в блоге Wordpress сделать себе такие же карточки? Я пробовал Elementor, но что-то там ничего не вышло... В идеале был бы рад наводке на специальный плагин с настройками в админке, чтобы в этом белом боксе сразу указывать по необходимости и картинку, и текст, и ссылку в соотв. полях. Сайт, с которого взял пример, здесь (ссылку ставлю, т.к. может программный код на странице поможет разобраться, как это сделано).
Last reply by Vashenko, -
- 2 replies
- 3.3k views
Как реализовать вместе и две совмещеных картинки и блок текста Короче ситуация следующая а нужно ,чтоб было так У меня есть две картинки одна прямоугольник серого цвета и вторая треугольник розового цвета.Пробовал сделать через надания треугольнику position relative;right:0; bottom: 0; а прямоугольнику display: flex; position: relative; Если у меня получалось их обьеденить , то только когда блоку текста прописывал display:flex;И тогда получалось следующее Если кто-то знает как сделать напишите пожалуйста.Я хотел скинуть код ,но в jsfiddle ,картинки не куда загружать.
Last reply by kartopelka, -
- 2 replies
- 3.3k views
Как правильно, грамотно, реализовать верстку таких линий? Код не обязателен, хотя бы просто правильное направление для мыслей.
Last reply by rasmus,
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть. -
Решение нашел. Заменил на Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ... -
Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения. Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас! Наш контакт: https://t.me/MadFury (https://t.me/madfury) (TG) TG: https://t.me/2e7.io Сайт: https://code-r.io/
-