├── .gitignore
├── LICENSE
├── README.md
├── module-01
    └── webinar
    │   ├── assets
    │       ├── mockup.jpg
    │       ├── todo.txt
    │       └── Введение.pdf
    │   ├── img
    │       ├── pexels-photo-clouds.jpeg
    │       ├── pexels-photo-sheep.jpeg
    │       └── pexels-photo-train.jpeg
    │   └── index.html
├── module-02
    └── webinar
    │   ├── css
    │       └── styles.css
    │   ├── images
    │       ├── git-branching.svg
    │       ├── git-flow.svg
    │       ├── git-proj-parts.svg
    │       ├── git-pull.svg
    │       ├── git-push.svg
    │       ├── git.png
    │       └── status-log.svg
    │   └── index.html
├── module-03
    ├── practise
    │   ├── .editorconfig
    │   ├── .stylelintrc
    │   ├── css
    │   │   ├── normalize.css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── icon-facebook.png
    │   │   ├── icon-linkedin.png
    │   │   ├── icon-twitter.png
    │   │   ├── logo.png
    │   │   ├── team-1.jpg
    │   │   ├── team-2.jpg
    │   │   ├── team-3.jpg
    │   │   └── team-4.jpg
    │   └── index.html
    └── webinar
    │   ├── .editorconfig
    │   ├── .stylelintrc
    │   ├── css
    │       ├── normalize.css
    │       └── styles.css
    │   ├── img
    │       ├── logo.png
    │       ├── team-1.jpg
    │       ├── team-2.jpg
    │       ├── team-3.jpg
    │       └── team-4.jpg
    │   ├── index.html
    │   ├── mockup
    │       └── ActiveBox.psd
    │   └── plan.txt
├── module-04
    ├── practise
    │   ├── .editorconfig
    │   ├── .stylelintrc
    │   ├── css
    │   │   ├── normalize.css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── banner.jpeg
    │   │   ├── icons
    │   │   │   ├── features
    │   │   │   │   ├── icon-atom.png
    │   │   │   │   ├── icon-bulb.png
    │   │   │   │   ├── icon-case.png
    │   │   │   │   ├── icon-computer.png
    │   │   │   │   ├── icon-download.png
    │   │   │   │   └── icon-tools.png
    │   │   │   └── social
    │   │   │   │   ├── icon-facebook.png
    │   │   │   │   ├── icon-linkedin.png
    │   │   │   │   └── icon-twitter.png
    │   │   ├── logo.png
    │   │   ├── team-1.jpg
    │   │   ├── team-2.jpg
    │   │   ├── team-3.jpg
    │   │   └── team-4.jpg
    │   └── index.html
    └── webinar
    │   ├── css
    │       └── styles.css
    │   ├── img
    │       ├── icons
    │       │   ├── icon-login.png
    │       │   └── icon-logout.png
    │       └── image.jpeg
    │   ├── index.html
    │   └── plan.txt
├── module-05
    ├── practise
    │   ├── css
    │   │   ├── modal.css
    │   │   ├── normalize.css
    │   │   ├── slider.css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── pexels-photo-631950.jpeg
    │   │   └── team-member.jpg
    │   ├── index.html
    │   ├── modal.html
    │   └── slider.html
    └── webinar
    │   ├── css
    │       ├── normlize.css
    │       └── styles.css
    │   ├── img
    │       ├── heart-hover.svg
    │       ├── heart.svg
    │       └── team-1.jpg
    │   ├── index.html
    │   └── plan.txt
├── module-06
    ├── practise
    │   ├── .editorconfig
    │   ├── .stylelintrc
    │   ├── css
    │   │   ├── normalize.css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── banner.jpeg
    │   │   ├── icons
    │   │   │   ├── features
    │   │   │   │   ├── icon-atom.png
    │   │   │   │   ├── icon-bulb.png
    │   │   │   │   ├── icon-case.png
    │   │   │   │   ├── icon-computer.png
    │   │   │   │   ├── icon-download.png
    │   │   │   │   └── icon-tools.png
    │   │   │   └── social
    │   │   │   │   ├── icon-facebook.png
    │   │   │   │   ├── icon-linkedin.png
    │   │   │   │   └── icon-twitter.png
    │   │   ├── logo.png
    │   │   ├── team-1.jpg
    │   │   ├── team-2.jpg
    │   │   ├── team-3.jpg
    │   │   └── team-4.jpg
    │   ├── index.html
    │   └── materials.txt
    └── webinar
    │   ├── css
    │       ├── normlize.css
    │       └── styles.css
    │   ├── index.html
    │   └── plan.txt
├── module-07
    ├── practise
    │   ├── .editorconfig
    │   ├── .stylelintrc
    │   ├── css
    │   │   ├── normalize.css
    │   │   ├── price-filter.css
    │   │   ├── size-filter.css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── icon-check.svg
    │   │   └── icon-square.svg
    │   ├── index.html
    │   └── mockup
    │   │   └── Products Details Page_3_Grid.psd
    └── webinar
    │   ├── css
    │       ├── normlize.css
    │       └── styles.css
    │   ├── index.html
    │   └── plan.txt
├── module-08
    ├── practise
    │   ├── .editorconfig
    │   ├── .stylelintrc
    │   ├── css
    │   │   ├── media.css
    │   │   ├── normalize.css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── banner.jpeg
    │   │   ├── icons
    │   │   │   ├── features
    │   │   │   │   ├── icon-atom.png
    │   │   │   │   ├── icon-bulb.png
    │   │   │   │   ├── icon-case.png
    │   │   │   │   ├── icon-computer.png
    │   │   │   │   ├── icon-download.png
    │   │   │   │   └── icon-tools.png
    │   │   │   └── social
    │   │   │   │   ├── icon-facebook.png
    │   │   │   │   ├── icon-linkedin.png
    │   │   │   │   └── icon-twitter.png
    │   │   ├── logo.png
    │   │   ├── team-1.jpg
    │   │   ├── team-2.jpg
    │   │   ├── team-3.jpg
    │   │   └── team-4.jpg
    │   └── index.html
    └── webinar
    │   ├── css
    │       ├── normlize.css
    │       └── styles.css
    │   ├── img
    │       ├── image-1.jpg
    │       ├── image-2.jpg
    │       ├── image-3.jpg
    │       └── image-4.jpg
    │   ├── index.html
    │   └── todo.txt
├── module-10
    ├── practise
    │   ├── .editorconfig
    │   ├── .stylelintrc
    │   ├── css
    │   │   ├── normalize.css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── banner.jpeg
    │   │   ├── icons
    │   │   │   ├── features
    │   │   │   │   ├── icon-atom.png
    │   │   │   │   ├── icon-atom@2x.png
    │   │   │   │   ├── icon-bulb.png
    │   │   │   │   ├── icon-bulb@2x.png
    │   │   │   │   ├── icon-case.png
    │   │   │   │   ├── icon-case@2x.png
    │   │   │   │   ├── icon-computer.png
    │   │   │   │   ├── icon-computer@2x.png
    │   │   │   │   ├── icon-download.png
    │   │   │   │   ├── icon-download@2x.png
    │   │   │   │   ├── icon-tools.png
    │   │   │   │   └── icon-tools@2x.png
    │   │   │   └── social
    │   │   │   │   └── sprite.svg
    │   │   ├── logo.png
    │   │   ├── logo@2x.png
    │   │   ├── team-1.jpg
    │   │   ├── team-1@2x.jpg
    │   │   ├── team-2.jpg
    │   │   ├── team-2@2x.jpg
    │   │   ├── team-3.jpg
    │   │   ├── team-3@2x.jpg
    │   │   ├── team-4.jpg
    │   │   └── team-4@2x.jpg
    │   └── index.html
    └── webinar
    │   ├── css
    │       ├── normlize.css
    │       └── styles.css
    │   ├── hw-10-svg-icons.zip
    │   ├── img
    │       ├── icon-clock.svg
    │       ├── icon-graph.svg
    │       ├── icon-home.svg
    │       ├── icon.png
    │       ├── icon@2x.png
    │       ├── photo.jpg
    │       ├── photo@2x.jpg
    │       └── symbol-defs.svg
    │   ├── index.html
    │   ├── materials.md
    │   └── Адаптивная графика. Retina..pdf
└── module-11
    ├── practise
        ├── .editorconfig
        ├── .gitignore
        ├── .stylelintrc
        ├── LICENSE
        ├── build
        │   ├── css
        │   │   ├── styles.css
        │   │   └── styles.min.css
        │   ├── img
        │   │   ├── banner.jpeg
        │   │   ├── icons
        │   │   │   └── features
        │   │   │   │   ├── icon-atom.png
        │   │   │   │   ├── icon-atom@2x.png
        │   │   │   │   ├── icon-bulb.png
        │   │   │   │   ├── icon-bulb@2x.png
        │   │   │   │   ├── icon-case.png
        │   │   │   │   ├── icon-case@2x.png
        │   │   │   │   ├── icon-computer.png
        │   │   │   │   ├── icon-computer@2x.png
        │   │   │   │   ├── icon-download.png
        │   │   │   │   ├── icon-download@2x.png
        │   │   │   │   ├── icon-tools.png
        │   │   │   │   └── icon-tools@2x.png
        │   │   ├── logo.png
        │   │   ├── logo@2x.png
        │   │   ├── sprite.svg
        │   │   ├── team-1.jpg
        │   │   ├── team-1@2x.jpg
        │   │   ├── team-2.jpg
        │   │   ├── team-2@2x.jpg
        │   │   ├── team-3.jpg
        │   │   ├── team-3@2x.jpg
        │   │   ├── team-4.jpg
        │   │   └── team-4@2x.jpg
        │   └── index.html
        ├── gulpfile.js
        ├── package-lock.json
        ├── package.json
        └── src
        │   ├── html
        │       ├── banner.html
        │       ├── features.html
        │       ├── footer.html
        │       ├── header.html
        │       └── team.html
        │   ├── img
        │       ├── banner.jpeg
        │       ├── icons
        │       │   └── features
        │       │   │   ├── icon-atom.png
        │       │   │   ├── icon-atom@2x.png
        │       │   │   ├── icon-bulb.png
        │       │   │   ├── icon-bulb@2x.png
        │       │   │   ├── icon-case.png
        │       │   │   ├── icon-case@2x.png
        │       │   │   ├── icon-computer.png
        │       │   │   ├── icon-computer@2x.png
        │       │   │   ├── icon-download.png
        │       │   │   ├── icon-download@2x.png
        │       │   │   ├── icon-tools.png
        │       │   │   └── icon-tools@2x.png
        │       ├── logo.png
        │       ├── logo@2x.png
        │       ├── sprite
        │       │   ├── icon-facebook.svg
        │       │   ├── icon-linkedin.svg
        │       │   └── icon-twitter.svg
        │       ├── team-1.jpg
        │       ├── team-1@2x.jpg
        │       ├── team-2.jpg
        │       ├── team-2@2x.jpg
        │       ├── team-3.jpg
        │       ├── team-3@2x.jpg
        │       ├── team-4.jpg
        │       └── team-4@2x.jpg
        │   ├── index.html
        │   └── sass
        │       ├── base.scss
        │       ├── components
        │           ├── banner.scss
        │           ├── button.scss
        │           ├── container.scss
        │           ├── features.scss
        │           ├── page-footer.scss
        │           ├── page-header.scss
        │           ├── page-nav.scss
        │           ├── section.scss
        │           ├── site-logo.scss
        │           ├── site-navigation.scss
        │           ├── slider.scss
        │           ├── socials.scss
        │           └── team.scss
        │       ├── helpers
        │           ├── extras.scss
        │           ├── mixins.scss
        │           ├── placeholders.scss
        │           └── variables.scss
        │       ├── normalize.scss
        │       └── styles.scss
    └── webinar
        ├── gulp-project
            ├── .editorconfig
            ├── .gitignore
            ├── .stylelintrc
            ├── LICENSE
            ├── build
            │   ├── css
            │   │   ├── styles.css
            │   │   └── styles.min.css
            │   ├── img
            │   │   ├── sprite.svg
            │   │   ├── team-1.jpg
            │   │   └── team-2.jpg
            │   └── index.html
            ├── gulpfile.js
            ├── package-lock.json
            ├── package.json
            └── src
            │   ├── img
            │       ├── sprite
            │       │   ├── icon-facebook.svg
            │       │   ├── icon-instagram.svg
            │       │   ├── icon-pinterest.svg
            │       │   └── icon-twitter.svg
            │       ├── team-1.jpg
            │       └── team-2.jpg
            │   ├── index.html
            │   └── sass
            │       ├── helpers
            │           └── variables.scss
            │       ├── normalize.scss
            │       └── styles.scss
        └── simple-sass
            ├── links.txt
            ├── package-lock.json
            ├── package.json
            ├── plant.txt
            └── src
                ├── css
                    └── styles.css
                ├── index.html
                └── scss
                    ├── base.scss
                    ├── button.scss
                    ├── container.scss
                    ├── helpers
                        ├── mixins.scss
                        ├── placeholders.scss
                        └── variables.scss
                    ├── note.scss
                    └── styles.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Alexander Repeta
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # html-css-source-code


--------------------------------------------------------------------------------
/module-01/webinar/assets/mockup.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-01/webinar/assets/mockup.jpg


--------------------------------------------------------------------------------
/module-01/webinar/assets/todo.txt:
--------------------------------------------------------------------------------
  1 | - Язык разметки HTML.
  2 | - Понятие тега и атрибута.
  3 | - Структура HTML-документа.
  4 | - Инструменты веб-разработчика: Chrome DevTools, вкладка elements.
  5 | - Разница между тегом и элементом.
  6 | - Основные теги: заголовки, абзацы, списки, изображения, ссылки и т. д.
  7 | - Абсолютные и относительные пути
  8 | - Поток документа.
  9 | - Строчные и блочные элементы.
 10 | - Валидация.
 11 | - Стиль HTML-кода.
 12 | 
 13 | //=========================================================================
 14 | 
 15 | Потоковые: flow
 16 | - header
 17 | - footer
 18 | - main
 19 | - ul/ol
 20 | - p
 21 | 
 22 | 
 23 | //=========================================================================
 24 | 
 25 | Фразовые:
 26 | - img
 27 | - a
 28 | - button
 29 | - br
 30 | - span
 31 | 
 32 | //=========================================================================
 33 | 
 34 | Группировка контента по смыслу, обертки.
 35 | 
 36 | Крупные смысловые разделы:
 37 | - article
 38 | - section
 39 | - nav
 40 | - div
 41 | 
 42 | 1. Можем дать имя разделу и вынести этот раздел на другой сайт? - article
 43 | 2. Можем дать имя разделу, но вынести на другой сайт не можете? - section
 44 | 3. Не можете дать имя? Вменяемое имя, а не «левая колонка» - div
 45 | 
 46 | //=========================================================================
 47 | 
 48 | Разметка это когда все содержательные элементы документа представленными
 49 | подходящими по смыслу тегами.
 50 | 
 51 | Страница как документ
 52 | - Задача — восстановить из макета первоначальную логическую структуру документа.
 53 | - Можно добавлять то, чего не видно на макете.
 54 | - В разметку попадает не всё, что есть на макете.
 55 | 
 56 | Алгоритм разметки
 57 | 1. Выделяем повторяющиеся на каждой странице блоки (шапка и подвал) и основное
 58 | содержание.
 59 | 2. В этих блоках размечаем крупные смысловые разделы.
 60 | 3. В документе, и в каждом смысловом разделе выделяем заголовки (если их нет в макете, то
 61 | позже прячем с помощью стилей).
 62 | 4. Размечаем оставшиеся мелкие элементы в каждом смысловом разделе методом исключения:
 63 |   - Если получилось найти самый подходящий тег – используем его (article, section, nav).
 64 |   - Нужно разметить потоковый контейнер – <div>.
 65 |   - Нужно сгруппировать мелкие фразовые элементы – <p>.
 66 |   - Нужно выделить сам мелкий фразовый элемент (слово или фразу) – <span>.
 67 | 
 68 | При разметке добавляем всем тегам понятные имена классов. Теги без классов допустимы, если
 69 | из контекста понятно их назначение.
 70 | 
 71 | При дальнейшей вёрстке разметка может меняться, если это необходимо для стилизации.
 72 | Чаще всего добавляются обёртки с помощью <div>.
 73 | 
 74 | Как называть классы?
 75 | - Имя класса должно отражать назначение элемента, а не рассказывать о его внешнем виде.
 76 | - Воздержитесь от транслита.
 77 | 
 78 | хорошо: cart main-menu list list-item
 79 | 
 80 | плохо: razdel krasniy-kvadrat spisok item112
 81 | 
 82 | Словарь! - https://github.com/yoksel/common-words
 83 | 
 84 | //=========================================================================
 85 | 
 86 | Пространства имён классов
 87 | 
 88 | Упрощают именование классов.
 89 | - Разбивают код на относительно независимые блоки.
 90 | - Предотвращают нежелательное перемешивание стилей.
 91 | - Ускоряют разработку и упрощают поддержку.
 92 | 
 93 | //=========================================================================
 94 | 
 95 | Признаки хорошей разметки
 96 | 
 97 | - Использовано минимально необходимое количество тегов.
 98 | - Имена классов рассказывают о назначении элементов.
 99 | - Есть чёткие границы смысловых блоков, легко понять к какому блоку принадлежит тег.
100 | - Соблюдение стиля кода
101 | - Отсутствие лишних элементов
102 | 


--------------------------------------------------------------------------------
/module-01/webinar/assets/Введение.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-01/webinar/assets/Введение.pdf


--------------------------------------------------------------------------------
/module-01/webinar/img/pexels-photo-clouds.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-01/webinar/img/pexels-photo-clouds.jpeg


--------------------------------------------------------------------------------
/module-01/webinar/img/pexels-photo-sheep.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-01/webinar/img/pexels-photo-sheep.jpeg


--------------------------------------------------------------------------------
/module-01/webinar/img/pexels-photo-train.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-01/webinar/img/pexels-photo-train.jpeg


--------------------------------------------------------------------------------
/module-01/webinar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |   <meta charset="UTF-8">
 7 |   <title>Webinar 20-02</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <header class="main-header">
12 |     <nav class="main-nav">
13 |       <h1 class="site-logo">
14 |         <a href="#" class="site-logo-link">MODEST</a>
15 |       </h1>
16 | 
17 |       <ul class="main-menu">
18 |         <li class="main-menu-item">
19 |           <a href="#" class="main-menu-link">home</a>
20 |         </li>
21 |         <li class="main-menu-item">
22 |           <a href="#" class="main-menu-link">about</a>
23 |         </li>
24 |         <li class="main-menu-item">
25 |           <a href="#" class="main-menu-link">work</a>
26 |         </li>
27 |         <li class="main-menu-item">
28 |           <a href="#" class="main-menu-link">team</a>
29 |         </li>
30 |         <li class="main-menu-item">
31 |           <a href="#" class="main-menu-link">services</a>
32 |         </li>
33 |         <li class="main-menu-item">
34 |           <a href="#" class="main-menu-link">features</a>
35 |         </li>
36 |         <li class="main-menu-item">
37 |           <a href="#" class="main-menu-link">contact</a>
38 |         </li>
39 |       </ul>
40 |     </nav>
41 |   </header>
42 | 
43 |   <main class="main-content">
44 |     <section class="team">
45 |       <h2 class="team-title">meet the team</h2>
46 |       <ul class="team-list">
47 |         <li class="team-list-item">
48 |           <img src="img/pexels-photo-sheep.jpeg" alt="some sheep" width="640" height="360">
49 |           <h3>Some sheep</h3>
50 |           <p>CEO and Founder</p>
51 |         </li>
52 |         <li>
53 |           <img src="img/pexels-photo-clouds.jpeg" alt="clouds" width="640" height="360">
54 |           <h3>Some clouds</h3>
55 |           <p>CEO and Founder</p>
56 |         </li>
57 |         <li>
58 |           <img src="img/pexels-photo-train.jpeg" alt="train" width="640" height="360">
59 |           <h3>Train</h3>
60 |           <p>CEO and Founder</p>
61 |         </li>
62 |         <li>
63 |           <img src="img/pexels-photo-sheep.jpeg" alt="some sheep" width="640" height="360">
64 |           <h3>Some sheep</h3>
65 |           <p>CEO and Founder</p>
66 |         </li>
67 |       </ul>
68 |     </section>
69 |   </main>
70 | 
71 |   <footer class="main-footer">
72 |     <p class="legal-info">legal info</p>
73 |     <ul class="social-links">
74 |       <li class="social-links-item">
75 |         <a href="https://www.facebook.com/" class="social-list-link" target="_blank" rel="noopener noreferrer">facebook</a>
76 |       </li>
77 |       <li class="social-links-item">
78 |         <a href="#" class="social-list-link"></a>
79 |       </li>
80 |       <li class="social-links-item">
81 |         <a href="#" class="social-list-link"></a>
82 |       </li>
83 |       <li class="social-links-item">
84 |         <a href="#" class="social-list-link"></a>
85 |       </li>
86 |     </ul>
87 |   </footer>
88 | </body>
89 | 
90 | </html>
91 | 


--------------------------------------------------------------------------------
/module-02/webinar/css/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Roboto, 'Open Sans', Arial, sans-serif;
 3 |   font-size: 16px;
 4 |   line-height: 1.5;
 5 |   color: #424242;
 6 | }
 7 | 
 8 | .section {
 9 |   width: 70%;
10 |   margin: auto;
11 |   margin-bottom: 1rem;
12 |   padding-bottom: 2rem;
13 |   border-bottom: 2px solid #424242;
14 | }
15 | 
16 | .section h2 {
17 |   text-align: center;
18 |   font-size: 3rem;
19 | }
20 | 
21 | .section h3 {
22 |   display: inline-block;
23 |   padding: 0 0.5rem;
24 |   font-size: 2rem;
25 |   background-color: #424242;
26 |   color: #fff;
27 | }
28 | 
29 | .section > div {
30 |   width: 100%;
31 | }
32 | 
33 | .section img {
34 |   display: block;
35 |   width: 80%;
36 |   height: auto;
37 |   margin-left: auto;
38 |   margin-right: auto;
39 |   margin-bottom: 2rem;
40 | }
41 | 
42 | .small-img {
43 |   width: 50% !important;
44 | }
45 | 
46 | .section ul {
47 |   display: inline-block;
48 |   margin: auto;
49 |   padding: 0;
50 |   font-size: 1.75rem;
51 | }
52 | 
53 | .section p {
54 |   font-size: 1.75rem;
55 | }
56 | 
57 | .section li {
58 |   margin-bottom: 0.5rem;
59 | }
60 | 
61 | code {
62 |   font-family: monospace;
63 |   font-weight: 700;
64 |   color: #212112;
65 | }
66 | 


--------------------------------------------------------------------------------
/module-02/webinar/images/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-02/webinar/images/git.png


