diff --git a/10/README.md b/10/README.md new file mode 100644 index 0000000..86af477 --- /dev/null +++ b/10/README.md @@ -0,0 +1,3 @@ +# 10. Skillbox, оптимизация графики, Squoosh и элемент picture + +[Подробнее в видео](https://youtu.be/gHLPBlzGRT8) diff --git a/10/images/square@1x.png b/10/images/square@1x.png new file mode 100644 index 0000000..3ec059a Binary files /dev/null and b/10/images/square@1x.png differ diff --git a/10/images/square@1x.webp b/10/images/square@1x.webp new file mode 100644 index 0000000..e92d0e3 Binary files /dev/null and b/10/images/square@1x.webp differ diff --git a/10/images/square@2x.png b/10/images/square@2x.png new file mode 100644 index 0000000..a746554 Binary files /dev/null and b/10/images/square@2x.png differ diff --git a/10/images/square@2x.webp b/10/images/square@2x.webp new file mode 100644 index 0000000..362b71f Binary files /dev/null and b/10/images/square@2x.webp differ diff --git a/10/images/wide@1x.png b/10/images/wide@1x.png new file mode 100644 index 0000000..ac5c23c Binary files /dev/null and b/10/images/wide@1x.png differ diff --git a/10/images/wide@1x.webp b/10/images/wide@1x.webp new file mode 100644 index 0000000..d17909e Binary files /dev/null and b/10/images/wide@1x.webp differ diff --git a/10/images/wide@2x.png b/10/images/wide@2x.png new file mode 100644 index 0000000..56451bc Binary files /dev/null and b/10/images/wide@2x.png differ diff --git a/10/images/wide@2x.webp b/10/images/wide@2x.webp new file mode 100644 index 0000000..9ee59e8 Binary files /dev/null and b/10/images/wide@2x.webp differ diff --git a/10/index.html b/10/index.html new file mode 100644 index 0000000..b8f6abe --- /dev/null +++ b/10/index.html @@ -0,0 +1,29 @@ + + + + + 10. Skillbox, оптимизация графики, Squoosh и элемент picture + + + + + + + + Девушка пьёт кофе + + + diff --git a/11/README.md b/11/README.md new file mode 100644 index 0000000..27d1722 --- /dev/null +++ b/11/README.md @@ -0,0 +1,3 @@ +# 11. Прототип изоляции стилей для Shower на веб-компонентах + +[Подробнее в видео](https://youtu.be/_FRIRJZYlxU) diff --git a/11/deck/deck.css b/11/deck/deck.css new file mode 100644 index 0000000..b8c0af9 --- /dev/null +++ b/11/deck/deck.css @@ -0,0 +1,9 @@ +:host { + display: block; + box-sizing: border-box; + padding: 25px; + min-height: 100vh; + overflow: hidden; + background-color: #585a5e; + font-family: 'PT Sans', sans-serif; +} diff --git a/11/deck/deck.js b/11/deck/deck.js new file mode 100644 index 0000000..779d47c --- /dev/null +++ b/11/deck/deck.js @@ -0,0 +1,19 @@ +customElements.define('shower-deck', class extends HTMLElement { + constructor() { + super(); + + this.attachShadow({ + mode: 'open' + }); + + const template = document.createElement('template'); + template.innerHTML = ` + + + `; + + this.shadowRoot.appendChild( + template.content.cloneNode(true) + ); + } +}); \ No newline at end of file diff --git a/11/index.html b/11/index.html new file mode 100644 index 0000000..62181d6 --- /dev/null +++ b/11/index.html @@ -0,0 +1,37 @@ + + + + + Shower + + + + + +

Slide One

+ + +

Slide Two

+ + + +

Slide Three

