Search the Community
Showing results for tags 'html/css'.
Found 4 results
-
При создании макета мы не думали что нам придется использовать JS, и теперь мы не знаем что делать. Нам надо чтоб на 2 блоке при нажатии на вариант* у нас менялись PDF файлы. Но как оказалось без JS это не сделать, а с JS мы не знакомы. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;900&display=swap" rel="stylesheet"> <script src="Untitled-1.js"></script> <title>Подготовка к ОГЭ</title> <style> html { scroll-behavior: smooth; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header center" id="header"> <ul class="menu"> <li><a class="menu__link" href="#items">Предметы</a></li> <li><a class="menu__link" href="#maths">Математика</a></li> <li><a class="menu__link" href="#informatics">Информатика</a></li> <li><a class="menu__link" href="#physics">Физика</a></li> </ul> </div> <div class="top center"> <h1 class="heading__top" id="items">Подготовка к экзаменам</h1> <div class="items__top"> <div class="maths__top"> <div class="maths__photo"><a href="#items__maths"><img src="img/maths.svg" alt="maths__photo"></a></div> <div class="heading__maths"> <div class="heading__maths__text"> <h4 class="heading1__top">Математика</h4> </div> </div> </div> <div class="informatics__top"> <div class="informatics__photo"><a href="#items__informatics"><img src="img/informatics.svg" alt="informatics__photo"></a></div> <div class="heading__informatics"> <div class="heading__informatics__text"> <h4 class="heading2__top">Информатика</h4> </div> </div> </div> <div class="physics__top"> <div class="physics__photo"><a href="#items__physics"><img src="img/physics.svg" alt="physics__photo"></a></div> <div class="heading__physics"> <div class="heading__physics__text"> <h4 class="heading3__top">Физика</h4> </div> </div> </div> </div> </div> <div class="maths center"> <div class="list__maths"> <ul class="list__maths__text"> <h2 class="heading__maths1" id="maths" id="items__maths">Математика</h2> <li class="listt__maths"><a id="var1">>Вариант 1</a></li> <li class="listt__maths">Вариант 2</li> <li class="listt__maths">Вариант 3</li> <li class="listt__maths">Вариант 4</li> <li class="listt__maths">Вариант 5</li> <li class="listt__maths">Вариант 6</li> <li class="listt__maths">Вариант 7</li> <li class="listt__maths">Вариант 8</li> <li class="listt__maths">Демоверсия</li> <li class="listt__maths">Спецификатор</li> <li class="listt__maths">Кодификатор</li> <li class="listt__maths">Справочный материал</li> </ul> </div> <div class="materials__maths"> <iframe class="options1" src="https://drive.google.com/file/d/12suI88_guQ7dlRkPoGgJfdM7KmNsq0yA/preview" allow="autoplay"></iframe> <!-- <iframe class="options2" src="https://vpr-ege.ru/images/oge/100ballov-oge22-ma-var2.pdf" allow="autoplay"></iframe> --> </div> </div> </body> </html> * { margin: 0; padding: 0; } body { font-family: 'Montserrat', sans-serif; } img { max-width: 100%; } .center { padding-left: calc(50% - 695px); padding-right: calc(50% - 695px); } a { text-decoration: none; } .header { background-color: #53C6CD;; height: 53px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .menu { list-style-type: none; display: flex; gap: 50px; } .menu__link { font-style: normal; font-weight: 500; font-size: 18px; line-height: 22px; display: flex; align-items: center; color: #FFFFFF; } .top { background-color: #75D4DA; min-height: 1080px; padding-top: 42px; padding-bottom: 107px; } .heading__top { font-style: normal; font-weight: 900; font-size: 96px; line-height: 117px; color: #FFFFFF; } .items__top { gap: 127px; margin-top: 72px; display: flex; flex-direction: row; flex-wrap: wrap; } .maths__top { width: 364px; background-color: #77CFE2; height: 706px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-radius: 12px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06); margin-top: 72px; } .maths__photo { margin-top: 171px; display: flex; align-items: center; } .heading__maths { display: flex; background: #75CADD; height: 155px; width: 100%; justify-content: center; margin-top: 200px; } .heading__maths__text{ display: flex; align-content: center; justify-content: center; align-items: center; } .heading1__top { font-weight: 600; font-size: 36px; line-height: 44px; display: flex; align-items: center; text-align: center; color: #FFFFFF; } .informatics__top { width: 364px; background-color: #77CFE2; height: 706px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-radius: 12px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06); margin-top: 72px; } .informatics__photo { margin-top: 171px; display: flex; align-items: center; } .heading__informatics { display: flex; background: #75CADD; height: 155px; width: 100%; justify-content: center; margin-top: 200px; } .heading__informatics__text{ display: flex; align-content: center; justify-content: center; align-items: center; } .heading2__top { font-weight: 600; font-size: 36px; line-height: 44px; display: flex; align-items: center; text-align: center; color: #FFFFFF; } .physics__top { width: 364px; background-color: #77CFE2; height: 706px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-radius: 12px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06); margin-top: 72px; } .physics__photo { margin-top: 171px; display: flex; align-items: center; } .heading__physics { display: flex; background: #75CADD; height: 155px; width: 100%; justify-content: center; margin-top: 200px; } .heading__physics__text{ display: flex; align-content: center; justify-content: center; align-items: center; } .heading3__top { font-weight: 600; font-size: 36px; line-height: 44px; display: flex; align-items: center; text-align: center; color: #FFFFFF; } .maths { background-color: #7BDDE3; min-height: 1080px; padding-top: 36px; padding-bottom: 36px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .heading__maths1 { font-style: normal; font-weight: normal; font-size: 48px; line-height: 59px; display: flex; align-items: center; text-align: center; color: #FFFFFF; } .list__maths__text{ margin-top: 61px; font-style: normal; font-weight: normal; font-size: 24px; line-height: 29px; list-style-type: none; display: flex; flex-direction: column; gap: 35px; color: #FFFFFF; } .options1 { height: 1008px; width: 857px; } .options2 { height: 1008px; width: 857px; } .materials__maths{ background-color: #75D4DA; }
-
Всем привет, нужна не большая помощь что бы я понял в чем проблема задача стоит сделать резиновый сайт, и убрать из шапки все лишнее. на данный момент проблема с поиском в шаблоне reMarket, 2 скрина что бы вы поняли в чем суть, на первом фото поиск вообще не работае, на втором только по нажатию энтер на выпадающий список не нажимается ! на первом фото это оргинал если убрать вид как на втором фото он первый поиск работает коректно ! вот код 1 основного поиска для декстопа который работает норм! <div class="col-12 col-md-6 col-lg-4 order-3 order-md-2"> <div id="seach-custom">{{ search }}</div> {% if oct_remarket_data.contact_address[oct_lang_id] is defined and oct_remarket_data.contact_address[oct_lang_id] %} <div class="rm-header-address d-none d-lg-block"> <div class="rm-dropdown-box w-100"> <div class="rm-dropdown-toggle"> <span>{{ oct_our_address }}:</span> <span class="rm-header-address-link">{{ oct_remarket_data.contact_address[oct_lang_id] }}</span> </div> <div class="rm-dropdown"> <div id="rm_header_locations" class="rm-dropdown-inner"> <div class="rm-header-location-inner"> <div class="rm-header-location active"> <div class="d-flex align-items-center"> <div class="rm-header-location-address">{{ oct_remarket_data.contact_address[oct_lang_id] }}</div> {% if oct_locations %} <button class="rm-btn secondary ml-auto"> <span class="rm-btn-icon"><img src="catalog/view/theme/oct_remarket/img/header-location-chevron.svg" alt="" width="12" height="6"></span> </button> {% endif %} </div> Этот код находиться в Header.twig <nav id="rm_mobile_nav" class="d-lg-none fixed-top d-flex align-items-center justify-content-between"> <button type="button" id="rm_mobile_menu_button" class="rm-btn primary rm_mobile_sidebar_toggle" onclick="rmSidebar('{{ oct_menu }}', 'menu');" aria-label="Menu"> <span class="rm-btn-icon"> <span></span> <span></span> <span></span> </span> </button> <div id="search" class="rm-search"> <input id="input_search" type="text" name="search" value="{{ search }}" placeholder="{{ search_input_header_text }}" class="w-100 h-100"> <button type="button" aria-label="Search" id="rm-search-button" class="btn-search d-flex align-items-center justify-content-center"><img src="catalog/view/theme/oct_remarket/img/header-search-icon.svg" alt="" width="20" height="20" /></button> <div id="rm_livesearch_close" onclick="clearLiveSearch();" class="d-flex align-items-center justify-content-center"><img src="catalog/view/theme/oct_remarket/img/livesearch-close-icon.svg" alt="" width="25" height="25" /></div> <div id="rm_livesearch"></div> </div> этот код костомный от шаблона називаеться oct_sidebar_mobile.twig -
9 Завантажити / Придбати розширення 2OC HTML Модуль 2OC HTML - расширение над стандартным модулем HTML. Дополнительно можно создавать неограниченное количество модулей для вставки произвольного HTML. Установка своих классов для каждого модуля через админку. Включение/Выключение кеширования и т.д. и т.п. ДЕМО: Главная страница Админка login: demo pass: demo Кеширование Реализована генерация кэша для каждого модуля, что позволяет при следующем обращении к модулю отдавать его пользователю без единого запроса к базе данных, что повышает быстродействие и снижает нагрузку на сервер. Совместимость с другими темами из коробки не гарантируется! Но вероятность его работы на темах с bootstrap максимальная! Могу помочь с интеграцией 2OC HTML в ваш шаблон, если это потребуется. При особой необходимости и свободном времени могу адаптировать 2OC HTML под версии 2.1 или 2.2 OpenCart и ocStore. Если есть вопросы по модулю, его возможностям и можно ли реализовать с его помощью что-то, спрашивайте! Автор 2OC долучення 04.03.21 Категорія Модули Системные требования Метод активации По запросу в ЛС По запросу на почту По скайпу Ioncube Loader Требуется ocStore 3.0 2.3 OpenCart.Pro, ocShop Не проверялось Звернення до сервера розробника Нет
-
Требуется верстальщик с практическими знаниями структуры опенкарта (понять, что где лежит) Задачи: - Выбор фильтра в адаптипе (активный/нажатый) окно сворачивается автоматом: http://prntscr.com/hl5cwe - Наезд хлебных крошек на меню: http://prntscr.com/hl5dnm - Ховер при наведении - Вывести блок с текстом в шапку и подвал http://prntscr.com/hl5efl - Плавающий блок справа при скролле http://prntscr.com/hl5eog И остальные задачи, для быстрой связи: nikita.kh1 (бюджет предлагайте/обсуждаем)