--------------------------------------------------------------------------------
/module-03/practise/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/module-03/practise/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-03/practise/css/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | *,
  6 | *::before,
  7 | *::after {
  8 |   box-sizing: inherit;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: "Raleway", "Arial", sans-serif;
 13 |   color: #6c7279;
 14 |   font-size: 14px;
 15 |   line-height: 21px;
 16 | }
 17 | 
 18 | img {
 19 |   display: block;
 20 |   max-width: 100%;
 21 |   height: auto;
 22 | }
 23 | 
 24 | .container {
 25 |   width: 1170px;
 26 |   margin: 0 auto;
 27 | }
 28 | 
 29 | .page-header {
 30 |   margin-bottom: 120px;
 31 |   background-color: #3a3e64;
 32 | }
 33 | 
 34 | .page-nav {
 35 |   padding: 38px 0;
 36 | }
 37 | 
 38 | .site-logo {
 39 |   display: inline-block;
 40 |   vertical-align: middle;
 41 | }
 42 | 
 43 | /* site navigation */
 44 | .site-navigation {
 45 |   display: inline-block;
 46 |   vertical-align: middle;
 47 |   width: 977px;
 48 |   margin: 0;
 49 |   padding: 0;
 50 |   font-size: 13px;
 51 |   list-style: none;
 52 |   text-align: right;
 53 | }
 54 | 
 55 | .site-navigation li {
 56 |   display: inline-block;
 57 | }
 58 | 
 59 | .site-navigation li:not(:last-child) {
 60 |   margin-right: 60px;
 61 | }
 62 | 
 63 | .site-navigation a {
 64 |   display: block;
 65 |   color: #ffffff;
 66 |   font-weight: 700;
 67 |   text-transform: uppercase;
 68 |   text-decoration: none;
 69 |   line-height: 16px;
 70 | }
 71 | 
 72 | .site-navigation a:hover,
 73 | .site-navigation a:focus {
 74 |   color: #e84545;
 75 | }
 76 | 
 77 | /* FEATURES SECTION */
 78 | .features {
 79 |   margin-bottom: 120px;
 80 | }
 81 | 
 82 | .features-list {
 83 |   list-style: none;
 84 |   margin: 0;
 85 |   padding: 0;
 86 |   font-size: 0;
 87 | }
 88 | 
 89 | .features-list-item {
 90 |   display: inline-block;
 91 |   width: 370px;
 92 |   margin-right: 30px;
 93 |   margin-bottom: 72px;
 94 |   padding: 0 38px;
 95 |   text-align: center;
 96 | }
 97 | 
 98 | /* .features-list-item:not(:nth-child(3n)) {
 99 |   margin-right: 30px;
100 | } */
101 | 
102 | .features-list-item:nth-child(3n) {
103 |   margin-right: 0;
104 | }
105 | 
106 | .features-list-item:nth-last-child(-n + 3) {
107 |   margin-bottom: 0;
108 | }
109 | 
110 | .features-list-item h3 {
111 |   margin-bottom: 24px;
112 |   margin-top: 0;
113 |   color: #2d3033;
114 |   line-height: 17px;
115 |   font-size: 14px;
116 | }
117 | 
118 | .features-list-item p {
119 |   margin: 0;
120 |   font-size: 14px;
121 | }
122 | 
123 | /* TEAM SECTION */
124 | .team {
125 |   margin-bottom: 120px;
126 | }
127 | 
128 | .team-list {
129 |   list-style: none;
130 |   padding: 0;
131 |   margin: 0;
132 |   font-size: 0;
133 | }
134 | 
135 | .team-list-item {
136 |   display: inline-block;
137 |   width: 270px;
138 |   margin-right: 30px;
139 | }
140 | 
141 | .team-list-item:last-child {
142 |   margin-right: 0;
143 | }
144 | 
145 | .team-list-name {
146 |   margin-top: 26px;
147 |   margin-bottom: 10px;
148 |   font-size: 22px;
149 |   line-height: 26px;
150 |   color: #2d3033;
151 | }
152 | 
153 | .team-list-occupation {
154 |   margin-top: 0;
155 |   margin-bottom: 26px;
156 |   font-size: 13px;
157 |   line-height: 16px;
158 |   color: #e84545;
159 | }
160 | 
161 | .team-list-about {
162 |   margin-bottom: 26px;
163 |   margin-top: 0;
164 |   font-size: 14px;
165 | }
166 | 
167 | .team-list-socials {
168 |   margin: 0;
169 |   padding: 0;
170 |   list-style: none;
171 |   font-size: 0;
172 | }
173 | 
174 | .team-list-socials li {
175 |   display: inline-block;
176 |   margin-right: 4px;
177 | }
178 | 
179 | .team-list-socials li:last-child {
180 |   margin-right: 0;
181 | }
182 | 
183 | .team-list-socials a {
184 |   display: block;
185 |   width: 40px;
186 |   height: 40px;
187 |   border: 1px solid rgb(232, 236, 238);
188 | 
189 |   background-repeat: no-repeat;
190 |   background-position: center;
191 | }
192 | 
193 | .team-list-socials a:hover,
194 | .team-list-socials a:focus {
195 |   background-color: #e84545;
196 | }
197 | 
198 | .icon-facebook {
199 |   background-image: url("../img/icon-facebook.png");
200 | }
201 | 
202 | .icon-twitter {
203 |   background-image: url("../img/icon-twitter.png");
204 | }
205 | 
206 | .icon-linkedin {
207 |   background-image: url("../img/icon-linkedin.png");
208 | }
209 | 
210 | .page-footer {
211 |   background-color: #3a3e64;
212 | }
213 | 
214 | .download-button {
215 |   border: none;
216 |   margin: 0;
217 |   padding: 14px 82px;
218 |   background-color: #e84545;
219 |   font-size: 13px;
220 |   line-height: 21px;
221 |   font-weight: 600;
222 |   color: #ffffff;
223 |   text-transform: uppercase;
224 |   cursor: pointer;
225 | }
226 | 
227 | /* visually-hidden helper */
228 | .visually-hidden:not(:focus):not(:active),
229 | input[type="checkbox"].visually-hidden,
230 | input[type="radio"].visually-hidden {
231 |   position: absolute;
232 | 
233 |   width: 1px;
234 |   height: 1px;
235 |   margin: -1px;
236 |   border: 0;
237 |   padding: 0;
238 | 
239 |   white-space: nowrap;
240 | 
241 |   clip-path: inset(100%);
242 |   clip: rect(0 0 0 0);
243 |   overflow: hidden;
244 | }
245 | 


--------------------------------------------------------------------------------
/module-03/practise/img/icon-facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/icon-facebook.png


--------------------------------------------------------------------------------
/module-03/practise/img/icon-linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/icon-linkedin.png


--------------------------------------------------------------------------------
/module-03/practise/img/icon-twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/icon-twitter.png


--------------------------------------------------------------------------------
/module-03/practise/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/logo.png


--------------------------------------------------------------------------------
/module-03/practise/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/team-1.jpg


--------------------------------------------------------------------------------
/module-03/practise/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/team-2.jpg


--------------------------------------------------------------------------------
/module-03/practise/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/team-3.jpg


--------------------------------------------------------------------------------
/module-03/practise/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/practise/img/team-4.jpg


--------------------------------------------------------------------------------
/module-03/webinar/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/module-03/webinar/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-03/webinar/css/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Raleway", "Arial", sans-serif;
 3 |   color: #6c7279;
 4 |   font-size: 14px;
 5 |   line-height: 21px;
 6 | }
 7 | 
 8 | .page-header {
 9 |   background-color: #3a3e64;
10 | }
11 | 
12 | .site-navigation {
13 |   font-size: 13px;
14 |   list-style: none;
15 | }
16 | 
17 | .site-navigation a {
18 |   color: #ffffff;
19 |   font-weight: 700;
20 |   text-transform: uppercase;
21 |   text-decoration: none;
22 |   line-height: 16px;
23 | }
24 | 
25 | .site-navigation a:hover {
26 |   color: #e84545;
27 | }
28 | 
29 | .features-list {
30 |   list-style: none;
31 | }
32 | 
33 | .features-list-item h3 {
34 |   color: #2d3033;
35 |   line-height: 17px;
36 | }
37 | 
38 | .team-list {
39 |   list-style: none;
40 | }
41 | 
42 | .team-list-name {
43 |   font-size: 22px;
44 |   line-height: 26px;
45 |   color: #2d3033;
46 | }
47 | 
48 | .team-list-occupation {
49 |   font-size: 13px;
50 |   line-height: 16px;
51 |   color: #e84545;
52 | }
53 | 
54 | .page-footer {
55 |   background-color: #3a3e64;
56 | }
57 | 
58 | .visually-hidden:not(:focus):not(:active),
59 | input[type="checkbox"].visually-hidden,
60 | input[type="radio"].visually-hidden {
61 |   position: absolute;
62 | 
63 |   width: 1px;
64 |   height: 1px;
65 |   margin: -1px;
66 |   border: 0;
67 |   padding: 0;
68 | 
69 |   white-space: nowrap;
70 | 
71 |   clip-path: inset(100%);
72 |   clip: rect(0 0 0 0);
73 |   overflow: hidden;
74 | }
75 | 
76 | /* .text {
77 |   font-size: 34px;
78 |   font-weight: 700;
79 |   text-indent: 20px;
80 |   font-style: italic;
81 |   line-height: 40px;
82 |   font-family: "Roboto", "Arial", "Times New Roman", sans-serif;
83 | } */
84 | 
85 | /* 300 - light
86 | 400 - regular
87 | 600 - semibold */
88 | /* 700 - bold */
89 | 
90 | /* body {
91 |    min-height: 100vh;
92 |   background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqysJKfLpvNg4Is0Geg3rnQr02vUdTyj4Qs5C-w5RemXzd4lCp');
93 |    background-repeat: no-repeat;
94 |   background-size: cover;
95 |   background-position: center;
96 | } */
97 | 


--------------------------------------------------------------------------------
/module-03/webinar/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/webinar/img/logo.png


--------------------------------------------------------------------------------
/module-03/webinar/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/webinar/img/team-1.jpg


--------------------------------------------------------------------------------
/module-03/webinar/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/webinar/img/team-2.jpg


--------------------------------------------------------------------------------
/module-03/webinar/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/webinar/img/team-3.jpg


--------------------------------------------------------------------------------
/module-03/webinar/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/webinar/img/team-4.jpg


--------------------------------------------------------------------------------
/module-03/webinar/mockup/ActiveBox.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-03/webinar/mockup/ActiveBox.psd


--------------------------------------------------------------------------------
/module-03/webinar/plan.txt:
--------------------------------------------------------------------------------
 1 | Занятие #1:
 2 | - Добавляем CSS используя внешнюю таблицу стилей.
 3 | 
 4 | - Синтаксис CSS. Понятие CSS-правила, селектора, свойства и значения.
 5 | 
 6 | Классификация свойств
 7 | - Позиционирование
 8 | - Блочная модель (размеры и отступы) и поток
 9 | - Оформление текста
10 | - Декоративные эффекты (фоны, тени и так далее)
11 | - Анимация и динамические эффекты
12 | - Другие
13 | 
14 | Типы значений
15 | - Абсолютные
16 | - Относительные
17 | - Ключевые слова
18 | - Цвета
19 | - Функции
20 | - Произвольные строки
21 | 
22 | - DevTools для CSS.
23 | 
24 | - CSS-селекторы: тега, класса, id, потомка, атрибута и т. д.
25 | 
26 | 
27 | - Каскад.
28 |   - К одному и тому же элементу может примениться
29 |       несколько CSS-правил.
30 |       В этом случае свойства правил комбинируются.
31 | 
32 |   - Свойства элемента можно комбинировать и явно с помощью множественных классов.
33 | 
34 |   - Когда в разных CSS-правилах есть одинаковые
35 |    свойства с разными значениями, то они конфликтуют
36 | 
37 | Специфичность. Приоритетность.
38 |   - Специфичность определяется по селектору.
39 |   - Если она одинаковая, то побеждает то правило, которое
40 |     расположено ниже в коде.
41 |   - Чем проще селекторы, тем меньше проблем с расчётом
42 |     специфичности.
43 | 
44 |  Наследование.
45 | 
46 | - Сброс стилей по умолчанию от user agent. Нормализация.
47 | 
48 | - Работа с цветом: rgb, hex. Прозрачность, rgba.
49 | 
50 | - Абсолютные и относительные единицы CSS.
51 |   Единицы измерения в CSS. px % em rem vw vh.
52 |   Знакомлю со всеми очень кратко и говорю что дальше будет в курсе,
53 |   использую пока только px и vh.
54 | 
55 | - Работа с текстом, основные CSS-свойства и их значения.
56 | - Подключение внешних шрифтов через Google Fonts. Свойство font-family.
57 | 
58 | - Фон. Работа с фоновыми изображениями, масштабируемый полностраничный фон.
59 | - Контентные (img) vs оформительные (background-img) изображения.
60 | 
61 | - Псевдоклассы: hover, focus, active.
62 | 
63 | 
64 | 
65 | 
66 | Занятие #2:
67 | 
68 | - Поток документа.
69 | - Блочная модель документа
70 | - Типы боксов: блочные, строчные, блочно-строчные
71 | 
72 | - Свойства блочной модели и составляющие элемента: width, height, content, border, margin, padding.
73 | - Модель визуального форматирования: box-sizing.
74 | 
75 | - Блочная верстка, свойство display: block|inline|inline-block.
76 | 
77 | - Горизонтальное и вертикальное выравнивание: margin, text-align, line-height, vertical-align.
78 | 
79 | - Класс container (wrapper): назначение, использование.
80 | 
81 | - Псевдоклассы: f/l-сhild, nth-child, nth-last-child, not.
82 | 
83 | - Верстка горизонтального меню и галлереи карточек. (это абсолютно не обязательно,
84 | я запишу им видео в продолжение моего вебинара как делать сеточную верстку строчно-блочными)
85 | 
86 | 
87 | 


--------------------------------------------------------------------------------
/module-04/practise/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/module-04/practise/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-04/practise/img/banner.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/banner.jpeg


--------------------------------------------------------------------------------
/module-04/practise/img/icons/features/icon-atom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/features/icon-atom.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/features/icon-bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/features/icon-bulb.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/features/icon-case.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/features/icon-case.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/features/icon-computer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/features/icon-computer.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/features/icon-download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/features/icon-download.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/features/icon-tools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/features/icon-tools.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/social/icon-facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/social/icon-facebook.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/social/icon-linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/social/icon-linkedin.png


--------------------------------------------------------------------------------
/module-04/practise/img/icons/social/icon-twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/icons/social/icon-twitter.png


--------------------------------------------------------------------------------
/module-04/practise/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/logo.png


--------------------------------------------------------------------------------
/module-04/practise/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/team-1.jpg


--------------------------------------------------------------------------------
/module-04/practise/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/team-2.jpg


--------------------------------------------------------------------------------
/module-04/practise/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/team-3.jpg


--------------------------------------------------------------------------------
/module-04/practise/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/practise/img/team-4.jpg


--------------------------------------------------------------------------------
/module-04/webinar/css/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | *,
  6 | *::before,
  7 | *::after {
  8 |   box-sizing: inherit;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: "PT Sans", sans-serif;
 13 |   font-size: 16px;
 14 |   line-height: 1.5;
 15 | }
 16 | 
 17 | .page-header {
 18 |   padding: 20px 0;
 19 |   outline: 2px solid brown;
 20 | }
 21 | 
 22 | .logo {
 23 |   outline: 2px solid orange;
 24 |   float: left;
 25 | }
 26 | 
 27 | .catalog {
 28 |   width: 1000px;
 29 |   margin: 0 auto;
 30 | }
 31 | 
 32 | .menu {
 33 |   float: right;
 34 |   width: 300px;
 35 |   outline: 2px solid blue;
 36 |   list-style: none;
 37 |   padding: 0;
 38 |   margin: 0;
 39 | }
 40 | 
 41 | .menu li {
 42 |   float: left;
 43 |   background-color: #424242;
 44 | }
 45 | 
 46 | .catalog-list {
 47 |   padding: 0;
 48 |   margin: 0;
 49 |   list-style: none;
 50 | }
 51 | 
 52 | .catalog-item {
 53 |   float: left;
 54 |   width: 300px;
 55 |   outline: 2px solid #424242;
 56 | }
 57 | 
 58 | .catalog-item:not(:nth-child(3n)) {
 59 |   margin-right: 50px;
 60 | }
 61 | 
 62 | .catalog-item:not(:nth-last-child(-n + 3)) {
 63 |   margin-bottom: 50px;
 64 | }
 65 | 
 66 | /* PSEUDOELEMENTS */
 67 | 
 68 | /* .link {
 69 |   display: inline-block;
 70 |   text-decoration: none;
 71 |   border: 2px solid #424242;
 72 |   padding: 10px 20px;
 73 | }
 74 | 
 75 | .login::before,
 76 | .logout::after {
 77 |   display: inline-block;
 78 |   width: 20px;
 79 |   height: 20px;
 80 |   content: "";
 81 |   vertical-align: middle;
 82 | 
 83 |   background-size: contain;
 84 |   background-position: center;
 85 | }
 86 | 
 87 | .login::before {
 88 |   background-image: url("../img/icons/icon-login.png");
 89 | }
 90 | 
 91 | .logout::after {
 92 |   background-image: url("../img/icons/icon-logout.png");
 93 | }
 94 | 
 95 | p::selection {
 96 |   color: #fff;
 97 |   background-color: #424242;
 98 | }
 99 | 
100 | p::before {
101 |   content: "\21A0";
102 |   color: red;
103 | }
104 | 
105 | p::after {
106 |   content: "\21A9";
107 |   color: green;
108 | }
109 | 
110 | h2 {
111 |   text-align: center;
112 | }
113 | 
114 | h2::before {
115 |   display: block;
116 |   width: 60px;
117 |   height: 2px;
118 |   background-color: red;
119 |   content: '';
120 |   margin: 0 auto;
121 | } */
122 | 
123 | .container {
124 |   padding: 20px;
125 |   background-color: #424242;
126 | }
127 | 
128 | .clearfix::after {
129 |   display: table;
130 |   content: "";
131 |   clear: both;
132 | }
133 | 
134 | .red {
135 |   float: right;
136 |   width: 250px;
137 |   height: 150px;
138 |   background-color: #ff5252;
139 | }
140 | 
141 | .green {
142 |   float: right;
143 |   width: 300px;
144 |   height: 175px;
145 |   background-color: #4caf50;
146 | }
147 | 
148 | .blue {
149 |   float: right;
150 |   width: 350px;
151 |   height: 200px;
152 |   background-color: #2196f3;
153 | }
154 | 
155 | /* POST */
156 | .post {
157 |   width: 960px;
158 |   outline: 2px solid #424242;
159 | }
160 | 
161 | .post p {
162 | }
163 | 
164 | .post img {
165 |   margin-right: 15px;
166 |   margin-bottom: 15px;
167 |   float: left;
168 | }
169 | 


--------------------------------------------------------------------------------
/module-04/webinar/img/icons/icon-login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/webinar/img/icons/icon-login.png


--------------------------------------------------------------------------------
/module-04/webinar/img/icons/icon-logout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/webinar/img/icons/icon-logout.png


--------------------------------------------------------------------------------
/module-04/webinar/img/image.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-04/webinar/img/image.jpeg


--------------------------------------------------------------------------------
/module-04/webinar/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>Webinar 06-03</title>
  7 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
  8 |     rel="stylesheet">
  9 |   <link rel="stylesheet" href="css/styles.css">
 10 | </head>
 11 | 
 12 | <body>
 13 |   <header class="page-header clearfix">
 14 |     <a href="#" class="logo">LOGO</a>
 15 |     <ul class="menu clearfix">
 16 |       <li>
 17 |         <a href="">home</a>
 18 |       </li>
 19 |       <li>
 20 |         <a href="">about</a>
 21 |       </li>
 22 |       <li>
 23 |         <a href="">team</a>
 24 |       </li>
 25 |       <li>
 26 |         <a href="">contacts</a>
 27 |       </li>
 28 |     </ul>
 29 |   </header>
 30 | 
 31 |   <section class="catalog">
 32 |     <h2>Catalog</h2>
 33 |     <ul class="catalog-list clearfix">
 34 |       <li class="catalog-item">
 35 |         <h3>Catalog item</h3>
 36 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam earum voluptates
 37 |           veniam eum dolorum quo velit, illum aut molestias itaque est in quam qui
 38 |           nostrum et libero delectus debitis natus?</p>
 39 |       </li>
 40 |       <li class="catalog-item">
 41 |         <h3>Catalog item</h3>
 42 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam earum voluptates
 43 |           veniam eum dolorum quo velit, illum aut molestias itaque est in quam qui
 44 |           nostrum et libero delectus debitis natus?</p>
 45 |       </li>
 46 |       <li class="catalog-item">
 47 |         <h3>Catalog item</h3>
 48 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam earum voluptates
 49 |           veniam eum dolorum quo velit, illum aut molestias itaque est in quam qui
 50 |           nostrum et libero delectus debitis natus?</p>
 51 |       </li>
 52 |       <li class="catalog-item">
 53 |         <h3>Catalog item</h3>
 54 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam earum voluptates
 55 |           veniam eum dolorum quo velit, illum aut molestias itaque est in quam qui
 56 |           nostrum et libero delectus debitis natus?</p>
 57 |       </li>
 58 |       <li class="catalog-item">
 59 |         <h3>Catalog item</h3>
 60 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam earum voluptates
 61 |           veniam eum dolorum quo velit, illum aut molestias itaque est in quam qui
 62 |           nostrum et libero delectus debitis natus?</p>
 63 |       </li>
 64 |       <li class="catalog-item">
 65 |         <h3>Catalog item</h3>
 66 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam earum voluptates
 67 |           veniam eum dolorum quo velit, illum aut molestias itaque est in quam qui
 68 |           nostrum et libero delectus debitis natus?</p>
 69 |       </li>
 70 |     </ul>
 71 |   </section>
 72 | 
 73 | 
 74 |   <!-- PSEUDOELEMENTS -->
 75 |   <!-- <h2>Article title</h2>
 76 | 
 77 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque cum architecto,
 78 |     sit deleniti inventore provident nulla facere commodi laboriosam deserunt, recusandae
 79 |     molestias at quibusdam cupiditate tempore qui, nesciunt veniam voluptatibus fuga
 80 |     et. Iure magni obcaecati sit necessitatibus corrupti. Et, quasi optio. Error
 81 |     vitae fugit saepe tempore sequi eveniet accusamus fugiat?</p>
 82 | 
 83 | 
 84 |   <ul>
 85 |     <li>
 86 |       <a href="#" class="link login">Вход</a>
 87 |     </li>
 88 |     <li>
 89 |       <a href="#" class="link logout">Выход</a>
 90 |     </li>
 91 |   </ul> -->
 92 | 
 93 |   <!-- <div class="container clearfix">
 94 |     <div class="red"></div>
 95 |     <div class="green"></div>
 96 |     <div class="blue"></div>
 97 |   </div> -->
 98 | 
 99 |   <!-- <section class="post">
100 |     <img src="img/image.jpeg" alt="forest">
101 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus consequatur
102 |       iste rem ipsam, unde atque fugiat tempore eos mollitia ratione aperiam cumque?
103 |       Nostrum autem, ipsum nemo blanditiis dignissimos totam! Doloribus recusandae
104 |       quas quaerat nobis maiores nisi non excepturi architecto deserunt nesciunt
105 |       dolorum unde voluptatum aspernatur ipsum ex, consectetur perspiciatis dolor
106 |       ipsa nemo tenetur. Sit voluptates, officiis suscipit possimus, minima sapiente
107 |       molestiae voluptas at ex repellat quaerat a. Eligendi voluptatum, incidunt
108 |       repudiandae, enim, sit fugiat dicta hic reprehenderit provident minus totam
109 |       consequuntur quod? Non sunt, optio nihil harum ut sequi commodi obcaecati at
110 |       quasi aut deleniti quidem rerum odio. Voluptatem provident nihil laboriosam
111 |       facere! Eius maxime quisquam autem ea vel nemo omnis magni molestiae consequatur
112 |       facilis, nesciunt, pariatur adipisci corrupti est quaerat dolores ipsam, odit
113 |       earum aliquid commodi ratione doloribus error accusantium a. Provident quasi
114 |       sunt, laudantium non adipisci ipsum, facilis at tenetur molestiae unde, repellendus
115 |       quo. Sunt consequatur reiciendis voluptatem laborum fuga similique nesciunt
116 |       ullam perferendis iusto</p>
117 |   </section> -->
118 | </body>
119 | 
120 | </html>
121 | 


--------------------------------------------------------------------------------
/module-04/webinar/plan.txt:
--------------------------------------------------------------------------------
 1 | Занятие #1:
 2 | - Псевдоэлементы: before, after, selected.
 3 | - Контентные (img) vs оформительные (background-img) изображения.
 4 | 
 5 | - Float. Очистка обтекания.
 6 | - Float как инструмент обтекания картинки текстом.
 7 | - Сетка в семантической верстке. Фиксированная сетка на float.
 8 | 
 9 | Занятие #2:
10 | - CSS-градиенты.
11 | - CSS-фильтры.
12 | - CSS-счетчики.
13 | - CSS-тени: text-shadow и box-shadow


--------------------------------------------------------------------------------
/module-05/practise/css/modal.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 |   box-sizing: inherit;
 9 | }
10 | 
11 | body {
12 |   min-height: 100vh;
13 |   font-family: 'PT Sans', sans-serif;
14 |   font-size: 16px;
15 |   line-height: 1.5;
16 | }
17 | 
18 | p {
19 |   margin: 0;
20 | }
21 | 
22 | .modal-backdrop {
23 |   position: fixed;
24 |   top: 0;
25 |   left: 0;
26 |   height: 100%;
27 |   width: 100%;
28 |   background-color: rgba(0, 0, 0, 0.3);
29 | }
30 | 
31 | .modal {
32 |   position: absolute;
33 |   top: 50%;
34 |   left: 50%;
35 |   transform: translate(-50%, -50%);
36 |   height: 300px;
37 |   width: 300px;
38 |   padding: 20px;
39 |   background-color: #fff;
40 | }
41 | 


--------------------------------------------------------------------------------
/module-05/practise/css/slider.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 |   box-sizing: inherit;
 9 | }
10 | 
11 | body {
12 |   font-family: 'PT Sans', sans-serif;
13 |   font-size: 16px;
14 |   line-height: 1.5;
15 | }
16 | 
17 | img {
18 |   display: block;
19 |   max-width: 100%;
20 |   height: auto;
21 | }
22 | 
23 | .slider {
24 |   position: relative;
25 |   width: 800px;
26 |   height: 400px;
27 |   margin: auto;
28 |   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
29 | }
30 | 
31 | .slider-ctrl {
32 |   position: absolute;
33 |   top: 50%;
34 |   transform: translateY(-50%);
35 |   border: none;
36 |   display: inline-block;
37 |   width: 50px;
38 |   height: 57px;
39 |   background-color: #26b9e1;
40 |   font-weight: 700;
41 |   cursor: pointer;
42 |   z-index: 1;
43 | }
44 | 
45 | .slider-ctrl-prev {
46 |   left: 0;
47 | }
48 | 
49 | .slider-ctrl-next {
50 |   right: 0;
51 | }
52 | 
53 | .slides {
54 |   margin: 0;
55 |   padding: 0;
56 |   list-style: none;
57 | }
58 | 
59 | .slides-item {
60 |   position: relative;
61 | }
62 | 
63 | .slides-image {
64 |   height: 400px;
65 |   width: 100%;
66 |   object-fit: cover;
67 | }
68 | 
69 | .slides-descr {
70 |   position: absolute;
71 |   bottom: 10px;
72 |   right: 10px;
73 |   width: 350px;
74 |   padding: 10px;
75 |   margin: 0;
76 |   background-color: #fff;
77 | }
78 | 
79 | .slider-pagination {
80 |   position: absolute;
81 |   bottom: -40px;
82 |   left: 50%;
83 |   transform: translateX(-50%);
84 | }
85 | 
86 | .slider-pagination-item {
87 |   display: inline-block;
88 |   width: 60px;
89 |   height: 5px;
90 |   background-color: #b0b8b9;
91 |   cursor: pointer;
92 | }
93 | 
94 | .slider-pagination-active {
95 |   background-color: #20a8da;
96 | }
97 | 


