diff --git a/css/main.css b/css/main.css index 3089fb4..c3d8780 100644 --- a/css/main.css +++ b/css/main.css @@ -1,84 +1,86 @@ .header { - padding-top: 30px; - padding-bottom: 60px; - background-color: #b8c9f1; + padding-top: 30px; + padding-bottom: 60px; + background-color: #f1f2f6; } .header__title { - font-size: 42px; - font-weight: 900; - margin-top: 60px; + font-size: 42px; + font-weight: 900; + margin-top: 60px; } .header__img { - max-width: 150px; - width: 70%; - margin-top: 20px; - opacity: 0.4; + max-width: 150px; + width: 70%; + margin-top: 20px; + opacity: 0.4; } .button-text { - padding-right: 10px; - border-right: 1px solid #fff; - vertical-align: top; + padding-right: 10px; + border-right: 1px solid #fff; + vertical-align: top; } .button-img { - vertical-align: sub; - width: 20px; - margin-left: 5px; + vertical-align: sub; + width: 20px; + margin-left: 5px; } .section { - padding: 40px 0; + padding: 40px 0; } .section-title { - font-weight: 900; - margin-bottom: 15px; - margin-top: 30px; + font-weight: 900; + margin-bottom: 15px; + margin-top: 30px; } .section-subtitle { - font-weight: 700; - margin-bottom: 10px; - margin-top: 20px; + font-weight: 700; + margin-bottom: 10px; + margin-top: 20px; } .socials { - text-align: right; + text-align: right; } .social img { - max-width: 25px; - margin-right: 10px; + max-width: 25px; + margin-right: 10px; } .unstyled-list { - padding-left: 15px; + padding-left: 15px; } footer { - padding: 40px 0; - background-color: #f1f2f6; + padding: 40px 0; + background-color: #f1f2f6; } .legal { - font-size: 12px; + font-size: 12px; } @media (max-width: 992px) { - .header__title { - font-size: 26px; - } - .socials { - text-align: left; - } - .section-title { - font-size: 22px; - } - .section-subtitle { - font-size: 18px; - } + .header__title { + font-size: 26px; + } + .socials { + text-align: left; + } + .section-title { + font-size: 22px; + } + .section-subtitle { + font-size: 18px; + } } + + /*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/index.html b/index.html index 5abb669..1eda46a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,12 +8,10 @@ - + Полезные ссылки 👨‍💻 для веб-разработчика - -
@@ -21,15 +19,15 @@
- - - - + + + +
@@ -37,7 +35,7 @@

Полезные ссылки 👨‍💻 для веб-разработчика

Программы, сервисы и сайты, которые помогут в работе.

- Добавить свою ссылку + Добавить свою ссылку
@@ -59,20 +57,37 @@

Песочницы для кода

  1. JS fiddle – Песочница для JavaScript
  2. CodePen – Песочница для HTML, CSS о JS
    3. -
  3. CSS Desk – Еще одна песочница
    4. +
  4. JS Bin – Песочница с выводом в консолью

Работа с изображениями

  1. Сompressor – Сжимает JPG и PNG
  2. Tiny png – Сжимает изображения. Есть API.
    3. +
  3. Vectorizer – Из растрового в векторное изображение
    4. +
  4. Online-Convert – Бесплатный конвертер из растрового в векторное изображение

Шпаргалки

    +
  1. FlexBox – шпаргалка по Flexbox
    2. +
  2. Html5book – шпаргалка по HTML, CSS, JavaScript и jQuery
  3. HTML Book – шпаргалка по HTML и CSS
  4. CSS Cheat Sheet – шпаргалка по CSS
  5. jQuery page2page – шпаргалка по jQuery
  6. Emmet Cheat Sheet – шпаргалка по Emmet
    7. -
  7. WebReference - ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
    8. +
  8. WebReference – ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
    9. +
  9. Easings – Шпаргалка функций плавности
    10. +
  10. FreeCodeCamp – Шпаргалка по FlexBox
    11. +
  11. Habr – Шпаргалка по LESS и SASS
    12. +
+

Генераторы CSS

+
    +
  1. CSS3gen – CSS генератор кнопок, градиентов, бордеров,теней трансформации, фона, анимаций
    2. +
  2. Hailpixel – простой способ подобрать цвет в CSS
    3. +
  3. CSSgradient – градиент генератор
    4. +
  4. CSS3patterns – CSS паттерны
    5. +
  5. FreeFrontend – CSS паттерны
    6. +
  6. ColorScheme – конвертер цветов
    7. +
  7. CSSworld – Генератор flexbox контейнеров
@@ -83,25 +98,40 @@

Шрифты

  • Transfonter – Конвертер веб-шрифтов
  • Фонтов.нет – Подбор шрифта по фразе
  • Fonts4web – Шрифты для сайтов
    • +
  • Type Anything – Калькулятор параметров текста + генератор CSS-кода
    • +
  • FontStorage – Плагин, простой способ подключить шрифт

    • Проверка кода

    1. Can I Use – Кроссбраузерность кода
    2. Validator W3 – Валидность HTML-кода
    3. PageSpeed Insights – Проверка оптимизации страницы
      4. +
    4. Mobile Friendly – Оптимизирована ли ваша страница для мобильных устройств
      5. +
    5. Find Dublicate Content on your site – Проверка уникальности текста на сайте
      6. +
    6. Piliapp – Валидность JS-кода
      7. +
    7. I love adaptive – Проверить как выглядит сайт на разных устройствах

    Лайфхаки для верстальщика

    1. How To Center in CSS – центрируйте всё
    2. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
    3. Learn Git Branching – интерактивный учебник по Git
      4. +
    4. Генератор Flexbox верстки – Конструктор Flexbox
      5. +
    5. Генератор Grid верстки – Конструктор Grid
      6. +
    6. Flexbox Defense – игра для изучения Flexbox
      7. +
    7. GRID GARDEN – игра для изучения Grid

    Полезные jQuery плагины

      -
    1. ​​Slick – Адаптивный слайдер
      2. -
    2. ​​Owl Carousel – Адаптивный слайдер-карусель
      3. +
    3. Slick – Адаптивный слайдер
      4. +
    4. Swiper – Современный адаптивный слайдер
      5. +
    5. Owl Carousel – Адаптивный слайдер-карусель
    6. Tooltipster – Создание всплывающих подсказок
      7. -
    7. ​​flatpickr – Всплывающие окна с выбором даты
      8. +
    8. Flatpickr – Всплывающие окна с выбором даты
      9. +
    9. Vide – Видеофон для сайта
      10. +
    10. Masked Input – Плагин маски ввода для input
      11. +
    11. One Page Scroll – Плагин скролла страницы по секциям в виде слайдера. + Демо.
    @@ -114,19 +144,43 @@

    Иконки и графика

  • TOP Logos – логотипы компаний (русские)
  • Font Awesome – иконочный шрифт + SVG
  • UTF-8 Icons – иконки на utf-8
    • +
  • Fontello – шрифтовые иконки. Шрифты генерируются на ходу из выбранных иконок, доступны иконки из 14 популярных шрифтов.
    • +
  • IconMonster – бесплатные векторные иконки
    • +
  • IcoMoon – векторные иконки

    • Работа с дизайн-макетами

    1. Avocode – платформа для работы макетами для верстальщиков (PSD, Sketch и др)
    2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
    3. Zeplin – работа с дизайн-макетами в браузере. Есть экспорт кода.
      4. -
    4. PSD Tech – бесплатный аналог Avocode.
      5. +
    5. PSD Tech – бесплатный аналог Avocode.
      6. +
    6. Markupeasy – бесплатный аналог Avocode.

    Библиотеки с анимациями

    1. Animate.css – библиотека CSS анимаций
    2. Magic – кроссбраузерные анимации
    3. It's Tuesday. – простые и приятные CSS анимации
      4. +
    4. Wow.js – анимация при появлении элемента
      5. +
    5. Hover.css – набор анимаций CSS
      6. +
    6. CSS3-анимация – полная статья про анимацию на CSS3
      7. +
    +

    Прочее

    +
      +
    1. Coverr – Короткие видео для фона на сайт
      2. +
    2. Subte Patterns – Фоны для сайта
      3. +
    3. Генератор UTM-меток
      4. +
    4. Underscores – Пустая тема для Wordpress
      5. +
    5. Minify – CSS и JS минификатор
      6. +
    6. Unminify – Анминификатор для HTML, CSS, JS
      7. +
    7. CodeWars – Задачи для тренировки JavaScript кода
      8. +
    8. FreeFormatter.com – Vинификатор
      9. +
    9. Blisk – Браузер для разработчиков
      10. +
    + +

    Обучающая литература

    +
      +
    1. You Don't Know JS – перевод серии книг по JavaScript.
    @@ -138,7 +192,7 @@

    Библиотеки с анимациями

    - + Онлайн-школа веб-разработки
    @@ -147,10 +201,10 @@

    Библиотеки с анимациями

    - - - - + + + +
    diff --git a/sass/main.sass b/sass/main.sass index f4ae6ce..cbdf2fd 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -1,7 +1,7 @@ .header padding-top: 30px padding-bottom: 60px - background-color: #b8c9f1 + background-color: #3a3a3a &__title font-size: 42px font-weight: 900