Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 5 replies
- 3.6k views
Помогите пожалуйста форумчане! Код отображается в браузере правильно (наверное), а в phplist не хочет отправляться( Програмист сказал,что много хлама, но я его не могу найти Новый текстовый документ (2).txt
Last reply by klierik, -
- 5 replies
- 2.3k views
Всем доброго времени суток, друзья! Возник вопрос по поводу верстки изображения в блоке header. для того, чтобы установить изображение фоном в шапке сайта, применяют background-image, я соглашусь с этим конечно. Но тут и возникает ситуация с адаптивностью изображения. Мне нужно, чтобы картинка сжималась, а не обрезалась по краям. Да, при обрезании изображение тоже получается адаптивным, но нужно полностью все изображение в ширину при адаптиве. Есть такое изображение: Таким же оно должно быть и в мобильной версии: С этим прекрасно справляется тег img: img { width: 100%; height: 100%; object-fit: cover; object-position: top; } Но чере…
Last reply by vados, -
- 5 replies
- 1.6k views
Так выглядит слайдер на ПК. Тут всё ок. А вот так всё плохо на телефоне, планшетах или на ПК с низким разрешением. Стрелки перелистывания фотографии немного выходят. Фотоальбом весь автоматом масштабируется благодаря: "width: 98%; max-width: 700px;", кроме стрелок. Стрелки почему то не хотят, по этому я сделал им ограничитель "max-height: 78%". Подскажите как пофиксить этот нюанс. Простите, если не корректно объяснил, я тот ещё Сусанин.
Last reply by klierik, -
- 4 replies
- 3.2k views
Всем привет! Прошу помощи. Какие есть варианты по реализации? Я использовала fieldset с вложенным legend и css rotate, но думаю этот способ не очень. В итоге получилось на половину, и текст с LERN MORE добавить не получилось(второй тег legend не учитывается)
Last reply by alanreid, -
- 4 replies
- 2.4k views
вот скриншот из psd макета как сверстать помогите плиз
Last reply by DivMan, -
- 4 replies
- 2k views
Здравствуйте! Подскажите, пожалуйста, как прописать колонки по бокам.
Last reply by sovsemnovichok, -
- 4 replies
- 2.5k views
Здраствуйте! Есть форма отправки письма на почту. Как можно ее поставить именно в центр.Пробовал text-aligh:center; для div ,но только текст ставится в центр , а не форма Код https://jsfiddle.net/RedSniper/b157q0xp/
Last reply by kartopelka, -
- 4 replies
- 3.3k views
Подскажите пожалуйста, была написана landing page, достаточно давно, и сегодня заметил что пропала картинка. Раньше все было ок, а сегодня она пропала, и на самом сайте, и собственно на компьютере если запустить тоже ее нету. Что такое могло произойти? Код примерно такой. <header class="header"> .... </header> .intro{ background-image: url("../img/header_bg.png") center no-repeat/cover; height: 400px; background-size: 97% auto; }
Last reply by oleg126, -
- 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, -
- 3 replies
- 2.5k views
Не мог бы кто-нибудь пожалуйста кинуть код вот такого маленького макетика из 2-ух div блоков. Спасибо!
Last reply by radioactive, -
- 3 replies
- 2k views
Подскажите что не так с кодом, не могу вставить фон в intro
Last reply by npofopr, -
- 3 replies
- 2.2k views
Здравствуйте, дорогие форумчане. Я - новичок самоучка, поэтому для вас проблема может быть не очень сложная. Мне нужно сделать выпадающий список, как на рисунке. Интересует меня то, как сделать такие оглавления, как на изображении ("по сторам", "по товару"), чтоб они не выпадали вместе с option. Простите, если не совсем понятно и корректно выражаюсь!
Last reply by Wile E, -
- 3 replies
- 6.9k views
Попал в неловкую ситуацию в базовом курсе от html академии. В вебинаре верстают шаблон Барбершоп ''Бородинский'', ну так вот в демке есть свой код, который создает подстветку блоков(демки у меня нет естественно). Фон просто напросто задали background(jpg макет), ну и подсветка идет поверх фона. Сетка на float. хочется полноценно идти по курсу и применить на практике знания. Кто проходил этот курс, поделитесь опытом пожалуйста.
Last reply by htmlacademy, -
- 3 replies
- 2.5k views
Подскажите, как разместить 3 картинки в ряд , текст чтобы был под каждой как в примере (текст в несколько строк). Если можно пришлите , пожалуйста, аналогичный код
Last reply by npofopr, -
- 3 replies
- 3.5k views
Добрый вечер, ребята. Вторые сутки блуждаю в сети и не могу найти ответ на свой вопрос. .niz:hover { background: red; этим кодом я получил возможность менять цвет определенного блока наведением курсора, вопрос в следующем. Как делать, что бы после каждого наведения цвет менялся на другой а не на один и тот же. То есть зеленый, красный, оранжевый и так далее, спасибо большое
Last reply by Егор0248, -
- 3 replies
- 2.6k views
Привет всем. Делаю менюшку. Есть такая идея. чтобы при наведении на видимы блок срабатывал :hover и появлялся скрытый блок. (Типа выпадающего меню) Все вроде логично, но не работает... Подскажите пожалуйста, что я делаю не так. Код такой: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Имя</title> <style> .div1{ border: 4px solid black; width: 200px; } .div2{ display: none; } .div1:hover .div2{ display: block; border: 4px solid black; width: 200px; } </style> </head> <body> <div class="div1"> Меню </div> <div class="div2">Фрукты </div> </body> …
Last reply by klierik, -
- 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
- 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, -
- 2 replies
- 2.5k views
Скиньте простенький макетик для тренировки поверстать
Last reply by spartak9871, -
- 2 replies
- 2.6k views
Возникла такая проблема. Необходимо ввести данные, а затем вывести эти данные в модальном окне, выскакивающее на этой же странице, никакой обработки. Можно ли как то использовать имя или id форм, чтобы потом их вывести в окне? Желательно без использования php и js, т.к. я их ещё не знаю. К примеру: ввёл я логин и пароль и в модальном окне мне высветилось: "Ваш логин: хххх, ваш пароль: хххх" Использую boostrap для модального окна.
Last reply by M33L, -
- 2 replies
- 1.9k views
index.html scripts.js style.css
Last reply by Евгений_SB, -
- 2 replies
- 2.2k views
Добрый день всем! Я с довольно элементарным вопросом, но я в замешательстве. На определенном этапе обучения перешел с ознакомлением Photoshop для нарезки макета. Почти все нюансы и тонкости понял. Но столкнулся с одной элементарщиной, которую не уловил из видеоуроков, а именно - как мне добыть фоновое изображение(к примеру, не повторяющиеся узоры, а фото... пейзаж) из макета, к примеру, из Header? Просто убрать все наложенные поверх слои и сделать экспорт изображения? Как-то этот нюанс я сам не понял до конца, а в видео, которые я смотрел, работа с фоном заключалась в вырезке как раз куска фона для цвета, или с узором.
Last reply by Saimone, -
- 2 replies
- 2.2k 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 Колхозник деревенский, -
- 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-