--------------------------------------------------------------------------------
/module-05/practise/css/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 |   box-sizing: inherit;
 9 | }
10 | 
11 | body {
12 |   padding: 20px;
13 |   font-family: 'PT Sans', sans-serif;
14 |   font-size: 16px;
15 |   line-height: 1.5;
16 | }
17 | 
18 | .card {
19 |   position: relative;
20 |   width: 224px;
21 |   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
22 | }
23 | 
24 | .overlay {
25 |   position: absolute;
26 |   width: 100%;
27 |   height: 249px;
28 |   background-color: rgb(76, 118, 255);
29 |   opacity: 0;
30 | }
31 | 
32 | .overlay-icon {
33 |   position: absolute;
34 |   bottom: 0;
35 |   right: 0;
36 | 
37 |   display: inline-block;
38 |   width: 30px;
39 |   height: 30px;
40 |   background-color: red;
41 | }
42 | 
43 | .card:hover .overlay {
44 |   opacity: 0.949;
45 | }
46 | 
47 | .article {
48 |   position: relative;
49 |   width: 300px;
50 |   padding-left: 70px;
51 |   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
52 | }
53 | 
54 | .article::before {
55 |   position: absolute;
56 |   left: 5px;
57 |   top: 15px;
58 |   display: inline-block;
59 |   content: '';
60 |   width: 50px;
61 |   height: 50px;
62 |   background-color: red;
63 | }
64 | 
65 | 
66 | 


--------------------------------------------------------------------------------
/module-05/practise/img/pexels-photo-631950.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-05/practise/img/pexels-photo-631950.jpeg


--------------------------------------------------------------------------------
/module-05/practise/img/team-member.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-05/practise/img/team-member.jpg


--------------------------------------------------------------------------------
/module-05/practise/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Module 5 practise</title>
 9 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
10 |     rel="stylesheet">
11 |   <link rel="stylesheet" href="css/normalize.css">
12 |   <link rel="stylesheet" href="css/styles.css">
13 | </head>
14 | 
15 | <body>
16 |   <div class="card">
17 |     <div class="overlay">
18 |       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi, officia?
19 |       <span class="overlay-icon"></span>
20 |     </div>
21 |     <img src="img/team-member.jpg" alt="image" width="224" height="249">
22 |     <p class="card-name">Chystine Hineu</p>
23 |     <p class="card-pos">Lead Designer</p>
24 |   </div>
25 | 
26 |   <article class="article">
27 |     <h2>Article title</h2>
28 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum doloribus hic
29 |       excepturi amet accusamus et aspernatur numquam animi nisi repudiandae?</p>
30 |   </article>
31 | </body>
32 | 
33 | </html>
34 | 


--------------------------------------------------------------------------------
/module-05/practise/modal.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Module 5 practise</title>
 9 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
10 |     rel="stylesheet">
11 |   <link rel="stylesheet" href="css/normalize.css">
12 |   <link rel="stylesheet" href="css/modal.css">
13 | </head>
14 | 
15 | <body>
16 |   <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit iusto totam
17 |     nihil ut obcaecati eos placeat hic laboriosam sapiente molestias, qui, libero
18 |     quibusdam similique sunt vero, facilis impedit amet labore!</p>
19 |   <div class="modal-backdrop">
20 |     <div class="modal">
21 |       <p>Вы действительно хотите удалить свой аккаунт?</p>
22 |       <button>Да</button>
23 |       <button>Нет</button>
24 |     </div>
25 |   </div>
26 | </body>
27 | 
28 | </html>
29 | 


--------------------------------------------------------------------------------
/module-05/practise/slider.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Module 5 practise</title>
 9 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
10 |     rel="stylesheet">
11 |   <link rel="stylesheet" href="css/normalize.css">
12 |   <link rel="stylesheet" href="css/slider.css">
13 | </head>
14 | 
15 | <body>
16 |   <div class="slider">
17 |     <button class="slider-ctrl slider-ctrl-prev">PREV</button>
18 |     <button class="slider-ctrl slider-ctrl-next">NEXT</button>
19 | 
20 |     <ul class="slides">
21 |       <li class="slides-item">
22 |         <img class="slides-image" src="img/pexels-photo-631950.jpeg" alt="image">
23 |         <p class="slides-descr">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi expedita similique,
24 |           excepturi reprehenderit perspiciatis dignissimos corporis error nisi atque
25 |           magnam.</p>
26 |       </li>
27 |     </ul>
28 | 
29 |     <div class="slider-pagination">
30 |       <span class="slider-pagination-item"></span>
31 |       <span class="slider-pagination-item slider-pagination-active"></span>
32 |       <span class="slider-pagination-item"></span>
33 |     </div>
34 |   </div>
35 | </body>
36 | 
37 | </html>
38 | 


--------------------------------------------------------------------------------
/module-05/webinar/css/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | *,
  6 | *::before,
  7 | *::after {
  8 |   box-sizing: inherit;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: 'PT Sans', sans-serif;
 13 |   font-size: 16px;
 14 |   line-height: 1.5;
 15 | }
 16 | 
 17 | img {
 18 |   display: block;
 19 |   max-width: 100%;
 20 |   height: auto;
 21 | }
 22 | 
 23 | .card {
 24 |   width: 270px;
 25 |   padding: 10px;
 26 |   border: 2px solid #424242;
 27 |   text-align: center;
 28 | }
 29 | 
 30 | .card-content {
 31 |   position: relative;
 32 | }
 33 | 
 34 | .card-button {
 35 |   position: absolute;
 36 |   top: 0;
 37 |   right: 0;
 38 |   display: inline-block;
 39 |   border: none;
 40 |   padding: 0;
 41 |   margin: 0;
 42 |   width: 60px;
 43 |   height: 60px;
 44 |   background-color: transparent;
 45 |   cursor: pointer;
 46 |   background-image: url('../img/heart.svg');
 47 | }
 48 | 
 49 | .card-button:hover {
 50 |   background-image: url('../img/heart-hover.svg');
 51 | }
 52 | 
 53 | .card:hover .social-icons {
 54 |   opacity: 1;
 55 | }
 56 | 
 57 | .social-icons {
 58 |   opacity: 0;
 59 |   position: absolute;
 60 |   bottom: 0;
 61 |   left: 50%;
 62 |   transform: translateX(-50%);
 63 |   width: 100%;
 64 |   list-style: none;
 65 |   padding: 0;
 66 |   margin: 0;
 67 | }
 68 | 
 69 | .social-icons li {
 70 |   float: left;
 71 | }
 72 | 
 73 | .social-icons a {
 74 |   display: block;
 75 |   height: 50px;
 76 |   width: 50px;
 77 |   background-color: teal;
 78 | }
 79 | 
 80 | .social-icons a:hover {
 81 |   background-color: palevioletred;
 82 | }
 83 | 
 84 | .box {
 85 |   height: 150px;
 86 |   width: 150px;
 87 |   text-align: center;
 88 |   line-height: 150px;
 89 |   font-size: 60px;
 90 |   font-weight: 700;
 91 | }
 92 | 
 93 | /*
 94 | 	Значение relative для свойства position позволяет
 95 | 	элементам отображаться в пределах обычного потока документа,
 96 | 	оставляя пространство для элемента по учмолчанию и
 97 | 	не позволяя другим элементам его обтекать; однако оно
 98 | 	позволяет изменять положение отображения элемента с
 99 | 	помощью свойств смещения left|right|top|bottom.
100 | */
101 | 
102 | /*
103 | 	Значение absolute для свойства position отличается
104 | 	от relative тем, что элемент с абсолютным значением
105 | 	position не будет отображаться в нормальном потоке
106 | 	документа, а исходное пространство и позиция, абсолютно
107 | 	позиционированного элемента, не будут сохранены.
108 | 
109 | 	Кроме того, абсолютно позиционированные элементы
110 | 	перемещаются относительно	их ближайшего родительского
111 | 	элемента с position отличным от static. Если такой
112 | 	родительский элемент не существует, абсолютно
113 | 	позиционированный элемент будет располагаться	относительно
114 | 	элемента body.
115 | */
116 | 
117 | body {
118 |   padding: 20px;
119 | }
120 | 
121 | .parent {
122 |   position: relative;
123 |   height: 500px;
124 |   width: 500px;
125 | }
126 | 
127 | /* .box {
128 |   position: absolute;
129 |   top: 50%;
130 |   left: 50%;
131 |   transform: translate(-50%, -50%);
132 | 
133 |   width: 20%;
134 |   height: 20%;
135 | 
136 |    margin-top: -75px;
137 |   margin-left: -75px;
138 | } */
139 | 
140 | /*
141 | 	position fixed позиционирует элемент относительно
142 | 	окна браузера! Элемент как будто прибит к определенному
143 | 	месту на viewport.
144 | */
145 | 
146 | /* .fixed {
147 |   position: fixed;
148 |   width: 150px;
149 |   height: 150px;
150 |   right: 150px;
151 |   top: 100px;
152 | } */
153 | 
154 | /* z-index */
155 | 
156 | .box {
157 |   position: absolute;
158 | }
159 | 
160 | .box:nth-child(1) {
161 |   top: 25px;
162 |   left: 25px;
163 |   z-index: 5;
164 | }
165 | 
166 | .box:nth-child(2) {
167 |   top: 50px;
168 |   left: 50px;
169 |   z-index: 4;
170 | }
171 | 
172 | .box:nth-child(3) {
173 |   top: 75px;
174 |   left: 75px;
175 |   z-index: 3;
176 | }
177 | 
178 | /* Utils */
179 | .dodger {
180 |   background-color: #1789fc;
181 | }
182 | 
183 | .topaz {
184 |   background-color: #ffd07b;
185 | }
186 | 
187 | .gunmetal {
188 |   background-color: #2b2d42;
189 | }
190 | 
191 | .pantone {
192 |   background-color: #ef233c;
193 | }
194 | 
195 | .teal {
196 |   background-color: teal;
197 | }
198 | 
199 | .palered {
200 |   background-color: palevioletred;
201 | }
202 | 
203 | /* visually-hidden helper */
204 | .visually-hidden:not(:focus):not(:active),
205 | input[type='checkbox'].visually-hidden,
206 | input[type='radio'].visually-hidden {
207 |   position: absolute;
208 |   width: 1px;
209 |   height: 1px;
210 |   margin: -1px;
211 |   border: 0;
212 |   padding: 0;
213 |   white-space: nowrap;
214 |   clip-path: inset(100%);
215 |   clip: rect(0 0 0 0);
216 |   overflow: hidden;
217 | }
218 | 


--------------------------------------------------------------------------------
/module-05/webinar/img/heart-hover.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 5 | <path style="fill:#D75A4A;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
 6 | 	c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
 7 | 	c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
 8 | <g>
 9 | </g>
10 | <g>
11 | </g>
12 | <g>
13 | </g>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | </svg>
39 | 


--------------------------------------------------------------------------------
/module-05/webinar/img/heart.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
 5 | <g>
 6 | 	<path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905
 7 | 		c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478
 8 | 		c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014
 9 | 		C52.216,18.553,51.97,16.611,51.911,16.242z M49.521,21.261c-0.984,4.172-3.265,7.973-6.59,10.985L25.855,47.481L9.072,32.25
10 | 		c-3.331-3.018-5.611-6.818-6.596-10.99c-0.708-2.997-0.417-4.69-0.416-4.701l0.015-0.101C2.725,9.139,7.806,3.826,14.158,3.826
11 | 		c4.687,0,8.813,2.88,10.771,7.515l0.921,2.183l0.921-2.183c1.927-4.564,6.271-7.514,11.069-7.514
12 | 		c6.351,0,11.433,5.313,12.096,12.727C49.938,16.57,50.229,18.264,49.521,21.261z"/>
13 | </g>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | </svg>
45 | 


--------------------------------------------------------------------------------
/module-05/webinar/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-05/webinar/img/team-1.jpg


--------------------------------------------------------------------------------
/module-05/webinar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Webinar 13-03</title>
 9 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
10 |     rel="stylesheet">
11 |   <link rel="stylesheet" href="css/normlize.css">
12 |   <link rel="stylesheet" href="css/styles.css">
13 | </head>
14 | 
15 | <body>
16 |   <div class="card">
17 |     <div class="card-content">
18 |       <button class="card-button">
19 |         <span class="visually-hidden">Like</span>
20 |       </button>
21 |       <img src="img/team-1.jpg" alt="image">
22 |       <ul class="social-icons">
23 |         <li><a href="#"></a></li>
24 |         <li><a href="#"></a></li>
25 |         <li><a href="#"></a></li>
26 |       </ul>
27 |     </div>
28 |     <h3>Maya Helswing</h3>
29 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque tempora eius placeat
30 |       dicta culpa similique nobis voluptatem, necessitatibus praesentium nostrum.</p>
31 |   </div>
32 |   <!-- <div class="fixed palered"></div>
33 | 
34 |   <div class="parent gunmetal">
35 |     <div class="box dodger">1</div>
36 |     <div class="box pantone">2</div>
37 |     <div class="box topaz">3</div>
38 |   </div> -->
39 | 
40 |   <!-- <div class="parent gunmetal">
41 |     <div class="child dodger"></div>
42 |     <div class="child pantone"></div>
43 |     <div class="child topaz"></div>
44 |     <div class="child absolute-centered teal"></div>
45 |   </div>
46 | 
47 |    -->
48 | </body>
49 | 
50 | </html>
51 | 


--------------------------------------------------------------------------------
/module-05/webinar/plan.txt:
--------------------------------------------------------------------------------
  1 | https://codepen.io/Zerk/pen/YrwyXd
  2 | 
  3 | Позиционирование
  4 | - Гибкий механизм расположения элементов.
  5 | - Не используется для создания сеток.
  6 | - Используется для создания:
  7 |   - декоративных элементов (мелкие иконки)
  8 |   - многослойных элементов (всплывающие окна, «висящие сверху» управляющие элементы).
  9 | 
 10 | Свойства позиционирования
 11 |   position /* режим позиционирования */
 12 | 
 13 |   /* координаты, по-разному работают в разных режимах позиционирования */
 14 |   top
 15 |   right
 16 |   bottom
 17 |   left
 18 | 
 19 |   z-index /* управление порядком слоёв */
 20 | 
 21 | Режимы позиционирования
 22 |   position: static; /* по умолчанию */
 23 |   position: relative; /* относительное */
 24 |   position: absolute; /* абсолютное */
 25 |   position: fixed; /* фиксированное */
 26 |   position: sticky; /* закреплённое */
 27 | 
 28 | Относительное позиционирование
 29 |   position: relative;
 30 | 
 31 |   Смещение элемента относительно своего положения.
 32 |   - Управление точкой отсчёта абсолютных элементов.
 33 |   - Участвует в «наслаивании».
 34 | 
 35 |   Смещение элемента
 36 |     /* смещение вправо-влево */
 37 |     right
 38 |     left
 39 | 
 40 |     /* смещение вверх-вниз */
 41 |     top
 42 |     bottom
 43 | 
 44 | Абсолютное позиционирование
 45 |   position: absolute;
 46 | 
 47 |   Элемент выпадает из потока.
 48 |     - Сжимается под содержимое.
 49 |     - Гибкая модель позиционирования.
 50 |     - Свойства задания координат ведут себя по-другому.
 51 |     - Участвует в «наслаивании».
 52 | 
 53 |   Положение по умолчанию
 54 |     - Если абсолютному элементу не задавать никаких координат,
 55 |         то он привязывается левым верхним углом к той точке,
 56 |         где был бы, если бы был нормальным.
 57 |     - Если эта точка смещается — он смещается вместе с ней.
 58 |     - Из этой точки его можно смещать внешними отступами.
 59 | 
 60 |   Координаты абсолютного элемента
 61 |     - Привязка к верхнему левому углу
 62 |     - Привязка к правому нижнему углу
 63 | 
 64 | 
 65 | 
 66 |   Изменение точки привязки
 67 |     - Если среди родителей абсолютного элемента есть тег с относительным
 68 |     позиционированием, то абсолютный привязывается к нему.
 69 |     - Если относительных родителей несколько, то выбирается ближайший.
 70 |     - А если родителей с относительным позиционирвоанием нет,
 71 |       то блок позиционируется отнсоительно body
 72 | 
 73 |   Относительные координаты %
 74 |     - относитльно окна
 75 |     - относительно родителя
 76 | 
 77 |   Центровка
 78 |     - Если знаем ширину и высоту то отрицательный маржин
 79 |     - Если нет то transform
 80 | 
 81 |   Относительные размеры
 82 |     - Привязка происходит не только для точки отсчёта координат,
 83 |       но и для относительных размеров.
 84 |     /* ширина и высота абсолютного равны половине ширины и высоты родителя */
 85 |     position: absolute;
 86 |     width: 50%;
 87 |     height: 50%;
 88 | 
 89 | 
 90 | Фиксированное позиционирование
 91 |   position: fixed;
 92 | 
 93 |   - Похоже на абсолютное позиционирование.
 94 |   - Отсчёт координат всегда привязан к окну браузера.
 95 |   - Элемент «прибивается» к точке экрана и не смещается даже при прокрутке.
 96 |   - Участвует в «наслаивании».
 97 | 
 98 | 
 99 | Управление порядком слоёв
100 |   z-index: 10;
101 | 
102 |   У кого больше индекс, тот и выше.
103 |     - Выше тот, кто дальше в коде, если индекса нет или он одинаковый.
104 |     - Индекс работает только для относительных, абсолютных и фиксированных.
105 | 
106 | 
107 | - Верстка выпадающего меню. (Геннадий)
108 | - Верстка модального окна. (Я)
109 | - Верстка слайдера. (Я)
110 | - Галлерея картинок 3x3 с нумерацией в углу над картинкой (css счетчик),
111 |   и текстом по центру картинки (может быть)
112 | 


--------------------------------------------------------------------------------
/module-06/practise/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/module-06/practise/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-06/practise/img/banner.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/banner.jpeg


--------------------------------------------------------------------------------
/module-06/practise/img/icons/features/icon-atom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/features/icon-atom.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/features/icon-bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/features/icon-bulb.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/features/icon-case.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/features/icon-case.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/features/icon-computer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/features/icon-computer.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/features/icon-download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/features/icon-download.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/features/icon-tools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/features/icon-tools.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/social/icon-facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/social/icon-facebook.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/social/icon-linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/social/icon-linkedin.png


--------------------------------------------------------------------------------
/module-06/practise/img/icons/social/icon-twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/icons/social/icon-twitter.png


--------------------------------------------------------------------------------
/module-06/practise/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/logo.png


--------------------------------------------------------------------------------
/module-06/practise/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/team-1.jpg


--------------------------------------------------------------------------------
/module-06/practise/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/team-2.jpg


--------------------------------------------------------------------------------
/module-06/practise/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/team-3.jpg


--------------------------------------------------------------------------------
/module-06/practise/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-06/practise/img/team-4.jpg


--------------------------------------------------------------------------------
/module-06/practise/materials.txt:
--------------------------------------------------------------------------------
1 | https://stories.jotform.com/how-to-use-css-animations-like-a-pro-dfacc1e97338
2 | 
3 | https://css-tricks.com/using-multi-step-animations-transitions/
4 | 


--------------------------------------------------------------------------------
/module-06/webinar/css/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | *,
  6 | *::before,
  7 | *::after {
  8 |   box-sizing: inherit;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: 'PT Sans', sans-serif;
 13 |   font-size: 16px;
 14 |   line-height: 1.5;
 15 | }
 16 | 
 17 | img {
 18 |   display: block;
 19 |   max-width: 100%;
 20 |   height: auto;
 21 | }
 22 | 
 23 | .about {
 24 |   width: 960px;
 25 |   margin: 0 auto;
 26 | }
 27 | 
 28 | .about-list {
 29 |   display: flex;
 30 |   flex-wrap: wrap;
 31 |   padding: 0;
 32 |   margin: 0;
 33 |   list-style: none;
 34 | }
 35 | 
 36 | .masthead {
 37 |   min-height: 100px;
 38 |   padding: 0 20px;
 39 |   display: flex;
 40 |   justify-content: space-between;
 41 |   align-items: center;
 42 | }
 43 | 
 44 | .logo {
 45 |   background-color: palegoldenrod;
 46 | }
 47 | 
 48 | .masthead ul {
 49 |   display: flex;
 50 |   flex-wrap: wrap;
 51 |   width: 320px;
 52 |   padding: 0;
 53 |   margin: 0;
 54 |   list-style: none;
 55 | }
 56 | 
 57 | .masthead li {
 58 |   padding: 10px 20px;
 59 |   background-color: palevioletred;
 60 | }
 61 | 
 62 | .masthead li:hover {
 63 |   background-color: #212121;
 64 |   color: #fff;
 65 | }
 66 | 
 67 | .about-item {
 68 |   flex-basis: 300px;
 69 |   padding: 10px;
 70 |   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
 71 | }
 72 | 
 73 | .about-item:not(:nth-child(3n)) {
 74 |   margin-right: 30px;
 75 | }
 76 | 
 77 | .about-item:not(:nth-last-child(-n + 3)) {
 78 |   margin-bottom: 30px;
 79 | }
 80 | 
 81 | .wrapper-1 {
 82 |   min-height: 100vh;
 83 |   display: flex;
 84 | }
 85 | 
 86 | .sidebar {
 87 |   background-color: teal;
 88 |   flex-basis: 250px;
 89 | }
 90 | 
 91 | .content {
 92 |   background-color: orange;
 93 |   flex-grow: 1;
 94 | }
 95 | 
 96 | .box {
 97 |   display: flex;
 98 |   height: 500px;
 99 |   width: 500px;
100 |   background-color: #212121;
101 | }
102 | 
103 | .inner {
104 |   margin: auto;
105 |   height: 150px;
106 |   width: 150px;
107 |   background-color: palegoldenrod;
108 | }
109 | 
110 | .wrapper {
111 |   min-height: 100vh;
112 |   display: flex;
113 |   flex-direction: column;
114 | }
115 | 
116 | header {
117 |   background-color: teal;
118 | }
119 | 
120 | main {
121 |   flex-grow: 1;
122 |   background-color: aqua;
123 | }
124 | 
125 | footer {
126 |   background-color: palevioletred;
127 | }
128 | 
129 | .flex-container {
130 |   width: 1000px;
131 |   margin: auto;
132 |   display: flex;
133 |   padding: 10px;
134 |   background-color: #212121;
135 | }
136 | 
137 | /* - Свойства flex-элемента:
138 |  width vs flex-basis,
139 |  align-self,
140 |  flex-grow,
141 |  flex-shrink, order.
142 | */
143 | 
144 | .flex-child {
145 |   /* flex-basis: 200px;
146 |   flex-grow: 1;
147 |   flex-shrink: 0; */
148 |   /* flex: 1 0 200px; */
149 |   flex-basis: 100px;
150 | 
151 |   height: 100px;
152 |   font-size: 40px;
153 |   color: #fff;
154 |   text-align: center;
155 |   line-height: 100px;
156 |   background-color: teal;
157 | }
158 | 
159 | .flex-child:nth-child(1) {
160 |   background-color: #214e34;
161 | }
162 | 
163 | .flex-child:nth-child(2) {
164 |   background-color: #ffb140;
165 | }
166 | 
167 | .flex-child:nth-child(3) {
168 |   background-color: #d1462f;
169 | }
170 | 
171 | .flex-child:nth-child(4) {
172 |   background-color: #197bbd;
173 | }
174 | 


--------------------------------------------------------------------------------
/module-06/webinar/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Webinar 20-03</title>
  9 |   <link rel="stylesheet" href="css/normlize.css">
 10 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
 11 |     rel="stylesheet">
 12 |   <link rel="stylesheet" href="css/styles.css">
 13 | </head>
 14 | 
 15 | <body>
 16 | 
 17 |   <header class="masthead">
 18 |     <div class="logo">LOGO</div>
 19 |     <ul>
 20 |       <li>home</li>
 21 |       <li>about</li>
 22 |       <li>team</li>
 23 |       <li>contact</li>
 24 |       <li>contact</li>
 25 |       <li>contact</li>
 26 |       <li>contact</li>
 27 |       <li>map</li>
 28 |       <li>work</li>
 29 |       <li>work</li>
 30 |       <li>work</li>
 31 |       <li>work</li>
 32 |       <li>work</li>
 33 |       <li>work</li>
 34 | 
 35 |     </ul>
 36 |   </header>
 37 | 
 38 |   <section class="about">
 39 |     <h2 class="about-title">About Us</h2>
 40 | 
 41 |     <ul class="about-list">
 42 |       <li class="about-item">
 43 |         <h3>Random title</h3>
 44 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 45 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 46 |       </li>
 47 |       <li class="about-item">
 48 |         <h3>Random title</h3>
 49 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 50 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 51 |       </li>
 52 |       <li class="about-item">
 53 |         <h3>Random title</h3>
 54 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 55 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 56 |       </li>
 57 |       <li class="about-item">
 58 |         <h3>Random title</h3>
 59 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 60 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 61 |       </li>
 62 |       <li class="about-item">
 63 |         <h3>Random title</h3>
 64 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 65 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 66 |       </li>
 67 |       <li class="about-item">
 68 |         <h3>Random title</h3>
 69 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 70 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 71 |       </li>
 72 |       <li class="about-item">
 73 |         <h3>Random title</h3>
 74 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 75 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 76 |       </li>
 77 |       <li class="about-item">
 78 |         <h3>Random title</h3>
 79 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 80 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 81 |       </li>
 82 |       <li class="about-item">
 83 |         <h3>Random title</h3>
 84 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor dolores distinctio
 85 |           libero debitis impedit dolorum. Error accusantium eveniet amet fugit?</p>
 86 |       </li>
 87 |     </ul>
 88 |   </section>
 89 | 
 90 |   <!-- <div class="wrapper-1">
 91 |     <div class="sidebar"></div>
 92 |     <div class="content"></div>
 93 |   </div> -->
 94 | 
 95 |   <!-- <div class="wrapper">
 96 |     <header>HEADER</header>
 97 |     <main>CONTENT</main>
 98 |     <footer>FOOTER</footer>
 99 |   </div> -->
