Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 1 follower
- 18 replies
- 19.9k views
Привет. Скажу сразу -- в тексте будут опечатки так как задание писалось на планшете. Я не заморачивался поверкой текста и писал все ниже изложенное на коленке. Все написано, так скзать, на одном дыхании. Но если ты найдешь ошибку и укажешь на нее я с внесу правки. Для чего это я написал это задание? Большинство заданий тут представленных направлены на самых что ни есть новичков. Ну или тех разработчиков которые познали хотя бы азы в верстке. В итоге сверстав пару макетов новоиспеченный верстальщик идет или на фриланс или в мелкую компанию и верстает такие же по уровню сложности сайты. Как правило это хомяки, не большие промо сайты, ну или в крайнем случае что-то похоже…
Last reply by СергейРусков, -
- 146 replies
- 79.9k views
Кто ищет что бы поверстать, велком - ещё одна PSD'шка. [Скачать] 7.27mb
Last reply by Dlynnyj, -
Заказчик - небольшой кредитный банк. Разумеется, название и некоторая другая информация (в том числе некоторые картинки) заменены. Некоторые изображения вообще убраны, так как являются собственностью заказчика. Макет конца 2008г. В данный момент дорабатывается, будет сдаваться в июне-июле. Думаю, что некоторым будет интересно над этим макетом поработать. Несмотря на кажушуюся простоту верстка может оказаться довольно сложной. Требования к верстке (такие же, как предъявил заказчик). 1. Резиновый дизайн под мин. разрешение 1024х768 и до бесконечности. 2. Использование таблиц, блоков - на усмотрение верстальщика (продвижение будет покупаться) - главное 100% аутентичность…
Last reply by kitaka, -
-
- 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
- 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, -
Дизайнер: Егор Кашлинов. Уровень сложности: средний.
Last reply by Skip, -
Дизайнер: Сергей Опанасенко. Уровень сложности: средний.
Last reply by psics, -
Дизайнер: Александр Опарин. Уровень сложности: низкий.
Last reply by ыра, -
Макет от 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, -
- 62 replies
- 34.8k views
Привет, народ, верстальщики в частности Для вас имеется хорошая новость. У нашего постоянного посетителя Softlink-а появился отличный макет для вёрстки, который он любезно нам предоставил Скачать Макет Скачать Задание опишет сам автор макета, т.е. Softlink. Удачи!
Last reply by lexxcode, -
- 0 replies
- 23.1k views
Это раздел, который содержит в себе топики, предлагающие поверстать что-то для общего блага и повышения своего уровня, как профессионала. В топиках этого раздела должно идти обсуждение макета, но не более того. Обсуждение самоё вёрстки идёт в соответствующем разделе форума. Если у вас есть что выложить, напишите мне ПМ.
Last reply by Dimitry Wolotko, -
- 1 reply
- 2.2k views
Всем привет! Верстаю первый макет и столкнулся с неприятной трудностью. У меня проблема следующего рода: есть два блока, один зафлоачен налево, другой направо. Внутри правого блока находится список - меню. При этом второй блок на строку ниже первого, но если убрать список и просто оставить текст, то он встаёт нормально. Что я упускаю? <Doctipe! html> <head> <title>Наша компания</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="head"> <div class="layout-position"> <div class="header-content"> <div class="Name">Имя компании</di…
Last reply by npofopr, -
Ребят помогите сделать сайт к завтру Подробно 89126967487 отдам 300 рублей плиз срочно id248883136
Last reply by Нарек, -
Всем привет! Скиньте кто-нибудь psd макеты приютов для животных, вет.клиник и все что связано с данной тематикой. Нигде не нашел. Заранее СПАСИБО!!!
Last reply by tanat, -
- 8 replies
- 2.3k views
Всем привет Меня зовут Павел, занимаюсь версткой довольно продолжительное время, изучаю параллельно другие технологии фронта, все пытаюсь в общем стать крепкой боевой Frontend единицей. Постоянно возникают вопросы как это сделать лучше, перфекционист внутри просит с каждым проектом сделать это лучше, но постоянно какой-то определенный подход заключает в себе свои за и против. Возможно мне нужен ментор? Если да, где можно найти хорошего? Возможно есть какие менторы с почасовой оплатой, которые подскажут и направят на путь истинный. В этом топике хотел бы задать такой вопрос. Мне очень нравится способ задания единиц в rem'ах (62.5% у html, что удобно высчитывать …
Last reply by klierik, -
- 2 replies
- 2k views
Весь день пытаюсь разобраться как сделать так что бы слово подвал опустилось и выравнялось по нижнему краю, и не могу понять почему нечего не получается, я все перепробывал, получилось этого достичь только с помощью позицирования, но я хочу более точный способ. vertical-align не работает даже когда "display: inline". Помогите пожалуйста. .fot2 {border: 1px solid black; display: inline; height: 20px; vertical-align: bottom;}
Last reply by wwt, -
- 1 reply
- 2.2k views
Я вижу чат, а где же сами макеты, которые можно попробовать сверстать?
Last reply by DivMan, -
- 1 reply
- 3.7k views
Появился вопрос на который я так и не смог найти ответа. Нужно создать регистрацию и авторизацию с базой данных и я не понимаю как подключить php файл к html? В остальном попытаюсь разобраться сам
Last reply by npofopr, -
- 0 replies
- 3k views
Добрый день мне нужно что h1 был как на макете справа по центру (как на макете) max-width: 1920px; max-height: 1080px; И чтобы при изменения размера экрана положения заголовка и фона не менялись Исходники.rar
Last reply by Almaz_Kazan, -
- 0 replies
- 1.9k views
Всем привет. Собрал шаблон jsfiddle но знаю что сделал криво, прошу посоветовать как правильно такое реализовать, сейчас поведение блоков именно такое как нужно, просто думаю что реализовано неверно. На экранах компьютеров должно быть две колонки, левая с картинкой во всю высоту и примерно в половину ширины. В правой колонке текст. На мобильных устройствах, левая колонка поднимается в самый верх на всю ширину экрана, а ниже уже идет текстовый блок который был справа. Пытался сделать кросбраузерно но не получилось, у меня используется свойство background-size: cover которое ниже ие 9 не поддерживается. Пробовал картинку делать не бекграундом, а как обычное img…
Last reply by sadko007, -
- 3 replies
- 6.9k views
Попал в неловкую ситуацию в базовом курсе от html академии. В вебинаре верстают шаблон Барбершоп ''Бородинский'', ну так вот в демке есть свой код, который создает подстветку блоков(демки у меня нет естественно). Фон просто напросто задали background(jpg макет), ну и подсветка идет поверх фона. Сетка на float. хочется полноценно идти по курсу и применить на практике знания. Кто проходил этот курс, поделитесь опытом пожалуйста.
Last reply by htmlacademy, -
- 2 replies
- 3.2k 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, -
- 0 replies
- 2.9k views
Собрал три блока в виде геометрических фигур - сверху и снизу треугольники в середине параллелогамм. И составил их в столбец, обернув все в общий блок. <div class="d4"> <div class="d1"></div> <div class="d5"></div> <div class="d3"></div> </div> Но в результате получилось, что расстояния между ними большие. Как состывать их вместе, нужно практически вплотную, максимум с отступом в 10 px. Использование padding и margin к желаемому результату не привело. Код CCS такой Треугольник сверху width: 0; height: 0; border-top: 100px solid #68B8AE; border-right:425px solid transparent; display:inline-block; …
Last reply by intman, -
- 8 replies
- 2.5k views
Добрый вечер! поступило тестовое задание - разработать адаптивную страницу вакансии. Дан текст вакансии и корпоративный сайт компании. ни макета, ни требований,только креатив и собственная смекалка.Подскажите,как правильно сделать эту страницу, и что там должно быть .спасибо.
Last reply by yulshaz@mail.ru, -
- 1 reply
- 1.8k views
Здравствуйте участники форума обращаюсь с таким вопросом: решил проверить на валидацию код одного из онлайн генераторов свойств CSS3?, а именно генератор градиентов https://www.cssmatic.com/gradient-generator В итоге в сгенерированном коде оказалось куча ошибок, подскажите с чем это может быть связано и стоит ли добиваться 100% валидации html и css? За любые советы и наставления буду благодарен. Заранее спасибо.
Last reply by AlexZaw,
-
Обсуждения
-
Актуальные контакты: 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-