Blogs

Our community blogs

  1. klierik
    Latest Entry

    HTMLforum.io — крупнейшее сообщество по HTML вёрстке в СНГ.

    Целевая аудитория

    Front-end специалисты, возраст 18-34 лет из России, Украины, Республики Беларусь и стран СНГ.

    Почему с нами выгодно?

    Целевая аудитория в одном месте для Вашей рекламной кампании по обучению (онлайн-курсов, мастер-класов, семинаров, тренингов), предоставлению услуг (дизайн, шаблоны, хостинг, создание и продвижение сайтов) и поиску персонала.

    Обход блокировок

    Размещённые на HTMLforum.io рекламные баннера не блокируются такими известными расширениями, как AdBlock, uBlock и т.д.

    Виды рекламы

    Требования к размещающим баннерам

    Скрытый текст
    • Вес баннеров не должен превышать 160Кб
    • Частота кадров в баннере не должна превышать 30 кадров/сек
    • Баннеры, цвет фона которых совпадает с фоном HTMLforum.io, должны иметь рамку, по цвету отличную от фона сайта для разделения содержания баннера и контента сайта. Толщина рамки — минимум 1 пиксель
    • Технические требования
      • форматы изображения: png (рекомендуем использовать его для лучшего качества), jpeg, jpg, gif
    • Баннерная размерная сетка (* — опционально, для адаптивного отображения на мобильных устройствах) :
      • В шапке и теме:
        • desktop: 995x90px
        • tablet*:   738x90px
        • mobile*: 355x355px (вертикальный) или 716x90px (горизонтальный)
      • В сайдбаре
        • desktop: 295x295px
        • tablet*:   738x90px
        • mobile*: 355x355px (вертикальный) или 716x90px (горизонтальный)
    • Сторонние коды к размещению не принимаются
    • На HTMLforum.io нельзя размещать баннеры:
      • с элементами интерфейса
      • чрезмерно привлекающие внимание, раздражающие глаза
      • напоминающие рекламу сайтов для взрослых
    • HTMLforum.io оставляет за собой право не принимать к размещению баннеры, которые не соответствуют критериям модерации

    ⚠️ Обращаем внимание, что покупка рекламы не освобождает рекламодателей от соблюдения правил сообщества.

    Виды размещения и продвижения Стоимость
    Баннер в шапке сайта, за 10,000 показов $10
    Баннер в теме, после сообщения автора, за 10,000 показов $12
    Баннер в сайдбаре, за 10,000 показов $7
       
    Закрепить тему в разделе, за 1 месяц $25
    Подсветить тему фоном, за 1 месяц $12
    VIP-тема, за 1 месяц
    (включает в себя закрепление темы + подсветку)
    $30
       
    Спонсор раздела форума, за 1 месяц
    (включает в себя размещение логотипа в описании раздела на главной странице форума)
    $50
    VIP-спонсор раздела форума, за 1 месяц
    (включает в себя размещение логотипа на главной странице форума, закрепление темы в 1 дочернем разделе, подсветку темы)
    $75
       
    Корпоративный блог компании, за 1 год $500
    VIP корпоративный блог компании, за 1 год
    (включает в себя отключение рекламы сообщества на всех страницах блога компании)
    $990

    ℹ️ Размещение в течении 3-х рабочих дней, после предоставления всей необходимой информации и материалов. Пожалуйста, учитывайте это при заказе рекламы!

    По всем вопросам размещения рекламы на HTMLforum.io обращайтесь по электронной почте sales@htmlforum.io

     

  2. ℹ️ Статья не завершена, дополняется по мере реализации проекта.

    0. Предисловие

    И так, когда у нас готова основа проекта (сборщик и организована структура) можно приступать к вёрстке.

    ℹ️ Вообще, как правило, и сборщик и структура проекта организовываются во время его разработки. Особенно это касается тех ситуаций, когда разработчику впервые ставят задачу на реализацию большого кол-ва вёрстки (от 100 и более часов на вёрстку макетов). Тогда и появляется надобность в использовании инструментом по сборке проекта. А количество стилей настолько велико, что хранить в одном файле крайне затруднительно.
    В статье расказывается как структурировать эти данные таким образом, что бы и разработчик, и другие участники команды, могли с лёгкостью читать, поддерживать и развивать изначально написанный "костяк". Спустя несколько лет грамотно организованная структура под конкретную задачу сильно упрощает поддержку кода и минимизирет затраты на рефакторинг кода (тем самым понижает стоимость разработки).

    Рабочая ветка:

    $ git checkout 2.0-html-assets

    Макет: Assets/Atoms.png

    Скрытый текст

    Atoms.png

    Как правило, такой макет создаётся на протяжении создания дизайна дизайнером. Этот макет содержит как простые так и сложные элементы. Когда я выполнял работу по данному проекту этого макета ещё не было, — он появился лишь к концу выполнения

    Ну что же — ближе к делу!

    1. Создание Assets

    И так, на "первых порах" мы начнём разработку с создания вайла с типовыми элементами. Но, мы не будем создавать сразу все, а лишь только основные простые (текст, кнопки, прочее). И по мере разработки данный файл будет дополнятся недостающими элементами проекта.

    В конце концов этот шаблон будет содержать приблизительно то же самое что и макет.

    1.1 Создание файлов

    Создаём html файл

    templates/assets.html

    и SCSS файл, который будет отвечать этому блоку

    assets/scss/_assets.scss

    с исходным содержимым

    .assets {
    	//
    }

    и не забудем импортировать этот файл стилей в общие стили в "styles.scss"

    @import "assets";

    1.2 Написание HTML

    Следующим шагом давайте наполним наш html-файл основным форматированием и простыми элементами, которые присутствуют в Assets.

    ℹ️ Непосредственно сам HTML код я не буду сюда выкладыввать, так как особого смысла в этом нет. Весь код доступен в репозитории.

    1.3 Написание стилей

    1.3.1 Подключение кастомных шрифтов

    В качестве основного шрифта дизайнер использовал Rubik из Google Fonts. Через конфигуратор я выставил значения жирности 400, 400i, 500, 500i и добавил Кирилицу:

    <link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i&amp;subset=cyrillic" rel="stylesheet">

    ℹ️ Данный подход подключения шрифта не является оптимизированным, но, пока что, нет задачи оптимизировать загрузку шрифтов. Потому будем его подключать "как есть".

    Далее следует указать использоавние данного шрифта в проекте. Для этого в файле конфигуратора (assets/scss/config/variables.scss) добавил следующие строки:

    // Fonts
    $theme-font-family-base:			'Rubik' !default;

    А теперь надо применить эту настройку в Bootstrap. Для этого откроем файл переменных Bootstrap (assets/scss/vendor/bootstrap/_variables.scss) и добавим следующее:

    // Fonts
    $font-family-base:            $theme-font-family-base, $font-family-sans-serif;

    Пересобираем стили и смотрим удачное применение кастомного шрифта в проекте.

    1.3.2 Типография

    Есть ряд элементов которые имеют стандартные стили во всём проекте. Но, так как нами изначально был подключен Bootstrap то сейчас стилизация этих элементов не соответствует макету. Это поправимое дело и его легко исправить.

    Для начала внесём изменения для заголовов H1-H6, добавив соответствующие значения перенменных для них в файл "bootstrap/_variables.scss". Выглядит это так:

    $h1-font-size:                $font-size-base * 3.5;
    $h2-font-size:                $font-size-base * 1.75;
    $h3-font-size:                $font-size-base * 1.625;
    $h4-font-size:                $font-size-base * 1.5;
    $h5-font-size:                $font-size-base * 1.125;
    $h6-font-size:                $font-size-base;

    Но, мы так же обратим внимание на то что каждый загловок, согласно макета, имеет свой "line-height". А H4 — "font-weight: 400;". Что бы внести эти изменения в проект мы создим файл "bootstrap/_type.scss" и внесём изменения:

    Скрытый текст
    
    //
    // Headings
    //
    
    h1,
    .h1 {
    	line-height: 1.14;
    }
    
    h2,
    .h2 {
    	line-height: 1.29;
    }
    
    h3,
    .h3 {
    	font-weight: 400;
    	line-height: 1.38;
    }
    
    h4,
    .h4 {
    	line-height: 1.17;
    }
    
    h5,
    .h5 {
    	line-height: 1.56;
    }
    
    h6,
    .h6 {
    	line-height: 1.5;
    }

     

    А так же импортируем эти стили в файле "bootstrap/bootstrap.scss" следующими строками в самом конце файла:

    // Custom Updates
    //
    @import "type";

    1.3.3 Цвета

    Цвета — это не отъемлемая часть дизайна, которая всегда присутвует в вёрстке. Их множество может быть, условно, безконечным.
    Под разные проекты конфигурировать палитру цветом предстоит индивидуально, так как задачи разные. У Вас может быть как не большая конфигурация цветов, из 10-15 штук, так и более сложный варинат — полноценная политра для мультитем, со своим индивидуальным набором цветов.

    В рамках данного обучения нет задачи создавать гибкую настройку по цветам, так как не предполагается их часто и\или кардинально менять.

    Палитру цветов для всего проекта мы опишем в файле "assets/scss/config/variables.scss" в разделе "// Colors". Цвета, для начала, возьмём из "Assets/Assets.png". Выглядеть это будет приблизительно вот так:

    Скрытый текст
    
    // Colors
    $color-primary: 					#00C9C9 !default;
    $color-secondary: 					#32343d !default;
    
    $color-black:						#000 !default;
    $color-orange:						#F3AE00 !default;
    $color-pink-red:					#FF5E5B !default;
    $color-green:						#66BB6A !default;
    $color-blue:						#39579B !default;
    
    $color-grey:						#7E858D !default;
    $color-grey2:						#7C7C7C !default;
    $color-grey3:						#B1B1B1 !default;
    $color-grey4:						#D4D4D4 !default;
    $color-grey5:						#F7F9FA !default;
    $color-grey-dark:					#33343D !default;
    
    $color-gradient-start:				$color-primary !default;
    $color-gradient-end:				#00B5D5 !default;
    
    $color-btn-primary-start:			$color-gradient-start !default;
    $color-btn-primary-end:				$color-gradient-end !default;
    $color-btn-primary_hover:			#00a6c4 !default;
    
    $color-turquoise-blue:				#00c9c9 !default;
    $color-turquoise-blue-two:			#00b5d5 !default;
    $color-charcoal-grey:				#32343d !default;
    $color-steel-grey:					#7e858d !default;
    $color-white:						#fff !default;

     

    ℹ️ Несколько раз я пытался как-то каталогизировать  по смыслу цветовую палитру, но универсального варианта найти мне не удалось. В тех или иных случаях целесообразнее тот или иной вариант. Однажды я разрабатывал проэкт, который предполагал наличие разных тем со своей палитрой. Конфиг цветов был следующим:

    Скрытый текст
    
    // Global Colors
    $theme-color-1:			#292929 !default;
    $theme-color-2:			#8a0913 !default;
    $theme-color-3:			#e4dfcc !default;
    $theme-color-4:			#fafafa !default;
    $theme-color-5:			#eee !default;
    $theme-color-6:			#959494 !default;
    $theme-color-7:			$white !default;
    $theme-color-8:			#f5f5f5 !default;
    $theme-color-9:			#a9222d !default;
    $theme-color-10:		$theme-success !default;
    $theme-color-11:		#8c8c8c !default;
    $theme-color-12:		#d8d8d8 !default;
    $theme-color-13:		#191919 !default;
    $theme-color-14:		#b01934 !default;
    $theme-color-15:		#9c9991 !default;
    $theme-color-16:		#ededed !default;
    $theme-color-17:		#bf5a44 !default;
    $theme-color-18:		#faf9f3 !default;
    $theme-color-19:		#e2e2e2 !default;
    $theme-color-20:		#d8d5c8 !default;
    $theme-color-21:		#8c8b8b !default;
    $theme-color-22:		#f9f7f0 !default;
    $theme-color-23:		#262624 !default;
    $theme-color-24:		#ddf4ca !default;
    $theme-color-25:		$theme-primary !default;
    
    ...

    Это не лучший вариант, который я создавал, так как я не приветствую индексированное именование. Но, этот подход явно проще поддерживать при большом количестве цветов (в этом проекте их было около 100)

    И так, мы начали создавать палитру цветов в конфигураторе. Теперь на примере Bootstrap давайте применим эту палитру к фреймворку.

    Для этого внесём изменения в файл "assets/scss/vendor/bootstrap/_variables.scss"

    //
    // Color system
    //
    
    $primary:			$color-primary;
    $secondary:			$color-secondary;
    $warning:			$color-warning;
    
    $theme-colors: ();
    $theme-colors: map-merge((
    	"primary":    $primary,
    	"secondary":  $secondary,
    	"success":    $success,
    	"info":       $info,
    	"warning":    $warning,
    	"danger":     $danger,
    	"light":      $light,
    	"dark":       $dark
    ), $theme-colors);

    Этими стилями мы переопределили основные цветы темы. Остальные цвета сохранили свои значения, которые идут изначально во фреймворке.

    ℹ️ Хочу обратить Ваше внимание на то что я не рекомендую добавлять в файл ("assets/scss/vendor/bootstrap/_variables.scss"), который отвечает за переопределение переменных Bootstrap, кастомные переменные. В этом файле я храню только изменения основных переменных. А вот в основном конфиге все другие переменные, которые используются в проекте.

    Таким образом в шаблоне "templates/assets.html" в тот же момент перекрасились кнопки

    Скрытый текст

    Assets ? 2018-06-15 17-22-32.png

    Как можно заметить "Primary Button" имеет однотонный фоновый цвет, в отличии от того что в дизайне — градиент. Всё потому что конфигурация фреймворка предполагает использовать общую конфигурацию Bootstrap для всех элементов. Плохого в этом ничего нет, конечно же, но нам, в рамках разработки, это не подходит. Давайте перекрасим кнопку градиентом.

    1.3.4 Стилизация элементов Bootstrap (на примере кнопок)

    Следующей задачей мы перерисуем кнопки фреймворка и сделаем их такими, какие они представленны в макете.

    Создадим файлы:

    • "assets/scss/vendor/bootstrap/_buttons.scss"
    • "assets/scss/vendor/bootstrap/_mixins.scss"
    • "assets/scss/vendor/bootstrap/mixins/_buttons.scss"

    Далее импортируем их в "assets/scss/vendor/bootstrap/bootstrap.scss"

    // Custom Updates
    //
    @import "mixins";
    @import "type";
    @import "buttons";

    А так же давайте импортируем файл с миксином в "assets/scss/vendor/bootstrap/_mixins.scss"

    @import "mixins/buttons";

    ℹ️ Так как часть кнопок имеет border, а часть нет (что в свою очередь влияет на размер кнопки), мы напишем небольшой миксин, который будет выравнивать высоту для обоих случаев.

    Давайте добавим в файл "assets/scss/vendor/bootstrap/mixins/_buttons.scss" следующий миксин:

    Скрытый текст
    
    @mixin button-no-border() {
    	padding-top: ($btn-padding-y + 1);
    	padding-bottom: ($btn-padding-y + 1);
    
    	border: 0;
    
    	&.btn-lg {
    		padding-top: ($btn-padding-y-lg + 1);
    		padding-bottom: ($btn-padding-y-lg + 1);
    	}
    
    	&.btn-sm {
    		padding-top: ($btn-padding-y-sm + 1);
    		padding-bottom: ($btn-padding-y-sm + 1);
    	}
    }

     

    Далее в "_buttons.scss" давайте добавим стили, которые изменят вид кнопок под требуемый нам (так же учтём и ":hover", ":focus" состояния)

    Скрытый текст
    
    //
    // Base styles
    //
    .btn {
    	@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size-base, $btn-line-height, $btn-border-radius);
    }
    
    //
    // Alternate buttons
    //
    .btn-primary {
    	@include gradient-x($btn-primary-bg-start, $btn-primary-bg-end);
    	@include button-no-border();
    
    	@include hover-focus {
    		@include gradient-x($btn-primary-bg-end, $btn-primary-bg-end);
    	}
    }
    
    .btn-secondary {
    	@include button-variant($btn-secondary-bg, $btn-secondary-border);
    
    	@include hover-focus {
    		background: $btn-secondary-bg_hover;
    	}
    }
    
    .btn-info {
    	@include button-variant($btn-info-bg, #fff);
    	@include button-no-border();
    
    	@include hover-focus {
    		background: $btn-info-bg_hover;
    	}
    }
    
    .btn-warning {
    	@include button-no-border();
    	box-shadow: $btn-warning-shadow;
    
    
    	@include hover-focus {
    		background: $btn-warning-bg_hover;
    	}
    }
    
    //
    // Button Sizes
    //
    
    .btn-lg {
    	@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
    }
    
    .btn-sm {
    	@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
    }

     

    ℹ️ В данном решении используются не только переменные Bootstrap, но так же и кастомные, которые описанны в файле "assets/scss/config/variables.scss".

    Что же касается миксинов, которые используются в данном файле, то они были взяты непосредственно из кодовой базы Bootstrap — "node_modules/bootstrap/scss/mixins/"

    Теперь можно посмотреть что у нас в итоге получилось после наших модификаций

    Рабочая ветка:

    $ git checkout tags/2.0-html-assets-v1.0 -b 2.0-html-assets-v1.0
    Скрытый текст

    screencapture-localhost-3000-templates-assets-html-2018-06-18-18_24_31.png

    Добра и удачи ?

  3. Привет, друзья.

    Заметка может быть интересна front-end разработчикам, которые начинают изучение Magento 2 CMS (одной из самых популярных систем управления интернет-магазинами). Предполагается что разработка ведётся в рамках кастомной темы под M2.

    Если говорить о самой задаче то, конечно же, спрятать уведомление после указанного времени особого труда не составит. Вопрос скорее в другом — как это реализовать в рамках Magento2, где властвует requirejs и несколько иная, по сравнению с Magento1, иерархия директорий?

    Для выполнения поставленной задачи давай воспользуемся html-файлом, который размещается по пути:

    magento/vendor/magento/module-theme/view/frontend/templates/messages.phtml

    с содержимым:

    Скрытый текст
    
    <?php
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    ?>
    <div data-bind="scope: 'messages'">
        <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
        <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
    </div>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                            "messages": {
                                "component": "Magento_Theme/js/view/messages"
                            }
                        }
                    }
                }
        }
    </script>

     

    Давай скопируем его в кастомную тему по адресу:

    magento/app/design/frontend/HTMLForum/default/Magento_Theme/templates/messages.phtml

    где "HTMLForum/default" — это "Vendor/theme"

    В рамках задачи нам требуется спрятать системное уведомление через заданное кол-во времени. Для этого можно воспользоваться колбеком knockoutjs.com — afterRender().

    Мне кажется правильнее было бы выполнить Messages.extend({}) в новом компоненте, но мои попытке не увенчались успехом на момент написания статьи. Я внесу обновления в текущую заметку когда буду знать более корректный путь для реализации поставленной задачи.

    В M2 существуют 2 варианта вывода уведомлений:

    • В результате перезагрузки страницы (на пример, добавление продукта на странице продукта)
    • В результате ajax-запроса (на пример, добавление продукта на странице каталога)

    В вышеуказанном шаблоне содержатся оба варианта. Пример ф-ии которая будет вызвана после рендеринга уведомления:

    afterRender: function(e){
        setTimeout(function () {
            jQuery(e).fadeOut()
        }, 5000);
    }

    где "5000" — это время ожидания в мс.

    Её мы используем для обоих вариантов следующим образом:

    <?php
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    ?>
    <div data-bind="scope: 'messages'">
        <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            },
            afterRender: function(e){
                setTimeout(function () {
                    jQuery(e).fadeOut()
                }, 5000);
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
        <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            },
            afterRender: function(e){
                setTimeout(function () {
                    jQuery(e).fadeOut()
                }, 5000);
            }
            ">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
    </div>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                            "messages": {
                                "component": "Magento_Theme/js/view/messages"
                            }
                        }
                    }
                }
        }
    </script>

    Вот, собственно, и всё.

    Почисти кеш, запусти деплой (или пересоздай симлинки + билд стилей темы через Grunt) и обнови страницу.



  • Спрашивают сейчас

  • Пишут сейчас

    • Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
              <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
              <h4>Введите данные</h4>         <form id="formToSend">
                  <input id="fio" type="text" placeholder="Имя"  class="text-input" />
                  <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
                  <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
                  <input id="email" type="text" placeholder="Э-почта" class="text-input" />
                  <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
                  <br>
                      <textarea id="question" placeholder="Адрес доставки"></textarea>
                  <br>
                  <b>Доставка:</b>
                  <br>
                  <select id="delivery">
                      <option value="-">-</option>
                      <option value="С доставкой">ДА. Доставка нужна</option>
                      <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
                  </select>
              </form>
                  <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
          </div>
    • Всем привет.
      Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
      Нужно сделать вот такие штуки http://prntscr.com/nsyswi
      Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
      Буду благодарна за подсказку.
    • Это html     <li><a href="#">Текст</a>
                      <ul>
                              <li><a href="#"</a>Просто Текст</li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#" >Просто Текст</a></li>
                      </ul>
              </li> Это стили      ul {
              list-style: none; /*убираем маркеры списка*/
              margin: 0; /*убираем отступы*/
              padding-left: 0; /*убираем отступы*/
              margin-top:25px; /*делаем отступ сверху*/
          font-family: 'Slabo 27px', serif;
               height: 50px; /*задаем высоту*/
      }
          a {
              text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
              padding:0px 15px; /*добавляем отступ*/
              font-family: arial; /*меняем шрифт*/
              line-height:50px; /*ровняем меню по вертикали*/
              display: block;
           /*добавляем бордюр справа*/
              -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
              -o-transition: all 0.3s 0.01s ease;
              -webkit-transition: all 0.3s 0.01s ease;     }
          a:hover {
              background:#D43737;/*добавляем эффект при наведении*/
          }
          li {
              float:left; /*Размещаем список горизонтально для реализации меню*/
              position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
                  li > ul {
                          position:absolute;
                          top:25px;
                          display:none;
                  }             /*Делаем скрытую часть видимой*/
                  li:hover > ul {
                      
                          width:2000px;  /*Задаем ширину выпадающего меню*/
                  }
               li:hover > ul > li {
                          float:none; /*Убираем горизонтальное позиционирование*/
                  }
                  div{
                      margin-top:500px; /*Делаем отступ текста вниз*/
                      margin-left: 767px;/*Делаем отступ текста влево*/
                      font-size: 60px;/*Задаем размер текста*/
                      color:#fff;/*меняем цвет текста*/
                  font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
                  p{
                      color:#fff;/*меняем цвет текста*/
                      font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                      margin-top:50px;/*Делаем отступ текста вниз*/
                      margin-left: 860px;/*Делаем отступ текста влево*/
                      font-size: 30px;/*Задаем размер текста*/
                  }
          li{
              margin-right: 200px;
              font-family: 'Slabo 27px', serif;
            font-size: 26px;
      }
  • Popular Contributors

  • Current Donation Goals