100 |   <!-- <div class="flex-container">
101 |     <div class="flex-child">1</div>
102 |     <div class="flex-child">2</div>
103 |     <div class="flex-child">3</div>
104 |     <div class="flex-child">4</div>
105 |   </div> -->
106 | </body>
107 | 
108 | </html>
109 | 


--------------------------------------------------------------------------------
/module-06/webinar/plan.txt:
--------------------------------------------------------------------------------
 1 | http://css-live.ru/wp-content/uploads/2014/10/flexboxsheet-small__5.png
 2 | 
 3 | - Знакомство с Flexbox
 4 | - display: flex
 5 | - Понятие flex-контейнера и flex-элемента.
 6 | - Flex-оси и flex-direction.
 7 | - Выравнивание flex-элементов на оси, justify-content, align-items.
 8 | - Многострочные flex-контейнеры и align-content.
 9 | - Свойства flex-элемента: width vs flex-basis, align-self, flex-grow, flex-shrink, order.
10 | 
11 | use cases:
12 | - sticky footer
13 | - grid
14 | - center stuff
15 | - equal height columns
16 | - fixed sidebar + rest content
17 | - infinity
18 | 


--------------------------------------------------------------------------------
/module-07/practise/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/module-07/practise/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-07/practise/css/price-filter.css:
--------------------------------------------------------------------------------
 1 | .price-filter {
 2 |   width: 240px;
 3 |   margin: 50px auto;
 4 | }
 5 | 
 6 | .range-controls {
 7 |   position: relative;
 8 |   display: flex;
 9 |   align-items: center;
10 |   height: 80px;
11 |   margin-bottom: 15px;
12 |   padding: 0 20px;
13 |   background-color: #f1f1f1;
14 |   border-radius: 5px;
15 |   overflow: hidden;
16 | }
17 | 
18 | .range-controls .scale {
19 |   flex: 0 0 100%;
20 |   height: 3px;
21 |   background-color: #ccc;
22 | }
23 | 
24 | .range-controls .bar {
25 |   height: 3px;
26 |   background-color: palevioletred;
27 | }
28 | 
29 | .range-toggle {
30 |   display: inline-block;
31 |   position: absolute;
32 |   top: 50%;
33 |   transform: translatey(-50%);
34 |   width: 22px;
35 |   height: 22px;
36 |   border: 8px solid #ffffff;
37 |   background-color: #ababab;
38 |   border-radius: 50%;
39 |   cursor: pointer;
40 |   box-shadow: 0 2px 1px 0 #cfcfcf;
41 | }
42 | 
43 | .range-toggle-min {
44 |   left: 20px;
45 | }
46 | 
47 | .range-toggle-max {
48 |   left: 150px;
49 | }
50 | 
51 | .price-controls {
52 |   display: flex;
53 |   justify-content: space-between;
54 | }
55 | 
56 | .price-controls input {
57 |   display: inline-block;
58 |   width: 80px;
59 |   padding: 8px 10px;
60 |   margin-left: 10px;
61 |   border: none;
62 |   background-color: #f1f1f1;
63 | 
64 |   font-size: 16px;
65 |   font-family: Roboto, sans-serif;
66 |   font-weight: 400;
67 |   font-style: normal;
68 |   text-align: center;
69 |   color: #212121;
70 |   border-radius: 5px;
71 | }
72 | 
73 | .price-controls label {
74 |   display: inline-block;
75 |   vertical-align: top;
76 |   cursor: pointer;
77 | }
78 | 


--------------------------------------------------------------------------------
/module-07/practise/css/size-filter.css:
--------------------------------------------------------------------------------
 1 | .filter-form {
 2 |   width: 294px;
 3 |   padding: 0 16px;
 4 | }
 5 | 
 6 | .size-filter-title {
 7 |   color: #2a2a2a;
 8 |   font-size: 16px;
 9 |   font-weight: 600;
10 |   line-height: 38px;
11 |   text-transform: uppercase;
12 |   border-bottom: 1px solid #2a2a2a;
13 | }
14 | 
15 | .size-filter-list {
16 |   list-style: none;
17 |   padding: 0;
18 |   margin: 0;
19 | }
20 | 
21 | .size-filter-label {
22 |   display: flex;
23 |   align-items: center;
24 |   cursor: pointer;
25 | }
26 | 
27 | .size-filter-label::before {
28 |   display: inline-block;
29 |   content: '';
30 |   width: 14px;
31 |   height: 14px;
32 |   margin-right: 12px;
33 |   background-image: url('../img/icon-square.svg');
34 |   background-repeat: no-repeat;
35 |   background-size: contain;
36 |   background-position: center;
37 | }
38 | 
39 | .size-filter-item-size {
40 |   font-size: 13px;
41 |   font-weight: 400;
42 |   line-height: 34px;
43 |   color: #2a2a2a;
44 |   text-transform: uppercase;
45 | }
46 | 
47 | .size-filter-item-count {
48 |   display: inline-block;
49 |   width: 23px;
50 |   height: 23px;
51 |   margin-left: auto;
52 |   background-color: #2a2a2a;
53 |   border-radius: 50%;
54 |   color: #ffffff;
55 |   font-size: 13px;
56 |   font-weight: 500;
57 |   text-align: center;
58 |   line-height: 23px;
59 | }
60 | 
61 | .size-filter-check:checked + .size-filter-label {
62 |   padding-left: 12px;
63 | }
64 | 
65 | .size-filter-check:checked + .size-filter-label::before {
66 |   background-image: url('../img/icon-check.svg');
67 | }
68 | 
69 | .size-filter-check:checked + .size-filter-label .size-filter-item-size {
70 |   color: #d58e32;
71 | }
72 | 
73 | .size-filter-check:checked + .size-filter-label .size-filter-item-count {
74 |   background-color: #d58e32;
75 | }
76 | 


--------------------------------------------------------------------------------
/module-07/practise/css/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 |   box-sizing: inherit;
 9 | }
10 | 
11 | body {
12 |   font-family: 'Raleway', 'Arial', sans-serif;
13 |   color: #6c7279;
14 |   font-size: 14px;
15 |   line-height: 21px;
16 | }
17 | 
18 | img {
19 |   display: block;
20 |   max-width: 100%;
21 |   height: auto;
22 | }
23 | 
24 | /* visually-hidden helper */
25 | .visually-hidden:not(:focus):not(:active),
26 | input[type='checkbox'].visually-hidden,
27 | input[type='radio'].visually-hidden {
28 |   position: absolute;
29 |   width: 1px;
30 |   height: 1px;
31 |   margin: -1px;
32 |   border: 0;
33 |   padding: 0;
34 |   white-space: nowrap;
35 |   clip-path: inset(100%);
36 |   clip: rect(0 0 0 0);
37 |   overflow: hidden;
38 | }
39 | 


--------------------------------------------------------------------------------
/module-07/practise/img/icon-check.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z" fill="#d58e32"/></svg>


--------------------------------------------------------------------------------
/module-07/practise/img/icon-square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z" fill="#2a2a2a"/></svg>


--------------------------------------------------------------------------------
/module-07/practise/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Practise</title>
 7 |   <link rel="stylesheet" href="css/normalize.css">
 8 |   <link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
 9 |   <link rel="stylesheet" href="css/styles.css">
10 |   <link rel="stylesheet" href="css/price-filter.css">
11 |   <link rel="stylesheet" href="css/size-filter.css">
12 | </head>
13 | 
14 | <body>
15 |   <!-- FILTER FORM -->
16 |   <form class="filter-form">
17 |     <section class="size-filter">
18 |       <h2 class="size-filter-title">Filter By Size</h2>
19 | 
20 |       <ul class="size-filter-list">
21 |         <li class="size-filter-item">
22 |           <input class="size-filter-check visually-hidden" type="checkbox" name="item_size"
23 |             value="small" id="size-s">
24 |           <label for="size-s" class="size-filter-label">
25 |             <span class="size-filter-item-size">s</span>
26 |             <span class="size-filter-item-count">3</span>
27 |           </label>
28 |         </li>
29 |         <li class="size-filter-item">
30 |           <input class="size-filter-check visually-hidden" type="checkbox" name="item_size"
31 |             value="medium" id="size-m">
32 |           <label for="size-m" class="size-filter-label">
33 |             <span class="size-filter-item-size">m</span>
34 |             <span class="size-filter-item-count">4</span>
35 |           </label>
36 |         </li>
37 |         <li class="size-filter-item">
38 |           <input class="size-filter-check visually-hidden" type="checkbox" name="item_size"
39 |             value="large" id="size-l">
40 |           <label for="size-l" class="size-filter-label">
41 |             <span class="size-filter-item-size">l</span>
42 |             <span class="size-filter-item-count">5</span>
43 |           </label>
44 |         </li>
45 |         <li class="size-filter-item">
46 |           <input class="size-filter-check visually-hidden" type="checkbox" name="item_size"
47 |             value="x-large" id="size-xl">
48 |           <label for="size-xl" class="size-filter-label">
49 |             <span class="size-filter-item-size">xl</span>
50 |             <span class="size-filter-item-count">6</span>
51 |           </label>
52 |         </li>
53 |         <li class="size-filter-item">
54 |           <input class="size-filter-check visually-hidden" type="checkbox" name="item_size"
55 |             value="xx-large" id="size-xx">
56 |           <label for="size-xx" class="size-filter-label">
57 |             <span class="size-filter-item-size">xx</span>
58 |             <span class="size-filter-item-count">5</span>
59 |           </label>
60 |         </li>
61 |       </ul>
62 |     </section>
63 |   </form>
64 | 
65 |   <!-- PRICE FILTER -->
66 |   <div class="price-filter">
67 |     <div class="range-controls">
68 |       <div class="scale">
69 |         <div class="bar" style="width: 70%;"></div>
70 |       </div>
71 | 
72 |       <div class="range-toggle range-toggle-min"></div>
73 |       <div class="range-toggle range-toggle-max"></div>
74 |     </div>
75 | 
76 |     <div class="price-controls">
77 |       <label class="min-price">
78 |         от
79 |         <input type="text" value="1000" name="min_price">
80 |       </label>
81 | 
82 |       <label class="max-price">
83 |         до
84 |         <input type="text" value="10 000" name="max_price">
85 |       </label>
86 |     </div>
87 |   </div>
88 | </body>
89 | 
90 | </html>
91 | 


--------------------------------------------------------------------------------
/module-07/practise/mockup/Products Details Page_3_Grid.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-07/practise/mockup/Products Details Page_3_Grid.psd


--------------------------------------------------------------------------------
/module-07/webinar/css/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | *,
  6 | *::before,
  7 | *::after {
  8 |   box-sizing: inherit;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: 'PT Sans', sans-serif;
 13 |   font-size: 16px;
 14 |   line-height: 1.5;
 15 | }
 16 | 
 17 | img {
 18 |   display: block;
 19 |   max-width: 100%;
 20 |   height: auto;
 21 | }
 22 | 
 23 | .profile-form {
 24 |   display: flex;
 25 |   flex-direction: column;
 26 |   width: 600px;
 27 |   margin: 100px auto;
 28 |   box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
 29 |   padding: 20px;
 30 | }
 31 | 
 32 | .profile-form ul {
 33 |   list-style: none;
 34 | }
 35 | 
 36 | .profile-form input {
 37 |   border: 0;
 38 |   border-bottom: 2px solid #212121;
 39 |   margin-bottom: 15px;
 40 | }
 41 | 
 42 | .profile-form input::placeholder {
 43 |   color: #424242;
 44 | }
 45 | 
 46 | .profile-form input:focus {
 47 |   outline: 0;
 48 |   padding-bottom: 5px;
 49 | }
 50 | 
 51 | .screen-size-list input:checked + label {
 52 |   background-color: red;
 53 | }
 54 | 
 55 | .profile-form input[type='email']:valid,
 56 | .profile-form input[type='password']:valid {
 57 |   border-color: green;
 58 | }
 59 | 
 60 | .profile-form input[type='email']:invalid,
 61 | .profile-form input[type='password']:invalid {
 62 |   border-color: red;
 63 | }
 64 | 
 65 | .profile-form button {
 66 |   border: none;
 67 |   padding: 0;
 68 |   cursor: pointer;
 69 |   margin-bottom: 10px;
 70 |   background-color: #212121;
 71 |   color: #fff;
 72 |   padding: 5px 10px;
 73 | }
 74 | 
 75 | textarea {
 76 |   resize: none;
 77 | }
 78 | 
 79 | /* CUSTOM CHECKBOXES */
 80 | .custom-list label {
 81 |   display: flex;
 82 |   align-items: center;
 83 |   cursor: pointer;
 84 | }
 85 | 
 86 | .custom-list label::before {
 87 |   display: inline-block;
 88 |   content: '';
 89 |   width: 15px;
 90 |   height: 15px;
 91 |   border: 2px solid #212121;
 92 |   margin-right: 10px;
 93 | }
 94 | 
 95 | .custom-list input[type='checkbox']:checked + label::before {
 96 |   /* background-color: orange; */
 97 |   background-image: url('https://image.flaticon.com/icons/svg/128/128384.svg');
 98 |   background-repeat: no-repeat;
 99 |   background-size: contain;
100 |   background-position: center;
101 | }
102 | 
103 | /* visually-hidden helper */
104 | .visually-hidden:not(:focus):not(:active),
105 | input[type='checkbox'].visually-hidden,
106 | input[type='radio'].visually-hidden {
107 |   position: absolute;
108 |   width: 1px;
109 |   height: 1px;
110 |   margin: -1px;
111 |   border: 0;
112 |   padding: 0;
113 |   white-space: nowrap;
114 |   clip-path: inset(100%);
115 |   clip: rect(0 0 0 0);
116 |   overflow: hidden;
117 | }
118 | 


--------------------------------------------------------------------------------
/module-07/webinar/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Webinar 27-03</title>
  9 |   <link rel="stylesheet" href="css/normlize.css">
 10 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
 11 |     rel="stylesheet">
 12 |   <link rel="stylesheet" href="css/styles.css">
 13 | </head>
 14 | 
 15 | <body>
 16 |   <form class="profile-form" method="get" action="#">
 17 |     <section class="section custom">
 18 |       <h2>Custom checkboxes</h2>
 19 | 
 20 |       <ul class="custom-list">
 21 |         <li>
 22 |           <input class="visually-hidden" type="checkbox" name="custom_check" id="custom_check_1">
 23 |           <label for="custom_check_1">custom check 1</label>
 24 |         </li>
 25 |         <li>
 26 |           <input class="visually-hidden" type="checkbox" name="custom_check" id="custom_check_2">
 27 |           <label for="custom_check_2">custom check 2</label>
 28 |         </li>
 29 |         <li>
 30 |           <input class="visually-hidden" type="checkbox" name="custom_check" id="custom_check_3">
 31 |           <label for="custom_check_3">custom check 3</label>
 32 |         </li>
 33 |       </ul>
 34 |     </section>
 35 | 
 36 |     <section class="section">
 37 |       <h2>Personal data</h2>
 38 |       <ul>
 39 |         <li>
 40 |           <input type="email" placeholder="Email*" autofocus name="user_email" required autocomplete="off">
 41 |         </li>
 42 |         <li>
 43 |           <input type="password" placeholder="Password*" name="user_pass" required>
 44 |         </li>
 45 |         <li>
 46 |           <textarea name="description" placeholder="Message..." cols="30" rows="10"></textarea>
 47 |         </li>
 48 |       </ul>
 49 |     </section>
 50 | 
 51 |     <section class="section">
 52 |       <h2>Screen sizes</h2>
 53 |       <ul class="screen-size-list">
 54 |         <li>
 55 |           <input type="checkbox" name="screen_size" value="13" id="screen_size_13">
 56 |           <label for="screen_size_13">13"</label>
 57 |         </li>
 58 |         <li>
 59 |           <input type="checkbox" name="screen_size" value="15" id="screen_size_15">
 60 |           <label for="screen_size_15">15"</label>
 61 |         </li>
 62 |         <li>
 63 |           <input type="checkbox" name="screen_size" value="17" id="screen_size_17">
 64 |           <label for="screen_size_17">17"</label>
 65 |         </li>
 66 |       </ul>
 67 |     </section>
 68 | 
 69 | 
 70 |     <section class="section">
 71 |       <h2>Profile theme</h2>
 72 |       <ul class="theme-list">
 73 |         <li>
 74 |           <label>
 75 |             <input type="radio" name="theme_type" value="default">default</label>
 76 |         </li>
 77 |         <li>
 78 |           <label>
 79 |             <input type="radio" name="theme_type" value="dark">dark</label>
 80 |         </li>
 81 |         <li>
 82 |           <label>
 83 |             <input type="radio" name="theme_type" value="light">light</label>
 84 |         </li>
 85 |       </ul>
 86 |     </section>
 87 | 
 88 | 
 89 |     <section class="section">
 90 |       <h2>City</h2>
 91 |       <select name="city">
 92 |         <option value="kiev">Киев</option>
 93 |         <option value="kahrkov">Харьков</option>
 94 |         <option value="handuras">Гандурас</option>
 95 |       </select>
 96 |     </section>
 97 | 
 98 | 
 99 |     <button type="submit">Sign Up</button>
100 |     <button type="reset">Clear Form</button>
101 | 
102 |   </form>
103 | 
104 | </body>
105 | 
106 | </html>
107 | 


--------------------------------------------------------------------------------
/module-07/webinar/plan.txt:
--------------------------------------------------------------------------------
 1 | Занятие #1:
 2 | - Формы, валидная и семантичная верстка форм.
 3 | - input всевозможных типов, от text до range.
 4 | - label
 5 | - placeholder и его стилизация.
 6 | - Важность атрибута name.
 7 | - autofocus
 8 | - required
 9 | - checkbox и radio
10 | - fieldset и legend
11 | - button:submit и button:reset
12 | - select, optgroup, datalist
13 | 
14 | https://www.artlebedev.ru/technogrette/etc/forms/
15 | https://developers.google.com/web/fundamentals/design-and-ux/input/forms/
16 | https://code.tutsplus.com/ru/tutorials/the-30-css-selectors-you-must-memorize--net-16048
17 | 
18 | Занятие #2:
19 | - Подключение и работа с локальными шрифтами.
20 | - Использование одного локального шрифта с разным начертанием или жирностью.
21 | - Абсолютные и относительные единицы CSS.
22 | 


--------------------------------------------------------------------------------
/module-08/practise/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/module-08/practise/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-08/practise/css/media.css:
--------------------------------------------------------------------------------
  1 | @media (max-width: 599px) {
  2 |   .page-header {
  3 |     margin-bottom: 70px;
  4 |   }
  5 | 
  6 |   .page-nav {
  7 |     padding: 20px 0;
  8 |   }
  9 | 
 10 |   .site-logo {
 11 |     margin-bottom: 20px;
 12 |   }
 13 | 
 14 |   .site-logo img {
 15 |     margin: 0 auto;
 16 |   }
 17 | 
 18 |   .site-navigation a {
 19 |     padding: 5px 0;
 20 |     font-size: 24px;
 21 |     line-height: 1;
 22 |     text-align: center;
 23 |   }
 24 | 
 25 |   .banner {
 26 |     display: none;
 27 |   }
 28 | 
 29 |   .features-list-item:not(:last-child) {
 30 |     margin-bottom: 40px;
 31 |   }
 32 | 
 33 |   .team-list-item {
 34 |     margin-left: auto;
 35 |     margin-right: auto;
 36 |   }
 37 | 
 38 |   .team-list-item:not(:last-child) {
 39 |     margin-bottom: 40px;
 40 |   }
 41 | }
 42 | 
 43 | @media (min-width: 600px) {
 44 |   .container {
 45 |     width: 600px;
 46 |   }
 47 | 
 48 |   .page-nav {
 49 |     display: flex;
 50 |     flex-direction: column;
 51 |     justify-content: center;
 52 |     align-items: center;
 53 |   }
 54 | 
 55 |   .site-navigation {
 56 |     display: flex;
 57 |     justify-content: space-between;
 58 |   }
 59 | 
 60 |   .banner {
 61 |     display: flex;
 62 |     justify-content: center;
 63 |     align-items: center;
 64 |     min-height: 200px;
 65 |     margin-bottom: 120px;
 66 | 
 67 |     background-image: linear-gradient(
 68 |         to right,
 69 |         rgba(239, 59, 54, 0.3),
 70 |         rgba(255, 255, 255, 0.3)
 71 |       ),
 72 |       linear-gradient(to top, rgba(0, 210, 255, 0.3), rgba(145, 140, 170, 0.3)),
 73 |       url('../img/banner.jpeg');
 74 |     background-repeat: no-repeat;
 75 |     background-size: cover;
 76 |     background-position: center;
 77 |   }
 78 | 
 79 |   .slider {
 80 |     height: 150px;
 81 |     background-color: #fff;
 82 |   }
 83 | 
 84 |   .features-list {
 85 |     display: flex;
 86 |     flex-wrap: wrap;
 87 |     justify-content: space-between;
 88 |   }
 89 | 
 90 |   .features-list-item {
 91 |     flex: 0 0 270px;
 92 |   }
 93 | 
 94 |   .team-list {
 95 |     display: flex;
 96 |     justify-content: space-between;
 97 |     flex-wrap: wrap;
 98 |   }
 99 | 
100 |   .team-list-item {
101 |     flex: 0 0 270px;
102 |   }
103 | }
104 | 
105 | @media (min-width: 600px) and (max-width: 1169px) {
106 |   .site-logo {
107 |     margin-bottom: 30px;
108 |   }
109 | 
110 |   .site-navigation {
111 |     width: 100%;
112 |   }
113 | 
114 |   .features-list-item:not(:nth-last-child(-n + 2)),
115 |   .team-list-item:not(:nth-last-child(-n + 2)) {
116 |     margin-bottom: 40px;
117 |   }
118 | }
119 | 
120 | @media (min-width: 1170px) {
121 |   .container {
122 |     width: 1170px;
123 |   }
124 | 
125 |   .page-nav {
126 |     flex-direction: row;
127 |     justify-content: space-between;
128 |   }
129 | 
130 |   .site-navigation {
131 |     flex: 0 0 600px;
132 |   }
133 | 
134 |   .banner {
135 |     min-height: 400px;
136 |   }
137 | 
138 |   .features-list-item {
139 |     flex: 0 0 370px;
140 |     margin-bottom: 72px;
141 |     padding: 0 38px;
142 |   }
143 | 
144 |   .features-list-item:nth-last-child(-n + 3) {
145 |     margin-bottom: 0;
146 |   }
147 | }
148 | 


--------------------------------------------------------------------------------
/module-08/practise/img/banner.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/banner.jpeg


--------------------------------------------------------------------------------
/module-08/practise/img/icons/features/icon-atom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/features/icon-atom.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/features/icon-bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/features/icon-bulb.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/features/icon-case.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/features/icon-case.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/features/icon-computer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/features/icon-computer.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/features/icon-download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/features/icon-download.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/features/icon-tools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/features/icon-tools.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/social/icon-facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/social/icon-facebook.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/social/icon-linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/social/icon-linkedin.png


--------------------------------------------------------------------------------
/module-08/practise/img/icons/social/icon-twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/icons/social/icon-twitter.png


--------------------------------------------------------------------------------
/module-08/practise/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/logo.png


--------------------------------------------------------------------------------
/module-08/practise/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/team-1.jpg


--------------------------------------------------------------------------------
/module-08/practise/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/team-2.jpg


--------------------------------------------------------------------------------
/module-08/practise/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/team-3.jpg


--------------------------------------------------------------------------------
/module-08/practise/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/practise/img/team-4.jpg


