Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 1 reply
- 2.5k views
Нужен сабж. От самых простых до саааамых сложных. С адаптивностью и без. Для самостоятельного обучения верстки.
Last reply by klierik, -
- 4 replies
- 2.5k views
Здраствуйте! Есть форма отправки письма на почту. Как можно ее поставить именно в центр.Пробовал text-aligh:center; для div ,но только текст ставится в центр , а не форма Код https://jsfiddle.net/RedSniper/b157q0xp/
Last reply by kartopelka, -
- 1 reply
- 2.5k views
Допустим этот текст вписан в многострочное текстовое поле (textarea) Окно сжимается и хотелось бы, чтобы высота поля увеличивалась, а не как сейчас: Можно что-то сделать? Пробовал через https://github.com/javierjulio/textarea-autosize - ничего не вышло. Я на правильном пути?
Last reply by npofopr, -
- 2 replies
- 2.5k views
Скиньте простенький макетик для тренировки поверстать
Last reply by spartak9871, -
- 4 replies
- 2.4k views
вот скриншот из psd макета как сверстать помогите плиз
Last reply by DivMan, -
- 1 reply
- 2.4k views
Приветствую всех. Пожалуйста, дайте критику на эту верстку. Я новичок, и это моя первая попытка что-то сверстать. Большое спасибо. maquette1.rar
.svg.thumb.png.c798904f8a3e2f805e6a1016ee1f7055.png)
Last reply by Даниил Виттманн, -
- 1 reply
- 2.4k views
<html> <head> <style> button.knopka { color text: #000000; text-align: center; background: #F0F0F0; padding: 5px; border-radius: 13px; height: 31px; width: 260px; border: 2px solid #EF9BC7; } button.knopka:hover { background: #EF9BC7; } </style> </head> <body> <div class = "center"><button class="knopka"><b>Разное</b></button> </body> </html> увидел якобы можно сделать отцентровку текста в кнопке так <html>position: absolute; top: 50%; left: …
Last reply by Vic-Tor, -
- 8 replies
- 2.4k views
Всем привет Меня зовут Павел, занимаюсь версткой довольно продолжительное время, изучаю параллельно другие технологии фронта, все пытаюсь в общем стать крепкой боевой Frontend единицей. Постоянно возникают вопросы как это сделать лучше, перфекционист внутри просит с каждым проектом сделать это лучше, но постоянно какой-то определенный подход заключает в себе свои за и против. Возможно мне нужен ментор? Если да, где можно найти хорошего? Возможно есть какие менторы с почасовой оплатой, которые подскажут и направят на путь истинный. В этом топике хотел бы задать такой вопрос. Мне очень нравится способ задания единиц в rem'ах (62.5% у html, что удобно высчитывать …
Last reply by klierik, -
- 5 replies
- 2.4k views
Всем доброго времени суток, друзья! Возник вопрос по поводу верстки изображения в блоке header. для того, чтобы установить изображение фоном в шапке сайта, применяют background-image, я соглашусь с этим конечно. Но тут и возникает ситуация с адаптивностью изображения. Мне нужно, чтобы картинка сжималась, а не обрезалась по краям. Да, при обрезании изображение тоже получается адаптивным, но нужно полностью все изображение в ширину при адаптиве. Есть такое изображение: Таким же оно должно быть и в мобильной версии: С этим прекрасно справляется тег img: img { width: 100%; height: 100%; object-fit: cover; object-position: top; } Но чере…
Last reply by vados, -
- 0 replies
- 2.4k views
Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде? https://codepen.io/20ZeteM02/pen/WNwwEEp
Last reply by ZeteM, -
- 1 reply
- 2.3k views
Добрый день! я только начал осваивать веб-программированием и уже столкнулся с некоторыми трудностями, скажите пожалуйста, как сделать так, чтобы объекты были забиксированны в строгом положении на каждой странице. Например: Мне нужно, чтобы молния была всегда строго по центру верхнего блока, а вот блоки с кнопками меню должны быть относительно молнии. Как на макете. Мне кажется, что я изначально начал все делать неправильно. И еще такой вопрос. Старался сделать по уроку, предложенному на сайте, чтобы рисунок менялся на другой при наведении. Через <p></p> у меня просто нет рисунка. Не знаю что и как делать( Подскажите, пожалуйста. Буду очень признателе…
Last reply by Даниил Виттманн, -
- 1 reply
- 2.3k views
Как сделать , чтоб при уменьшении екрана , список не сжимался?Код https://jsfiddle.net/RedSniper/7nx6sf2v/3/ При 1920*1080 выглядит нормально, но при маштабировании +10 процентов сжимается и получается не красиво.Можно как-то его зафиксировать ,чтоб он не менялся до размеров телефона?
Last reply by klierik, -
- 3 replies
- 2.3k views
Здравствуйте, дорогие форумчане. Я - новичок самоучка, поэтому для вас проблема может быть не очень сложная. Мне нужно сделать выпадающий список, как на рисунке. Интересует меня то, как сделать такие оглавления, как на изображении ("по сторам", "по товару"), чтоб они не выпадали вместе с option. Простите, если не совсем понятно и корректно выражаюсь!
Last reply by Wile E, -
- 2 replies
- 2.3k views
Привет, есть задание сверстать по макету вот эту часть, что на фото, это лучше сначала сделать общий блок, потом блок с текстом и блок с изображением? Есть такой код для текста: <section id="about"> <div class="container"> <div class="title"> <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur. </p> </div> <div class="about clearfix"> <div class="about_txt"> <h3 class="left">July 2010 <span>Our humble beginnings</span></h3> <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente molestiae do…
Last reply by Колхозник деревенский, -
- 1 reply
- 2.3k 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, -
- 2 replies
- 2.2k views
Здраствуйте!Не могу нажимать на подпункты.Сделал типо навигации на сайте,один подпункт от которого идут остальные подпункты.И когда наводишь на Главный пункт , меню открывается но когда , я пытаюсь нажать на те подменю, оно просто закрывается.
Last reply by kartopelka, -
- 1 reply
- 2.2k views
Я вижу чат, а где же сами макеты, которые можно попробовать сверстать?
Last reply by DivMan, -
- 2 replies
- 2.2k views
Добрый день всем! Я с довольно элементарным вопросом, но я в замешательстве. На определенном этапе обучения перешел с ознакомлением Photoshop для нарезки макета. Почти все нюансы и тонкости понял. Но столкнулся с одной элементарщиной, которую не уловил из видеоуроков, а именно - как мне добыть фоновое изображение(к примеру, не повторяющиеся узоры, а фото... пейзаж) из макета, к примеру, из Header? Просто убрать все наложенные поверх слои и сделать экспорт изображения? Как-то этот нюанс я сам не понял до конца, а в видео, которые я смотрел, работа с фоном заключалась в вырезке как раз куска фона для цвета, или с узором.
Last reply by Saimone, -
- 6 replies
- 2.2k views
Мне нужно сделать <button>, по которой выводилась бы новая вкладка с сайтом каким-нибудь. С <a> работает, <button> не знаю как, всё перепробывал. Можете показать и объяснить так же код новичку? Или так невозможно. Заранее благодарю.
Last reply by klierik, -
Ребят помогите сделать сайт к завтру Подробно 89126967487 отдам 300 рублей плиз срочно id248883136
Last reply by Нарек, -
- 2 replies
- 2.1k views
Как сделать чтобы на сайте при вводе ОПРЕДЕЛЁННОГО слова происходило действие? HTML Например ввёл "123123" и ничего не произошло или выдало надпись "ошибка", а если ввёл "lol123" перешёл по ссылке или скачался файл (итп) +поле для ввода
Last reply by wwt, -
- 3 replies
- 2.1k views
Подскажите что не так с кодом, не могу вставить фон в intro
Last reply by npofopr, -
- 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, -
- 2 replies
- 2k views
Весь день пытаюсь разобраться как сделать так что бы слово подвал опустилось и выравнялось по нижнему краю, и не могу понять почему нечего не получается, я все перепробывал, получилось этого достичь только с помощью позицирования, но я хочу более точный способ. vertical-align не работает даже когда "display: inline". Помогите пожалуйста. .fot2 {border: 1px solid black; display: inline; height: 20px; vertical-align: bottom;}
Last reply by wwt, -
- 2 replies
- 2k views
Вопрос вроде тривиальный. При наведении на кнопку текста стрелка не закрашивается в белый цвет. как быть? https://jsfiddle.net/dimasgrig1575/dgLupco3/
Last reply by daggi,
-
Обсуждения
-
Актуальные контакты: 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-