+ + + + + + + diff --git a/11/slide/slide.css b/11/slide/slide.css new file mode 100644 index 0000000..1a21f92 --- /dev/null +++ b/11/slide/slide.css @@ -0,0 +1,15 @@ +:host { + display: block; + box-sizing: border-box; + margin-bottom: 25px; + padding: 15px 20px; + width: 256px; + height: 144px; + background-color: white; +} + +::slotted(h2) { + margin: 0; + color: #585a5e; + font-family: 'PT Sans Narrow', sans-serif; +} \ No newline at end of file diff --git a/11/slide/slide.js b/11/slide/slide.js new file mode 100644 index 0000000..64b54b4 --- /dev/null +++ b/11/slide/slide.js @@ -0,0 +1,29 @@ +customElements.define('shower-slide', class extends HTMLElement { + constructor() { + super(); + + this.attachShadow({ + mode: 'open' + }); + + const template = document.createElement('template'); + template.innerHTML = ` + + + + `; + + this.shadowRoot.appendChild( + template.content.cloneNode(true) + ); + + const styles = this.shadowRoot + .querySelector('slot[name="styles"]') + .assignedNodes(); + if (styles.length) { + this.shadowRoot.appendChild( + styles[0] + ); + } + } +}); diff --git a/12/README.md b/12/README.md new file mode 100644 index 0000000..1c2e5b4 --- /dev/null +++ b/12/README.md @@ -0,0 +1,3 @@ +# 12. Как вставить двадцать видео с Ютуба и не скачать слона + +[Подробнее в видео](https://youtu.be/4JS70KB9GS0) diff --git a/12/after.html b/12/after.html new file mode 100644 index 0000000..c7e941c --- /dev/null +++ b/12/after.html @@ -0,0 +1,56 @@ + + + + + + + + + +
+ + + + 1. Пилот, разборы, ответы и лайвы + + + +
+
+ + + + 1. Пилот, разборы, ответы и лайвы + + + +
+
+ + + + 1. Пилот, разборы, ответы и лайвы + + + +
+
+ + + + 1. Пилот, разборы, ответы и лайвы + + + +
+ + + \ No newline at end of file diff --git a/12/before.html b/12/before.html new file mode 100644 index 0000000..90b91f8 --- /dev/null +++ b/12/before.html @@ -0,0 +1,50 @@ + + + + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/12/page.css b/12/page.css new file mode 100644 index 0000000..b68f8ba --- /dev/null +++ b/12/page.css @@ -0,0 +1,6 @@ +.page { + margin: 0; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; +} diff --git a/12/video.css b/12/video.css new file mode 100644 index 0000000..5d7a332 --- /dev/null +++ b/12/video.css @@ -0,0 +1,68 @@ +.video { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; + background-color: #000000; +} + +.video__link { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.video__media { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +.video__button { + position: absolute; + top: 50%; + left: 50%; + z-index: 1; + display: none; + padding: 0; + width: 68px; + height: 48px; + border: none; + background-color: transparent; + transform: translate(-50%, -50%); + cursor: pointer; +} + +.video__button-shape { + fill: #212121; + fill-opacity: 0.8; +} + +.video__button-icon { + fill: #ffffff; +} + +.video__button:focus { + outline: none; +} + +.video:hover .video__button-shape, +.video__button:focus .video__button-shape { + fill: #ff0000; + fill-opacity: 1; +} + +/* Enabled */ + +.video--enabled { + cursor: pointer; +} + +.video--enabled .video__button { + display: block; +} \ No newline at end of file diff --git a/12/video.js b/12/video.js new file mode 100644 index 0000000..687b9ad --- /dev/null +++ b/12/video.js @@ -0,0 +1,51 @@ +function findVideos() { + let videos = document.querySelectorAll('.video'); + + for (let i = 0; i < videos.length; i++) { + setupVideo(videos[i]); + } +} + +function setupVideo(video) { + let link = video.querySelector('.video__link'); + let media = video.querySelector('.video__media'); + let button = video.querySelector('.video__button'); + let id = parseMediaURL(media); + + video.addEventListener('click', () => { + let iframe = createIframe(id); + + link.remove(); + button.remove(); + video.appendChild(iframe); + }); + + link.removeAttribute('href'); + video.classList.add('video--enabled'); +} + +function parseMediaURL(media) { + let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i; + let url = media.src; + let match = url.match(regexp); + + return match[1]; +} + +function createIframe(id) { + let iframe = document.createElement('iframe'); + + iframe.setAttribute('allowfullscreen', ''); + iframe.setAttribute('src', generateURL(id)); + iframe.classList.add('video__media'); + + return iframe; +} + +function generateURL(id) { + let query = '?rel=0&showinfo=0&autoplay=1'; + + return 'https://www.youtube.com/embed/' + id + query; +} + +findVideos(); \ No newline at end of file diff --git a/14/README.md b/14/README.md new file mode 100644 index 0000000..ba72fed --- /dev/null +++ b/14/README.md @@ -0,0 +1,3 @@ +# 14. Кастомные чекбоксы правильно + +[Подробнее в видео](https://youtu.be/E6kLaaQFctU) diff --git a/14/hidden.html b/14/hidden.html new file mode 100644 index 0000000..93851b3 --- /dev/null +++ b/14/hidden.html @@ -0,0 +1,96 @@ + + + + + Чекбокс: Совместимый + + + + + + + + + \ No newline at end of file diff --git a/14/images.html b/14/images.html new file mode 100644 index 0000000..14fbb01 --- /dev/null +++ b/14/images.html @@ -0,0 +1,90 @@ + + + + + Чекбокс: Картинки + + + + + + + + + \ No newline at end of file diff --git a/14/images/check.svg b/14/images/check.svg new file mode 100644 index 0000000..92a3485 --- /dev/null +++ b/14/images/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/14/images/off-disabled.svg b/14/images/off-disabled.svg new file mode 100644 index 0000000..d59756f --- /dev/null +++ b/14/images/off-disabled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/14/images/off-focused.svg b/14/images/off-focused.svg new file mode 100644 index 0000000..2efbe0d --- /dev/null +++ b/14/images/off-focused.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/14/images/off.svg b/14/images/off.svg new file mode 100644 index 0000000..a2ac7d5 --- /dev/null +++ b/14/images/off.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/14/images/on-disabled.svg b/14/images/on-disabled.svg new file mode 100644 index 0000000..f21bf57 --- /dev/null +++ b/14/images/on-disabled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/14/images/on-focused.svg b/14/images/on-focused.svg new file mode 100644 index 0000000..70a6e9d --- /dev/null +++ b/14/images/on-focused.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/14/images/on.svg b/14/images/on.svg new file mode 100644 index 0000000..8f72a60 --- /dev/null +++ b/14/images/on.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/14/index.html b/14/index.html new file mode 100644 index 0000000..2eeff6e --- /dev/null +++ b/14/index.html @@ -0,0 +1,93 @@ + + + + + Чекбокс + + + + + + + + + \ No newline at end of file diff --git a/14/inline.html b/14/inline.html new file mode 100644 index 0000000..3f20da2 --- /dev/null +++ b/14/inline.html @@ -0,0 +1,117 @@ + + + + + Чекбокс: Инлайном + + + + + + + + + \ No newline at end of file diff --git a/14/plain.html b/14/plain.html new file mode 100644 index 0000000..84bb0ef --- /dev/null +++ b/14/plain.html @@ -0,0 +1,39 @@ + + + + + Чекбокс: Простой + + + + + + + + + \ No newline at end of file diff --git a/14/source.sketch b/14/source.sketch new file mode 100644 index 0000000..9e727f1 Binary files /dev/null and b/14/source.sketch differ diff --git a/14/styles.html b/14/styles.html new file mode 100644 index 0000000..4cab38e --- /dev/null +++ b/14/styles.html @@ -0,0 +1,95 @@ + + + + + Чекбокс: Стили + + + + + + + + + \ No newline at end of file diff --git a/16/README.md b/16/README.md new file mode 100644 index 0000000..27b9c73 --- /dev/null +++ b/16/README.md @@ -0,0 +1,3 @@ +# 16. Звёздный рейтинг ⭐️⭐️⭐️⭐️⭐️ + +[Подробнее в видео](https://youtu.be/EbajTYI-gg8) diff --git a/16/focus.html b/16/focus.html new file mode 100644 index 0000000..33410ce --- /dev/null +++ b/16/focus.html @@ -0,0 +1,142 @@ + + + + + Рейтинг: Фокусный + + + +
+ Самочувствие +
+ + + + + +
+
+
+
+ Настроение +
+ + + + + +
+
+
+
+ Вообще +
+ + + + + +
+
+
+ + \ No newline at end of file diff --git a/16/images/off.svg b/16/images/off.svg new file mode 100644 index 0000000..7bb0158 --- /dev/null +++ b/16/images/off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/16/images/on.svg b/16/images/on.svg new file mode 100644 index 0000000..b8c6a8f --- /dev/null +++ b/16/images/on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/16/label.html b/16/label.html new file mode 100644 index 0000000..8756cbd --- /dev/null +++ b/16/label.html @@ -0,0 +1,174 @@ + + + + + Рейтинг: Совместимый + + + +
+ Самочувствие +
+ + + + + + + + + + + + + + + +
+
+
+
+ Настроение +
+ + + + + + + + + + + + + + + +
+
+
+
+ Вообще +
+ + + + + + + + + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/16/modern.html b/16/modern.html new file mode 100644 index 0000000..27eeda3 --- /dev/null +++ b/16/modern.html @@ -0,0 +1,133 @@ + + + + + Рейтинг: Современный + + + +
+ Самочувствие +
+ + + + + +
+
+
+ Настроение +
+ + + + + +
+
+
+ Вообще +
+ + + + + +
+
+ + \ No newline at end of file diff --git a/16/plain.html b/16/plain.html new file mode 100644 index 0000000..48b29c7 --- /dev/null +++ b/16/plain.html @@ -0,0 +1,55 @@ + + + + + Рейтинг: Простой + + + +
+ Самочувствие + + + + + +
+
+ Настроение + + + + + +
+
+ Вообще + + + + + +
+ + \ No newline at end of file diff --git a/16/source.sketch b/16/source.sketch new file mode 100644 index 0000000..cf06ba9 Binary files /dev/null and b/16/source.sketch differ diff --git a/19/README.md b/19/README.md new file mode 100644 index 0000000..fa3e3f7 --- /dev/null +++ b/19/README.md @@ -0,0 +1,3 @@ +# 19. Кастомные свойства или честный Sass вместо CSS-переменных на PostCSS + +[Подробнее в видео](https://youtu.be/nbN22yqEgM0) diff --git a/19/init.sh b/19/init.sh new file mode 100644 index 0000000..f292f36 --- /dev/null +++ b/19/init.sh @@ -0,0 +1,3 @@ +npm install live-server node-sass postcss-cli postcss-custom-properties +npx node-sass index.scss --watch index.css +npx postcss index.css --use postcss-custom-properties --no-map --watch --output post.css diff --git a/19/plain/index.css b/19/plain/index.css new file mode 100644 index 0000000..0865850 --- /dev/null +++ b/19/plain/index.css @@ -0,0 +1,36 @@ +/* Page */ + +.page { + margin: 0; + font-family: sans-serif; +} + +.page__title { + margin: 0; + padding: 20px; +} + +/* Card Set */ + +.card-set { + display: grid; + grid-template-columns: repeat( + auto-fill, minmax(200px, 1fr) + ); + gap: 20px; + padding: 20px; + background-color: silver; +} + +/* Card */ + +.card { + padding: 5px 20px; + background-color: whitesmoke; + color: black; +} + +.card__title::before { + content: '🐼 '; + line-height: 1; +} diff --git a/19/plain/index.html b/19/plain/index.html new file mode 100644 index 0000000..06e127e --- /dev/null +++ b/19/plain/index.html @@ -0,0 +1,59 @@ + + + + + + Товары + + + +

Товары

+
+

Обычные

+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+ + diff --git a/19/postcss/index.css b/19/postcss/index.css new file mode 100644 index 0000000..2555518 --- /dev/null +++ b/19/postcss/index.css @@ -0,0 +1,44 @@ +/* Vars */ + +:root { + --card-fill: whitesmoke; + --card-text: black; + --card-animal: '🐼 '; +} + +/* Page */ + +.page { + margin: 0; + font-family: sans-serif; +} + +.page__title { + margin: 0; + padding: 20px; +} + +/* Card Set */ + +.card-set { + display: grid; + grid-template-columns: repeat( + auto-fill, minmax(200px, 1fr) + ); + gap: 20px; + padding: 20px; + background-color: silver; +} + +/* Card */ + +.card { + padding: 5px 20px; + background-color: var(--card-fill); + color: var(--card-text); +} + +.card__title::before { + content: var(--card-animal); + line-height: 1; +} diff --git a/19/postcss/index.html b/19/postcss/index.html new file mode 100644 index 0000000..25feed8 --- /dev/null +++ b/19/postcss/index.html @@ -0,0 +1,59 @@ + + + + + + Товары + + + +

Товары

+
+

Обычные

+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+ + diff --git a/19/postcss/post.css b/19/postcss/post.css new file mode 100644 index 0000000..1999a08 --- /dev/null +++ b/19/postcss/post.css @@ -0,0 +1,47 @@ +/* Vars */ + +:root { + --card-fill: whitesmoke; + --card-text: black; + --card-animal: '🐼 '; +} + +/* Page */ + +.page { + margin: 0; + font-family: sans-serif; +} + +.page__title { + margin: 0; + padding: 20px; +} + +/* Card Set */ + +.card-set { + display: grid; + grid-template-columns: repeat( + auto-fill, minmax(200px, 1fr) + ); + gap: 20px; + padding: 20px; + background-color: silver; +} + +/* Card */ + +.card { + padding: 5px 20px; + background-color: whitesmoke; + background-color: var(--card-fill); + color: black; + color: var(--card-text); +} + +.card__title::before { + content: '🐼 '; + content: var(--card-animal); + line-height: 1; +} diff --git a/19/sass/index.css b/19/sass/index.css new file mode 100644 index 0000000..d9bcb23 --- /dev/null +++ b/19/sass/index.css @@ -0,0 +1,27 @@ +@charset "UTF-8"; +/* Page */ +.page { + margin: 0; + font-family: sans-serif; } + +.page__title { + margin: 0; + padding: 20px; } + +/* Card Set */ +.card-set { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + padding: 20px; + background-color: silver; } + +/* Card */ +.card { + padding: 5px 20px; + background-color: whitesmoke; + color: black; } + +.card__title::before { + content: "🐼 "; + line-height: 1; } diff --git a/19/sass/index.html b/19/sass/index.html new file mode 100644 index 0000000..06e127e --- /dev/null +++ b/19/sass/index.html @@ -0,0 +1,59 @@ + + + + + + Товары + + + +

Товары

+
+

Обычные

+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+ + diff --git a/19/sass/index.scss b/19/sass/index.scss new file mode 100644 index 0000000..a00d6f4 --- /dev/null +++ b/19/sass/index.scss @@ -0,0 +1,42 @@ +// Vars + +$card-fill: whitesmoke; +$card-text: black; +$card-animal: '🐼 '; + +/* Page */ + +.page { + margin: 0; + font-family: sans-serif; +} + +.page__title { + margin: 0; + padding: 20px; +} + +/* Card Set */ + +.card-set { + display: grid; + grid-template-columns: repeat( + auto-fill, minmax(200px, 1fr) + ); + gap: 20px; + padding: 20px; + background-color: silver; +} + +/* Card */ + +.card { + padding: 5px 20px; + background-color: $card-fill; + color: $card-text; +} + +.card__title::before { + content: $card-animal; + line-height: 1; +} diff --git a/19/themes/index.css b/19/themes/index.css new file mode 100644 index 0000000..5825e83 --- /dev/null +++ b/19/themes/index.css @@ -0,0 +1,52 @@ +/* Page */ + +.page { + margin: 0; + font-family: sans-serif; +} + +.page__title { + margin: 0; + padding: 20px; +} + +/* Card Set */ + +.card-set { + display: grid; + grid-template-columns: repeat( + auto-fill, minmax(200px, 1fr) + ); + gap: 20px; + padding: 20px; + background-color: silver; +} + +.card-set--blue { + --card-fill: aliceblue; + --card-text: darkblue; + --card-animal: '🦋 '; + + background-color: cornflowerblue; +} + +.card-set--green { + --card-fill: honeydew; + --card-text: darkgreen; + --card-animal: '🐸 '; + + background-color: darkseagreen; +} + +/* Card */ + +.card { + padding: 5px 20px; + background-color: var(--card-fill, whitesmoke); + color: var(--card-text, black); +} + +.card__title::before { + content: var(--card-animal, '🐼 '); + line-height: 1; +} diff --git a/19/themes/index.html b/19/themes/index.html new file mode 100644 index 0000000..e3aebfc --- /dev/null +++ b/19/themes/index.html @@ -0,0 +1,153 @@ + + + + + + Товары + + + +

Товары

+
+

Обычные

+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+
+

Синие

+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+
+

Зелёные

+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+

Товар

+

Вообще огонь

+
+
+ + diff --git a/20/README.md b/20/README.md new file mode 100644 index 0000000..2380f29 --- /dev/null +++ b/20/README.md @@ -0,0 +1,3 @@ +# 20. Шапка на гридах и флексах с гэпами и БЭМ + +[Подробнее в видео](https://youtu.be/OkWwM4yE-V0) diff --git a/20/index.css b/20/index.css new file mode 100644 index 0000000..b08f010 --- /dev/null +++ b/20/index.css @@ -0,0 +1,83 @@ +/* Page */ + +.page { + font-family: sans-serif; +} + +.page__body { + margin: 0; +} + +/* Header */ + +.header { + display: grid; + grid-template-columns: + min-content + 1fr + min-content; + column-gap: 50px; + row-gap: 25px; + padding: 35px 50px; + background-color: powderblue; +} + +/* Logo */ + +.logo { + width: 128px; + height: 64px; + background-color: mediumseagreen; +} + +/* Search */ + +.search { + display: grid; + grid-template-columns: 1fr min-content; +} + +.search__input { + margin: 0; + padding: 20px; + border: none; + font-size: 20px; + font-family: inherit; +} + +.search__button { + margin: 0; + padding: 20px; + border: none; + background-color: palevioletred; + color: white; + font-size: 20px; + font-family: inherit; +} + +/* Login */ + +.login { + width: 128px; + background-color: mediumpurple; +} + +/* Options */ + +.options { + display: grid; + grid-auto-flow: column; + justify-content: stretch; + gap: 20px; + grid-row-start: 2; + grid-column: 2 / -2; +} + +.options__button { + padding: 10px 15px; + border: none; + background-color: steelblue; + color: white; + font-size: 16px; + font-family: inherit; +} diff --git a/20/index.html b/20/index.html new file mode 100644 index 0000000..5e3a723 --- /dev/null +++ b/20/index.html @@ -0,0 +1,25 @@ + + + + + + Шапка + + + +
+ +
+ + +
+
+ + + + +
+
+
+ + diff --git a/21/README.md b/21/README.md new file mode 100644 index 0000000..962b181 --- /dev/null +++ b/21/README.md @@ -0,0 +1,3 @@ +# 21. Направляющие для адаптивной сетки на градиентах и кастомных свойствах + +[Подробнее в видео](https://youtu.be/WBrngvT78gw) diff --git a/21/grid.css b/21/grid.css new file mode 100644 index 0000000..99a2069 --- /dev/null +++ b/21/grid.css @@ -0,0 +1,50 @@ +/* Grid */ + +.grid::before { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ''; + pointer-events: none; + + --grid-color: rgb(255 0 0 / 0.2); + --grid-sides: 16px; + --grid-gutter: 16px; + --grid-columns: 4; + --grid-column-width: calc( + (100% - var(--grid-gutter) * var(--grid-columns)) / var(--grid-columns) + ); + + border: solid transparent; + border-width: 0 calc( + var(--grid-sides) - var(--grid-gutter) / 2 + ); + + background-image: repeating-linear-gradient( + to right, + transparent 0, + transparent calc(var(--grid-gutter) / 2), + var(--grid-color) calc(var(--grid-gutter) / 2), + var(--grid-color) calc(var(--grid-column-width) + var(--grid-gutter) / 2), + transparent calc(var(--grid-column-width) + var(--grid-gutter) / 2), + transparent calc(var(--grid-column-width) + var(--grid-gutter)) + ); + + background-repeat: no-repeat; +} + +@media (min-width: 736px) { + .grid::before { + --grid-sides: 24px; + --grid-columns: 8; + } +} + +@media (min-width: 1008px) { + .grid::before { + --grid-sides: 32px; + --grid-columns: 12; + } +} diff --git a/21/index.html b/21/index.html new file mode 100644 index 0000000..0a0225a --- /dev/null +++ b/21/index.html @@ -0,0 +1,24 @@ + + + + Веб-стандарты + + + + + + + + + diff --git a/23/README.md b/23/README.md new file mode 100644 index 0000000..ae50ec5 --- /dev/null +++ b/23/README.md @@ -0,0 +1,444 @@ +# 23. Веб-сервер на Ubuntu с нуля: nginx, HTTP/2, brotli и HTTPS + +[Подробнее в видео](https://youtu.be/oanbIqkS9LM) + +Проверено на Ubuntu 18.04.4 LTS + +## Настройка root + +Подключаемся + +``` +ssh root@IP +``` + +Меняем пароль + +``` +passwd +``` + +Обновляем систему + +``` +apt-get update +apt-get upgrade +apt-get dist-upgrade +apt-get autoremove +``` + +Добавляем пользователя + +``` +adduser USER +``` + +Даём права sudo + +``` +adduser USER sudo +``` + +Открываем настройку ssh + +``` +nano /etc/ssh/sshd_config +``` + +Запрещаем логин root + +``` +PermitRootLogin no +``` + +Рестартуем ssh + +``` +systemctl restart sshd +``` + +Выходим + +``` +exit +``` + +## Настройка пользователя + +Подключаемся + +``` +ssh USER@IP +``` + +Делаем папку .ssh для ключа + +``` +mkdir -p ~/.ssh +``` + +Вводим ключ + +``` +nano ~/.ssh/authorized_keys +cat ~/.ssh/id_rsa.pub | pbcopy +``` + +Выставляем права + +``` +sudo chmod -R 700 ~/.ssh/ +``` + +Открываем настройку ssh + +``` +sudo nano /etc/ssh/sshd_config +``` + +Отключаем вход по паролю + +``` +PasswordAuthentication no +``` + +Рестартуем ssh + +``` +sudo systemctl restart sshd +``` + +Открываем настройку sudo + +``` +sudo visudo +``` + +Настраиваем sudo без пароля + +``` +%sudo ALL=(ALL:ALL) NOPASSWD:ALL +``` + +## Установка сервера + +Устанавливаем файрвол + +``` +sudo apt install ufw +``` + +Добавляем репозиторий + +``` +sudo apt-add-repository -y ppa:hda-me/nginx-stable +``` + +Устанавливаем сервер и модули + +``` +sudo apt-get install brotli nginx nginx-module-brotli +``` + +Чиним сервис nginx + +``` +sudo systemctl unmask nginx.service +``` + +Открываем настройки сервера + +``` +sudo nano /etc/nginx/nginx.conf +``` + +Включаем brotli + +``` +load_module modules/ngx_http_brotli_filter_module.so; +load_module modules/ngx_http_brotli_static_module.so; +``` + +Настраиваем brotli + +``` + # Brotli + brotli on; + brotli_comp_level 6; + + brotli_types + text/xml + image/svg+xml + application/x-font-ttf + image/vnd.microsoft.icon + application/x-font-opentype + application/json + font/eot + application/vnd.ms-fontobject + application/javascript + font/otf + application/xml + application/xhtml+xml + text/javascript + application/x-javascript + text/$; +``` + +## Настройка файрвола + +Проверяем статус + +``` +sudo ufw status +``` + +Проверяем список приложений + +``` +sudo ufw app list +``` + +``` +Available applications: + Nginx Full + Nginx HTTP + Nginx HTTPS + OpenSSH +``` + +Добавляем nginx в ufw, если его нет + +``` +sudo nano /etc/ufw/applications.d/nginx.ini +``` + +``` +[Nginx HTTP] +title=Web Server +description=Enable NGINX HTTP traffic +ports=80/tcp + +[Nginx HTTPS] \ +title=Web Server (HTTPS) \ +description=Enable NGINX HTTPS traffic +ports=443/tcp + +[Nginx Full] +title=Web Server (HTTP,HTTPS) +description=Enable NGINX HTTP and HTTPS traffic +ports=80,443/tcp +``` + +Проверяем список приложений + +``` +sudo ufw app list +``` + +Включаем + +``` +sudo ufw enable +``` + +Разрешаем nginx + +``` +sudo ufw allow 'Nginx Full' +``` + +Разрешаем OpenSSH + +``` +sudo ufw allow 'OpenSSH' +``` + +Проверяем статус + +``` +sudo ufw status +``` + +``` +Status: active + +To Action From +-- ------ ---- +Nginx Full ALLOW Anywhere +OpenSSH ALLOW Anywhere +Nginx Full (v6) ALLOW Anywhere (v6) +OpenSSH (v6) ALLOW Anywhere (v6) +``` + +## Установка certbot + +Добавляем источники + +``` +sudo apt-get install software-properties-common +sudo add-apt-repository ppa:certbot/certbot +``` + +Обновляемся + +``` +sudo apt-get update +``` + +Ставим certbot + +``` +sudo apt-get install python-certbot-nginx +``` + +Генерируем ключ + +``` +sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048 +``` + +Создаём папку для снипетов nginx + +``` +sudo mkdir -p /etc/nginx/snippets/ +``` + +Создаём снипет для SSL + +``` +sudo nano /etc/nginx/snippets/ssl-params.conf +``` + +``` +ssl_session_timeout 1d; +ssl_session_cache shared:SSL:10m; +ssl_session_tickets off; + +ssl_dhparam /etc/ssl/certs/dhparam.pem; + +ssl_protocols TLSv1.2 TLSv1.3; +ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384; +ssl_prefer_server_ciphers off; + +add_header Strict-Transport-Security "max-age=63072000" always; +``` + +## Добавление сайта + +Задаём права для папки + +``` +sudo chown -R $USER:$USER /var/www/ +``` + +Создаём папку сайта + +``` +mkdir -p /var/www/example.com/html +``` + +Создаём конфиг сайта + +``` +sudo nano /etc/nginx/sites-available/example.com.conf +``` + +``` +server { + listen 80; + listen [::]:80; + + server_name example.com www.example.com; + root /var/www/example.com/html; + index index.html index.xml; +} +``` + +Активируем сайт + +``` +sudo ln -s /etc/nginx/sites-available/example.com.conf /etc/nginx/sites-enabled/ +``` + +Проверяем конфиги nginx + +``` +sudo nginx -t +``` + +Рестартуем nginx + +``` +sudo systemctl restart nginx +``` + +## Добавление сертификата + +Запускаем certbot + +``` +sudo certbot --nginx certonly +``` + +Обновляем конфиг сайта + +``` +sudo nano /etc/nginx/sites-available/example.com.conf +``` + +``` +server { + listen 80; + listen [::]:80; + + server_name example.com www.example.com; + return 301 https://example.com$request_uri; +} + +server { + listen 443 ssl http2; + listen [::]:443 ssl http2; + + server_name www.example.com; + return 301 https://example.com$request_uri; + + ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; + ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem; + + include snippets/ssl-params.conf; +} + +server { + listen 443 ssl http2; + listen [::]:443 ssl http2; + + server_name example.com; + root /var/www/example.com/html; + index index.html index.xml; + + ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; + ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem; + + include snippets/ssl-params.conf; +} +``` + +Проверяем конфиг в nginx + +``` +sudo nginx -t +``` + +Рестартуем nginx + +``` +sudo systemctl restart nginx +``` + +Проверяем сайт + +``` +curl example.com +``` diff --git a/24/README.md b/24/README.md new file mode 100644 index 0000000..9f503f3 --- /dev/null +++ b/24/README.md @@ -0,0 +1,3 @@ +# 24. Адаптивная шапка с выпадающим меню на гридах + +[Подробнее в видео](https://youtu.be/o7A0e4PkSAQ) diff --git a/24/fonts/dewi-expanded/bold-cyrillic.woff2 b/24/fonts/dewi-expanded/bold-cyrillic.woff2 new file mode 100644 index 0000000..c60f014 Binary files /dev/null and b/24/fonts/dewi-expanded/bold-cyrillic.woff2 differ diff --git a/24/fonts/dewi-expanded/bold-latin-extended.woff2 b/24/fonts/dewi-expanded/bold-latin-extended.woff2 new file mode 100644 index 0000000..e325d1b Binary files /dev/null and b/24/fonts/dewi-expanded/bold-latin-extended.woff2 differ diff --git a/24/fonts/dewi-expanded/bold-latin.woff2 b/24/fonts/dewi-expanded/bold-latin.woff2 new file mode 100644 index 0000000..fa0830e Binary files /dev/null and b/24/fonts/dewi-expanded/bold-latin.woff2 differ diff --git a/24/fonts/dewi-expanded/regular-cyrillic.woff2 b/24/fonts/dewi-expanded/regular-cyrillic.woff2 new file mode 100644 index 0000000..54fb6bf Binary files /dev/null and b/24/fonts/dewi-expanded/regular-cyrillic.woff2 differ diff --git a/24/fonts/dewi-expanded/regular-latin-extended.woff2 b/24/fonts/dewi-expanded/regular-latin-extended.woff2 new file mode 100644 index 0000000..6584a79 Binary files /dev/null and b/24/fonts/dewi-expanded/regular-latin-extended.woff2 differ diff --git a/24/fonts/dewi-expanded/regular-latin.woff2 b/24/fonts/dewi-expanded/regular-latin.woff2 new file mode 100644 index 0000000..93ebca0 Binary files /dev/null and b/24/fonts/dewi-expanded/regular-latin.woff2 differ diff --git a/24/fonts/dewi/bold-cyrillic.woff2 b/24/fonts/dewi/bold-cyrillic.woff2 new file mode 100644 index 0000000..76fc054 Binary files /dev/null and b/24/fonts/dewi/bold-cyrillic.woff2 differ diff --git a/24/fonts/dewi/bold-latin-extended.woff2 b/24/fonts/dewi/bold-latin-extended.woff2 new file mode 100644 index 0000000..a404006 Binary files /dev/null and b/24/fonts/dewi/bold-latin-extended.woff2 differ diff --git a/24/fonts/dewi/bold-latin.woff2 b/24/fonts/dewi/bold-latin.woff2 new file mode 100644 index 0000000..11227ed Binary files /dev/null and b/24/fonts/dewi/bold-latin.woff2 differ diff --git a/24/fonts/dewi/italic-cyrillic.woff2 b/24/fonts/dewi/italic-cyrillic.woff2 new file mode 100644 index 0000000..3b7382f Binary files /dev/null and b/24/fonts/dewi/italic-cyrillic.woff2 differ diff --git a/24/fonts/dewi/italic-latin-extended.woff2 b/24/fonts/dewi/italic-latin-extended.woff2 new file mode 100644 index 0000000..2b64e32 Binary files /dev/null and b/24/fonts/dewi/italic-latin-extended.woff2 differ diff --git a/24/fonts/dewi/italic-latin.woff2 b/24/fonts/dewi/italic-latin.woff2 new file mode 100644 index 0000000..e140236 Binary files /dev/null and b/24/fonts/dewi/italic-latin.woff2 differ diff --git a/24/fonts/dewi/regular-cyrillic.woff2 b/24/fonts/dewi/regular-cyrillic.woff2 new file mode 100644 index 0000000..51ba2d2 Binary files /dev/null and b/24/fonts/dewi/regular-cyrillic.woff2 differ diff --git a/24/fonts/dewi/regular-latin-extended.woff2 b/24/fonts/dewi/regular-latin-extended.woff2 new file mode 100644 index 0000000..896ac6a Binary files /dev/null and b/24/fonts/dewi/regular-latin-extended.woff2 differ diff --git a/24/fonts/dewi/regular-latin.woff2 b/24/fonts/dewi/regular-latin.woff2 new file mode 100644 index 0000000..d68718c Binary files /dev/null and b/24/fonts/dewi/regular-latin.woff2 differ diff --git a/24/fonts/rostin/regular-cyrillic.woff2 b/24/fonts/rostin/regular-cyrillic.woff2 new file mode 100644 index 0000000..9336246 Binary files /dev/null and b/24/fonts/rostin/regular-cyrillic.woff2 differ diff --git a/24/fonts/rostin/regular-latin-extended.woff2 b/24/fonts/rostin/regular-latin-extended.woff2 new file mode 100644 index 0000000..c4ef79a Binary files /dev/null and b/24/fonts/rostin/regular-latin-extended.woff2 differ diff --git a/24/fonts/rostin/regular-latin.woff2 b/24/fonts/rostin/regular-latin.woff2 new file mode 100644 index 0000000..e7c40eb Binary files /dev/null and b/24/fonts/rostin/regular-latin.woff2 differ diff --git a/24/images/cross.svg b/24/images/cross.svg new file mode 100644 index 0000000..e1c8612 --- /dev/null +++ b/24/images/cross.svg @@ -0,0 +1 @@ + diff --git a/24/images/logo.svg b/24/images/logo.svg new file mode 100644 index 0000000..23eb692 --- /dev/null +++ b/24/images/logo.svg @@ -0,0 +1 @@ + diff --git a/24/images/menu.svg b/24/images/menu.svg new file mode 100644 index 0000000..13accb5 --- /dev/null +++ b/24/images/menu.svg @@ -0,0 +1 @@ + diff --git a/24/images/patreon.svg b/24/images/patreon.svg new file mode 100644 index 0000000..6ed8a4f --- /dev/null +++ b/24/images/patreon.svg @@ -0,0 +1 @@ + diff --git a/24/images/sprite.svg b/24/images/sprite.svg new file mode 100644 index 0000000..d5f815c --- /dev/null +++ b/24/images/sprite.svg @@ -0,0 +1,4 @@ + + + + diff --git a/24/index.html b/24/index.html new file mode 100644 index 0000000..a9d91d4 --- /dev/null +++ b/24/index.html @@ -0,0 +1,56 @@ + + + + Веб-стандарты + + + + + +
+ + +
+ + + diff --git a/24/init.sh b/24/init.sh new file mode 100644 index 0000000..2f0180e --- /dev/null +++ b/24/init.sh @@ -0,0 +1,2 @@ +npm install postcss-cli postcss-import postcss-media-minmax postcss-csso +npx postcss styles/index.css --use postcss-import --use postcss-media-minmax --use postcss-csso --no-map --output styles/index.min.css diff --git a/24/styles/blocks/grid.css b/24/styles/blocks/grid.css new file mode 100644 index 0000000..6ad7c3c --- /dev/null +++ b/24/styles/blocks/grid.css @@ -0,0 +1,53 @@ +/* Grid */ + +.grid::after { + position: fixed; + z-index: 999; + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ''; + pointer-events: none; + + --grid-sides: 16px; + --grid-gutter: 16px; + --grid-columns: 4; + + --grid-column-width: calc( + (100% - var(--grid-gutter) * var(--grid-columns)) / var(--grid-columns) + ); + + border: solid transparent; + border-width: 0 calc( + var(--grid-sides) - var(--grid-gutter) / 2 + ); + + background-image: repeating-linear-gradient( + to right, + transparent 0, + transparent calc(var(--grid-gutter) / 2), + rgb(255 0 0 / 0.1) calc(var(--grid-gutter) / 2), + rgb(255 0 0 / 0.1) calc(var(--grid-column-width) + var(--grid-gutter) / 2), + transparent calc(var(--grid-column-width) + var(--grid-gutter) / 2), + transparent calc(var(--grid-column-width) + var(--grid-gutter)) + ); + + background-repeat: no-repeat; +} + +@media (min-width: 736px) { + .grid::after { + --grid-sides: 24px; + --grid-gutter: 16px; + --grid-columns: 8; + } +} + +@media (min-width: 1008px) { + .grid::after { + --grid-sides: 32px; + --grid-gutter: 16px; + --grid-columns: 12; + } +} diff --git a/24/styles/blocks/header.css b/24/styles/blocks/header.css new file mode 100644 index 0000000..01946eb --- /dev/null +++ b/24/styles/blocks/header.css @@ -0,0 +1,46 @@ +/* Header */ + +.header { + display: grid; + padding: 16px; +} + +@media (width > 736px) { + .header { + padding-left: 24px; + padding-right: 24px; + grid-template-columns: max-content max-content; + justify-content: space-between; + } +} + +/* Logo */ + +@media (width <= 736px) { + .header__logo { + z-index: 1; + } +} + +@media (width > 736px) { + .header__logo { + align-self: start; + } +} + +/* Menu */ + +@media (width <= 736px) { + .header__menu { + position: absolute; + top: 0; + right: 0; + left: 0; + } +} + +@media (width > 736px) { + .header__menu { + align-self: center; + } +} diff --git a/24/styles/blocks/logo.css b/24/styles/blocks/logo.css new file mode 100644 index 0000000..ebd75b3 --- /dev/null +++ b/24/styles/blocks/logo.css @@ -0,0 +1,64 @@ +/* Logo */ + +.logo { + display: grid; + column-gap: 8px; + grid-template-columns: min-content 1fr; + line-height: 1; +} + +/* Image */ + +.logo__image { + width: 40px; + height: 44px; +} + +@media (width > 736px) { + .logo__image { + grid-row: span 2; + } +} + +/* Title */ + +.logo__title { + margin: 0; + letter-spacing: -0.03em; + font-weight: bold; + font-size: 20px; +} + +@media (width <= 736px) { + .logo__title { + align-self: center; + } +} + +@media (width > 736px) { + .logo__title { + align-self: end; + } +} + +/* Tagline */ + +.logo__tagline { + margin: 0; + color: var(--basic-dark); + letter-spacing: 0.05em; + text-transform: uppercase; + font-size: 12px; +} + +@media (width <= 736px) { + .logo__tagline { + display: none; + } +} + +@media (width > 736px) { + .logo__tagline { + align-self: center; + } +} diff --git a/24/styles/blocks/main.css b/24/styles/blocks/main.css new file mode 100644 index 0000000..d3523aa --- /dev/null +++ b/24/styles/blocks/main.css @@ -0,0 +1,6 @@ +/* Main */ + +.main { + height: 400px; + background-color: var(--basic-light); +} diff --git a/24/styles/blocks/menu.css b/24/styles/blocks/menu.css new file mode 100644 index 0000000..1317eab --- /dev/null +++ b/24/styles/blocks/menu.css @@ -0,0 +1,132 @@ +/* Menu */ + +@media (width <= 736px) { + .menu { + display: grid; + } +} + +/* Button */ + +@media (width <= 736px) { + .menu__button { + z-index: 1; + display: block; + margin: 0; + margin-top: 24px; + margin-right: 16px; + padding: 0; + border: none; + background-color: transparent; + justify-self: end; + } +} + +@media (width > 736px) { + .menu__button { + display: none; + } +} + +/* Icon */ + +@media (width <= 736px) { + .menu__icon { + display: block; + stroke: var(--basic-black); + } + + .menu__icon:hover { + stroke: var(--special-neutral); + } + + .menu__icon-menu, + .menu__button--open .menu__icon-cross { + display: block; + } + + .menu__icon-cross, + .menu__button--open .menu__icon-menu { + display: none; + } +} + +/* List */ + +.menu__list { + margin: 0; + padding: 0; + list-style: none; + font-size: 12px; +} + +@media (width <= 736px) { + .menu__list { + display: none; + row-gap: 8px; + padding-top: 12px; + padding-bottom: 22px; + padding-left: 64px; + box-shadow: 0 50vh 0 50vh var(--special-dark-10a); + background-color: var(--basic-white); + } + + .menu__list--open { + display: grid; + } +} + +@media (width > 736px) { + .menu__list { + display: grid; + grid-auto-flow: column; + column-gap: 8px; + } +} + +/* Item */ + +.menu__item { + letter-spacing: 0.02em; + text-transform: uppercase; +} + +/* Link */ + +.menu__link { + color: var(--special-dark); +} + +.menu__link[href]:hover { + color: var(--special-neutral); +} + +.menu__link--current { + color: var(--basic-black); + text-decoration: none; + font-weight: bold; + font-family: 'Dewi Expanded', sans-serif; +} + +.menu__link--inactive { + color: var(--basic-semi-light); +} + +.menu__link--patreon { + padding-left: 18px; +} + +.menu__link--patreon::before { + position: absolute; + margin-top: 2px; + margin-left: -18px; + width: 16px; + height: 16px; + content: url('../../images/patreon.svg'); +} + +@media (width <= 736px) { + .menu__link--patreon { + margin-left: -18px; + } +} diff --git a/24/styles/blocks/page.css b/24/styles/blocks/page.css new file mode 100644 index 0000000..5277bdb --- /dev/null +++ b/24/styles/blocks/page.css @@ -0,0 +1,10 @@ +/* Page */ + +.page { + line-height: 1.5; + font-family: 'Dewi', sans-serif; +} + +.page__body { + margin: 0; +} diff --git a/24/styles/box-model.css b/24/styles/box-model.css new file mode 100644 index 0000000..a35f690 --- /dev/null +++ b/24/styles/box-model.css @@ -0,0 +1,7 @@ +/* Box Model */ + +*, +*::before, +*::after { + box-sizing: border-box; +} diff --git a/24/styles/fonts.css b/24/styles/fonts.css new file mode 100644 index 0000000..5bdf6a8 --- /dev/null +++ b/24/styles/fonts.css @@ -0,0 +1,197 @@ +/* Dewi Regular (Latin) */ + +@font-face { + font-family: 'Dewi'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi/regular-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Dewi Regular (Latin Extended) */ + +@font-face { + font-family: 'Dewi'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi/regular-latin-extended.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* Dewi Regular (Cyrillic) */ + +@font-face { + font-family: 'Dewi'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi/regular-cyrillic.woff2') format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* Dewi Bold (Latin) */ + +@font-face { + font-family: 'Dewi'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('../fonts/dewi/bold-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Dewi Bold (Latin Extended) */ + +@font-face { + font-family: 'Dewi'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('../fonts/dewi/bold-latin-extended.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* Dewi Bold (Cyrillic) */ + +@font-face { + font-family: 'Dewi'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('../fonts/dewi/bold-cyrillic.woff2') format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* Dewi Italic (Latin) */ + +@font-face { + font-family: 'Dewi'; + font-style: italic; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi/italic-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Dewi Italic (Latin Extended) */ + +@font-face { + font-family: 'Dewi'; + font-style: italic; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi/italic-latin-extended.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* Dewi Italic (Cyrillic) */ + +@font-face { + font-family: 'Dewi'; + font-style: italic; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi/italic-cyrillic.woff2') format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* Dewi Expanded Regular (Latin) */ + +@font-face { + font-family: 'Dewi Expanded'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi-expanded/regular-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Dewi Expanded Regular (Latin Extended) */ + +@font-face { + font-family: 'Dewi Expanded'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi-expanded/regular-latin-extended.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* Dewi Expanded Regular (Cyrillic) */ + +@font-face { + font-family: 'Dewi Expanded'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/dewi-expanded/regular-cyrillic.woff2') format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* Dewi Expanded Bold (Latin) */ + +@font-face { + font-family: 'Dewi Expanded'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('../fonts/dewi-expanded/bold-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Dewi Expanded Bold (Latin Extended) */ + +@font-face { + font-family: 'Dewi Expanded'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('../fonts/dewi-expanded/bold-latin.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* Dewi Expanded Bold (Cyrillic) */ + +@font-face { + font-family: 'Dewi Expanded'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('../fonts/dewi-expanded/bold-cyrillic.woff2') format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* Rostin Regular (Latin) */ + +@font-face { + font-family: 'Rostin'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/rostin/regular-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Rostin Regular (Latin Extended) */ + +@font-face { + font-family: 'Rostin'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/rostin/regular-latin-extended.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* Rostin Regular (Cyrillic) */ + +@font-face { + font-family: 'Rostin'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('../fonts/rostin/regular-cyrillic.woff2') format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} diff --git a/24/styles/index.css b/24/styles/index.css new file mode 100644 index 0000000..2664468 --- /dev/null +++ b/24/styles/index.css @@ -0,0 +1,14 @@ +/* Global */ + +@import 'fonts.css'; +@import 'box-model.css'; +@import 'variables.css'; + +/* Blocks */ + +@import 'blocks/grid.css'; +@import 'blocks/page.css'; +@import 'blocks/header.css'; +@import 'blocks/logo.css'; +@import 'blocks/menu.css'; +@import 'blocks/main.css'; diff --git a/24/styles/index.min.css b/24/styles/index.min.css new file mode 100644 index 0000000..101e605 --- /dev/null +++ b/24/styles/index.min.css @@ -0,0 +1,3 @@ +@font-face{font-family:'Dewi';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dewi/regular-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Dewi';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dewi/regular-latin-extended.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Dewi';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dewi/regular-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Dewi';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dewi/bold-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Dewi';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dewi/bold-latin-extended.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Dewi';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dewi/bold-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Dewi';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/dewi/italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Dewi';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/dewi/italic-latin-extended.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Dewi';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/dewi/italic-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Dewi Expanded';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dewi-expanded/regular-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Dewi Expanded';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dewi-expanded/regular-latin-extended.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Dewi Expanded';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dewi-expanded/regular-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Dewi Expanded';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dewi-expanded/bold-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Dewi Expanded';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dewi-expanded/bold-latin.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Dewi Expanded';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dewi-expanded/bold-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Rostin';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rostin/regular-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Rostin';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rostin/regular-latin-extended.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Rostin';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rostin/regular-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}*,::after,::before{box-sizing:border-box}:root{--basic-black: #000000;--basic-dark: #273238;--basic-semi-light: #696969;--basic-neutral: #b1b3b6;--basic-light: #e9eaeb;--basic-white: #ffffff;--special-extra-dark: #386d9b;--special-dark: #3b84bb;--special-dark-10a: rgb(59 132 187 / 0.1);--special-semi-dark: #42a0da;--special-neutral: #61afb4;--special-semi-light: #81c36d;--special-light: #afe63a;--special-extra-light: #c6f523}.grid::after{position:fixed;z-index:999;top:0;left:0;right:0;bottom:0;content:'';pointer-events:none;--grid-sides: 16px;--grid-gutter: 16px;--grid-columns: 4;--grid-column-width: calc( + (100% - var(--grid-gutter) * var(--grid-columns)) / var(--grid-columns) + );border:solid transparent;border-width:0 calc(var(--grid-sides) - var(--grid-gutter)/2);background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--grid-gutter)/2),rgb(255 0 0/.1) calc(var(--grid-gutter)/2),rgb(255 0 0/.1) calc(var(--grid-column-width) + var(--grid-gutter)/2),transparent calc(var(--grid-column-width) + var(--grid-gutter)/2),transparent calc(var(--grid-column-width) + var(--grid-gutter)));background-repeat:no-repeat}@media (min-width:736px){.grid::after{--grid-sides: 24px;--grid-gutter: 16px;--grid-columns: 8}}@media (min-width:1008px){.grid::after{--grid-sides: 32px;--grid-gutter: 16px;--grid-columns: 12}}.page{line-height:1.5;font-family:'Dewi',sans-serif}.page__body{margin:0}.header{display:grid;padding:16px}@media (min-width:737px){.header{padding-left:24px;padding-right:24px;grid-template-columns:max-content max-content;justify-content:space-between}}@media (max-width:736px){.header__logo{z-index:1}}@media (min-width:737px){.header__logo{align-self:start}}@media (max-width:736px){.header__menu{position:absolute;top:0;right:0;left:0}}@media (min-width:737px){.header__menu{align-self:center}}.logo{display:grid;column-gap:8px;grid-template-columns:min-content 1fr;line-height:1}.logo__image{width:40px;height:44px}@media (min-width:737px){.logo__image{grid-row:span 2}}.logo__title{margin:0;letter-spacing:-.03em;font-weight:700;font-size:20px}@media (max-width:736px){.logo__title{align-self:center}}@media (min-width:737px){.logo__title{align-self:end}}.logo__tagline{margin:0;color:var(--basic-dark);letter-spacing:.05em;text-transform:uppercase;font-size:12px}@media (max-width:736px){.logo__tagline{display:none}}@media (min-width:737px){.logo__tagline{align-self:center}}@media (max-width:736px){.menu{display:grid}.menu__button{z-index:1;display:block;margin:24px 16px 0 0;padding:0;border:0;background-color:transparent;justify-self:end}}@media (min-width:737px){.menu__button{display:none}}@media (max-width:736px){.menu__icon{stroke:var(--basic-black)}.menu__icon:hover{stroke:var(--special-neutral)}.menu__button--open .menu__icon-cross,.menu__icon,.menu__icon-menu{display:block}.menu__button--open .menu__icon-menu,.menu__icon-cross{display:none}}.menu__list{margin:0;padding:0;list-style:none;font-size:12px}@media (max-width:736px){.menu__list{display:none;row-gap:8px;padding-top:12px;padding-bottom:22px;padding-left:64px;box-shadow:0 50vh 0 50vh var(--special-dark-10a);background-color:var(--basic-white)}.menu__list--open{display:grid}}@media (min-width:737px){.menu__list{display:grid;grid-auto-flow:column;column-gap:8px}}.menu__item{letter-spacing:.02em;text-transform:uppercase}.menu__link{color:var(--special-dark)}.menu__link[href]:hover{color:var(--special-neutral)}.menu__link--current{color:var(--basic-black);text-decoration:none;font-weight:700;font-family:'Dewi Expanded',sans-serif}.menu__link--inactive{color:var(--basic-semi-light)}.menu__link--patreon{padding-left:18px}.menu__link--patreon::before{position:absolute;margin-top:2px;margin-left:-18px;width:16px;height:16px;content:url(../../images/patreon.svg)}@media (max-width:736px){.menu__link--patreon{margin-left:-18px}}.main{height:400px;background-color:var(--basic-light)} \ No newline at end of file diff --git a/24/styles/variables.css b/24/styles/variables.css new file mode 100644 index 0000000..7bd8caf --- /dev/null +++ b/24/styles/variables.css @@ -0,0 +1,19 @@ +/* Variables */ + +:root { + --basic-black: #000000; + --basic-dark: #273238; + --basic-semi-light: #696969; + --basic-neutral: #b1b3b6; + --basic-light: #e9eaeb; + --basic-white: #ffffff; + + --special-extra-dark: #386d9b; + --special-dark: #3b84bb; + --special-dark-10a: rgb(59 132 187 / 0.1); + --special-semi-dark: #42a0da; + --special-neutral: #61afb4; + --special-semi-light: #81c36d; + --special-light: #afe63a; + --special-extra-light: #c6f523; +} diff --git a/4/README.md b/4/README.md new file mode 100644 index 0000000..a2bad56 --- /dev/null +++ b/4/README.md @@ -0,0 +1,3 @@ +# 4. Навигация, дизайнеры и код, актуальность, личинки фронтендера и фреймворки + +[Подробнее в видео](https://youtu.be/y52rtbUeCac) diff --git a/4/index.html b/4/index.html new file mode 100644 index 0000000..eab3edd --- /dev/null +++ b/4/index.html @@ -0,0 +1,27 @@ + + + + + 4. Навигация, дизайнеры и код, актуальность, личинки фронтендера и фреймворки + + + +
+ Исполинская + Звёздная + Спираль +
+ + + + diff --git a/4/styles.css b/4/styles.css new file mode 100644 index 0000000..a0eb7e4 --- /dev/null +++ b/4/styles.css @@ -0,0 +1,40 @@ +body { + padding: 50px; + background-color: gainsboro; + line-height: 1.5; + font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif; + font-size: 20px; +} + +nav { + display: block; +} + +/* Menu */ + +.menu { + display: flex; + list-style: none; + margin: 0; + padding: 0; + margin-bottom: 50px; + line-height: 1.1; + font-size: 25px; +} + +/* Item */ + +.menu__item { + display: block; + background-color: white; + padding: 0.7rem 1rem; + text-decoration: none; + color: black; +} + +.menu__item:hover, +.menu__item:focus { + outline: none; + background-color: tomato; + color: white; +} \ No newline at end of file diff --git a/5/README.md b/5/README.md new file mode 100644 index 0000000..0be613b --- /dev/null +++ b/5/README.md @@ -0,0 +1,3 @@ +# 5. Политех, магический JPEG, ненужная форма и object-fit на SVG + +[Подробнее в видео](https://youtu.be/zjaI-LwqLVU) diff --git a/5/images/picture.jpg b/5/images/picture.jpg new file mode 100644 index 0000000..5ed6a62 Binary files /dev/null and b/5/images/picture.jpg differ diff --git a/5/index.html b/5/index.html new file mode 100644 index 0000000..917aa1b --- /dev/null +++ b/5/index.html @@ -0,0 +1,51 @@ + + + + + 5. Политех, магический JPEG, ненужная форма и object-fit на SVG + + + + + Велик, пристёгнутый за перила. + + + + + +
+ + Велик, пристёгнутый за перила. + + + + + diff --git a/5/script.js b/5/script.js new file mode 100644 index 0000000..9e8c1d3 --- /dev/null +++ b/5/script.js @@ -0,0 +1 @@ +var objectFitImages=function(){"use strict";function t(t,e){return"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='"+t+"' height='"+e+"'%3E%3C/svg%3E"}function e(t){if(t.srcset&&!p&&window.picturefill){var e=window.picturefill._;t[e.ns]&&t[e.ns].evaled||e.fillImg(t,{reselect:!0}),t[e.ns].curSrc||(t[e.ns].supported=!1,e.fillImg(t,{reselect:!0})),t.currentSrc=t[e.ns].curSrc||t.src}}function i(t){for(var e,i=getComputedStyle(t).fontFamily,r={};null!==(e=u.exec(i));)r[e[1]]=e[2];return r}function r(e,i,r){var n=t(i||1,r||0);b.call(e,"src")!==n&&h.call(e,"src",n)}function n(t,e){t.naturalWidth?e(t):setTimeout(n,100,t,e)}function c(t){var c=i(t),o=t[l];if(c["object-fit"]=c["object-fit"]||"fill",!o.img){if("fill"===c["object-fit"])return;if(!o.skipTest&&f&&!c["object-position"])return}if(!o.img){o.img=new Image(t.width,t.height),o.img.srcset=b.call(t,"data-ofi-srcset")||t.srcset,o.img.src=b.call(t,"data-ofi-src")||t.src,h.call(t,"data-ofi-src",t.src),t.srcset&&h.call(t,"data-ofi-srcset",t.srcset),r(t,t.naturalWidth||t.width,t.naturalHeight||t.height),t.srcset&&(t.srcset="");try{s(t)}catch(t){window.console&&console.warn("https://bit.ly/ofi-old-browser")}}e(o.img),t.style.backgroundImage='url("'+(o.img.currentSrc||o.img.src).replace(/"/g,'\\"')+'")',t.style.backgroundPosition=c["object-position"]||"center",t.style.backgroundRepeat="no-repeat",t.style.backgroundOrigin="content-box",/scale-down/.test(c["object-fit"])?n(o.img,function(){o.img.naturalWidth>t.width||o.img.naturalHeight>t.height?t.style.backgroundSize="contain":t.style.backgroundSize="auto"}):t.style.backgroundSize=c["object-fit"].replace("none","auto").replace("fill","100% 100%"),n(o.img,function(e){r(t,e.naturalWidth,e.naturalHeight)})}function s(t){var e={get:function(e){return t[l].img[e?e:"src"]},set:function(e,i){return t[l].img[i?i:"src"]=e,h.call(t,"data-ofi-"+i,e),c(t),e}};Object.defineProperty(t,"src",e),Object.defineProperty(t,"currentSrc",{get:function(){return e.get("currentSrc")}}),Object.defineProperty(t,"srcset",{get:function(){return e.get("srcset")},set:function(t){return e.set(t,"srcset")}})}function o(){function t(t,e){return t[l]&&t[l].img&&("src"===e||"srcset"===e)?t[l].img:t}d||(HTMLImageElement.prototype.getAttribute=function(e){return b.call(t(this,e),e)},HTMLImageElement.prototype.setAttribute=function(e,i){return h.call(t(this,e),e,String(i))})}function a(t,e){var i=!y&&!t;if(e=e||{},t=t||"img",d&&!e.skipTest||!m)return!1;"img"===t?t=document.getElementsByTagName("img"):"string"==typeof t?t=document.querySelectorAll(t):"length"in t||(t=[t]);for(var r=0;r + + + + 6. Погружение в object-fit: cover с полифилом и без + + + + Велик, пристёгнутый за перила. + + + + + +
+ + Велик, пристёгнутый за перила. + + + + diff --git a/6/picture.jpg b/6/picture.jpg new file mode 100644 index 0000000..5ed6a62 Binary files /dev/null and b/6/picture.jpg differ diff --git a/8/README.md b/8/README.md new file mode 100644 index 0000000..0ba159e --- /dev/null +++ b/8/README.md @@ -0,0 +1,3 @@ +# 8. Кто такие дивелоперы, ручной SVG и волнительное подчёркивание + +[Подробнее в видео](https://youtu.be/Me4j7QeKBCM) diff --git a/8/index.html b/8/index.html new file mode 100644 index 0000000..9439e85 --- /dev/null +++ b/8/index.html @@ -0,0 +1,34 @@ + + + + + Дивелоперы + + + +

+ Мы с вами… + дивелоперы +

+ + \ No newline at end of file diff --git a/8/wave.svg b/8/wave.svg new file mode 100644 index 0000000..fa93c3e --- /dev/null +++ b/8/wave.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..365a09b --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# Демо для видеоблога + +[youtube.com/pepelsbey](https://youtube.com/pepelsbey) + +## Демки + +[24\. Адаптивная шапка с выпадающим меню на гридах](24)