--------------------------------------------------------------------------------
/module-08/webinar/css/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | *,
  6 | *::before,
  7 | *::after {
  8 |   box-sizing: inherit;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: 'PT Sans', sans-serif;
 13 |   font-size: 16px;
 14 |   line-height: 1.5;
 15 | }
 16 | 
 17 | img {
 18 |   display: block;
 19 |   max-width: 100%;
 20 |   height: auto;
 21 | }
 22 | 
 23 | .container {
 24 |   width: 320px;
 25 |   padding: 0 10px;
 26 |   margin: auto;
 27 | }
 28 | 
 29 | .list {
 30 |   /* margin: -10px; */
 31 |   padding: 0;
 32 |   list-style: none;
 33 | }
 34 | 
 35 | .list-item {
 36 |   /* margin: 10px; */
 37 |   width: 300px;
 38 |   padding: 5px;
 39 |   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
 40 |   color: #212121;
 41 | }
 42 | 
 43 | .section .title {
 44 |   font-size: 40px;
 45 |   color: #212121;
 46 | }
 47 | 
 48 | /* MEDIA */
 49 | 
 50 | @media (max-width: 767px) {
 51 |   .list-item:not(:last-child) {
 52 |     margin-bottom: 20px;
 53 |   }
 54 | }
 55 | 
 56 | @media screen and (min-width: 768px) {
 57 |   .container {
 58 |     width: 680px;
 59 |   }
 60 | 
 61 |   .list {
 62 |     display: flex;
 63 |     flex-wrap: wrap;
 64 |     justify-content: space-between;
 65 |   }
 66 | 
 67 |   .list-item {
 68 |     width: 320px;
 69 |   }
 70 | }
 71 | 
 72 | @media (min-width: 768px) and (max-width: 1199px) {
 73 |   .list-item:not(:nth-last-child(-n + 2)) {
 74 |     margin-bottom: 20px;
 75 |   }
 76 | }
 77 | 
 78 | @media screen and (min-width: 1200px) {
 79 |   .container {
 80 |     width: 1200px;
 81 |   }
 82 | 
 83 |   .list-item {
 84 |     width: 280px;
 85 |   }
 86 | 
 87 |   .list-item:not(:nth-last-child(-n + 4)) {
 88 |     margin-bottom: 20px;
 89 |   }
 90 | }
 91 | 
 92 | /* visually-hidden helper */
 93 | .visually-hidden:not(:focus):not(:active),
 94 | input[type='checkbox'].visually-hidden,
 95 | input[type='radio'].visually-hidden {
 96 |   position: absolute;
 97 |   width: 1px;
 98 |   height: 1px;
 99 |   margin: -1px;
100 |   border: 0;
101 |   padding: 0;
102 |   white-space: nowrap;
103 |   clip-path: inset(100%);
104 |   clip: rect(0 0 0 0);
105 |   overflow: hidden;
106 | }
107 | 


--------------------------------------------------------------------------------
/module-08/webinar/img/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/webinar/img/image-1.jpg


--------------------------------------------------------------------------------
/module-08/webinar/img/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/webinar/img/image-2.jpg


--------------------------------------------------------------------------------
/module-08/webinar/img/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/webinar/img/image-3.jpg


--------------------------------------------------------------------------------
/module-08/webinar/img/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-08/webinar/img/image-4.jpg


--------------------------------------------------------------------------------
/module-08/webinar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <link rel="stylesheet" href="css/normlize.css">
 9 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic"
10 |     rel="stylesheet">
11 |   <link rel="stylesheet" href="css/styles.css">
12 |   <title>Webinar 03-04</title>
13 | </head>
14 | 
15 | <body>
16 |   <section class="section container">
17 |     <h2 class="title">Cute animals</h2>
18 | 
19 |     <ul class="list">
20 |       <li class="list-item">
21 |         <img src="img/image-1.jpg" width="320" height="213" alt="cute animal">
22 |         <h3>Article 1</h3>
23 |         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi similique,
24 |           quia ipsum distinctio quod cumque unde odio illum! In ipsa sint facilis
25 |           veritatis fugiat fugit deleniti consequuntur natus optio mollitia.</p>
26 |       </li>
27 |       <li class="list-item">
28 |         <img src="img/image-2.jpg" width="320" height="213" alt="cute animal">
29 |         <h3>Article 2</h3>
30 |         <p>Aut ad laboriosam repellendus assumenda repudiandae. Velit ut ab esse quisquam
31 |           ipsa necessitatibus fugiat doloribus corrupti laboriosam, sed autem culpa
32 |           repellendus omnis et, nihil dignissimos laborum sit quos iste dolores!</p>
33 |       </li>
34 |       <li class="list-item">
35 |         <img src="img/image-2.jpg" width="320" height="213" alt="cute animal">
36 |         <h3>Article 2</h3>
37 |         <p>Aut ad laboriosam repellendus assumenda repudiandae. Velit ut ab esse quisquam
38 |           ipsa necessitatibus fugiat doloribus corrupti laboriosam, sed autem culpa
39 |           repellendus omnis et, nihil dignissimos laborum sit quos iste dolores!</p>
40 |       </li>
41 |       <li class="list-item">
42 |         <img src="img/image-2.jpg" width="320" height="213" alt="cute animal">
43 |         <h3>Article 2</h3>
44 |         <p>Aut ad laboriosam repellendus assumenda repudiandae. Velit ut ab esse quisquam
45 |           ipsa necessitatibus fugiat doloribus corrupti laboriosam, sed autem culpa
46 |           repellendus omnis et, nihil dignissimos laborum sit quos iste dolores!</p>
47 |       </li>
48 |       <li class="list-item">
49 |         <img src="img/image-2.jpg" width="320" height="213" alt="cute animal">
50 |         <h3>Article 2</h3>
51 |         <p>Aut ad laboriosam repellendus assumenda repudiandae. Velit ut ab esse quisquam
52 |           ipsa necessitatibus fugiat doloribus corrupti laboriosam, sed autem culpa
53 |           repellendus omnis et, nihil dignissimos laborum sit quos iste dolores!</p>
54 |       </li>
55 |       <li class="list-item">
56 |         <img src="img/image-2.jpg" width="320" height="213" alt="cute animal">
57 |         <h3>Article 2</h3>
58 |         <p>Aut ad laboriosam repellendus assumenda repudiandae. Velit ut ab esse quisquam
59 |           ipsa necessitatibus fugiat doloribus corrupti laboriosam, sed autem culpa
60 |           repellendus omnis et, nihil dignissimos laborum sit quos iste dolores!</p>
61 |       </li>
62 |       <li class="list-item">
63 |         <img src="img/image-3.jpg" width="320" height="213" alt="cute animal">
64 |         <h3>Article 3</h3>
65 |         <p>Quibusdam nisi obcaecati natus corporis deserunt voluptas dolorem maxime
66 |           sunt sed corrupti. Ratione iste corporis laborum tempora nostrum, repellendus
67 |           quo, et nemo molestiae hic enim eaque ipsam consequuntur. Eos, tenetur?</p>
68 |       </li>
69 |       <li class="list-item">
70 |         <img src="img/image-4.jpg" width="320" height="213" alt="cute animal">
71 |         <h3>Article 4</h3>
72 |         <p>Molestiae ducimus eaque perspiciatis in explicabo et ab alias ea iusto doloremque?
73 |           Perspiciatis est ipsa, vel nobis illum tenetur! Repellendus doloremque
74 |           velit excepturi. Inventore labore in cumque quisquam iste nisi.</p>
75 |       </li>
76 |     </ul>
77 |   </section>
78 | </body>
79 | 
80 | </html>
81 | 


--------------------------------------------------------------------------------
/module-08/webinar/todo.txt:
--------------------------------------------------------------------------------
 1 | - Chrome DevTools для работы с мобильной версткой.
 2 | 
 3 | - viewport meta tag.
 4 |     https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works
 5 |     https://developer.mozilla.org/ru/docs/Mozilla/Mobile/Viewport_meta_tag
 6 | 
 7 | - сеточный вьюпорт и визуальный вьюпорт
 8 |   https://monosnap.com/file/Gdqfeei7GIbuZ2uAmR6kjCP64cNJAf
 9 |   медиа работают на сеточный, нам надо на визуальный,
10 |   для этого
11 |   viewport width(сеточный)=device-width(визуальный)
12 |   initial-scale=1 тоже самое что выше... для других браузеров
13 | 
14 |   https://www.w3.org/TR/css-device-adapt-1/#at-ruledef-viewport
15 |     @viewport {
16 |       width: device-width;
17 |       zoom: 1.0
18 |     }
19 | 
20 | - Медиаправила
21 |   https://css-tricks.com/logic-in-media-queries/
22 |   https://developer.mozilla.org/en-US/docs/Web/CSS/@media
23 | 
24 | - Философия отзывчивой и адаптивной верстки.
25 |   https://codepen.io/Zerk/pen/Ovoyoo?editors=0110
26 |   https://codepen.io/Zerk/pen/xYYjdz
27 | 
28 | - mobile-first CSS
29 |   тесты на реальных девайсах
30 |   оптимизация веса, загрузка, производительность
31 |   верстка
32 |   прячем контент
33 |   разное оформление(на мобильном все больше)
34 |   разное положение элементов интерфейса
35 | 
36 | - Адаптивная сетка
37 | 
38 | 


--------------------------------------------------------------------------------
/module-10/practise/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/module-10/practise/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-10/practise/img/banner.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/banner.jpeg


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-atom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-atom.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-atom@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-atom@2x.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-bulb.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-bulb@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-bulb@2x.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-case.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-case.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-case@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-case@2x.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-computer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-computer.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-computer@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-computer@2x.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-download.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-download@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-download@2x.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-tools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-tools.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/features/icon-tools@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/icons/features/icon-tools@2x.png


--------------------------------------------------------------------------------
/module-10/practise/img/icons/social/sprite.svg:
--------------------------------------------------------------------------------
 1 | <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |   <defs>
 3 |     <symbol id="icon-facebook" viewBox="0 0 14 32">
 4 |       <title>icon-facebook</title>
 5 |       <path d="M14.222 10.363h-4.843v-3.323c0-1.246 0.789-1.538 1.346-1.538s3.419 0 3.419 0v-5.483l-4.708-0.020c-5.225 0-6.414 4.089-6.414 6.708v3.655h-3.022v5.65h3.022c0 7.25 0 15.988 0 15.988h6.357c0 0 0-8.823 0-15.988h4.288l0.555-5.65z"></path>
 6 |     </symbol>
 7 | 
 8 |     <symbol id="icon-linkedin" viewBox="0 0 32 32">
 9 |       <title>icon-linkedin</title>
10 |       <path d="M29.634 32h-27.27c-1.306 0-2.364-1.028-2.364-2.292v-27.416c0-1.266 1.058-2.292 2.364-2.292h27.27c1.308 0 2.366 1.026 2.366 2.292v27.416c0 1.264-1.058 2.292-2.366 2.292zM4.866 26.786h4.834v-14.448h-4.834v14.448zM7.314 5.372c-1.652 0-2.734 1.078-2.734 2.496 0 1.388 1.050 2.496 2.672 2.496h0.032c1.684 0 2.734-1.108 2.734-2.496-0.032-1.418-1.050-2.496-2.704-2.496zM27.128 18.502c0-4.438-2.384-6.504-5.564-6.504-2.566 0-3.714 1.402-4.356 2.386v-2.046h-4.834c0.064 1.354 0 14.448 0 14.448h4.834v-8.068c0-0.432 0.030-0.864 0.158-1.172 0.35-0.864 1.146-1.756 2.48-1.756 1.75 0 2.448 1.324 2.448 3.266v7.73h4.834v-8.284zM17.176 14.434c0.010-0.018 0.022-0.034 0.032-0.050v0.050h-0.032z"></path>
11 |     </symbol>
12 | 
13 |     <symbol id="icon-twitter" viewBox="0 0 46 32">
14 |       <title>icon-twitter</title>
15 |       <path d="M36.567 5.218c-0.030-0.016-0.057-0.048-0.087-0.075-1.71-1.511-3.719-2.233-6.027-2.146l-0.071-0.155c0.014-0.014 0.027-0.014 0.041-0.014 2.096-0.455 3.335-0.921 3.705-1.429 0.13-0.409-0.025-0.635-0.482-0.693-1.056 0.128-2.025 0.341-2.894 0.665 1.097-0.665 1.525-1.129 1.282-1.371-1.083 0.027-2.251 0.553-3.477 1.584 0.455-0.736 0.626-1.131 0.512-1.202-0.583 0.382-1.097 0.793-1.538 1.23-0.928 0.976-1.669 1.879-2.238 2.702l-0.027 0.069c-1.467 2.247-2.494 4.507-3.109 6.814l-0.226 0.171-0.043 0.039c-0.882-1.045-1.938-1.92-3.205-2.631-1.497-0.917-3.25-1.792-5.273-2.64-2.21-1.074-4.448-1.966-6.713-2.656-0.014 2.389 1.225 4.295 3.691 5.68v0.043c-0.869-0.016-1.71 0.112-2.523 0.354 0.158 2.217 1.824 3.744 4.987 4.592l-0.014 0.041c-1.239-0.069-2.265 0.341-3.063 1.189 1.040 1.922 2.878 2.841 5.543 2.77-0.528 0.254-0.939 0.535-1.211 0.848-0.485 0.48-0.642 1.049-0.485 1.696 0.569 0.976 1.595 1.426 3.106 1.358v0l0.087 0.098c-0.016 0.014-0.030 0.027-0.043 0.041-2.608 2.546-5.758 3.689-9.449 3.451l-0.057 0.027c-2.249-0.016-4.658-1.031-7.266-3.067 2.622 3.561 6.098 6.133 10.402 7.746 4.93 1.541 9.863 1.653 14.777 0.336h0.087c4.773-1.301 8.821-3.97 12.153-8.011 1.541-2.121 2.51-4.139 2.894-6.078 2.494 0.085 4.29-0.594 5.401-2.034l-0.027-0.043c-0.827 0.281-2.453 0.199-4.862-0.267v-0.256c0-0.014 0-0.014 0.016 0 2.638-0.283 4.19-1.086 4.688-2.418-1.838 0.681-3.648 0.693-5.445 0.059-0.327-2.347-1.495-4.482-3.518-6.416z"></path>
16 |     </symbol>
17 |   </defs>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/module-10/practise/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/logo.png


--------------------------------------------------------------------------------
/module-10/practise/img/logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/logo@2x.png


--------------------------------------------------------------------------------
/module-10/practise/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-1.jpg


--------------------------------------------------------------------------------
/module-10/practise/img/team-1@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-1@2x.jpg


--------------------------------------------------------------------------------
/module-10/practise/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-2.jpg


--------------------------------------------------------------------------------
/module-10/practise/img/team-2@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-2@2x.jpg


--------------------------------------------------------------------------------
/module-10/practise/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-3.jpg


--------------------------------------------------------------------------------
/module-10/practise/img/team-3@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-3@2x.jpg


--------------------------------------------------------------------------------
/module-10/practise/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-4.jpg


--------------------------------------------------------------------------------
/module-10/practise/img/team-4@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/practise/img/team-4@2x.jpg


--------------------------------------------------------------------------------
/module-10/webinar/css/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 |   box-sizing: inherit;
 9 | }
10 | 
11 | body {
12 |   font-family: 'PT Sans', sans-serif;
13 | }
14 | 
15 | img {
16 |   display: block;
17 |   max-width: 100%;
18 |   height: auto;
19 | }
20 | 
21 | .visually-hidden:not(:focus):not(:active),
22 | input[type='checkbox'].visually-hidden,
23 | input[type='radio'].visually-hidden {
24 |   position: absolute;
25 |   width: 1px;
26 |   height: 1px;
27 |   margin: -1px;
28 |   border: 0;
29 |   padding: 0;
30 |   white-space: nowrap;
31 |   clip-path: inset(100%);
32 |   clip: rect(0 0 0 0);
33 |   overflow: hidden;
34 | }
35 | 
36 | /* .icon {
37 |   display: inline-block;
38 |   width: 79px;
39 |   height: 60px;
40 |   margin: 20px;
41 |   background-image: url('../img/icon.png');
42 |   background-size: cover;
43 |   background-position: center;
44 | }
45 | 
46 | @media (min-resolution: 192dpi), (min-resolution: 2dppx) {
47 |   .icon {
48 |     background-image: url('../img/icon@2x.png');
49 |   }
50 | } */
51 | 
52 | /* .icon-clock {
53 |   display: inline-block;
54 |   width: 100px;
55 |   height: 100px;
56 |   background-image: url('../img/icon-clock.svg');
57 |   background-size: cover;
58 |   background-position: center;
59 | }
60 | 
61 | .svg-clock {
62 |   fill: palevioletred;
63 |   stroke: black;
64 | }
65 | 
66 | .svg-clock:hover {
67 |   fill: teal;
68 |   stroke: orange;
69 | } */
70 | 
71 | .icon {
72 |   display: inline-block;
73 |   fill: teal;
74 | }
75 | 
76 | .icon:hover {
77 |   fill: palevioletred;
78 | }
79 | 


--------------------------------------------------------------------------------
/module-10/webinar/hw-10-svg-icons.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/webinar/hw-10-svg-icons.zip


--------------------------------------------------------------------------------
/module-10/webinar/img/icon-clock.svg:
--------------------------------------------------------------------------------
1 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 31">
2 |     <path d="M30.740,9.503 C29.156,5.807 26.193,2.843 22.497,1.260 C23.497,0.473 24.755,-0.000 26.126,-0.000 C29.370,-0.000 32.000,2.630 32.000,5.874 C32.000,7.245 31.527,8.503 30.740,9.503 ZM30.500,16.000 C30.500,19.852 28.988,23.343 26.537,25.940 L28.566,27.968 C28.834,28.237 29.000,28.607 29.000,29.017 C29.000,29.836 28.336,30.500 27.517,30.500 C27.107,30.500 26.736,30.334 26.468,30.065 L24.290,27.887 C21.939,29.529 19.085,30.500 16.000,30.500 C12.921,30.500 10.072,29.534 7.724,27.897 L5.561,30.060 C5.289,30.332 4.914,30.500 4.500,30.500 C3.672,30.500 3.000,29.828 3.000,28.999 C3.000,28.586 3.168,28.210 3.439,27.939 L5.451,25.927 C3.008,23.332 1.500,19.845 1.500,16.000 C1.500,7.992 7.992,1.500 16.000,1.500 C24.008,1.500 30.500,7.992 30.500,16.000 ZM16.000,4.500 C9.649,4.500 4.500,9.648 4.500,16.000 C4.500,22.351 9.649,27.500 16.000,27.500 C22.351,27.500 27.500,22.351 27.500,16.000 C27.500,9.648 22.351,4.500 16.000,4.500 ZM22.000,17.500 L16.000,17.500 C15.172,17.500 14.500,16.828 14.500,16.000 L14.500,8.000 C14.500,7.172 15.172,6.500 16.000,6.500 C16.828,6.500 17.500,7.172 17.500,8.000 L17.500,14.499 L22.000,14.499 C22.828,14.499 23.500,15.171 23.500,16.000 C23.500,16.828 22.828,17.500 22.000,17.500 ZM1.287,9.705 C0.483,8.685 -0.000,7.400 -0.000,6.000 C-0.000,2.686 2.686,-0.000 6.000,-0.000 C7.400,-0.000 8.685,0.483 9.706,1.287 C5.931,2.904 2.904,5.931 1.287,9.705 Z"
3 |     />
4 |   </svg>
5 | 


--------------------------------------------------------------------------------
/module-10/webinar/img/icon-graph.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
2 | <path d="M30.500,32.000 L1.500,32.000 C0.672,32.000 0.000,31.328 0.000,30.500 L0.000,1.499 C0.000,0.672 0.672,-0.000 1.500,-0.000 L30.500,-0.000 C31.328,-0.000 32.000,0.672 32.000,1.499 L32.000,30.500 C32.000,31.328 31.328,32.000 30.500,32.000 ZM29.000,3.000 L3.000,3.000 L3.000,29.000 L29.000,29.000 L29.000,3.000 ZM5.215,16.239 L5.215,16.237 L9.215,13.737 L9.215,13.739 C9.444,13.598 9.712,13.517 10.000,13.517 C10.311,13.517 10.600,13.612 10.840,13.774 L10.846,13.766 L17.477,18.186 L25.115,12.795 C25.363,12.613 25.669,12.505 26.000,12.505 C26.828,12.505 27.500,13.177 27.500,14.005 C27.500,14.505 27.255,14.948 26.878,15.221 L26.879,15.221 L18.379,21.221 L18.378,21.221 C18.132,21.400 17.828,21.505 17.500,21.505 C17.179,21.505 16.882,21.404 16.639,21.233 L9.982,16.795 L6.847,18.755 C6.606,18.920 6.314,19.017 6.000,19.017 C5.172,19.017 4.500,18.345 4.500,17.517 C4.500,16.976 4.786,16.503 5.215,16.239 Z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/module-10/webinar/img/icon-home.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
2 | <path d="M32.000,16.500 C32.000,17.328 31.328,17.999 30.500,17.999 C30.105,17.999 29.748,17.844 29.480,17.594 L29.477,17.598 L16.038,4.159 L16.038,4.159 L16.000,4.122 L16.000,4.122 L2.554,17.568 L2.553,17.568 C2.282,17.835 1.910,17.999 1.500,17.999 C0.672,17.999 -0.000,17.328 -0.000,16.500 C-0.000,16.075 0.177,15.692 0.461,15.419 L14.919,0.960 C15.192,0.677 15.575,0.500 16.000,0.500 L16.000,0.500 L16.000,0.500 C16.000,0.500 16.000,0.500 16.001,0.500 C16.027,0.500 16.053,0.500 16.080,0.502 C16.084,0.502 16.088,0.503 16.092,0.503 C16.115,0.504 16.137,0.506 16.160,0.508 C16.161,0.508 16.162,0.508 16.164,0.509 C16.531,0.549 16.858,0.721 17.097,0.977 L17.098,0.976 L23.000,6.878 L23.000,5.500 C23.000,4.671 23.671,4.000 24.500,4.000 C25.328,4.000 26.000,4.671 26.000,5.500 L26.000,9.878 L31.598,15.476 L31.594,15.480 C31.844,15.748 32.000,16.105 32.000,16.500 ZM29.000,19.000 L29.000,23.500 L29.000,25.500 L29.000,29.500 C29.000,30.328 28.328,31.000 27.500,31.000 L24.500,31.000 L24.500,19.000 L18.500,19.000 L18.500,31.000 L4.500,31.000 C3.672,31.000 3.000,30.328 3.000,29.500 L3.000,25.500 L3.000,23.500 L3.000,19.000 L16.000,6.000 L29.000,19.000 ZM13.500,19.000 L7.500,19.000 L7.500,25.000 L13.500,25.000 L13.500,19.000 Z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/module-10/webinar/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/webinar/img/icon.png


--------------------------------------------------------------------------------
/module-10/webinar/img/icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/webinar/img/icon@2x.png


--------------------------------------------------------------------------------
/module-10/webinar/img/photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/webinar/img/photo.jpg


--------------------------------------------------------------------------------
/module-10/webinar/img/photo@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/webinar/img/photo@2x.jpg


--------------------------------------------------------------------------------
/module-10/webinar/img/symbol-defs.svg:
--------------------------------------------------------------------------------
 1 | <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |   <defs>
 3 |     <symbol id="icon-clock" viewBox="0 0 33 32">
 4 |       <path d="M31.732 9.81c-1.635-3.815-4.694-6.875-8.509-8.509 1.032-0.812 2.331-1.301 3.746-1.301 3.349 0 6.063 2.715 6.063 6.063 0 1.415-0.488 2.714-1.301 3.746zM31.484 16.516c0 3.976-1.561 7.58-4.091 10.261l2.094 2.093c0.277 0.278 0.448 0.66 0.448 1.083 0 0.845-0.685 1.531-1.531 1.531-0.423 0-0.806-0.171-1.083-0.449l-2.248-2.248c-2.427 1.695-5.373 2.697-8.557 2.697-3.178 0-6.119-0.997-8.543-2.687l-2.233 2.233c-0.281 0.281-0.668 0.454-1.095 0.454-0.855 0-1.548-0.694-1.548-1.549 0-0.426 0.173-0.814 0.453-1.094l2.077-2.077c-2.522-2.679-4.078-6.278-4.078-10.247 0-8.266 6.701-14.968 14.968-14.968s14.968 6.701 14.968 14.968zM16.516 4.645c-6.556 0-11.871 5.314-11.871 11.871 0 6.556 5.315 11.871 11.871 11.871s11.871-5.315 11.871-11.871c0-6.557-5.315-11.871-11.871-11.871zM22.71 18.065h-6.194c-0.855 0-1.548-0.694-1.548-1.548v-8.258c0-0.855 0.694-1.548 1.548-1.548s1.548 0.694 1.548 1.548v6.709h4.645c0.855 0 1.548 0.694 1.548 1.549 0 0.855-0.694 1.548-1.548 1.548zM1.329 10.018c-0.83-1.053-1.329-2.379-1.329-3.825 0-3.421 2.773-6.194 6.194-6.194 1.445 0 2.772 0.499 3.826 1.329-3.897 1.669-7.021 4.794-8.691 8.69z"></path>
 5 |     </symbol>
 6 | 
 7 |     <symbol id="icon-graph" viewBox="0 0 32 32">
 8 |       <path d="M30.5 32h-29c-0.828 0-1.5-0.672-1.5-1.5v-29.001c0-0.827 0.672-1.499 1.5-1.499h29c0.828 0 1.5 0.672 1.5 1.499v29.001c0 0.828-0.672 1.5-1.5 1.5zM29 3h-26v26h26v-26zM5.215 16.239v-0.002l4-2.498c0.229-0.141 0.497-0.222 0.785-0.222 0.311 0 0.6 0.095 0.84 0.257l0.006-0.008 6.631 4.42 7.638-5.391c0.248-0.182 0.554-0.29 0.885-0.29 0.828 0 1.5 0.672 1.5 1.5 0 0.5-0.245 0.943-0.622 1.216h0.001l-8.501 6c-0.246 0.179-0.55 0.284-0.878 0.284-0.321 0-0.618-0.101-0.861-0.272l-6.657-4.438-3.135 1.96c-0.241 0.165-0.533 0.262-0.847 0.262-0.828 0-1.5-0.672-1.5-1.5 0-0.541 0.286-1.014 0.715-1.278z"></path>
 9 |     </symbol>
