Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 1 reply
- 3.1k views
Выполняю рабочий проект для заказчика Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка И как совместить картинки с задними блоками на секции Продукция И еще такой момент, сталкивались ли вы с тем что картинки-исходники разного размера в исходниках, допустим в секции продукция картинка листовок сплющена, если сталкивались может быть подскажите как решать такие моменты. Буду рад конструктивным советам, спасибо Прикладываю макет https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
Last reply by Igor Schnaider, -
- 4 replies
- 2.5k views
вот скриншот из psd макета как сверстать помогите плиз
Last reply by DivMan, -
- 2 replies
- 2.1k views
Вопрос вроде тривиальный. При наведении на кнопку текста стрелка не закрашивается в белый цвет. как быть? https://jsfiddle.net/dimasgrig1575/dgLupco3/
Last reply by daggi, -
- 4 replies
- 3.3k views
Всем привет! Прошу помощи. Какие есть варианты по реализации? Я использовала fieldset с вложенным legend и css rotate, но думаю этот способ не очень. В итоге получилось на половину, и текст с LERN MORE добавить не получилось(второй тег legend не учитывается)
Last reply by alanreid, -
- 3 replies
- 2.1k views
Подскажите что не так с кодом, не могу вставить фон в intro
Last reply by npofopr, -
- 3 replies
- 2.1k 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, -
- 5 replies
- 2.4k views
Всем доброго времени суток, друзья! Возник вопрос по поводу верстки изображения в блоке header. для того, чтобы установить изображение фоном в шапке сайта, применяют background-image, я соглашусь с этим конечно. Но тут и возникает ситуация с адаптивностью изображения. Мне нужно, чтобы картинка сжималась, а не обрезалась по краям. Да, при обрезании изображение тоже получается адаптивным, но нужно полностью все изображение в ширину при адаптиве. Есть такое изображение: Таким же оно должно быть и в мобильной версии: С этим прекрасно справляется тег img: img { width: 100%; height: 100%; object-fit: cover; object-position: top; } Но чере…
Last reply by vados, -
- 7 replies
- 4k views
Можно ли с помощью css выровнять блоки одинакового по уровню ? вот картинка. Высота блока должна быть не фиксированной .Контент может быть в любом количестве . Блоки с контентом должны быть на одном уровне . Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим описание , цена на одном уровне с ценой. Каким способом можно реализовать данное решение ? спасибо за внимание.
Last reply by AlexZaw, -
- 3 replies
- 1.6k views
Селектор тегов = 1 еденица. Класс = 10 едениц. значит при условии <body > <div class="content"> <div2> <div3> <div4> <div5> <div6> <div7> <div8> <div9> <div10> <p><em>pppp</em></p> </div10> </div9> </div8> </div7> </div6> </div5> </div4> </div3> </div2> </div> </body> .content em{color: blue;} div div2 div3 div4 div5 div6 div7 div8 div9 div10 p em{ color: red;} Должен быть применён красный цвет т.к. у него 12 тегов =12едениц. А у первого 10ед. за класс + 1 за тег =11едениц.
Last reply by Launder, -
- 2 replies
- 3.5k views
Как правильно, грамотно, реализовать верстку таких линий? Код не обязателен, хотя бы просто правильное направление для мыслей.
Last reply by rasmus, -
- 2 replies
- 1.7k views
<a href="#q1" id="q2">132</a> <div id="q1"> <h1>Заголовок</h1> <p>Элемент</p> <a href="#x">Закрыть</a> </div> div{ width:500px; height:400px; background:gray; position:fixed; top:90px; left:30%; display:none; } div:target{ display:block; } body{height:10000px;} https://jsfiddle.net/a9zeppqq/ Вопрос собственно такой: Почему если присвоить href="#" то, таблица закрывается и браузер возвращается на начало страницы, а если указать href="#x" то блок просто пропадает. И можно ли запретить скролинг страницы когда открыт блок?.
Last reply by radioactive, -
- 146 replies
- 83.9k views
Так, выполняю своё обещание. Для всех желающих поверстать для души, Антон Иванов (@ontozhka) поделился PSD'шником, который он потерял пару лет назад. Шаблон несложный, но и не шибко элементарный. Учитесь и набирайтесь опыта. А вот и сам PSD'ник. Только помните, что автор не вы, и разрешения использовать этот макет никто не давал - вёрстка, для набора опыта, не больше.
Last reply by yura1-2, -
- 39 replies
- 42.5k views
Предлагаю вот такую совсем простую форму. Вкладки переключатся должны простым JS - без сторонних библиотек.
Last reply by Тёмик, -
- 1 reply
- 1.9k views
Помогите пожалуйста,как сделать добавление элемента в маркированный или нумерованный список прямо на странице.
Last reply by klierik, -
- 1 reply
- 3.6k views
body { background: url(C:/Users/Desktop/33.jpg) repeat-x 0 100% fixed,linear-gradient(to top, #5080b1, #004e8c) fixed; } картинка не появляется на заднем плане.правилен ли код?
Last reply by npofopr, -
- 4 replies
- 2k views
Здравствуйте! Подскажите, пожалуйста, как прописать колонки по бокам.
Last reply by sovsemnovichok, -
- 1 reply
- 1.8k views
Правильно ли будет сверстать блок из макета так, что блоку с картинкой и блоку с обратной связью нужно будет задавать фиксированную ширину и высоту? Или есть способ более правильный? Макет https://www.figma.com/file/zwa7oxqCS43WTsPEAQhMik/Форма-заказа?node-id=1%3A40
Last reply by Switch74, -
- 2 replies
- 3.7k views
Как правильно сверстать картинки(руку, лист салата и тд) на данном шаблоне? Интересуют именно первые 3 изображения, а именно тарелка, рука с дошиком и лист салата. Тарелку можно просто сверстать допустим на флексах разбив блок на 3 столбца. Но вот интересно как сверстать две оставшиеся картинки так еще и с текстом. Я подумал, что можно также сверстать на тех же флексах разбив на те же 3(в случае с рукой) и 2(в случае с листом салата) колонки флекс сетку, но в таком случае изображения толкали бы друг друга так как рука с тарелкой и лист салата имеют общую площадь расположения на странице. Как это сделать? Помогите пожалуйста, может какое-то свойство прилипания …
Last reply by npofopr, -
- 2 replies
- 3.5k views
Как реализовать вместе и две совмещеных картинки и блок текста Короче ситуация следующая а нужно ,чтоб было так У меня есть две картинки одна прямоугольник серого цвета и вторая треугольник розового цвета.Пробовал сделать через надания треугольнику position relative;right:0; bottom: 0; а прямоугольнику display: flex; position: relative; Если у меня получалось их обьеденить , то только когда блоку текста прописывал display:flex;И тогда получалось следующее Если кто-то знает как сделать напишите пожалуйста.Я хотел скинуть код ,но в jsfiddle ,картинки не куда загружать.
Last reply by kartopelka, -
- 1 reply
- 2.3k views
Как сделать , чтоб при уменьшении екрана , список не сжимался?Код https://jsfiddle.net/RedSniper/7nx6sf2v/3/ При 1920*1080 выглядит нормально, но при маштабировании +10 процентов сжимается и получается не красиво.Можно как-то его зафиксировать ,чтоб он не менялся до размеров телефона?
Last reply by klierik, -
- 5 replies
- 1.7k views
Так выглядит слайдер на ПК. Тут всё ок. А вот так всё плохо на телефоне, планшетах или на ПК с низким разрешением. Стрелки перелистывания фотографии немного выходят. Фотоальбом весь автоматом масштабируется благодаря: "width: 98%; max-width: 700px;", кроме стрелок. Стрелки почему то не хотят, по этому я сделал им ограничитель "max-height: 78%". Подскажите как пофиксить этот нюанс. Простите, если не корректно объяснил, я тот ещё Сусанин.
Last reply by klierik, -
- 1 reply
- 1.5k 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, -
- 0 replies
- 3.6k views
Всем привет! Подскажите, пожалуйста - как в блоге Wordpress сделать себе такие же карточки? Я пробовал Elementor, но что-то там ничего не вышло... В идеале был бы рад наводке на специальный плагин с настройками в админке, чтобы в этом белом боксе сразу указывать по необходимости и картинку, и текст, и ссылку в соотв. полях. Сайт, с которого взял пример, здесь (ссылку ставлю, т.к. может программный код на странице поможет разобраться, как это сделано).
Last reply by Vashenko, -
- 4 replies
- 2.5k views
Здраствуйте! Есть форма отправки письма на почту. Как можно ее поставить именно в центр.Пробовал text-aligh:center; для div ,но только текст ставится в центр , а не форма Код https://jsfiddle.net/RedSniper/b157q0xp/
Last reply by kartopelka, -
- 2 replies
- 2.1k views
Как сделать чтобы на сайте при вводе ОПРЕДЕЛЁННОГО слова происходило действие? HTML Например ввёл "123123" и ничего не произошло или выдало надпись "ошибка", а если ввёл "lol123" перешёл по ссылке или скачался файл (итп) +поле для ввода
Last reply by wwt,
-
Обсуждения
-
Актуальные контакты: 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-