Search the Community
Showing results for tags 'html'.
-
Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо! <div class="three navigation items"> <nav> <ul> <li> <div class="navigation__item"></div> <a href="#">Hot themes</a> </li> <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a> </li> <li> <div class="navigation__item"></div> <a href="#">El'Classico</a> </li> </ul> </nav> </div> .navigation { background-color: rgba(31, 30, 30, 0.438); width: 900px; height: 30px; } .navigation li { display: inline-block; padding: 5px 15px; &:hover { content: ""; background-color: rgb(36, 36, 36); cursor: pointer; } } a { color: black; text-decoration: none; font-family: sans-serif; &:hover { content: ""; color: white; } }
-
Всем привет, у меня проблема, не работает моб.меню, вроде все пересмотрел, но ничего так и не нашел. Смотрел на самом пк, через файл html все робит, но заходя на сайт почему то никак не реагирует мобильное меню Сайт : Brownail.ru
-
Вот мой код: <table class="down_table_main" bgcolor="#F7F7F7"> <tr> <td><button class="down_button_main">Подробнее</button></td> </tr> </table> Почему-то когда я использую align, ничего не происходит. А в другом коде align работает. <table border="0" bgcolor="white" width="800px"> <tr align="center"> <td> <br> <img src="https://ru-minecraft.ru/uploads/posts/2018-03/medium/1522109759_cosmicnpcs.jpg" alt=""> <h3>Мод <b>CosmicNPCs</b> - создайте второго игрока и запишите, что он будет делать.</h3> <p>Интересный мод который позволит снимать ролики без участия других игроков, вы сможете записать свои движения и действия, а потом воспроизвести с произвольным скином, таким образом для записи каких то прикольных моментов вам не нужен второй игрок.</p> </td> </tr> </table>
-
Подскажите, пожалуйста, как разместить текст таким образом как на картинке (должен позиционироваться от контейнера). Span в p не должен быть. Как лучше всё преобразовать? Заранее спасибо! Код следующий: <div class="banner"> <div class="container_background-image"> <div class="banner_text container"> <span class="rabbits"> <p>Do you like rabbits?</p> </span> <span class="oranges"> <p>Do you like oranges?</p> </span> </div> </div> </div>
-
Размещение фоновой картинки, заключенной в div, на всю ширину вьюпорта
Алеся posted a question in HTML Coding
Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает. <div class="banner"> <div class="container background-image"> <div class="banner_text"></div> </div> </div> CSS: .background-image { background-image: url('/img/new_oranges.jpg'); background-size: cover; height: 200px; } -
Добрый день. Подскажите как реализовать такой всплывающий блок как на картинке: 1) Блок на который один раз нажал должен быть открытым все время, до выбора другого блока; 2) Название блока в закрытом положении имеет черный цвет и стрелочка вниз, а при открытом синий цвет и стрелочка вверх 3) Реализовать с помошью HTML и CSS
-
Требуется сделать строку ввода в которые вписывается опреленная ссылка(любая) например:"https://htmlforum.org/forum/123" Нужно, чтобы по нажатию кнопки в веденной ссылке менялась половина до опреденного домена типа org с того что было например на "https://123htmlsuper.ru/forum/123" . То есть не просто с org на ru, а полностью от https до слеша перед org Дальнейший вывод этой ссылки или кнопки для перехода на эту ссылку Нужно это для сайта в "блокноте" html css Help
-
Бесплатный VPN - FineVPN.org | Telegram бот c бесплатным VPN - @FineVPNbot
Без ограничений по скорости, трафику и времени. Совершенно бесплатный и безлимитный. -
<!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 и убрать нижнее подчеркивание. Где ошибка?
-
Как через гугл драйв отправить информацию на сайт?
Gmansurov posted a question in Web-site Development
Нужно отправить текст на сайт, не знаю как это сделать и не могу найти форумы по этим темам. Google Cloud Platform. Помогите пожалуйста. -
Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь.. <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
-
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на 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>
-
Выполняю рабочий проект для заказчика Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка И как совместить картинки с задними блоками на секции Продукция И еще такой момент, сталкивались ли вы с тем что картинки-исходники разного размера в исходниках, допустим в секции продукция картинка листовок сплющена, если сталкивались может быть подскажите как решать такие моменты. Буду рад конструктивным советам, спасибо Прикладываю макет https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
-
В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries. Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса. Поскольку дизайн полностью масштабируется под размер окна и не нужны ни какие костыли и сетки, я хочу добавить в свой фреймворк такую опцию, как автоматическая генерация Android приложения, которое бы работало на Web View. У нас уже везде webkit и можно было бы сделать заготовку приложения, которая бы скрывала строку ввода адреса браузера, но оставляла возможность поменять URL, на который обращается приложение. Я не пишу под андроид и мне бы очень не помешал пример такого приложения с возможностью на сервере через PHP поменять иконку и URL. Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web. Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx). Видео обзор системы: Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x Группа на facebook тут: https://www.facebook.com/groups/331465761595917 Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества. Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки. Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления. Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например. Давайте покумекаем, как мы можем это использовать для современных интерфейсов, чтобы сэкономить себе время на создание верстки и дизайна. Мне кажется моя идея выгорает хотя бы экономией времени и денег на создании мобильного приложения.
-
Есть адаптивное меню .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
-
Начал учить HTML для себя. Проблема в том, что сделал заголовок и таблицу, но, нужно чтобы текст был внизу таблицы. Сделал для этого подвал, но что-то не работает, все равно текст выше таблицы. —————-- <!DOCTYPE html> <HTML> <HEAD> <meta charset="utf-8"> <TITLE>Главная страница</TITLE> </HEAD> <BODY> <header> <H1> <center>Текст Заголовка ...</center> </H1> </header> <center> <table border="100"> <tr> <th>№</th> <th>Текст</th> <th>Текст</th> <th>Текст</th> <th>Время</th> <th>Текст</th> </tr> <tr> <tr> <td>1.</td> <td>Текст</td><td>Текст</td><td>ОКР</td><td>17.20.34 - 18.07.2020</td><td> </td> <tr> <td>2.</td> <td> </td><td> </td><td> </td><td> </td><td> </td> <tr> <td>3.</td> <td> </td><td> </td><td> </td><td> </td><td> </td> <tr> <td>4.</td> <td> </td><td> </td><td> </td><td> </td><td> </td> <tr> <td>5.</td> <td> </td><td> </td><td> </td><td> </td><td> </td> <tr> <td>6.</td> <td> </td><td> </td><td> </td><td> </td><td> </td> <tr> <td>7.</td> <td> </td><td> </td><td> </td><td> </td><td> </td> </tr> </center> </BODY> <footer> Тексdт </footer> </HTML>
-
Добрый день У меня есть вопрос, на который я не могу найти ответ.У меня не работает якорь,а именно на сайте (горит синим,но при нажатии не переносит),код прописан.Якорь находится на фиксированном блоке. Если кто может помочь с решением проблемы,жду ответа.
-
Здравствуйте возникла проблема: 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; } }