10 | 
11 |     <symbol id="icon-home" viewBox="0 0 32 32">
12 |       <path d="M32 16.5c0 0.828-0.672 1.499-1.5 1.499-0.395 0-0.752-0.155-1.020-0.405l-0.003 0.004-13.477-13.476-13.447 13.446c-0.271 0.267-0.643 0.431-1.053 0.431-0.828 0-1.5-0.671-1.5-1.499 0-0.425 0.177-0.808 0.461-1.081l14.458-14.459c0.273-0.283 0.656-0.46 1.081-0.46v0 0c0 0 0 0 0.001 0 0.026 0 0.052 0 0.079 0.002 0.004 0 0.008 0.001 0.012 0.001 0.023 0.001 0.045 0.003 0.068 0.005 0.001 0 0.002 0 0.004 0.001 0.367 0.040 0.694 0.212 0.933 0.468l0.001-0.001 5.902 5.902v-1.378c0-0.829 0.671-1.5 1.5-1.5 0.828 0 1.5 0.671 1.5 1.5v4.378l5.598 5.598-0.004 0.004c0.25 0.268 0.406 0.625 0.406 1.020zM29 19v10.5c0 0.828-0.672 1.5-1.5 1.5h-3v-12h-6v12h-14c-0.828 0-1.5-0.672-1.5-1.5v-10.5l13-13 13 13zM13.5 19h-6v6h6v-6z"></path>
13 |     </symbol>
14 |   </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/module-10/webinar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Webinar 17-04</title>
 9 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
10 |   <link rel="stylesheet" href="css/normlize.css">
11 |   <link rel="stylesheet" href="css/styles.css">
12 | </head>
13 | 
14 | <body>
15 |   <!-- <ul class="socials">
16 |     <li>
17 |       <a class="icon-twitter" href="#">Twitter</a>
18 |     </li>
19 |     <li>
20 |       <a class="icon-facebook" href="#">Facebook</a>
21 |     </li>
22 |     <li>
23 |       <a class="icon-github" href="#">Github</a>
24 |     </li>
25 |     <li>
26 |       <a class="icon-linkedin" href="#">Linkedin</a>
27 |     </li>
28 |   </ul> -->
29 |   <!--
30 |   <svg class="svg-clock" width="100px" height="100px">
31 |     <use href="img/icon-clock.svg#root"></use>
32 |   </svg> -->
33 | 
34 |   <!-- <span class="icon"></span>
35 | 
36 |   <span class="icon-clock"></span>
37 | 
38 |   <img src="img/icon-clock.svg" alt="" width="500" height="500">
39 | 
40 |   <img srcset="img/photo.jpg 270w, img/photo@2x.jpg 540w" src="img/photo.jpg" width="270"
41 |     alt=""> -->
42 | 
43 |   <svg width="100px" height="100px" class="icon">
44 |     <use href="img/symbol-defs.svg#icon-clock"></use>
45 |   </svg>
46 |   <svg width="100px" height="100px" class="icon">
47 |     <use href="img/symbol-defs.svg#icon-home"></use>
48 |   </svg>
49 |   <svg width="100px" height="100px" class="icon">
50 |     <use href="img/symbol-defs.svg#icon-graph"></use>
51 |   </svg>
52 | </body>
53 | 
54 | </html>
55 | 


--------------------------------------------------------------------------------
/module-10/webinar/materials.md:
--------------------------------------------------------------------------------
1 | # Допмат
2 | 
3 | * https://www.sarasoueidan.com/blog/svg-coordinate-systems/
4 | 


--------------------------------------------------------------------------------
/module-10/webinar/Адаптивная графика. Retina..pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-10/webinar/Адаптивная графика. Retina..pdf


--------------------------------------------------------------------------------
/module-11/practise/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | # General settings for whole project
 4 | [*]
 5 | 
 6 | indent_style = space
 7 | indent_size = 2
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/module-11/practise/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 


--------------------------------------------------------------------------------
/module-11/practise/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-11/practise/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Alexander Repeta
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/module-11/practise/build/img/banner.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/banner.jpeg


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-atom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-atom.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-atom@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-atom@2x.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-bulb.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-bulb@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-bulb@2x.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-case.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-case.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-case@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-case@2x.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-computer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-computer.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-computer@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-computer@2x.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-download.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-download@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-download@2x.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-tools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-tools.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/icons/features/icon-tools@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/icons/features/icon-tools@2x.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/logo.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/logo@2x.png


--------------------------------------------------------------------------------
/module-11/practise/build/img/sprite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-facebook" viewBox="0 0 8 18">
2 |   <path d="M8.000,5.829 L5.276,5.829 L5.276,3.960 C5.276,3.259 5.720,3.095 6.033,3.095 C6.346,3.095 7.956,3.095 7.956,3.095 L7.956,0.011 L5.308,0.000 C2.369,0.000 1.700,2.300 1.700,3.773 L1.700,5.829 L0.000,5.829 L0.000,9.007 L1.700,9.007 C1.700,13.085 1.700,18.000 1.700,18.000 L5.276,18.000 C5.276,18.000 5.276,13.037 5.276,9.007 L7.688,9.007 L8.000,5.829 Z"/>
3 | </symbol><symbol id="icon-linkedin" viewBox="0 0 16 16">
4 |   <path d="M14.817,16.000 L1.182,16.000 C0.529,16.000 -0.000,15.486 -0.000,14.854 L-0.000,1.146 C-0.000,0.513 0.529,-0.000 1.182,-0.000 L14.817,-0.000 C15.471,-0.000 16.000,0.513 16.000,1.146 L16.000,14.854 C16.000,15.486 15.471,16.000 14.817,16.000 ZM2.433,13.393 L4.850,13.393 L4.850,6.169 L2.433,6.169 L2.433,13.393 ZM3.657,2.686 C2.831,2.686 2.290,3.225 2.290,3.934 C2.290,4.628 2.815,5.182 3.626,5.182 L3.642,5.182 C4.484,5.182 5.009,4.628 5.009,3.934 C4.993,3.225 4.484,2.686 3.657,2.686 ZM13.564,9.251 C13.564,7.032 12.372,5.999 10.782,5.999 C9.499,5.999 8.925,6.700 8.604,7.192 L8.604,6.169 L6.187,6.169 C6.219,6.846 6.187,13.393 6.187,13.393 L8.604,13.393 L8.604,9.359 C8.604,9.143 8.619,8.927 8.683,8.773 C8.858,8.341 9.256,7.895 9.923,7.895 C10.798,7.895 11.147,8.557 11.147,9.528 L11.147,13.393 L13.564,13.393 L13.564,9.251 ZM8.588,7.217 C8.593,7.208 8.599,7.200 8.604,7.192 L8.604,7.217 L8.588,7.217 Z"/>
5 | </symbol><symbol id="icon-twitter" viewBox="0 0 20 14">
6 |   <path d="M15.998,2.283 C15.985,2.276 15.973,2.262 15.960,2.250 C15.212,1.589 14.333,1.273 13.323,1.311 L13.292,1.243 C13.298,1.237 13.304,1.237 13.310,1.237 C14.227,1.038 14.769,0.834 14.931,0.612 C14.988,0.433 14.920,0.334 14.720,0.309 C14.258,0.365 13.834,0.458 13.454,0.600 C13.934,0.309 14.121,0.106 14.015,-0.000 C13.541,0.012 13.030,0.242 12.494,0.693 C12.693,0.371 12.768,0.198 12.718,0.167 C12.463,0.334 12.238,0.514 12.045,0.705 C11.639,1.132 11.315,1.527 11.066,1.887 L11.054,1.917 C10.412,2.900 9.963,3.889 9.694,4.898 L9.595,4.973 L9.576,4.990 C9.190,4.533 8.728,4.150 8.174,3.839 C7.519,3.438 6.752,3.055 5.867,2.684 C4.900,2.214 3.921,1.824 2.930,1.522 C2.924,2.567 3.466,3.401 4.545,4.007 L4.545,4.026 C4.165,4.019 3.797,4.075 3.441,4.181 C3.510,5.151 4.239,5.819 5.623,6.190 L5.617,6.208 C5.075,6.178 4.626,6.357 4.277,6.728 C4.732,7.569 5.536,7.971 6.702,7.940 C6.471,8.051 6.291,8.174 6.172,8.311 C5.960,8.521 5.891,8.770 5.960,9.053 C6.209,9.480 6.658,9.677 7.319,9.647 L7.319,9.647 L7.357,9.690 C7.350,9.696 7.344,9.702 7.338,9.708 C6.197,10.822 4.819,11.322 3.204,11.218 L3.179,11.230 C2.195,11.223 1.141,10.779 0.000,9.888 C1.147,11.446 2.668,12.571 4.551,13.277 C6.708,13.951 8.866,14.000 11.016,13.424 L11.054,13.424 C13.142,12.855 14.913,11.687 16.371,9.919 C17.045,8.991 17.469,8.108 17.637,7.260 C18.728,7.297 19.514,7.000 20.000,6.370 L19.988,6.351 C19.626,6.474 18.915,6.438 17.861,6.234 L17.861,6.122 C17.861,6.116 17.861,6.116 17.868,6.122 C19.022,5.998 19.701,5.647 19.919,5.064 C19.115,5.362 18.323,5.367 17.537,5.090 C17.394,4.063 16.883,3.129 15.998,2.283 Z"/>
7 | </symbol></svg>


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-1.jpg


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-1@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-1@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-2.jpg


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-2@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-2@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-3.jpg


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-3@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-3@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-4.jpg


--------------------------------------------------------------------------------
/module-11/practise/build/img/team-4@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/build/img/team-4@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/gulpfile.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const gulp = require('gulp');
  4 | const sass = require('gulp-sass');
  5 | const postcss = require('gulp-postcss');
  6 | const autoprefixer = require('autoprefixer');
  7 | const cssnano = require('gulp-cssnano');
  8 | const gcmq = require('gulp-group-css-media-queries');
  9 | const del = require('del');
 10 | const htmlmin = require('gulp-htmlmin');
 11 | const imagemin = require('gulp-imagemin');
 12 | const svgstore = require('gulp-svgstore');
 13 | const plumber = require('gulp-plumber');
 14 | const rigger = require('gulp-rigger');
 15 | const stylelint = require('gulp-stylelint');
 16 | const babel = require('gulp-babel');
 17 | const uglify = require('gulp-uglify');
 18 | const concat = require('gulp-concat');
 19 | const rename = require('gulp-rename');
 20 | const browserSync = require('browser-sync').create();
 21 | const sequence = require('run-sequence');
 22 | 
 23 | gulp.task('html', () =>
 24 |   gulp
 25 |     .src('./src/*.html')
 26 |     .pipe(rigger())
 27 |     .pipe(
 28 |       htmlmin({
 29 |         collapseWhitespace: true,
 30 |       }),
 31 |     )
 32 |     .pipe(gulp.dest('./build')),
 33 | );
 34 | 
 35 | gulp.task('styles', () =>
 36 |   gulp
 37 |     .src('./src/sass/styles.scss')
 38 |     .pipe(plumber())
 39 |     .pipe(
 40 |       stylelint({
 41 |         reporters: [{ formatter: 'string', console: true }],
 42 |       }),
 43 |     )
 44 |     .pipe(sass())
 45 |     .pipe(postcss([autoprefixer()]))
 46 |     .pipe(gcmq())
 47 |     .pipe(gulp.dest('./build/css'))
 48 |     .pipe(cssnano())
 49 |     .pipe(rename('styles.min.css'))
 50 |     .pipe(gulp.dest('./build/css'))
 51 |     .pipe(browserSync.stream()),
 52 | );
 53 | 
 54 | gulp.task('scripts', () =>
 55 |   gulp
 56 |     .src('./src/js/**/*.js')
 57 |     .pipe(plumber())
 58 |     .pipe(
 59 |       babel({
 60 |         presets: ['env'],
 61 |       }),
 62 |     )
 63 |     .pipe(concat('scripts.js'))
 64 |     .pipe(gulp.dest('./build/js'))
 65 |     .pipe(uglify())
 66 |     .pipe(rename('scripts.min.js'))
 67 |     .pipe(gulp.dest('./build/js')),
 68 | );
 69 | 
 70 | gulp.task('svg-sprite', () =>
 71 |   gulp
 72 |     .src('./src/img/sprite/**/*.svg')
 73 |     .pipe(
 74 |       svgstore({
 75 |         inlineSvg: true,
 76 |       }),
 77 |     )
 78 |     .pipe(rename('sprite.svg'))
 79 |     .pipe(gulp.dest('./build/img')),
 80 | );
 81 | 
 82 | gulp.task('images', () =>
 83 |   gulp
 84 |     .src(['./src/img/**/*.{png,jpg,jpeg,svg}', '!./src/img/sprite/**/*.*'])
 85 |     .pipe(
 86 |       imagemin([
 87 |         imagemin.jpegtran({ progressive: true }),
 88 |         imagemin.optipng({ optimizationLevel: 3 }),
 89 |         imagemin.svgo({
 90 |           plugins: [{ removeViewBox: false }, { cleanupIDs: false }],
 91 |         }),
 92 |       ]),
 93 |     )
 94 |     .pipe(gulp.dest('./build/img')),
 95 | );
 96 | 
 97 | gulp.task('fonts', () =>
 98 |   gulp.src('./src/fonts/**/*.{woff,woff2}').pipe(gulp.dest('./build/fonts')),
 99 | );
100 | 
101 | gulp.task('watch', () => {
102 |   gulp.watch('src/**/*.html', ['html']).on('change', browserSync.reload);
103 |   gulp.watch('src/sass/**/*.scss', ['styles']);
104 |   gulp.watch('src/js/**/*.js', ['scripts']);
105 | });
106 | 
107 | gulp.task('serve', ['styles'], () =>
108 |   browserSync.init({
109 |     server: './build',
110 |     notify: false,
111 |     open: true,
112 |     cors: true,
113 |     ui: false,
114 |     logPrefix: 'DevServer',
115 |     host: 'localhost',
116 |     port: 3000,
117 |   }),
118 | );
119 | 
120 | gulp.task('del:build', () => del('./build'));
121 | 
122 | gulp.task('prepare', () => del(['**/.gitkeep', 'README.md', 'banner.png']));
123 | 
124 | gulp.task('build', cb =>
125 |   sequence(
126 |     'del:build',
127 |     'svg-sprite',
128 |     'images',
129 |     'fonts',
130 |     'styles',
131 |     'html',
132 |     'scripts',
133 |     cb,
134 |   ),
135 | );
136 | 
137 | gulp.task('start', cb => sequence('build', 'serve', 'watch'));
138 | 


--------------------------------------------------------------------------------
/module-11/practise/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gulp-starter-kit",
 3 |   "version": "1.1.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "prepare": "gulp prepare",
 8 |     "start": "gulp start",
 9 |     "build": "gulp build",
10 |     "svg-sprite": "gulp svg-sprite",
11 |     "images": "gulp images"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/axZerk/gulp-starter-kit.git"
16 |   },
17 |   "author": "Alexander Repeta <alexander.repeta@gmail.com>",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/axZerk/gulp-starter-kit/issues"
21 |   },
22 |   "homepage": "https://github.com/axZerk/gulp-starter-kit#readme",
23 |   "devDependencies": {
24 |     "autoprefixer": "^8.0.0",
25 |     "babel-core": "^6.26.0",
26 |     "babel-preset-env": "^1.6.1",
27 |     "browser-sync": "^2.23.6",
28 |     "del": "^3.0.0",
29 |     "gulp": "^3.9.1",
30 |     "gulp-babel": "^7.0.1",
31 |     "gulp-concat": "^2.6.1",
32 |     "gulp-cssnano": "^2.1.2",
33 |     "gulp-group-css-media-queries": "^1.2.2",
34 |     "gulp-htmlmin": "^4.0.0",
35 |     "gulp-imagemin": "^4.1.0",
36 |     "gulp-plumber": "^1.2.0",
37 |     "gulp-postcss": "^7.0.1",
38 |     "gulp-rename": "^1.2.2",
39 |     "gulp-rigger": "^0.5.8",
40 |     "gulp-sass": "^3.1.0",
41 |     "gulp-stylelint": "^6.0.0",
42 |     "gulp-svgstore": "^6.1.1",
43 |     "gulp-uglify": "^3.0.0",
44 |     "run-sequence": "^2.2.1",
45 |     "stylelint": "^9.1.1"
46 |   },
47 |   "dependencies": {}
48 | }
49 | 


--------------------------------------------------------------------------------
/module-11/practise/src/html/banner.html:
--------------------------------------------------------------------------------
1 | <div class="banner">
2 |   <div class="slider container"></div>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/module-11/practise/src/html/features.html:
--------------------------------------------------------------------------------
 1 | <section class="section features">
 2 |   <h2 class="section__title visually-hidden">Our Features</h2>
 3 | 
 4 |   <ul class="section__list">
 5 |     <li class="features__item features__icon features__icon--tools">
 6 |       <h3 class="features__item-title">Easily Customised</h3>
 7 |       <p class="features__item-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus
 8 |         eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor
 9 |         fringilla.</p>
10 |     </li>
11 |     <li class="features__item features__icon features__icon--computer">
12 |       <h3 class="features__item-title">Responsive Ready</h3>
13 |       <p class="features__item-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus
14 |         eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor
15 |         fringilla.</p>
16 |     </li>
17 |     <li class="features__item features__icon features__icon--bulb">
18 |       <h3 class="features__item-title">Modern Design</h3>
19 |       <p class="features__item-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus
20 |         eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor
21 |         fringilla.</p>
22 |     </li>
23 |     <li class="features__item features__icon features__icon--atom">
24 |       <h3 class="features__item-title">Clean Code</h3>
25 |       <p class="features__item-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus
26 |         eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor
27 |         fringilla.</p>
28 |     </li>
29 |     <li class="features__item features__icon features__icon--case">
30 |       <h3 class="features__item-title">Ready to Ship</h3>
31 |       <p class="features__item-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus
32 |         eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor
33 |         fringilla.</p>
34 |     </li>
35 |     <li class="features__item features__icon features__icon--download">
36 |       <h3 class="features__item-title">Download for Free</h3>
37 |       <p class="features__item-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus
38 |         eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor
39 |         fringilla.</p>
40 |     </li>
41 |   </ul>
42 | </section>
43 | 


--------------------------------------------------------------------------------
/module-11/practise/src/html/footer.html:
--------------------------------------------------------------------------------
 1 | <footer class="page-footer">
 2 |   <div class="container page-footer__container">
 3 |     <div class="location">
 4 |       <p>Location</p>
 5 |       <p>3481 Melrose Place
 6 |         <br> Beverly Hills, CA 90210</p>
 7 |     </div>
 8 | 
 9 |     <div class="share-links">
10 |       <p>Share With Love</p>
11 |       <ul class="socials">
12 |         <li class="socials__item">
13 |           <a href="#" class="socials__link">
14 |             <svg class="socials__icon">
15 |               <use href="img/sprite.svg#icon-facebook"></use>
16 |             </svg>
17 |           </a>
18 |         </li>
19 |         <li class="socials__item">
20 |           <a href="#" class="socials__link">
21 |             <svg class="socials__icon">
22 |               <use href="img/sprite.svg#icon-twitter"></use>
23 |             </svg>
24 |           </a>
25 |         </li>
26 |         <li class="socials__item">
27 |           <a href="#" class="socials__link">
28 |             <svg class="socials__icon">
29 |               <use href="img/sprite.svg#icon-linkedin"></use>
30 |             </svg>
31 |           </a>
32 |         </li>
33 |       </ul>
34 |     </div>
35 | 
36 |     <div class="download">
37 |       <p>Download Activebox</p>
38 |       <button class="button download__button">Download Here</button>
39 |     </div>
40 |   </div>
41 | </footer>
42 | 


--------------------------------------------------------------------------------
/module-11/practise/src/html/header.html:
--------------------------------------------------------------------------------
 1 | <header class="page-header">
 2 |   <nav class="page-nav container">
 3 |     <a href="#" class="site-logo">
 4 |       <img class="site-logo__img" srcset="img/logo.png 189w, img/logo@2x.png 377w" sizes="189px"
 5 |         src="img/logo.png" alt="site logo" height="24">
 6 |     </a>
 7 | 
 8 |     <ul class="site-navigation page-nav__site-navigation">
 9 |       <li class="site-navigation__item">
10 |         <a href="" class="site-navigation__link">Features</a>
11 |       </li>
12 |       <li class="site-navigation__item">
13 |         <a href="" class="site-navigation__link">Works</a>
14 |       </li>
15 |       <li class="site-navigation__item">
16 |         <a href="" class="site-navigation__link">Our Team</a>
17 |       </li>
18 |       <li class="site-navigation__item">
19 |         <a href="" class="site-navigation__link">Testimonials</a>
20 |       </li>
21 |       <li class="site-navigation__item">
22 |         <a href="" class="site-navigation__link">Download</a>
23 |       </li>
24 |     </ul>
25 |   </nav>
26 | </header>
27 | 


--------------------------------------------------------------------------------
/module-11/practise/src/img/banner.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/banner.jpeg


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-atom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-atom.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-atom@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-atom@2x.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-bulb.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-bulb@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-bulb@2x.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-case.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-case.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-case@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-case@2x.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-computer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-computer.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-computer@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-computer@2x.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-download.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-download@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-download@2x.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-tools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-tools.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/icons/features/icon-tools@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/icons/features/icon-tools@2x.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/logo.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/logo@2x.png


--------------------------------------------------------------------------------
/module-11/practise/src/img/sprite/icon-facebook.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 18">
2 |   <path d="M8.000,5.829 L5.276,5.829 L5.276,3.960 C5.276,3.259 5.720,3.095 6.033,3.095 C6.346,3.095 7.956,3.095 7.956,3.095 L7.956,0.011 L5.308,0.000 C2.369,0.000 1.700,2.300 1.700,3.773 L1.700,5.829 L0.000,5.829 L0.000,9.007 L1.700,9.007 C1.700,13.085 1.700,18.000 1.700,18.000 L5.276,18.000 C5.276,18.000 5.276,13.037 5.276,9.007 L7.688,9.007 L8.000,5.829 Z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/module-11/practise/src/img/sprite/icon-linkedin.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
2 |   <path d="M14.817,16.000 L1.182,16.000 C0.529,16.000 -0.000,15.486 -0.000,14.854 L-0.000,1.146 C-0.000,0.513 0.529,-0.000 1.182,-0.000 L14.817,-0.000 C15.471,-0.000 16.000,0.513 16.000,1.146 L16.000,14.854 C16.000,15.486 15.471,16.000 14.817,16.000 ZM2.433,13.393 L4.850,13.393 L4.850,6.169 L2.433,6.169 L2.433,13.393 ZM3.657,2.686 C2.831,2.686 2.290,3.225 2.290,3.934 C2.290,4.628 2.815,5.182 3.626,5.182 L3.642,5.182 C4.484,5.182 5.009,4.628 5.009,3.934 C4.993,3.225 4.484,2.686 3.657,2.686 ZM13.564,9.251 C13.564,7.032 12.372,5.999 10.782,5.999 C9.499,5.999 8.925,6.700 8.604,7.192 L8.604,6.169 L6.187,6.169 C6.219,6.846 6.187,13.393 6.187,13.393 L8.604,13.393 L8.604,9.359 C8.604,9.143 8.619,8.927 8.683,8.773 C8.858,8.341 9.256,7.895 9.923,7.895 C10.798,7.895 11.147,8.557 11.147,9.528 L11.147,13.393 L13.564,13.393 L13.564,9.251 ZM8.588,7.217 C8.593,7.208 8.599,7.200 8.604,7.192 L8.604,7.217 L8.588,7.217 Z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/module-11/practise/src/img/sprite/icon-twitter.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14">
2 |   <path d="M15.998,2.283 C15.985,2.276 15.973,2.262 15.960,2.250 C15.212,1.589 14.333,1.273 13.323,1.311 L13.292,1.243 C13.298,1.237 13.304,1.237 13.310,1.237 C14.227,1.038 14.769,0.834 14.931,0.612 C14.988,0.433 14.920,0.334 14.720,0.309 C14.258,0.365 13.834,0.458 13.454,0.600 C13.934,0.309 14.121,0.106 14.015,-0.000 C13.541,0.012 13.030,0.242 12.494,0.693 C12.693,0.371 12.768,0.198 12.718,0.167 C12.463,0.334 12.238,0.514 12.045,0.705 C11.639,1.132 11.315,1.527 11.066,1.887 L11.054,1.917 C10.412,2.900 9.963,3.889 9.694,4.898 L9.595,4.973 L9.576,4.990 C9.190,4.533 8.728,4.150 8.174,3.839 C7.519,3.438 6.752,3.055 5.867,2.684 C4.900,2.214 3.921,1.824 2.930,1.522 C2.924,2.567 3.466,3.401 4.545,4.007 L4.545,4.026 C4.165,4.019 3.797,4.075 3.441,4.181 C3.510,5.151 4.239,5.819 5.623,6.190 L5.617,6.208 C5.075,6.178 4.626,6.357 4.277,6.728 C4.732,7.569 5.536,7.971 6.702,7.940 C6.471,8.051 6.291,8.174 6.172,8.311 C5.960,8.521 5.891,8.770 5.960,9.053 C6.209,9.480 6.658,9.677 7.319,9.647 L7.319,9.647 L7.357,9.690 C7.350,9.696 7.344,9.702 7.338,9.708 C6.197,10.822 4.819,11.322 3.204,11.218 L3.179,11.230 C2.195,11.223 1.141,10.779 0.000,9.888 C1.147,11.446 2.668,12.571 4.551,13.277 C6.708,13.951 8.866,14.000 11.016,13.424 L11.054,13.424 C13.142,12.855 14.913,11.687 16.371,9.919 C17.045,8.991 17.469,8.108 17.637,7.260 C18.728,7.297 19.514,7.000 20.000,6.370 L19.988,6.351 C19.626,6.474 18.915,6.438 17.861,6.234 L17.861,6.122 C17.861,6.116 17.861,6.116 17.868,6.122 C19.022,5.998 19.701,5.647 19.919,5.064 C19.115,5.362 18.323,5.367 17.537,5.090 C17.394,4.063 16.883,3.129 15.998,2.283 Z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-1.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-1@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-1@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-2.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-2@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-2@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-3.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-3@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-3@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-4.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/img/team-4@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/practise/src/img/team-4@2x.jpg


