Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 19 replies
- 3.5k views
Здравствуйте целую неделю сижу над этим у меня на сайте страница, на которую я добавляю ячейки, когда я вставляю <table> то ячейки автоматом срастаются с фоном страницы как сделать чтобы они не имели ни чего общего с фоном ? За ранее благодарен.
Last reply by lorddipo, -
- 2 replies
- 3.4k views
Как правильно, грамотно, реализовать верстку таких линий? Код не обязателен, хотя бы просто правильное направление для мыслей.
Last reply by rasmus, -
- 2 replies
- 3.4k views
Как реализовать вместе и две совмещеных картинки и блок текста Короче ситуация следующая а нужно ,чтоб было так У меня есть две картинки одна прямоугольник серого цвета и вторая треугольник розового цвета.Пробовал сделать через надания треугольнику position relative;right:0; bottom: 0; а прямоугольнику display: flex; position: relative; Если у меня получалось их обьеденить , то только когда блоку текста прописывал display:flex;И тогда получалось следующее Если кто-то знает как сделать напишите пожалуйста.Я хотел скинуть код ,но в jsfiddle ,картинки не куда загружать.
Last reply by kartopelka, -
- 7 replies
- 3.4k views
Не могу избавить от перекрытия textare-и картинки. Совсем новичок в верстке.
Last reply by DisplayName, -
В макете, созданном блочной версткой, две колонки (левая с меню, правая с текстом), хедер и футер. Условия задания: Левая колонка фиксированной ширины, правая резиновая. Футер нельзя прижимать к низу экрана. При широком окне браузера колонка с меню должна быть больше по высоте чем правая колонка. Подвал должен располагаться сразу после текста любой из колонок, смотря что длиннее. Проблема: Футер наезжает на колонку с меню при широком экране. Пробовала воспользоваться padding-bottom для блока с колонками, но тогда не выполняется последнее условие: при более узком экране между подвалом и текстом остается расстояние. П…
Last reply by lizaveta, -
- 4 replies
- 3.4k 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, -
- 4 replies
- 3.2k views
Всем привет! Прошу помощи. Какие есть варианты по реализации? Я использовала fieldset с вложенным legend и css rotate, но думаю этот способ не очень. В итоге получилось на половину, и текст с LERN MORE добавить не получилось(второй тег legend не учитывается)
Last reply by alanreid, -
- 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, -
- 1 reply
- 3.1k views
Выполняю рабочий проект для заказчика Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка И как совместить картинки с задними блоками на секции Продукция И еще такой момент, сталкивались ли вы с тем что картинки-исходники разного размера в исходниках, допустим в секции продукция картинка листовок сплющена, если сталкивались может быть подскажите как решать такие моменты. Буду рад конструктивным советам, спасибо Прикладываю макет https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
Last reply by Igor Schnaider, -
- 0 replies
- 3k views
Добрый день мне нужно что h1 был как на макете справа по центру (как на макете) max-width: 1920px; max-height: 1080px; И чтобы при изменения размера экрана положения заголовка и фона не менялись Исходники.rar
Last reply by Almaz_Kazan, -
- 0 replies
- 3k views
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Portfolio of Almas</title> <link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <header class="header"> <nav> <ul class="menu"> <li><a href="#">About me</a></li> <li><a href="#">Portfolio</a></li> <li&g…
Last reply by almaskazhymurat, -
- 1 reply
- 3k views
Всем привет! Помогите пожалуйста решить проблему. На сайте размещены картинки и линии тега <hr>, все это заполнило видимую область страницы, но не появляется полоса прокрутки страницы, а мне необходимо опускать эти картинки ниже. Как быть?
Last reply by klierik, -
Нужен наставник, интересует верстка, устал искать разрозненные знания в интернете. Естественно не бесплатно. Со своей стороны знаю где и как брать реальные заказы, (не про биржи фриланса). Уже работаю с заказчиками приходится использовать Addobe Muse, WordPress, параллельно работаю директологом. Ты научишь меня верстке. Если ты просто знаешь как верстать, и делаешь это хорошо и усидчиво, я помогу монетизировать тебе твои знания, а ты научишь меня верстке.
Last reply by РоманФ, -
- 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, -
- 1 reply
- 2.9k views
Буду рад на критику и советы, что не так делаю? - https://codepen.io/viliksar/pen/zawdGK?editors=1100
Last reply by Filimon, -
Переношу сайт на ворд пресс. И возникла трудность, не могу найти скрипт который отвечает за кнопку спойлера РАСКРЫТЬ. Целиком код копирую с question.html, но не работает
Last reply by Николя223, -
- 13 replies
- 2.7k views
Всем привет, столкнулся с проблемой: у меня в css прописано: * { margin: 0; padding: 0; } body { font-family: "MyriadPro"; font-size: 14px; } .content-bottom { font-size: 40px; font-weight: bold; background-color: #ccc; } Подскажите, как убрать верхний и нижний отступ у текста.. Заранее спасибо!
Last reply by Launder, -
- 0 replies
- 2.7k views
Здравствуйте, у меня вопрос может и юридический, нашёл несколько сайтов на которых авторы предлагают бесплатные шаблоны. У них у всех лицензия MIT, немного прочитав условия и документацию оказалось действительно что они бесплатны и можно их использовать в коммерческих целях. Хотел уточнить вы пользуетесь такими шаблонами? Или есть подводные камни? Пример 1 Пример 2 Пример 3
Last reply by Алексей777, -
- 2 replies
- 2.7k views
Возникла такая проблема. Необходимо ввести данные, а затем вывести эти данные в модальном окне, выскакивающее на этой же странице, никакой обработки. Можно ли как то использовать имя или id форм, чтобы потом их вывести в окне? Желательно без использования php и js, т.к. я их ещё не знаю. К примеру: ввёл я логин и пароль и в модальном окне мне высветилось: "Ваш логин: хххх, ваш пароль: хххх" Использую boostrap для модального окна.
Last reply by M33L, -
- 0 replies
- 2.6k views
Не могу настроить масштаб кнопки
Last reply by Den1s, -
- 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
- 2.6k views
Не мог бы кто-нибудь пожалуйста кинуть код вот такого маленького макетика из 2-ух div блоков. Спасибо!
Last reply by radioactive, -
- 8 replies
- 2.6k views
Добрый вечер! поступило тестовое задание - разработать адаптивную страницу вакансии. Дан текст вакансии и корпоративный сайт компании. ни макета, ни требований,только креатив и собственная смекалка.Подскажите,как правильно сделать эту страницу, и что там должно быть .спасибо.
Last reply by yulshaz@mail.ru, -
- 1 reply
- 2.6k views
Здравствуйте. Верстаю сайт, в валидаторе firefox выскакивает "parse error" в css для мобильных браузеров. По задумке <span class="phonecpu">текст</span> виден на десктопах, а на мобильных display:none его закрывает. При валидации стилей для медиа-запроса - parse error стиля .phonecpu. В чем может быть причина? <nav class="one"> <ul class="topnav"> <li><a class="activeone"href="#"><span class="icon-home"></span></a></li> <li><a href="#"class="active"><span class="icon-phone"> <span class="phonecpu">Вызвать мастера</span></span></a> <u…
Last reply by Xandr555, -
- 3 replies
- 2.5k views
Подскажите, как разместить 3 картинки в ряд , текст чтобы был под каждой как в примере (текст в несколько строк). Если можно пришлите , пожалуйста, аналогичный код
Last reply by npofopr,
-
Обсуждения
-
Актуальные контакты: 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-