Search the Community
Showing results for tags 'css'.
-
Бесплатный VPN - FineVPN.org | Telegram бот c бесплатным VPN - @FineVPNbot
Без ограничений по скорости, трафику и времени. Совершенно бесплатный и безлимитный. -
Памагити. Не пойму, почему в Chrome и в FF не работает элементарная конструкция, а в IE она же работает. <p style="font-family: HVD Peace, sans-serif; font-size: 40pt; ">Test of font family</p> <p style="font-family: HVD Peace, serif; font-size: 20pt; ">Test of font family</p> (шрифт при этом у меня локально установлен, с url я пока не пробовал) Получаем при этом: - это предпросмотр в IE, а во всех остальных браузерах (Chrome, FF, Opera) выглядит вот так: То есть общее описание (serif или sans-serif) подхватывается, а конкретный шрифт - нет. Пробовал с разными шрифтами. Это у меня какая-то локальная проблема с браузерами или что вообще?
-
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> Fucking slavse</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet"> </head> <body> <header id="header" class="header"> <div class="container"> <div class="nav"> <img src="img/logo.svg" alt="OJJO"> </div> </div> </header> <section id="section" class="section"> <dev slass="container"> </dev> </section> <footer id="footer" class="footer"> <div class="container"> </div> </footer> </body> </html> body { padding: 0; margin: 0; font-family: 'Noto Serif', serif; font-family: 'Gilroy Thin'; color: 0; font-size: 16px; } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; text-transform: uppercase; } ul, li { display: block; } .container { width: 1170px; margin: 0 auto; } .header{ background: url('/img/fone.jpg') no-repeat center top; } Не работает цсс, в css .header не показывается картинка, путь указан верно
-
Section - about получился в 0px высотой а все его вложения перенеслись в section catalog пожалуйста скажите посоветуйте как исправить. Первая моя робота, зарание спасибо:) <section class="about"> <div class="conteiner"> <div class="galery"> <img class="galeru-img" src="img/Frame 10.png" alt=""> </div> <div class="about-txt"> <H2>Насладись идеальным кофе у себя дома</H2> <p class="about-txt1" > STARBUCKS® HOUSE BLEND из отборных кофейных зёрен из Латинской Америки, обжаренных до темно-коричневого цвета. Сочетание насыщенного аромата и вкуса орехов и какао-бобов с едва заметными сладкими нотками. Этот кофе — начало Starbucks®, наш самый первый бленд 1971 года. </p> </div> </div> </section> <section class="catalog"> <div class="conteiner"> <div class="catalog-img"> <a href="#"> <img src="img/starbucks1.png" alt=""> </a> <a href=""> <img src="img/starbucks2.png" alt=""> </a> <a href=""> <img src="img/starbucks3.png" alt=""> </a> </div> </div> </section> .galery{ width: 633px; margin-right: auto; float: left; } .about{ margin-top: 120px; } .about-txt{ width: 448px; margin-left: auto; float: right; margin-top: 180px; } h2{ font-size: 24px; color: #00492B; } .about-txt1{ font-size: 18px; color: #00492B; margin-top: 23px; } .catalog{ margin-top: 120px; }
-
Не могу поменять цвет h1 и убрать нижнее подчеркивание. Где ошибка?
-
Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: frontendpavel@gmail.com
-
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет. Код HTML: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Иконы</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="open-button"> <button onclick="openForm()">Открыть форму</button> </div> <div class="form-popup" id="IconForm"> <form class="form-container"> <h1>Параметры иконы</h1> <label for="bordercolor"><b>Цвет границы</b></label> <select id='select_bc' size='1'> <option value='#000'>Чёрный</option> <option value='#00f'>Синий</option> <option value='#f00'>Красный</option> <option value='#0f0'>Зелёный</option> </select> <p></p> <label for="background"><b>Цвет фигуры</b></label> <select id='select_bg' size='1'> <option value='#fff'>Белый</option> <option value='#bbf'>Синий</option> <option value='#fbb'>Красный</option> <option value='#bfb'>Зелёный</option> </select> <p></p> <label for="fontcolor"><b>Цвет текста</b></label> <select id='select_fc' size='1'> <option value='#000'>Чёрный</option> <option value='#00f'>Синий</option> <option value='#f00'>Красный</option> <option value='#0f0'>Зелёный</option> </select> <p></p> <label for="text"><b>Содержание фигуры</b></label> <textarea id="text_in" cols="20" rows="3"></textarea> <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button> <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button> </form> </div> <div id="Draw"></div> <script type="text/javascript" src="script.js"></script> </body> </html> CSS: {box-sizing: border-box;} /* Кнопка, используемая для открытия формы */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; width: 280px; } /* Всплывающая форма-скрыта по умолчанию */ .form-popup { display: none; position: fixed; border: 3px solid #f1f1f1; z-index: 9; } /* Добавить стили для контейнера формы */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Поля ввода полной ширины */ .form-container input[type=text], .form-container input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* Когда входы получают фокус, сделайте что-нибудь */ .form-container input[type=text]:focus, .form-container input[type=password]:focus { background-color: #ddd; outline: none; } /* Стиль для кнопок */ .form-container .btn { background-color: green; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.85; } /* Красный цвет фона для кнопки "Отмена" */ .form-container .cancel { background-color: red; } /* Добавить некоторые эффекты наведения на кнопки */ .form-container .btn:hover, .open-button:hover { opacity: 1; } JS: function openForm() { document.getElementById("IconForm").style.display = "block"; } function closeForm() { document.getElementById("IconForm").style.display = "none"; return false; } function drawIcon(bc, bg, fc, text) { var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" '; svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />'; svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>"; svg += text + "</text></svg>"; alert(svg); document.getElementById('Dragon').innerHTML += svg; return true; } function acceptArgs() { var bc = document.getElementById("select_bc"); bc = bc.options[bc.selectedIndex].value; var bg = document.getElementById("select_bg"); bg = bg.options[bg.selectedIndex].value; var fc = document.getElementById("select_fc"); fc = fc.options[fc.selectedIndex].value; var text = document.getElementById("text_in").value; closeForm(); drawIcon(bc, bg, fc, text); }
-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Тритон Авто</title> <style> * { margin: 0; padding: 0; font-family: Tahoma, Geneva, sans-serif; color: #2e2e2e; } body { background: #f8f7f3; } a { color: #037d64; } #page { width: 1100px; margin: 0 auto; } #header { background-image: url(C:\Users\vip_c\Desktop\html\img\qq.jpg); } </style> </head> <body> <div id="page"> <div id="header"> </div> </div> </body> </html>
-
Доброго тебе дня, друг. Данную тему написать меня сподвигло больше кол-во однотипных тем на тему "Ищу наставника", "Нужен учитель" и тому подобное. Одной из причин тому статья "Путь верстальщика" от автора Максима Усачева, в которой он делится своим безценным жизненным опытом. Я постараюсь пролить свет на некоторые важные (в рамках данной темы) моменты из статьи. Макс пришел на форум имея минимум знаний в сфере разработки и имея большое желание учится. Он упоминает про наставника, но большинство читателей, к сожалению, трактуют данную информацию извращенно. Это не путь к руководству, это всего лишь опыт который получил автор статьи. Нужто ты думаешь, что если и у тебя будет наставник, то ты выучишь все в 2, 3, 10 раз быстрее? Или больше? Или качественнее? Более того, наставник может научить тебя плохому. Наставник в разрезе данной статьи -- это специалист, который допустил огромное кол-во ошибок, который "кровью и потом" работал до глубокой ночи ведя жесткую борьбу с браузерами для достижения своей цели. И хотя результат боя не всегда был на стороне разработчика, войну он всегда выигрывает. Зачем тебе наставник? Что бы он говорил тебе где ты ошибся? Или как надо было сверстать тот или иной блок? Или что лучше использовать float или inline-block? И что это тебе даёт? Набор правил и готовых решений как надо делать и как не надо! Но ведь ты знаешь что каждый сайт уникален, и везде есть нюансы. И ты хочешь каждый раз обращаться к учителю что бы тот подсказал тебе как решить задачу?... Разве ты не хочешь научится думать и понимать чем живет вёрстка? Как она устроена, что из себя представляют слои, понимать и визуализировать и процесс разработки? Понимать "физику" работы блоков на страницы, как и почему они влияют на остальные? Предугадывать на будущее как потянется страница/блок в случае наполнении его контентом. Уметь за считанные секунды в голове разложить огромный сайт на слои? Достичь понимания вёрстки как некой сущности, которая является единым целым с тобой. Другими словами -- ты желаешь женится на прекрасной девушке, со своим темпераментом, безграничными возможностями, уникальным подходом. Она способна подстраиваться под тебя так как ты этого хочешь, когда только пожелаешь. Она согласна выполнять твои прихоти, она не переборчива и соглашаеться на любые твои даже самые безумны идеи. И не смотря на это у неё свой уникальный неповторимый характер. Она бывает упёртая и неприступная, но всегда можно найти с ней общий язык. Если ты знаешь как с ней общаться, понимаешь как она думает, чувствуешь её, чувствуешь то что чувствует она, видишь то что видит она. Если ты слышишь и понимаешь её, то невозможно будет представить цели, которую вы вместе не смогли бы достичь. Ты хочешь женится на самой прекрасной девушке, но спать с ней будет твой наставник! Я не говорю что ты не сможешь стать специалистом без него. Большинство разработчиков, которые поддерживают этот форум, не имели никаких учителей. Все чего они добивались -- все делали сами. Для того что бы достичь тех же высот тебе надо повторить успех людей которые это уже сделали! Это не просто, но это реально! Никто за тебя этого не сделает, никому кроме тебя это не надо. Далее по списку: 1. Перед тем как открыть свою тему в поисках Наставника, пройдись по темам которые создали раньше. 2. Ты ищешь классного специалиста, который будет тебе помогать тебе, обучать, давать советы, делится опытом и знаниями. Ты этого хочешь? А ты можешь ответить на вопрос - зачем вообще кому-то это делать? Зачем, для чего, почему кто-то должен согласится тратить на тебя время? Ведь тебе нужен не новичек как ты, а тот, у кого за плечами багаж опыта, ведь так? Так вот чем ты отличаешься от других таких же жаждущих что бы вкладывать в тебя время и делится нажитым опытом? Пойми правильно, дело то не в деньгах, тут важна идея. 3. Теперь по теме. 3.1. Зачем тебе вообще это направление? Что оно тебе даст? Что ты нашел в вёрстке? 3.2. Если ты считаешь что вместо тебя будет гуглить наставник -- ты ошибаешься. Гугл -- лучший твой помошник. Умеешь правильно составить запрос - умеешь решать задачи. Очень часто бывает так, что поиск решения намного приоритетнее, нежели знания. 3.3. Если ты считаешь что наставник будет тебе давать задания -- ты сильно ошибаешься. Тебе надо -- ты ищи макет, а наставник тебе может написать ТЗ, а потом сказать какая ты бестолочь, указав на твои ошибки в результате -- а это бесценно! 3.4. Любой опыт забирает много времени. Ты не станешь специалистом через год-два! Ты уверен что у тебя вообще хватит сил на то что бы потратить ~5 лет своей жизни в интенсиве и "выкарабкатся" на уровень, когда ты сможешь сверстать страницу (предположим сайта новостей с огромным кол-во блоков) в уме за считаные секунды? Ты уверен что ты хочешь потратить часть своей жизни на изучение вёрстки? ps: нет ничего невозможного, было бы желание
- 117 replies
-
- 11
-
-
Добрый день! Как сделать наследование при описании класса? Именно при описании, а не родитель -дочерний элемент. Т.е. есть div.Class1 {тут куча всего} Этот класс не используется напрямую, но от него наследуются два класса, т.е. должно получится div.Class2 {border: 1px solid red;} + то, что я определил в Class1 div.Class3 {border: 1px solid black;} + то, что я определил в Class1 Т.е. Class 1 сделан чтоб просто чтоб не дублировать одно и тоже при описании Class2 и Class3 Надеюсь, суть вопроса ясна 🙂 Спасибо
-
Выполняю рабочий проект для заказчика Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка И как совместить картинки с задними блоками на секции Продукция И еще такой момент, сталкивались ли вы с тем что картинки-исходники разного размера в исходниках, допустим в секции продукция картинка листовок сплющена, если сталкивались может быть подскажите как решать такие моменты. Буду рад конструктивным советам, спасибо Прикладываю макет https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
-
Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад? https://codepen.io/tempest2708/pen/dyMVoOp pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4 -
Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде? https://codepen.io/20ZeteM02/pen/WNwwEEp
-
Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
-
Здравствуйте возникла проблема: http://prntscr.com/t96dcc (parallax) его высота смещает блок с текстом. Может подскажите другую рамку с текстом или как исправить это. Параллакс: <section class="parallax sticky" id="scene"> <div class="parallax-L" data-depth="0.3" id="L"><img src="img/bmw-m32.png" alt="" /></div> #L { width: 100%; height: 50vh; padding: 0; margin: 0; } .L { background: url(bmw-m32.jpg) left no-repeat; background-size: cover; overflow: hidden; } img { max-width: 20%; height: auto; } .sticky{ position: sticky; top: 0; } Рамка с текстом: <div class="ramka-5"> Рамка 5 </div> .ramka-5 { width: 4000px; position: relative; z-index: 2; background-color: white; width: 50%; margin: 0 auto; padding: 25px; border-right: 1px solid #333; border-left: 1px solid #333; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto Condensed', sans-serif; }
-
Добрый день. Проблема: Настраиваю в отдельном CSS стили для шрифтов h1, h2 и т.д., но когда начинаю их применять внутри тега div - не вижу изменений. Сам CSS подключил, в нем и другие настройки стилей, которые успешно применяются к файлу html.
-
Подскажите можно увеличить расстояние между текстом и картинкой в маркированном списке. Конкретно для маркированного списка?
-
Отправка нестандартных форм на конструкторах сайтов
РоманФ posted a question in Web-site Development
Возникли сложности с созданием нестандартной формы в конструкторе сайтов, может кто-то сталкивался с такими проблемами? Как решать такие проблемы в конструкторах по типу Lp Motor и Tilda(есть блок html есть куда вставить css, ну и соответственно есть возможность вставлять скрипты js), что использовать и как отправлять формы на почту в такой ситуации? -
В медиа запросах в стилях стоят переопределенные стили под разные экраны, путём уменьшения экрана подключается эти медиа запросы. Видел ролик, что так нельзя делать. если в инспекторе закрыт стиль черточкой то это плохо, но не знаю почему. Стоит ли так делать или стоит всё переделать!? Мой сайт <!DOCTYPE html> <html lang="ru"> <head> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/clear_css.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/slider.css"> <meta charset="UTF-8"> <title>GoSport</title> </head> <body> <header class="header"> <div class="header-logo"> <img class="header-logo__img" src="img/logo.svg" alt="logo"> <div class="header-logo__logo-title"> <div class="header-logo__title-top">GoSport</div> <div class="header-logo__title-bottom">Магазин спортивных товаров</div> </div> </div> <div class="call"> <a class="call__number" href="tel:+7(495)746-86-48">+7(495)746-86-48</a> <button class="call__btn">Заказать звонок</button> </div> </header> <div class="header-menu"> <nav class="menu"> <a class="menu__link menu__link_none" href="#">Тренажеры</a> <a class="menu__link" href="#">Фитнес</a> <a class="menu__link" href="#">Инвентарь</a> <a class="menu__link" href="#">Массажное оборудование</a> <a class="menu__link" href="#">Другое</a> </nav> </div> <div class="lk-box"> <form class="form-search"> <input class="form-search__input-search" type="search" name="q" id="gsearch" placeholder="Поиск среди 7000 товаров"> <button class="form-search__find-button" type="submit"></button> </form> <div class="panel"> <button id="panel__exit">Войти</button> <button id="panel__basket">Корзина</button> </div> </div> <div class="description"> <div class="top-directory"> <h1 class="description__title"> Начните вести здоровый образ жизни вместе с GoSport! </h1> <p class="description__text"> Все товары вы сможете найти у нас в каталоге, на некоторые из них действуют сезонные скидки и спец предложения. У нас в наличии множество товаров как для новичков так и для профи. </p> <button class="description__btn"> Смотреть каталог </button> </div> <div class="top-slider"> Слайдер </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ .header { display: flex; justify-content: space-between; height: 91px; background-color: #2B3D2F; flex-wrap: nowrap; } .header-logo{ display: flex; align-items: center; align-self: center; flex: 0 0 auto; padding-left: 21px; } .header-logo__img{ width: 50px; height: 50px; } .header-logo__logo-title{ padding-left: 15px; } .header-logo__title-top{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 18px; line-height: 21px; color: #FFFFFF; } .header-logo__title-bottom{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #FFFFFF; } .call{ display: flex; justify-content: flex-end; align-items: center; align-self: center; flex: 0 0 auto; flex-wrap: wrap; } .call__number{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; color: #FFFFFF; } .call__btn{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 13px; line-height: 15px; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 5px; padding: 15px; background: #2B3D2F; margin: 0px 80px 0px 38px; transition-duration: 2s; transition-property: border-color, color; } .call__btn:hover { border-color: chartreuse; color: chartreuse; } .header-menu { display: flex; align-items: center; height: 28px; background: rgba(22, 30, 25, 0.97); } .lk-box{ display: flex; justify-content: space-between; margin: 25px 0px 0px 0px; padding: 0px 70px; } @media screen and (max-width : 786px ){ .call__btn{ margin: 0px 10px 0px 10px; } .lk-box{ display: none; } nav.menu{ font-size: 10px; margin-left: 15px; } .call{ display: flex; margin: 0px; } .header-logo{ display: flex; justify-content: flex-start; padding: 0px 0px 0px 12px; } .header{ padding-top: 10px; height: 115px; } .header-menu{ height: 25px; } } @media screen and (max-width : 435px ){ nav.menu{ display: none; } .call__btn{ padding: 8px; } .header-logo{ padding: 0px; } .header-logo__logo-title{ padding-left: 5px; } .call{ padding-bottom: 5px; } .header{ flex-direction: column; justify-content: space-around; } .call__number{ display: none; } .header-menu{ height: 17px; } } .menu { display: flex; font-family: Roboto; margin-left: 71px; } .menu__link { display: flex; color: #FFFFFF; margin-left: 25px; flex: 0 1 auto; transition-duration: 0.7s; transition-property: color; } .menu__link_none { margin: 0; } .menu__link:hover { color: lightskyblue; } .form-search{ display: flex; flex: 0 1 auto; margin-left: -50px; } .form-search__input-search{ width: 345px; padding: 0px 15px; border: 1px solid #E6E6E6; border-radius: 3px; } .form-search__find-button{ background: url("../img/search-icon.svg") no-repeat 50% 50%; /* Параметры фона */ background-size: 25px; background-color: #FF8E25; border-radius: 0px 5px 5px 0px; width: 50px; height: 45px; flex: 0 0 auto; } .form-search__find-button:hover{ background-color: rgba(255,127,8,1.00); transition-duration: 0.9s; transition-property: background-color; } .form-search__input-search:hover{ border-color: dodgerblue; transition-duration: 1.2s; transition-property: border-color; } .panel{ display: flex; justify-content: space-between; } #panel__exit{ display: flex; justify-content: center; align-items: center; min-width: 100px; min-height: 45px; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; color: #FF8E25; transition-duration: 0.9s; transition-property: color, background-color; background-color: white; border: 1px solid #E6E6E6; border-radius: 3px; } #panel__exit:hover{ color: white; background: #FF8E25; } #panel__basket{ display: flex; justify-content: flex-start; align-items: center; width: 168px; height: 45px; background-color: #FF8E25; border-radius: 3px; font-family: Roboto; padding-left: 20px; font-style: normal; font-weight: normal; font-size: 14px; color: #FFFFFF; transition-duration: 0.9s; transition-property: background-color; margin-left: 20px; } #panel__basket:hover{ background-color: rgba(255,127,8,1.00); } .form-search__input-search:-ms-input-placeholder{ color: #DDDDDD; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; } .form-search__input-search::placeholder{ color: #DDDDDD; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; } @media screen and (max-width : 550px ){ .call__number{ display: none; } } .description{ display: flex; padding: 24px 81px 0px 80px } .top-directory{ display: flex; flex-direction: column; flex: 0 0 auto; width: 40%; padding-top: 50px; margin-right: 77px; } .description__title{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; color: #161E19; } .description__text{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #161616; margin-top: 18px; } .description__btn{ width: 205px; height: 50px; font-family: Roboto; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; color: #FFFFFF; background-color: #FF8E25; border-radius: 5px; margin: 35px 0px 0px 35px; } .description__btn:hover{ background: red; } .top-slider{ width: 60%; } @media screen and (max-width: 790px) { .description__title{ font-size: 24px; line-height: 28px; } .description__text{ display: none; } .description{ flex-direction: column; padding: 0px; } .top-directory{ display: flex; flex-direction: row; align-items: center; width: 100%; padding: 15px; } .description__btn{ margin: 0px 0px 0px 117px; padding: 0px 10px; } .top-slider{ width: 100%; } } @media screen and (max-width : 454px ){ .header-logo{ padding: 0px 5px; } .header-logo__logo-title{ display: none; } .description__btn{ font-size: 10px; line-height: 12px; margin: 7px 0px 0px 0px; width: 123px; height: 30px; } .description__title{ font-size: 14px; line-height: 16px; text-align: center; } .top-directory{ flex-direction: column; padding: 20px; } }
-
Здравствуйте! Нужна помощь хорошо разбирающихся людей в верстке. Написал часть сайта (html, css) адаптив. На сайте только шапка, поисковая форма, вход и корзина. Подскажите, что я сделал не правильно в коде. Какими способами можно реализвать форму поиска с кнопкой, вход, и корзину. Я понимаю что много ошибок, хоть код и не большой. Буду благодарен за любой отзыв и разбор. Спасибо!!! ссылка на сайт — u1071267.isp.regruhosting.ru
-
Задача: Создать линию определённых размеров и расположить её по центру экрана. Код HTML: <div class="line"></div> Код CSS: .line { position:absolute margin-top:650px; height:2px; width:1200px; background: black; }
-
Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно. Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей. И остро стоит вопрос чтобы это все дело было адаптивно. На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом, мне хотябы общие принципы объяснить в каком направлении дальше двигаться
-
Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а? Свое образный переход будет...
-
Вопрос новичка :) В зависимости от положения запятой в css коде получается разный результат на выходе. Кто может разъяснить принцип, по которому они ставятся. Например, почему (p, .main span a) и (p .main, span a) отображаются по разному. Я понимаю что так и должно быть, но почему? По какому принципу? Внизу я прикрепил скриншоты - коды и результаты
-
недавно начал изучать html css, вроде все понятно, но не могу сообразить как правильно сверстать такой header. помогите примером