--------------------------------------------------------------------------------
/module-11/practise/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>ActiveBox</title>
 7 |   <link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
 8 |   <link rel="stylesheet" href="css/styles.min.css">
 9 | </head>
10 | 
11 | <body>
12 |   //= html/header.html
13 |   //= html/banner.html
14 | 
15 |   <main class="container">
16 |     <h1 class="visually-hidden">Activebox main page</h1>
17 | 
18 |     <!-- FEATURES SECTION -->
19 |     //= html/features.html
20 | 
21 |     <!-- TEAM SECTION -->
22 |     //= html/team.html
23 |   </main>
24 | 
25 |   //= html/footer.html
26 | </body>
27 | 
28 | </html>
29 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/base.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 |   box-sizing: inherit;
 9 | }
10 | 
11 | body {
12 |   font-family: $main-font-stack;
13 |   color: $secondary-dark-color;
14 |   font-size: $main-text-size;
15 |   line-height: $main-text-height;
16 | }
17 | 
18 | img {
19 |   display: block;
20 |   max-width: 100%;
21 |   height: auto;
22 | }
23 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/banner.scss:
--------------------------------------------------------------------------------
 1 | .banner {
 2 |   @include center-flex('all');
 3 |   min-height: 600px;
 4 |   margin-bottom: 120px;
 5 | 
 6 |   background-image: linear-gradient(
 7 |       to right,
 8 |       rgba(239, 59, 54, 0.3),
 9 |       rgba(255, 255, 255, 0.3)
10 |     ),
11 |     linear-gradient(to top, rgba(0, 210, 255, 0.3), rgba(145, 140, 170, 0.3)),
12 |     url('../img/banner.jpeg');
13 |   background-repeat: no-repeat;
14 |   background-size: cover;
15 |   background-position: center;
16 | }
17 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/button.scss:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   @extend %button;
 3 | }
 4 | 
 5 | .download__button {
 6 |   padding: 14px 82px;
 7 |   background-color: $primary-accent-color;
 8 |   font-size: 13px;
 9 |   line-height: 21px;
10 |   font-weight: 600;
11 |   color: $primary-white-color;
12 |   text-transform: uppercase;
13 | }
14 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/container.scss:
--------------------------------------------------------------------------------
1 | .container {
2 |   width: 1170px;
3 |   margin: 0 auto;
4 | }
5 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/features.scss:
--------------------------------------------------------------------------------
 1 | .features__item {
 2 |   flex: 0 0 370px;
 3 |   margin-bottom: 72px;
 4 |   padding: 0 38px;
 5 |   text-align: center;
 6 | 
 7 |   &:nth-last-child(-n + 3) {
 8 |     margin-bottom: 0;
 9 |   }
10 | }
11 | 
12 | .features__icon {
13 |   &::before {
14 |     @include pseudo($display: block);
15 |     height: 60px;
16 |     margin-bottom: 34px;
17 |     background-repeat: no-repeat;
18 |     background-position: center;
19 |     background-size: contain;
20 |   }
21 | }
22 | 
23 | $icons: tools, computer, bulb, atom, case, download;
24 | 
25 | @include generate-pseudo-icons(
26 |   'features__icon--',
27 |   $icons,
28 |   '../img/icons/features/icon-',
29 |   'png'
30 | );
31 | 
32 | .features__item-title {
33 |   margin-bottom: 24px;
34 |   margin-top: 0;
35 |   color: $primary-dark-color;
36 |   line-height: 17px;
37 |   font-size: $main-text-size;
38 | }
39 | 
40 | .features__item-text {
41 |   margin: 0;
42 | }
43 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/page-footer.scss:
--------------------------------------------------------------------------------
 1 | .page-footer {
 2 |   color: $primary-white-color;
 3 |   background-color: $secondary-bg-color;
 4 | }
 5 | 
 6 | .page-footer__container {
 7 |   @include center-flex('ver');
 8 |   justify-content: space-between;
 9 |   min-height: 246px;
10 | }
11 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/page-header.scss:
--------------------------------------------------------------------------------
1 | .page-header {
2 |   background-color: $secondary-bg-color;
3 |   box-shadow: 0 5px 4px rgba(0, 0, 0, 0.25);
4 | }
5 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/page-nav.scss:
--------------------------------------------------------------------------------
 1 | .page-nav {
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   align-items: center;
 5 |   min-height: 100px;
 6 | }
 7 | 
 8 | .page-nav__site-navigation {
 9 |   width: 600px;
10 | }
11 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/section.scss:
--------------------------------------------------------------------------------
 1 | .section {
 2 |   margin-bottom: 120px;
 3 | }
 4 | 
 5 | .section__list {
 6 |   @extend %list;
 7 |   display: flex;
 8 |   flex-wrap: wrap;
 9 |   justify-content: space-between;
10 | }
11 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/site-logo.scss:
--------------------------------------------------------------------------------
 1 | .site-logo {
 2 |   @extend %link;
 3 |   animation: logo-appear 1s linear;
 4 | }
 5 | 
 6 | @keyframes logo-appear {
 7 |   0% {
 8 |     transform: translateY(-200px);
 9 |     opacity: 0;
10 |   }
11 | 
12 |   50% {
13 |     transform: translateY(0);
14 |     opacity: 1;
15 |     transform: rotate(0);
16 |   }
17 | 
18 |   100% {
19 |     transform: rotate(360deg);
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/site-navigation.scss:
--------------------------------------------------------------------------------
 1 | .site-navigation {
 2 |   @extend %list;
 3 |   display: flex;
 4 |   justify-content: space-between;
 5 |   font-size: 13px;
 6 | }
 7 | 
 8 | .site-navigation__link {
 9 |   @extend %link;
10 |   color: $primary-white-color;
11 |   font-weight: 700;
12 |   text-transform: uppercase;
13 |   line-height: 16px;
14 |   transition: color 0.2s linear;
15 | 
16 |   &:hover,
17 |   &:focus {
18 |     color: $primary-accent-color;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/slider.scss:
--------------------------------------------------------------------------------
1 | .slider {
2 |   height: 150px;
3 |   background-color: $primary-white-color;
4 | }
5 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/socials.scss:
--------------------------------------------------------------------------------
 1 | .socials {
 2 |   @extend %list;
 3 |   display: flex;
 4 | }
 5 | 
 6 | .socials__item {
 7 |   margin-right: 4px;
 8 | 
 9 |   &:last-child {
10 |     margin-right: 0;
11 |   }
12 | }
13 | 
14 | .socials__link {
15 |   @include center-flex('all');
16 |   width: 40px;
17 |   height: 40px;
18 |   border: 1px solid rgb(232, 236, 238);
19 | 
20 |   &:hover .socials__icon {
21 |     fill: $primary-accent-color;
22 |   }
23 | }
24 | 
25 | .socials__icon {
26 |   display: inline-block;
27 |   width: 20px;
28 |   height: 20px;
29 |   fill: $border-color;
30 |   transition: fill 0.2s linear;
31 | }
32 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/components/team.scss:
--------------------------------------------------------------------------------
 1 | .team__item {
 2 |   flex: 0 0 270px;
 3 |   padding: 5px;
 4 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 5 |   transition: transform 0.2s ease-in, box-shadow 0.3s linear;
 6 | 
 7 |   &:hover .team__item-img {
 8 |     filter: grayscale(0.3);
 9 |   }
10 | }
11 | 
12 | .team__item-img {
13 |   filter: grayscale(1);
14 |   transition: filter 0.2s ease-out;
15 | }
16 | 
17 | .team__item-name {
18 |   margin-top: 26px;
19 |   margin-bottom: 10px;
20 |   font-size: 22px;
21 |   line-height: 26px;
22 |   color: $primary-dark-color;
23 | }
24 | 
25 | .team__item-occupation {
26 |   margin-top: 0;
27 |   margin-bottom: 26px;
28 |   font-size: 13px;
29 |   line-height: 16px;
30 |   color: $primary-accent-color;
31 |   text-transform: uppercase;
32 | }
33 | 
34 | .team__item-about {
35 |   margin-bottom: 26px;
36 |   margin-top: 0;
37 | }
38 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/helpers/extras.scss:
--------------------------------------------------------------------------------
 1 | /* visually-hidden helper */
 2 | .visually-hidden:not(:focus):not(:active),
 3 | input[type='checkbox'].visually-hidden,
 4 | input[type='radio'].visually-hidden {
 5 |   position: absolute;
 6 |   width: 1px;
 7 |   height: 1px;
 8 |   margin: -1px;
 9 |   border: 0;
10 |   padding: 0;
11 |   white-space: nowrap;
12 |   clip-path: inset(100%);
13 |   clip: rect(0 0 0 0);
14 |   overflow: hidden;
15 | }
16 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/helpers/mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin font-settings($size, $height) {
 2 |   font-size: $size;
 3 |   line-height: $height;
 4 | }
 5 | 
 6 | @mixin pseudo($display: inline-block, $content: '') {
 7 |   display: $display;
 8 |   content: $content;
 9 | }
10 | 
11 | @mixin bg-image($path: '', $size: cover, $repeat: no-repeat, $pos: center) {
12 |   background-image: url($path);
13 |   background-size: $size;
14 |   background-repeat: $repeat;
15 |   background-position: $pos;
16 | }
17 | 
18 | @mixin center-flex($type: 'all') {
19 |   display: flex;
20 | 
21 |   @if $type== 'all' {
22 |     justify-content: center;
23 |     align-items: center;
24 |   } @else if $type== 'hor' {
25 |     justify-content: center;
26 |   } @else if $type== 'ver' {
27 |     align-items: center;
28 |   }
29 | }
30 | 
31 | @mixin generate-pseudo-icons($baseclass, $list, $path, $ext) {
32 |   @each $icon in $list {
33 |     .#{$baseclass}#{$icon}::before {
34 |       background-image: url(#{$path}#{$icon}.#{$ext});
35 | 
36 |       @media (min-resolution: 192dpi), (min-resolution: 2dppx) {
37 |         background-image: url(#{$path}#{$icon}@2px.#{$ext});
38 |       }
39 |     }
40 |   }
41 | }
42 | 
43 | 
44 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/helpers/placeholders.scss:
--------------------------------------------------------------------------------
 1 | %link {
 2 |   display: inline-block;
 3 |   text-decoration: none;
 4 | }
 5 | 
 6 | %list {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   list-style: none;
10 | }
11 | 
12 | %button {
13 |   border: none;
14 |   margin: 0;
15 |   padding: 0;
16 |   cursor: pointer;
17 | }
18 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/helpers/variables.scss:
--------------------------------------------------------------------------------
 1 | $main-font-stack: 'Raleway', 'Arial', sans-serif;
 2 | 
 3 | $primary-white-color: #ffffff;
 4 | 
 5 | $primary-dark-color: #2d3033;
 6 | $secondary-dark-color: #6c7279;
 7 | 
 8 | $secondary-bg-color: #3a3e64;
 9 | 
10 | $primary-accent-color: #e84545;
11 | 
12 | $border-color: #c6cacc;
13 | 
14 | $main-text-size: 14px;
15 | $main-text-height: 21px;
16 | 


--------------------------------------------------------------------------------
/module-11/practise/src/sass/styles.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |    Import partials below
 3 | */
 4 | @import 'helpers/variables';
 5 | @import 'helpers/placeholders';
 6 | @import 'helpers/mixins';
 7 | @import 'helpers/extras';
 8 | @import 'normalize';
 9 | @import 'base';
10 | 
11 | /* Components */
12 | @import 'components/button';
13 | @import 'components/container';
14 | @import 'components/page-header';
15 | @import 'components/page-nav';
16 | @import 'components/site-logo';
17 | @import 'components/site-navigation';
18 | @import 'components/banner';
19 | @import 'components/slider';
20 | @import 'components/section';
21 | @import 'components/features';
22 | @import 'components/team';
23 | @import 'components/socials';
24 | @import 'components/page-footer';
25 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | # General settings for whole project
 4 | [*]
 5 | 
 6 | indent_style = space
 7 | indent_size = 2
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "block-no-empty": null,
 4 |     "color-no-invalid-hex": true,
 5 |     "comment-empty-line-before": [ "always", {
 6 |       "ignore": ["stylelint-commands", "after-comment"]
 7 |     }],
 8 |     "declaration-colon-space-after": "always",
 9 |     "declaration-no-important": true,
10 |     "indentation": [2, {
11 |       "ignore": ["inside-parens"]
12 |     }],
13 |     "max-empty-lines": 2,
14 |     "rule-empty-line-before": [ "always", {
15 |       "except": ["first-nested"],
16 |       "ignore": ["after-comment"]
17 |     }],
18 |     "unit-whitelist": ["em", "rem", "%", "px", "vh", "vw", "dpi", "dppx", "pt", "deg", "s", "ms"]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Alexander Repeta
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/build/css/styles.min.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}body{background-color:teal}


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/build/img/sprite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="icon-facebook">
2 | <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M12.089,0.199 C12.089,1.675 12.089,4.320 12.089,4.320 C12.089,4.320 9.052,4.017 8.291,5.181 C7.875,5.817 8.122,7.681 8.085,9.019 C9.411,9.019 10.788,9.019 12.114,9.019 C11.774,10.583 11.530,11.643 11.279,12.997 C10.132,12.997 8.063,12.997 8.063,12.997 L8.063,25.801 C8.063,25.801 4.266,25.801 2.481,25.801 C2.482,21.854 2.480,17.249 2.481,13.047 C1.614,13.047 0.973,13.047 0.106,13.047 C0.106,11.571 0.106,10.496 0.106,9.019 C0.947,9.019 1.613,9.019 2.455,9.019 C2.575,6.073 2.620,3.155 4.084,1.669 C5.728,-0.002 7.297,0.199 12.089,0.199 Z"/>
3 | </symbol><symbol id="icon-instagram">
4 | <path fill-rule="evenodd" fill="rgb(243, 129, 129)" d="M22.700,25.800 L3.500,25.800 C1.733,25.800 0.300,24.367 0.300,22.599 L0.300,3.400 C0.300,1.632 1.733,0.199 3.500,0.199 L22.700,0.199 C24.467,0.199 25.900,1.632 25.900,3.400 L25.900,22.599 C25.900,24.367 24.467,25.800 22.700,25.800 ZM13.100,8.039 C11.104,8.039 9.389,9.221 8.602,10.919 L8.597,10.919 C8.589,10.937 8.583,10.956 8.575,10.974 C8.528,11.079 8.487,11.187 8.447,11.295 C8.428,11.348 8.407,11.399 8.390,11.451 C8.353,11.563 8.323,11.676 8.295,11.791 C8.281,11.844 8.265,11.897 8.253,11.951 C8.227,12.072 8.209,12.195 8.192,12.319 C8.185,12.369 8.175,12.418 8.169,12.469 C8.151,12.643 8.140,12.820 8.140,13.000 C8.140,15.739 10.361,17.959 13.100,17.959 C15.839,17.959 18.060,15.739 18.060,13.000 C18.060,12.820 18.049,12.643 18.031,12.469 C18.025,12.418 18.015,12.369 18.008,12.319 C17.991,12.195 17.973,12.072 17.947,11.951 C17.935,11.897 17.919,11.844 17.905,11.791 C17.877,11.676 17.847,11.563 17.810,11.451 C17.793,11.399 17.772,11.348 17.753,11.295 C17.713,11.187 17.672,11.079 17.625,10.974 C17.617,10.956 17.611,10.937 17.603,10.919 L17.598,10.919 C16.811,9.221 15.096,8.039 13.100,8.039 ZM23.020,4.359 C23.020,3.652 22.447,3.080 21.740,3.080 L19.180,3.080 C18.473,3.080 17.900,3.652 17.900,4.359 L17.900,6.920 C17.900,7.627 18.473,8.200 19.180,8.200 L21.740,8.200 C22.447,8.200 23.020,7.627 23.020,6.920 L23.020,4.359 ZM23.020,10.919 L20.660,10.919 C20.842,11.582 20.940,12.280 20.940,13.000 C20.940,17.330 17.430,20.839 13.100,20.839 C8.770,20.839 5.260,17.330 5.260,13.000 C5.260,12.280 5.358,11.582 5.540,10.919 L3.180,10.919 L3.180,21.639 C3.180,22.347 3.753,22.920 4.460,22.920 L21.740,22.920 C22.447,22.920 23.020,22.347 23.020,21.639 L23.020,10.919 Z"/>
5 | </symbol><symbol id="icon-pinterest">
6 | <path fill-rule="evenodd" fill="rgb(243, 129, 129)" d="M9.051,16.854 C8.842,17.687 8.631,18.560 8.413,19.414 C8.198,20.256 8.008,21.110 7.695,21.884 C7.176,23.165 6.517,24.403 5.652,25.405 C5.077,26.072 5.199,25.806 5.026,25.770 C4.894,25.742 4.883,25.613 4.857,25.425 C4.716,24.407 4.812,23.230 4.864,22.086 C4.924,20.782 5.198,19.698 5.453,18.615 C5.937,16.551 6.399,14.528 6.888,12.451 C6.920,12.313 7.008,12.085 6.978,12.006 C6.756,11.429 6.612,10.911 6.549,10.305 C6.476,9.610 6.532,8.961 6.688,8.362 C6.965,7.304 7.601,6.367 8.582,6.024 C9.206,5.808 9.897,5.906 10.317,6.156 C10.749,6.415 11.046,6.823 11.184,7.402 C11.332,8.017 11.223,8.753 11.104,9.293 C10.837,10.512 10.486,11.427 10.167,12.603 C10.009,13.186 9.830,13.785 9.978,14.415 C10.114,14.993 10.415,15.391 10.825,15.690 C11.251,16.000 11.755,16.169 12.450,16.145 C13.678,16.102 14.531,15.317 15.101,14.577 C16.014,13.392 16.566,11.793 16.776,9.891 C16.843,9.277 16.893,8.572 16.846,7.877 C16.758,6.593 16.357,5.560 15.719,4.760 C15.113,3.997 14.253,3.391 13.207,3.049 C12.170,2.711 10.735,2.598 9.460,2.816 C7.142,3.213 5.508,4.530 4.545,6.349 C4.041,7.301 3.708,8.396 3.708,9.759 C3.708,10.810 3.967,11.624 4.386,12.259 C4.519,12.460 4.714,12.626 4.844,12.856 C5.029,13.182 4.816,13.667 4.725,14.020 C4.615,14.445 4.603,15.032 4.107,15.042 C3.901,15.046 3.643,14.896 3.469,14.799 C2.164,14.078 1.372,12.766 1.047,11.065 C0.849,10.031 0.850,8.826 1.047,7.827 C1.237,6.860 1.591,5.969 1.984,5.246 C2.798,3.743 3.991,2.541 5.443,1.683 C6.559,1.023 7.818,0.560 9.350,0.337 C9.858,0.263 10.384,0.232 10.955,0.205 C12.623,0.127 14.139,0.505 15.281,1.015 C16.486,1.554 17.448,2.271 18.261,3.161 C19.099,4.076 19.709,5.140 20.095,6.470 C20.297,7.162 20.493,7.902 20.493,8.757 C20.493,9.615 20.312,10.370 20.185,11.125 C19.711,13.953 18.366,16.266 16.347,17.583 C15.858,17.901 15.266,18.196 14.593,18.392 C13.926,18.586 13.165,18.732 12.350,18.675 C11.559,18.621 10.911,18.406 10.367,18.098 C9.827,17.793 9.373,17.419 9.051,16.854 Z"/>
7 | </symbol><symbol id="icon-twitter">
8 | <path fill-rule="evenodd" fill="rgb(243, 129, 129)" d="M17.513,0.601 C19.547,0.565 20.630,1.306 21.664,2.248 C22.542,2.173 23.683,1.683 24.355,1.341 C24.572,1.223 24.790,1.103 25.008,0.984 C24.624,2.021 24.104,2.833 23.304,3.450 C23.126,3.586 22.950,3.771 22.727,3.858 C22.727,3.862 22.727,3.867 22.727,3.871 C23.867,3.860 24.807,3.345 25.700,3.066 C25.700,3.070 25.700,3.075 25.700,3.079 C25.231,3.824 24.596,4.581 23.919,5.123 C23.646,5.340 23.372,5.557 23.099,5.774 C23.114,6.981 23.081,8.133 22.856,9.147 C21.544,15.042 18.068,19.044 12.567,20.759 C10.591,21.374 7.399,21.627 5.135,21.065 C4.013,20.787 2.999,20.472 2.048,20.056 C1.519,19.825 1.029,19.575 0.561,19.289 C0.407,19.196 0.254,19.102 0.100,19.009 C0.610,19.024 1.208,19.165 1.778,19.072 C2.295,18.989 2.801,19.011 3.278,18.907 C4.466,18.646 5.521,18.301 6.429,17.769 C6.870,17.511 7.539,17.209 7.852,16.837 C7.262,16.847 6.727,16.710 6.289,16.556 C4.590,15.956 3.601,14.853 2.957,13.196 C3.472,13.253 4.955,13.387 5.302,13.094 C4.654,13.058 4.031,12.683 3.585,12.404 C2.218,11.549 1.104,10.115 1.112,7.908 C1.292,7.993 1.471,8.078 1.650,8.163 C1.994,8.308 2.343,8.385 2.752,8.470 C2.925,8.506 3.271,8.607 3.470,8.533 C3.461,8.533 3.453,8.533 3.444,8.533 C3.180,8.226 2.749,8.021 2.483,7.690 C1.606,6.601 0.785,4.924 1.304,2.926 C1.436,2.419 1.645,1.972 1.868,1.559 C1.877,1.563 1.885,1.567 1.894,1.571 C1.996,1.785 2.224,1.942 2.368,2.121 C2.816,2.676 3.368,3.175 3.931,3.615 C5.849,5.115 7.576,6.037 10.350,6.719 C11.054,6.893 11.867,7.025 12.708,7.026 C12.472,6.339 12.548,5.226 12.733,4.561 C13.201,2.887 14.216,1.682 15.706,1.035 C16.062,0.881 16.457,0.768 16.872,0.677 C17.086,0.652 17.299,0.626 17.513,0.601 Z"/>
9 | </symbol></svg>


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/build/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/webinar/gulp-project/build/img/team-1.jpg


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/build/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/webinar/gulp-project/build/img/team-2.jpg


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/build/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Placeholder title</title><link rel="stylesheet" href="css/styles.min.css"></head><body></body></html>


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/gulpfile.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const gulp = require('gulp');
  4 | const sass = require('gulp-sass');
  5 | const postcss = require('gulp-postcss');
  6 | const autoprefixer = require('autoprefixer');
  7 | const cssnano = require('gulp-cssnano');
  8 | const gcmq = require('gulp-group-css-media-queries');
  9 | const del = require('del');
 10 | const htmlmin = require('gulp-htmlmin');
 11 | const imagemin = require('gulp-imagemin');
 12 | const svgstore = require('gulp-svgstore');
 13 | const plumber = require('gulp-plumber');
 14 | const rigger = require('gulp-rigger');
 15 | const stylelint = require('gulp-stylelint');
 16 | const babel = require('gulp-babel');
 17 | const uglify = require('gulp-uglify');
 18 | const concat = require('gulp-concat');
 19 | const rename = require('gulp-rename');
 20 | const browserSync = require('browser-sync').create();
 21 | const sequence = require('run-sequence');
 22 | 
 23 | gulp.task('html', () =>
 24 |   gulp
 25 |     .src('./src/*.html')
 26 |     .pipe(rigger())
 27 |     .pipe(
 28 |       htmlmin({
 29 |         collapseWhitespace: true,
 30 |       }),
 31 |     )
 32 |     .pipe(gulp.dest('./build')),
 33 | );
 34 | 
 35 | gulp.task('styles', () =>
 36 |   gulp
 37 |     .src('./src/sass/styles.scss')
 38 |     .pipe(plumber())
 39 |     .pipe(
 40 |       stylelint({
 41 |         reporters: [{ formatter: 'string', console: true }],
 42 |       }),
 43 |     )
 44 |     .pipe(sass())
 45 |     .pipe(postcss([autoprefixer()]))
 46 |     .pipe(gcmq())
 47 |     .pipe(gulp.dest('./build/css'))
 48 |     .pipe(cssnano())
 49 |     .pipe(rename('styles.min.css'))
 50 |     .pipe(gulp.dest('./build/css'))
 51 |     .pipe(browserSync.stream()),
 52 | );
 53 | 
 54 | gulp.task('scripts', () =>
 55 |   gulp
 56 |     .src('./src/js/**/*.js')
 57 |     .pipe(plumber())
 58 |     .pipe(
 59 |       babel({
 60 |         presets: ['env'],
 61 |       }),
 62 |     )
 63 |     .pipe(concat('scripts.js'))
 64 |     .pipe(gulp.dest('./build/js'))
 65 |     .pipe(uglify())
 66 |     .pipe(rename('scripts.min.js'))
 67 |     .pipe(gulp.dest('./build/js')),
 68 | );
 69 | 
 70 | gulp.task('svg-sprite', () =>
 71 |   gulp
 72 |     .src('./src/img/sprite/**/*.svg')
 73 |     .pipe(
 74 |       svgstore({
 75 |         inlineSvg: true,
 76 |       }),
 77 |     )
 78 |     .pipe(rename('sprite.svg'))
 79 |     .pipe(gulp.dest('./build/img')),
 80 | );
 81 | 
 82 | gulp.task('images', () =>
 83 |   gulp
 84 |     .src(['./src/img/**/*.{png,jpg,jpeg,svg}', '!./src/img/sprite/**/*.*'])
 85 |     .pipe(
 86 |       imagemin([
 87 |         imagemin.jpegtran({ progressive: true }),
 88 |         imagemin.optipng({ optimizationLevel: 3 }),
 89 |         imagemin.svgo({
 90 |           plugins: [{ removeViewBox: false }, { cleanupIDs: false }],
 91 |         }),
 92 |       ]),
 93 |     )
 94 |     .pipe(gulp.dest('./build/img')),
 95 | );
 96 | 
 97 | gulp.task('fonts', () =>
 98 |   gulp.src('./src/fonts/**/*.{woff,woff2}').pipe(gulp.dest('./build/fonts')),
 99 | );
100 | 
101 | gulp.task('watch', () => {
102 |   gulp.watch('src/*.html', ['html']).on('change', browserSync.reload);
103 |   gulp.watch('src/sass/**/*.scss', ['styles']);
104 |   gulp.watch('src/js/**/*.js', ['scripts']);
105 | });
106 | 
107 | gulp.task('serve', ['styles'], () =>
108 |   browserSync.init({
109 |     server: './build',
110 |     notify: false,
111 |     open: true,
112 |     cors: true,
113 |     ui: false,
114 |     logPrefix: 'DevServer',
115 |     host: 'localhost',
116 |     port: 3000,
117 |   }),
118 | );
119 | 
120 | gulp.task('del:build', () => del('./build'));
121 | 
122 | gulp.task('prepare', () => del(['**/.gitkeep', 'README.md', 'banner.png']));
123 | 
124 | gulp.task('build', cb =>
125 |   sequence(
126 |     'del:build',
127 |     'svg-sprite',
128 |     'images',
129 |     'fonts',
130 |     'styles',
131 |     'html',
132 |     'scripts',
133 |     cb,
134 |   ),
135 | );
136 | 
137 | gulp.task('start', cb => sequence('build', 'serve', 'watch'));
138 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gulp-starter-kit",
 3 |   "version": "1.1.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "prepare": "gulp prepare",
 8 |     "start": "gulp start",
 9 |     "build": "gulp build",
10 |     "svg-sprite": "gulp svg-sprite",
11 |     "images": "gulp images"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/axZerk/gulp-starter-kit.git"
16 |   },
17 |   "author": "Alexander Repeta <alexander.repeta@gmail.com>",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/axZerk/gulp-starter-kit/issues"
21 |   },
22 |   "homepage": "https://github.com/axZerk/gulp-starter-kit#readme",
23 |   "devDependencies": {
24 |     "autoprefixer": "^8.0.0",
25 |     "babel-core": "^6.26.0",
26 |     "babel-preset-env": "^1.6.1",
27 |     "browser-sync": "^2.23.6",
28 |     "del": "^3.0.0",
29 |     "gulp": "^3.9.1",
30 |     "gulp-babel": "^7.0.1",
31 |     "gulp-concat": "^2.6.1",
32 |     "gulp-cssnano": "^2.1.2",
33 |     "gulp-group-css-media-queries": "^1.2.2",
34 |     "gulp-htmlmin": "^4.0.0",
35 |     "gulp-imagemin": "^4.1.0",
36 |     "gulp-plumber": "^1.2.0",
37 |     "gulp-postcss": "^7.0.1",
38 |     "gulp-rename": "^1.2.2",
39 |     "gulp-rigger": "^0.5.8",
40 |     "gulp-sass": "^3.1.0",
41 |     "gulp-stylelint": "^6.0.0",
42 |     "gulp-svgstore": "^6.1.1",
43 |     "gulp-uglify": "^3.0.0",
44 |     "run-sequence": "^2.2.1",
45 |     "stylelint": "^9.1.1"
46 |   },
47 |   "dependencies": {}
48 | }
49 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/img/sprite/icon-facebook.svg:
--------------------------------------------------------------------------------
1 | <svg
2 |  xmlns="http://www.w3.org/2000/svg"
3 |  xmlns:xlink="http://www.w3.org/1999/xlink"
4 |  width="13px" height="26px">
5 | <path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
6 |  d="M12.089,0.199 C12.089,1.675 12.089,4.320 12.089,4.320 C12.089,4.320 9.052,4.017 8.291,5.181 C7.875,5.817 8.122,7.681 8.085,9.019 C9.411,9.019 10.788,9.019 12.114,9.019 C11.774,10.583 11.530,11.643 11.279,12.997 C10.132,12.997 8.063,12.997 8.063,12.997 L8.063,25.801 C8.063,25.801 4.266,25.801 2.481,25.801 C2.482,21.854 2.480,17.249 2.481,13.047 C1.614,13.047 0.973,13.047 0.106,13.047 C0.106,11.571 0.106,10.496 0.106,9.019 C0.947,9.019 1.613,9.019 2.455,9.019 C2.575,6.073 2.620,3.155 4.084,1.669 C5.728,-0.002 7.297,0.199 12.089,0.199 Z"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/img/sprite/icon-instagram.svg:
--------------------------------------------------------------------------------
1 | <svg
2 |  xmlns="http://www.w3.org/2000/svg"
3 |  xmlns:xlink="http://www.w3.org/1999/xlink"
4 |  width="26px" height="26px">
5 | <path fill-rule="evenodd"  fill="rgb(243, 129, 129)"
6 |  d="M22.700,25.800 L3.500,25.800 C1.733,25.800 0.300,24.367 0.300,22.599 L0.300,3.400 C0.300,1.632 1.733,0.199 3.500,0.199 L22.700,0.199 C24.467,0.199 25.900,1.632 25.900,3.400 L25.900,22.599 C25.900,24.367 24.467,25.800 22.700,25.800 ZM13.100,8.039 C11.104,8.039 9.389,9.221 8.602,10.919 L8.597,10.919 C8.589,10.937 8.583,10.956 8.575,10.974 C8.528,11.079 8.487,11.187 8.447,11.295 C8.428,11.348 8.407,11.399 8.390,11.451 C8.353,11.563 8.323,11.676 8.295,11.791 C8.281,11.844 8.265,11.897 8.253,11.951 C8.227,12.072 8.209,12.195 8.192,12.319 C8.185,12.369 8.175,12.418 8.169,12.469 C8.151,12.643 8.140,12.820 8.140,13.000 C8.140,15.739 10.361,17.959 13.100,17.959 C15.839,17.959 18.060,15.739 18.060,13.000 C18.060,12.820 18.049,12.643 18.031,12.469 C18.025,12.418 18.015,12.369 18.008,12.319 C17.991,12.195 17.973,12.072 17.947,11.951 C17.935,11.897 17.919,11.844 17.905,11.791 C17.877,11.676 17.847,11.563 17.810,11.451 C17.793,11.399 17.772,11.348 17.753,11.295 C17.713,11.187 17.672,11.079 17.625,10.974 C17.617,10.956 17.611,10.937 17.603,10.919 L17.598,10.919 C16.811,9.221 15.096,8.039 13.100,8.039 ZM23.020,4.359 C23.020,3.652 22.447,3.080 21.740,3.080 L19.180,3.080 C18.473,3.080 17.900,3.652 17.900,4.359 L17.900,6.920 C17.900,7.627 18.473,8.200 19.180,8.200 L21.740,8.200 C22.447,8.200 23.020,7.627 23.020,6.920 L23.020,4.359 ZM23.020,10.919 L20.660,10.919 C20.842,11.582 20.940,12.280 20.940,13.000 C20.940,17.330 17.430,20.839 13.100,20.839 C8.770,20.839 5.260,17.330 5.260,13.000 C5.260,12.280 5.358,11.582 5.540,10.919 L3.180,10.919 L3.180,21.639 C3.180,22.347 3.753,22.920 4.460,22.920 L21.740,22.920 C22.447,22.920 23.020,22.347 23.020,21.639 L23.020,10.919 Z"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/img/sprite/icon-pinterest.svg:
--------------------------------------------------------------------------------
1 | <svg
2 |  xmlns="http://www.w3.org/2000/svg"
3 |  xmlns:xlink="http://www.w3.org/1999/xlink"
4 |  width="21px" height="26px">
5 | <path fill-rule="evenodd"  fill="rgb(243, 129, 129)"
6 |  d="M9.051,16.854 C8.842,17.687 8.631,18.560 8.413,19.414 C8.198,20.256 8.008,21.110 7.695,21.884 C7.176,23.165 6.517,24.403 5.652,25.405 C5.077,26.072 5.199,25.806 5.026,25.770 C4.894,25.742 4.883,25.613 4.857,25.425 C4.716,24.407 4.812,23.230 4.864,22.086 C4.924,20.782 5.198,19.698 5.453,18.615 C5.937,16.551 6.399,14.528 6.888,12.451 C6.920,12.313 7.008,12.085 6.978,12.006 C6.756,11.429 6.612,10.911 6.549,10.305 C6.476,9.610 6.532,8.961 6.688,8.362 C6.965,7.304 7.601,6.367 8.582,6.024 C9.206,5.808 9.897,5.906 10.317,6.156 C10.749,6.415 11.046,6.823 11.184,7.402 C11.332,8.017 11.223,8.753 11.104,9.293 C10.837,10.512 10.486,11.427 10.167,12.603 C10.009,13.186 9.830,13.785 9.978,14.415 C10.114,14.993 10.415,15.391 10.825,15.690 C11.251,16.000 11.755,16.169 12.450,16.145 C13.678,16.102 14.531,15.317 15.101,14.577 C16.014,13.392 16.566,11.793 16.776,9.891 C16.843,9.277 16.893,8.572 16.846,7.877 C16.758,6.593 16.357,5.560 15.719,4.760 C15.113,3.997 14.253,3.391 13.207,3.049 C12.170,2.711 10.735,2.598 9.460,2.816 C7.142,3.213 5.508,4.530 4.545,6.349 C4.041,7.301 3.708,8.396 3.708,9.759 C3.708,10.810 3.967,11.624 4.386,12.259 C4.519,12.460 4.714,12.626 4.844,12.856 C5.029,13.182 4.816,13.667 4.725,14.020 C4.615,14.445 4.603,15.032 4.107,15.042 C3.901,15.046 3.643,14.896 3.469,14.799 C2.164,14.078 1.372,12.766 1.047,11.065 C0.849,10.031 0.850,8.826 1.047,7.827 C1.237,6.860 1.591,5.969 1.984,5.246 C2.798,3.743 3.991,2.541 5.443,1.683 C6.559,1.023 7.818,0.560 9.350,0.337 C9.858,0.263 10.384,0.232 10.955,0.205 C12.623,0.127 14.139,0.505 15.281,1.015 C16.486,1.554 17.448,2.271 18.261,3.161 C19.099,4.076 19.709,5.140 20.095,6.470 C20.297,7.162 20.493,7.902 20.493,8.757 C20.493,9.615 20.312,10.370 20.185,11.125 C19.711,13.953 18.366,16.266 16.347,17.583 C15.858,17.901 15.266,18.196 14.593,18.392 C13.926,18.586 13.165,18.732 12.350,18.675 C11.559,18.621 10.911,18.406 10.367,18.098 C9.827,17.793 9.373,17.419 9.051,16.854 Z"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/img/sprite/icon-twitter.svg:
--------------------------------------------------------------------------------
1 | <svg
2 |  xmlns="http://www.w3.org/2000/svg"
3 |  xmlns:xlink="http://www.w3.org/1999/xlink"
4 |  width="26px" height="22px">
5 | <path fill-rule="evenodd"  fill="rgb(243, 129, 129)"
6 |  d="M17.513,0.601 C19.547,0.565 20.630,1.306 21.664,2.248 C22.542,2.173 23.683,1.683 24.355,1.341 C24.572,1.223 24.790,1.103 25.008,0.984 C24.624,2.021 24.104,2.833 23.304,3.450 C23.126,3.586 22.950,3.771 22.727,3.858 C22.727,3.862 22.727,3.867 22.727,3.871 C23.867,3.860 24.807,3.345 25.700,3.066 C25.700,3.070 25.700,3.075 25.700,3.079 C25.231,3.824 24.596,4.581 23.919,5.123 C23.646,5.340 23.372,5.557 23.099,5.774 C23.114,6.981 23.081,8.133 22.856,9.147 C21.544,15.042 18.068,19.044 12.567,20.759 C10.591,21.374 7.399,21.627 5.135,21.065 C4.013,20.787 2.999,20.472 2.048,20.056 C1.519,19.825 1.029,19.575 0.561,19.289 C0.407,19.196 0.254,19.102 0.100,19.009 C0.610,19.024 1.208,19.165 1.778,19.072 C2.295,18.989 2.801,19.011 3.278,18.907 C4.466,18.646 5.521,18.301 6.429,17.769 C6.870,17.511 7.539,17.209 7.852,16.837 C7.262,16.847 6.727,16.710 6.289,16.556 C4.590,15.956 3.601,14.853 2.957,13.196 C3.472,13.253 4.955,13.387 5.302,13.094 C4.654,13.058 4.031,12.683 3.585,12.404 C2.218,11.549 1.104,10.115 1.112,7.908 C1.292,7.993 1.471,8.078 1.650,8.163 C1.994,8.308 2.343,8.385 2.752,8.470 C2.925,8.506 3.271,8.607 3.470,8.533 C3.461,8.533 3.453,8.533 3.444,8.533 C3.180,8.226 2.749,8.021 2.483,7.690 C1.606,6.601 0.785,4.924 1.304,2.926 C1.436,2.419 1.645,1.972 1.868,1.559 C1.877,1.563 1.885,1.567 1.894,1.571 C1.996,1.785 2.224,1.942 2.368,2.121 C2.816,2.676 3.368,3.175 3.931,3.615 C5.849,5.115 7.576,6.037 10.350,6.719 C11.054,6.893 11.867,7.025 12.708,7.026 C12.472,6.339 12.548,5.226 12.733,4.561 C13.201,2.887 14.216,1.682 15.706,1.035 C16.062,0.881 16.457,0.768 16.872,0.677 C17.086,0.652 17.299,0.626 17.513,0.601 Z"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/img/team-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/webinar/gulp-project/src/img/team-1.jpg


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/img/team-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/html-css-source-code/2f9cdbbef411b4908457f317a4d3a64c25195195/module-11/webinar/gulp-project/src/img/team-2.jpg


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Placeholder title</title>
 9 |   <link rel="stylesheet" href="css/styles.min.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/sass/helpers/variables.scss:
--------------------------------------------------------------------------------
1 | $color: blue;
2 | 


--------------------------------------------------------------------------------
/module-11/webinar/gulp-project/src/sass/styles.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |    Import partials below
 3 | */
 4 | @import 'normalize';
 5 | @import 'helpers/variables';
 6 | 
 7 | body {
 8 |   background-color: teal;
 9 | }
10 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/links.txt:
--------------------------------------------------------------------------------
1 | https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275
2 | 
3 | https://tutorialzine.com/2016/01/learn-sass-in-15-minutes
4 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webinar-24-04",
 3 |   "version": "1.0.0",
 4 |   "description": "npm basics",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "scss:build": "node-sass src/scss/styles.scss -o src/css",
 8 |     "scss:watch": "node-sass --watch src/scss/styles.scss -o src/css",
 9 |     "build": "npm run scss:build && npm run scss:watch"
10 |   },
11 |   "author": "Alexander Repeta <alexander.repeta@gmail.com>",
12 |   "license": "MIT",
13 |   "dependencies": {
14 |     "node-sass": "^4.8.3"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/plant.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | // Storing Values in Maps
 3 | 
 4 | // Color map
 5 | $colors: (
 6 |   primary-dark: #212121,
 7 |   secondary-dark: #424242,
 8 |   suplement-dark: #616161,
 9 |   primary-light: #ffffff,
10 |   code-highlight: #f7f7f7,
11 |   note-accent: #fff8e1,
12 |   note-border: #f9a825,
13 |   warn-accent: #ffebee,
14 |   warn-border: #d32f2f
15 | );
16 | 
17 | // color picker function
18 | @function color($key) {
19 |   @if map-has-key($colors, $key) {
20 |     @return map-get($colors, $key);
21 |   }
22 | 
23 |   @return null;
24 | }
25 | 
26 | 
27 | .text {
28 |   color: color(warn-border);
29 |   background-color: color(note-border);
30 | }
31 | 
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/css/styles.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | .button-primary, .button-secondary {
 3 |   display: inline-block;
 4 |   text-decoration: none;
 5 |   border: none;
 6 |   outline: 0;
 7 |   background-color: red; }
 8 | 
 9 | .note-error, .note-success {
10 |   display: inline-block;
11 |   position: absolute;
12 |   padding: 10px 20px; }
13 | 
14 | html {
15 |   box-sizing: border-box; }
16 | 
17 | *,
18 | *::before,
19 | *::after {
20 |   box-sizing: inherit; }
21 | 
22 | img {
23 |   display: block;
24 |   max-width: 100%;
25 |   height: auto; }
26 | 
27 | body {
28 |   background-color: rgba(216, 112, 147, 0.3);
29 |   font-family: "PT Sans", "Roboto", "Arial", sans-serif;
30 |   color: #212121; }
31 | 
32 | .container {
33 |   width: 320px; }
34 |   @media (min-width: 768px) {
35 |     .container {
36 |       width: 720px; } }
37 |   .container::before {
38 |     display: inline-block;
39 |     content: ""; }
40 |     @media (min-width: 768px) {
41 |       .container::before {
42 |         background-color: red; } }
43 |   @media (min-width: 940px) {
44 |     .container {
45 |       width: 900px; } }
46 | 
47 | .button-primary {
48 |   background-color: #2196f3; }
49 |   .button-primary::before {
50 |     display: inline-block;
51 |     content: '\2192'; }
52 |   .button-primary:hover, .button-primary:focus {
53 |     color: #d87093; }
54 | 
55 | .button-text {
56 |   color: #212121; }
57 | 
58 | .note-error {
59 |   background-color: red; }
60 | 
61 | .note-success {
62 |   background-color: green; }
63 | 
64 | .text {
65 |   font-size: 24px;
66 |   line-height: 1.3; }
67 |   .text::after {
68 |     display: inline-block;
69 |     content: "ℇ"; }
70 | 
71 | .icon--facebook {
72 |   display: inline-block;
73 |   width: 50px;
74 |   height: 50px;
75 |   background-image: url("../img/facebook.svg");
76 |   background-size: cover;
77 |   background-repeat: no-repeat;
78 |   background-position: center; }
79 | 
80 | .icon--linkedin {
81 |   display: inline-block;
82 |   width: 50px;
83 |   height: 50px;
84 |   background-image: url("../img/linkedin.svg");
85 |   background-size: contain;
86 |   background-repeat: repeat-x;
87 |   background-position: 20% 30%; }
88 | 
89 | .section {
90 |   padding-top: 50px;
91 |   padding-bottom: 50px; }
92 |   @media (min-width: 768px) {
93 |     .section {
94 |       margin-bottom: 50px; } }
95 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Webinar 24-04</title>
 9 |   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
10 |   <link rel="stylesheet" href="css/styles.css">
11 | </head>
12 | 
13 | <body>
14 | 
15 |   <a href="#" class="button-primary">
16 |     <span class="button-text">Home</span>
17 |   </a>
18 | 
19 |   <a href="#" class="button-secondary">
20 |     <span class="button-text">Home</span>
21 |   </a>
22 | </body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/base.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 |   box-sizing: inherit;
 9 | }
10 | 
11 | img {
12 |   display: block;
13 |   max-width: 100%;
14 |   height: auto;
15 | }
16 | 
17 | body {
18 |   background-color: rgba($primary-accent-color, 0.3);
19 |   font-family: $primary-font-stack;
20 |   color: $primary-dark-color;
21 | }
22 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/button.scss:
--------------------------------------------------------------------------------
 1 | .button-primary {
 2 |   @extend %button;
 3 |   background-color: #2196f3;
 4 | 
 5 |   &::before {
 6 |     display: inline-block;
 7 |     content: '\2192';
 8 |   }
 9 | 
10 |   &:hover,
11 |   &:focus {
12 |     color: $primary-accent-color;
13 |   }
14 | }
15 | 
16 | .button-text {
17 |   color: $primary-dark-color;
18 | }
19 | 
20 | .button-secondary {
21 |   @extend %button;
22 | }
23 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/container.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 320px;
 3 | 
 4 |   @media (min-width: 768px) {
 5 |     width: 720px;
 6 |   }
 7 | 
 8 |   &::before {
 9 |     @include pseudo();
10 | 
11 |     @media (min-width: 768px) {
12 |       background-color: red;
13 |     }
14 |   }
15 | 
16 |   @media (min-width: 940px) {
17 |     width: 900px;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/helpers/mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin font-settings($size, $height) {
 2 |   font-size: $size;
 3 |   line-height: $height;
 4 | }
 5 | 
 6 | @mixin pseudo($display: inline-block, $content: '') {
 7 |   display: $display;
 8 |   content: $content;
 9 | }
10 | 
11 | @mixin bg-image($path: '', $size: cover, $repeat: no-repeat, $pos: center) {
12 |   background-image: url($path);
13 |   background-size: $size;
14 |   background-repeat: $repeat;
15 |   background-position: $pos;
16 | }
17 | 
18 | @mixin center-flex($type: 'all') {
19 |   display: flex;
20 | 
21 |   @if $type== 'all' {
22 |     justify-content: center;
23 |     align-items: center;
24 |   } @else if $type== 'hor' {
25 |     justify-content: center;
26 |   } @else if $type== 'ver' {
27 |     align-items: center;
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/helpers/placeholders.scss:
--------------------------------------------------------------------------------
 1 | %button {
 2 |   display: inline-block;
 3 |   text-decoration: none;
 4 |   border: none;
 5 |   outline: 0;
 6 |   background-color: red;
 7 | }
 8 | 
 9 | %note {
10 |   display: inline-block;
11 |   position: absolute;
12 |   padding: 10px 20px;
13 | }
14 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/helpers/variables.scss:
--------------------------------------------------------------------------------
1 | $primary-font-stack: 'PT Sans', 'Roboto', 'Arial', sans-serif;
2 | $primary-dark-color: #212121;
3 | $primary-accent-color: #d87093;
4 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/note.scss:
--------------------------------------------------------------------------------
 1 | .note-error {
 2 |   @extend %note;
 3 |   background-color: red;
 4 | }
 5 | 
 6 | .note-success {
 7 |   @extend %note;
 8 |   background-color: green;
 9 | }
10 | 


--------------------------------------------------------------------------------
/module-11/webinar/simple-sass/src/scss/styles.scss:
--------------------------------------------------------------------------------
 1 | @import 'helpers/variables';
 2 | @import 'helpers/placeholders';
 3 | @import 'helpers/mixins';
 4 | 
 5 | // Components
 6 | @import 'base';
 7 | @import 'container';
 8 | @import 'button';
 9 | @import 'note';
10 | 
11 | .text {
12 |   @include font-settings(24px, 1.3);
13 | 
14 |   &::after {
15 |     @include pseudo(inline-block, '\2107');
16 |   }
17 | }
18 | 
19 | .icon--facebook {
20 |   display: inline-block;
21 |   width: 50px;
22 |   height: 50px;
23 |   @include bg-image($path: '../img/facebook.svg');
24 | }
25 | 
26 | .icon--linkedin {
27 |   display: inline-block;
28 |   width: 50px;
29 |   height: 50px;
30 |   @include bg-image('../img/linkedin.svg', contain, repeat-x, 20% 30%);
31 | }
32 | 
33 | .section {
34 |   padding-top: 50px;
35 |   padding-bottom: 50px;
36 | 
37 |   @media (min-width: 768px) {
38 |     margin-bottom: 50px;
39 |   }
40 | }
41 | 
42 | 
43 | 
44 | 
45 | // $icons: facebook, linkedin, twitter, telegram, pinterest;
46 | 
47 | // %icon {
48 | //   display: inline-block;
49 | //   width: 4rem;
50 | //   height: 4rem;
51 | // }
52 | 
53 | 
54 | // @mixin generate-icons($baseclass, $list, $path, $ext) {
55 | //   @each $icon in $list {
56 | //     .#{$baseclass}#{$icon} {
57 | //       @extend %icon;
58 | //       background-image: url(#{$path}#{$icon}.#{$ext});
59 | //     }
60 | //   }
61 | // }
62 | 
63 | // @include generate-icons('icon-', $icons, '../img/social-icons/', 'png');
64 | 


--------------------------------------------------------------------------------