├── lesson1 ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ └── bg.jpg │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ ├── logo.svg │ │ └── marker.svg ├── css │ ├── main.css │ ├── section-top.css │ ├── header-page.css │ └── components.css └── index.html ├── lesson2 ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ └── bg.jpg │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg └── css │ ├── main.css │ ├── section-top.css │ └── header-page.css ├── lesson3 ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ └── bg.jpg │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg └── css │ ├── footer-page.css │ ├── main.css │ ├── section-about.css │ ├── section-top.css │ ├── header-page.css │ └── section-contacts.css ├── lesson4 ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ └── bg.jpg │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg └── css │ ├── footer-page.css │ ├── main.css │ ├── section-about.css │ ├── section-top.css │ ├── popup.css │ ├── header-page.css │ └── section-contacts.css ├── lesson5 ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ └── bg.jpg │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg ├── css │ ├── footer-page.css │ ├── main.css │ ├── section-about.css │ ├── section-top.css │ ├── popup.css │ ├── header-page.css │ └── section-contacts.css └── js │ ├── header.js │ ├── scrollTo.js │ ├── myLib.js │ └── popup.js ├── lesson6 ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ ├── 1.webp │ │ ├── 2.webp │ │ ├── bg.jpg │ │ └── bg.webp │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg ├── css │ ├── footer-page.css │ ├── main.css │ ├── section-about.css │ ├── section-top.css │ ├── popup.css │ ├── header-page.css │ └── section-contacts.css └── js │ ├── header.js │ ├── map.js │ ├── scrollTo.js │ ├── myLib.js │ ├── popup.js │ ├── catalog.js │ └── product.js ├── lesson7 ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ ├── 1.webp │ │ ├── 2.webp │ │ ├── bg.jpg │ │ └── bg.webp │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg ├── .vscode │ └── sftp.json ├── css │ ├── footer-page.css │ ├── main.css │ ├── section-about.css │ ├── section-top.css │ ├── popup.css │ ├── header-page.css │ └── section-contacts.css ├── js │ ├── header.js │ ├── map.js │ ├── scrollTo.js │ ├── myLib.js │ ├── popup.js │ ├── form.js │ ├── catalog.js │ └── product.js └── mail │ └── mail.php ├── lesson8 ├── img │ ├── favicon │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── mstile-150x150.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-384x384.png │ │ ├── browserconfig.xml │ │ └── site.webmanifest │ ├── section-top │ │ ├── bg.jpg │ │ └── bg.webp │ ├── section-about │ │ ├── bg.jpg │ │ └── bg.webp │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ ├── 9.png │ │ ├── 1.webp │ │ ├── 2.webp │ │ ├── 3.webp │ │ ├── 4.webp │ │ ├── 5.webp │ │ ├── 6.webp │ │ ├── 7.webp │ │ ├── 8.webp │ │ └── 9.webp │ ├── section-contacts │ │ ├── tomatoes.jpg │ │ └── tomatoes.webp │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg └── mail │ └── mail.php ├── lesson6-animation ├── img │ ├── section-top │ │ └── bg.jpg │ ├── section-about │ │ ├── 1.webp │ │ ├── 2.webp │ │ ├── bg.jpg │ │ └── bg.webp │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg ├── css │ ├── footer-page.css │ ├── main.css │ ├── section-about.css │ ├── section-top.css │ ├── popup.css │ ├── header-page.css │ └── section-contacts.css └── js │ ├── header.js │ ├── map.js │ ├── scrollTo.js │ ├── myLib.js │ ├── popup.js │ ├── catalog.js │ ├── product.js │ └── productChecker.js ├── lesson5-smooth-scroll ├── img │ ├── section-about │ │ └── bg.jpg │ ├── section-top │ │ └── bg.jpg │ ├── section-catalog │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── section-contacts │ │ └── tomatoes.jpg │ └── common │ │ ├── fb.svg │ │ ├── instagram.svg │ │ ├── vk.svg │ │ └── logo.svg ├── css │ ├── footer-page.css │ ├── main.css │ ├── section-about.css │ ├── section-top.css │ ├── popup.css │ ├── header-page.css │ └── section-contacts.css └── js │ ├── header.js │ ├── myLib.js │ ├── popup.js │ └── scrollTo.js └── README.md /lesson1/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson2/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson3/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson4/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson5/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson6/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson7/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson8/img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/favicon/favicon.ico -------------------------------------------------------------------------------- /lesson8/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson8/img/section-top/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-top/bg.webp -------------------------------------------------------------------------------- /lesson1/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson1/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson1/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson2/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson2/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson2/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson3/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson3/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson3/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson4/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson4/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson4/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson5/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson5/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson5/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson6/img/section-about/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-about/1.webp -------------------------------------------------------------------------------- /lesson6/img/section-about/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-about/2.webp -------------------------------------------------------------------------------- /lesson6/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson6/img/section-about/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-about/bg.webp -------------------------------------------------------------------------------- /lesson6/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson6/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson7/img/section-about/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-about/1.webp -------------------------------------------------------------------------------- /lesson7/img/section-about/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-about/2.webp -------------------------------------------------------------------------------- /lesson7/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson7/img/section-about/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-about/bg.webp -------------------------------------------------------------------------------- /lesson7/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson7/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson8/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson8/img/section-about/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-about/bg.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson8/img/section-catalog/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/1.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/2.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/3.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/4.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/5.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/6.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/7.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/8.webp -------------------------------------------------------------------------------- /lesson8/img/section-catalog/9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-catalog/9.webp -------------------------------------------------------------------------------- /lesson8/img/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /lesson8/img/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /lesson8/img/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /lesson1/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson1/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson2/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson2/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson3/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson3/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson4/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson4/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson5/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson6-animation/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson6/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson7/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson7/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson8/img/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /lesson8/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson6-animation/img/section-about/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-about/1.webp -------------------------------------------------------------------------------- /lesson6-animation/img/section-about/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-about/2.webp -------------------------------------------------------------------------------- /lesson6-animation/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson6-animation/img/section-about/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-about/bg.webp -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson8/img/section-contacts/tomatoes.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/section-contacts/tomatoes.webp -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-about/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-about/bg.jpg -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-top/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-top/bg.jpg -------------------------------------------------------------------------------- /lesson8/img/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /lesson8/img/favicon/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson8/img/favicon/android-chrome-384x384.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/1.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/2.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/3.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/4.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/5.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/6.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/7.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/8.png -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-catalog/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-catalog/9.png -------------------------------------------------------------------------------- /lesson6-animation/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson6-animation/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/section-contacts/tomatoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryBerdnikov/pizzatime/HEAD/lesson5-smooth-scroll/img/section-contacts/tomatoes.jpg -------------------------------------------------------------------------------- /lesson7/.vscode/sftp.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "My Server", 3 | "host": "", 4 | "protocol": "ftp", 5 | "port": 21, 6 | "username": "", 7 | "password": "", 8 | "remotePath": "/", 9 | "uploadOnSave": true 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Верстка макета PizzaTime 2 | Проект для практики верстки 3 | 4 | - [Ссылка на макет](https://drive.google.com/open?id=1x2G6nxGaxhxItLxUqclqGEPFNf8y0eSS) 5 | - [Ссылка на уроки в youtube](https://www.youtube.com/watch?v=Lap_G3hI7cc&list=PL9-oPVq1RtrWGev5yrxp8JFFfLVyViVcx) 6 | -------------------------------------------------------------------------------- /lesson3/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson4/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson5/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson6/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson7/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson8/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson6-animation/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson8/img/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /lesson3/css/footer-page.css: -------------------------------------------------------------------------------- 1 | .footer-page { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | padding: 25px 0; 4 | } 5 | 6 | .footer-page__text { 7 | font-family: 'Montserrat', sans-serif; 8 | color: rgba(255, 255, 255, .3); 9 | text-align: center; 10 | font-weight: 900; 11 | font-size: 18px; 12 | } -------------------------------------------------------------------------------- /lesson4/css/footer-page.css: -------------------------------------------------------------------------------- 1 | .footer-page { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | padding: 25px 0; 4 | } 5 | 6 | .footer-page__text { 7 | font-family: 'Montserrat', sans-serif; 8 | color: rgba(255, 255, 255, .3); 9 | text-align: center; 10 | font-weight: 900; 11 | font-size: 18px; 12 | } -------------------------------------------------------------------------------- /lesson5/css/footer-page.css: -------------------------------------------------------------------------------- 1 | .footer-page { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | padding: 25px 0; 4 | } 5 | 6 | .footer-page__text { 7 | font-family: 'Montserrat', sans-serif; 8 | color: rgba(255, 255, 255, .3); 9 | text-align: center; 10 | font-weight: 900; 11 | font-size: 18px; 12 | } -------------------------------------------------------------------------------- /lesson6/css/footer-page.css: -------------------------------------------------------------------------------- 1 | .footer-page { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | padding: 25px 0; 4 | } 5 | 6 | .footer-page__text { 7 | font-family: 'Montserrat', sans-serif; 8 | color: rgba(255, 255, 255, .3); 9 | text-align: center; 10 | font-weight: 900; 11 | font-size: 18px; 12 | } -------------------------------------------------------------------------------- /lesson7/css/footer-page.css: -------------------------------------------------------------------------------- 1 | .footer-page { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | padding: 25px 0; 4 | } 5 | 6 | .footer-page__text { 7 | font-family: 'Montserrat', sans-serif; 8 | color: rgba(255, 255, 255, .3); 9 | text-align: center; 10 | font-weight: 900; 11 | font-size: 18px; 12 | } -------------------------------------------------------------------------------- /lesson6-animation/css/footer-page.css: -------------------------------------------------------------------------------- 1 | .footer-page { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | padding: 25px 0; 4 | } 5 | 6 | .footer-page__text { 7 | font-family: 'Montserrat', sans-serif; 8 | color: rgba(255, 255, 255, .3); 9 | text-align: center; 10 | font-weight: 900; 11 | font-size: 18px; 12 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/css/footer-page.css: -------------------------------------------------------------------------------- 1 | .footer-page { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | padding: 25px 0; 4 | } 5 | 6 | .footer-page__text { 7 | font-family: 'Montserrat', sans-serif; 8 | color: rgba(255, 255, 255, .3); 9 | text-align: center; 10 | font-weight: 900; 11 | font-size: 18px; 12 | } -------------------------------------------------------------------------------- /lesson1/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | -------------------------------------------------------------------------------- /lesson1/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | fb -------------------------------------------------------------------------------- /lesson2/img/common/fb.svg: -------------------------------------------------------------------------------- 1 | fb -------------------------------------------------------------------------------- /lesson5/js/header.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (window.matchMedia('(max-width: 992px)').matches) { 3 | return; 4 | } 5 | 6 | var headerPage = document.querySelector('.header-page'); 7 | 8 | window.addEventListener('scroll', function() { 9 | if (window.pageYOffset > 0) { 10 | headerPage.classList.add('is-active'); 11 | } else { 12 | headerPage.classList.remove('is-active'); 13 | } 14 | }); 15 | })(); -------------------------------------------------------------------------------- /lesson6/js/header.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (window.matchMedia('(max-width: 992px)').matches) { 3 | return; 4 | } 5 | 6 | var headerPage = document.querySelector('.header-page'); 7 | 8 | window.addEventListener('scroll', function() { 9 | if (window.pageYOffset > 0) { 10 | headerPage.classList.add('is-active'); 11 | } else { 12 | headerPage.classList.remove('is-active'); 13 | } 14 | }); 15 | })(); -------------------------------------------------------------------------------- /lesson7/js/header.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (window.matchMedia('(max-width: 992px)').matches) { 3 | return; 4 | } 5 | 6 | var headerPage = document.querySelector('.header-page'); 7 | 8 | window.addEventListener('scroll', function() { 9 | if (window.pageYOffset > 0) { 10 | headerPage.classList.add('is-active'); 11 | } else { 12 | headerPage.classList.remove('is-active'); 13 | } 14 | }); 15 | })(); -------------------------------------------------------------------------------- /lesson6-animation/js/header.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (window.matchMedia('(max-width: 992px)').matches) { 3 | return; 4 | } 5 | 6 | var headerPage = document.querySelector('.header-page'); 7 | 8 | window.addEventListener('scroll', function() { 9 | if (window.pageYOffset > 0) { 10 | headerPage.classList.add('is-active'); 11 | } else { 12 | headerPage.classList.remove('is-active'); 13 | } 14 | }); 15 | })(); -------------------------------------------------------------------------------- /lesson5-smooth-scroll/js/header.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (window.matchMedia('(max-width: 992px)').matches) { 3 | return; 4 | } 5 | 6 | var headerPage = document.querySelector('.header-page'); 7 | 8 | window.addEventListener('scroll', function() { 9 | if (window.pageYOffset > 0) { 10 | headerPage.classList.add('is-active'); 11 | } else { 12 | headerPage.classList.remove('is-active'); 13 | } 14 | }); 15 | })(); -------------------------------------------------------------------------------- /lesson2/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } -------------------------------------------------------------------------------- /lesson3/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } -------------------------------------------------------------------------------- /lesson4/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } -------------------------------------------------------------------------------- /lesson5/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } 28 | 29 | .no-scroll { 30 | overflow: hidden; 31 | } -------------------------------------------------------------------------------- /lesson6/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } 28 | 29 | .no-scroll { 30 | overflow: hidden; 31 | } -------------------------------------------------------------------------------- /lesson7/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } 28 | 29 | .no-scroll { 30 | overflow: hidden; 31 | } -------------------------------------------------------------------------------- /lesson6-animation/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } 28 | 29 | .no-scroll { 30 | overflow: hidden; 31 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | font-family: 'Roboto', sans-serif; 3 | font-family: 'Montserrat', sans-serif; 4 | 5 | lg: 1200px 6 | md: 992px 7 | sm: 767px 8 | xs: 576px 9 | 10 | */ 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | font-weight: 300; 19 | font-size: 16px; 20 | line-height: 1.375; 21 | color: #1f1f1f; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | height: auto; 27 | } 28 | 29 | .no-scroll { 30 | overflow: hidden; 31 | } -------------------------------------------------------------------------------- /lesson8/img/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-384x384.png", 12 | "sizes": "384x384", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /lesson3/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson4/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson5/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson6/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson7/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson8/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson6-animation/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson3/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson4/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson5/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson6/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson7/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson8/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson6-animation/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson6/js/map.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (typeof ymaps === 'undefined') { 3 | return; 4 | } 5 | 6 | ymaps.ready(function () { 7 | var myMap = new ymaps.Map('ymap', { 8 | center: [55.755241, 37.617779], 9 | zoom: 16 10 | }, { 11 | searchControlProvider: 'yandex#search' 12 | }), 13 | 14 | myPlacemark = new ymaps.Placemark(myMap.getCenter(), { 15 | balloonContent: 'г. Москва, Преображенская площадь, 8' 16 | }, { 17 | iconLayout: 'default#image', 18 | iconImageHref: '../img/common/marker.svg', 19 | iconImageSize: [40, 63.2], 20 | iconImageOffset: [-50, -38] 21 | }); 22 | 23 | myMap.geoObjects.add(myPlacemark); 24 | 25 | myMap.behaviors.disable('scrollZoom'); 26 | }); 27 | 28 | 29 | })(); -------------------------------------------------------------------------------- /lesson7/js/map.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (typeof ymaps === 'undefined') { 3 | return; 4 | } 5 | 6 | ymaps.ready(function () { 7 | var myMap = new ymaps.Map('ymap', { 8 | center: [55.755241, 37.617779], 9 | zoom: 16 10 | }, { 11 | searchControlProvider: 'yandex#search' 12 | }), 13 | 14 | myPlacemark = new ymaps.Placemark(myMap.getCenter(), { 15 | balloonContent: 'г. Москва, Преображенская площадь, 8' 16 | }, { 17 | iconLayout: 'default#image', 18 | iconImageHref: '../img/common/marker.svg', 19 | iconImageSize: [40, 63.2], 20 | iconImageOffset: [-50, -38] 21 | }); 22 | 23 | myMap.geoObjects.add(myPlacemark); 24 | 25 | myMap.behaviors.disable('scrollZoom'); 26 | }); 27 | 28 | 29 | })(); -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lesson5/js/scrollTo.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 3 | 4 | var scroll = function(target) { 5 | var targetTop = target.getBoundingClientRect().top; 6 | var scrollTop = window.pageYOffset; 7 | var targetOffsetTop = targetTop + scrollTop; 8 | var headerOffset = document.querySelector('.header-page').clientHeight; 9 | 10 | window.scrollTo(0, targetOffsetTop - headerOffset); 11 | } 12 | 13 | myLib.body.addEventListener('click', function(e) { 14 | var target = e.target; 15 | var scrollToItemClass = myLib.closestAttr(target, 'data-scroll-to'); 16 | 17 | if (scrollToItemClass === null) { 18 | return; 19 | } 20 | 21 | e.preventDefault(); 22 | var scrollToItem = document.querySelector('.' + scrollToItemClass); 23 | 24 | if (scrollToItem) { 25 | scroll(scrollToItem); 26 | } 27 | }); 28 | })(); -------------------------------------------------------------------------------- /lesson6-animation/js/map.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | if (typeof ymaps === 'undefined') { 3 | return; 4 | } 5 | 6 | ymaps.ready(function () { 7 | var myMap = new ymaps.Map('ymap', { 8 | center: [55.755241, 37.617779], 9 | zoom: 16 10 | }, { 11 | searchControlProvider: 'yandex#search' 12 | }), 13 | 14 | myPlacemark = new ymaps.Placemark(myMap.getCenter(), { 15 | balloonContent: 'г. Москва, Преображенская площадь, 8' 16 | }, { 17 | iconLayout: 'default#image', 18 | iconImageHref: '../img/common/marker.svg', 19 | iconImageSize: [40, 63.2], 20 | iconImageOffset: [-50, -38] 21 | }); 22 | 23 | myMap.geoObjects.add(myPlacemark); 24 | 25 | myMap.behaviors.disable('scrollZoom'); 26 | }); 27 | 28 | 29 | })(); -------------------------------------------------------------------------------- /lesson6/js/scrollTo.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 3 | 4 | var scroll = function(target) { 5 | var targetTop = target.getBoundingClientRect().top; 6 | var scrollTop = window.pageYOffset; 7 | var targetOffsetTop = targetTop + scrollTop; 8 | var headerOffset = document.querySelector('.header-page').clientHeight; 9 | 10 | window.scrollTo(0, targetOffsetTop - headerOffset); 11 | } 12 | 13 | myLib.body.addEventListener('click', function(e) { 14 | var target = e.target; 15 | var scrollToItemClass = myLib.closestAttr(target, 'data-scroll-to'); 16 | 17 | if (scrollToItemClass === null) { 18 | return; 19 | } 20 | 21 | e.preventDefault(); 22 | var scrollToItem = document.querySelector('.' + scrollToItemClass); 23 | 24 | if (scrollToItem) { 25 | scroll(scrollToItem); 26 | } 27 | }); 28 | })(); -------------------------------------------------------------------------------- /lesson7/js/scrollTo.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 3 | 4 | var scroll = function(target) { 5 | var targetTop = target.getBoundingClientRect().top; 6 | var scrollTop = window.pageYOffset; 7 | var targetOffsetTop = targetTop + scrollTop; 8 | var headerOffset = document.querySelector('.header-page').clientHeight; 9 | 10 | window.scrollTo(0, targetOffsetTop - headerOffset); 11 | } 12 | 13 | myLib.body.addEventListener('click', function(e) { 14 | var target = e.target; 15 | var scrollToItemClass = myLib.closestAttr(target, 'data-scroll-to'); 16 | 17 | if (scrollToItemClass === null) { 18 | return; 19 | } 20 | 21 | e.preventDefault(); 22 | var scrollToItem = document.querySelector('.' + scrollToItemClass); 23 | 24 | if (scrollToItem) { 25 | scroll(scrollToItem); 26 | } 27 | }); 28 | })(); -------------------------------------------------------------------------------- /lesson6-animation/js/scrollTo.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 3 | 4 | var scroll = function(target) { 5 | var targetTop = target.getBoundingClientRect().top; 6 | var scrollTop = window.pageYOffset; 7 | var targetOffsetTop = targetTop + scrollTop; 8 | var headerOffset = document.querySelector('.header-page').clientHeight; 9 | 10 | window.scrollTo(0, targetOffsetTop - headerOffset); 11 | } 12 | 13 | myLib.body.addEventListener('click', function(e) { 14 | var target = e.target; 15 | var scrollToItemClass = myLib.closestAttr(target, 'data-scroll-to'); 16 | 17 | if (scrollToItemClass === null) { 18 | return; 19 | } 20 | 21 | e.preventDefault(); 22 | var scrollToItem = document.querySelector('.' + scrollToItemClass); 23 | 24 | if (scrollToItem) { 25 | scroll(scrollToItem); 26 | } 27 | }); 28 | })(); -------------------------------------------------------------------------------- /lesson1/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | instagram -------------------------------------------------------------------------------- /lesson2/img/common/instagram.svg: -------------------------------------------------------------------------------- 1 | instagram -------------------------------------------------------------------------------- /lesson5/js/myLib.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | window.myLib = {}; 3 | 4 | window.myLib.body = document.querySelector('body'); 5 | 6 | window.myLib.closestAttr = function(item, attr) { 7 | var node = item; 8 | 9 | while(node) { 10 | var attrValue = node.getAttribute(attr); 11 | if (attrValue) { 12 | return attrValue; 13 | } 14 | 15 | node = node.parentElement; 16 | } 17 | 18 | return null; 19 | }; 20 | 21 | window.myLib.closestItemByClass = function(item, className) { 22 | var node = item; 23 | 24 | while(node) { 25 | if (node.classList.contains(className)) { 26 | return node; 27 | } 28 | 29 | node = node.parentElement; 30 | } 31 | 32 | return null; 33 | }; 34 | 35 | window.myLib.toggleScroll = function() { 36 | myLib.body.classList.toggle('no-scroll'); 37 | }; 38 | })(); -------------------------------------------------------------------------------- /lesson6/js/myLib.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | window.myLib = {}; 3 | 4 | window.myLib.body = document.querySelector('body'); 5 | 6 | window.myLib.closestAttr = function(item, attr) { 7 | var node = item; 8 | 9 | while(node) { 10 | var attrValue = node.getAttribute(attr); 11 | if (attrValue) { 12 | return attrValue; 13 | } 14 | 15 | node = node.parentElement; 16 | } 17 | 18 | return null; 19 | }; 20 | 21 | window.myLib.closestItemByClass = function(item, className) { 22 | var node = item; 23 | 24 | while(node) { 25 | if (node.classList.contains(className)) { 26 | return node; 27 | } 28 | 29 | node = node.parentElement; 30 | } 31 | 32 | return null; 33 | }; 34 | 35 | window.myLib.toggleScroll = function() { 36 | myLib.body.classList.toggle('no-scroll'); 37 | }; 38 | })(); -------------------------------------------------------------------------------- /lesson7/js/myLib.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | window.myLib = {}; 3 | 4 | window.myLib.body = document.querySelector('body'); 5 | 6 | window.myLib.closestAttr = function(item, attr) { 7 | var node = item; 8 | 9 | while(node) { 10 | var attrValue = node.getAttribute(attr); 11 | if (attrValue) { 12 | return attrValue; 13 | } 14 | 15 | node = node.parentElement; 16 | } 17 | 18 | return null; 19 | }; 20 | 21 | window.myLib.closestItemByClass = function(item, className) { 22 | var node = item; 23 | 24 | while(node) { 25 | if (node.classList.contains(className)) { 26 | return node; 27 | } 28 | 29 | node = node.parentElement; 30 | } 31 | 32 | return null; 33 | }; 34 | 35 | window.myLib.toggleScroll = function() { 36 | myLib.body.classList.toggle('no-scroll'); 37 | }; 38 | })(); -------------------------------------------------------------------------------- /lesson6-animation/js/myLib.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | window.myLib = {}; 3 | 4 | window.myLib.body = document.querySelector('body'); 5 | 6 | window.myLib.closestAttr = function(item, attr) { 7 | var node = item; 8 | 9 | while(node) { 10 | var attrValue = node.getAttribute(attr); 11 | if (attrValue) { 12 | return attrValue; 13 | } 14 | 15 | node = node.parentElement; 16 | } 17 | 18 | return null; 19 | }; 20 | 21 | window.myLib.closestItemByClass = function(item, className) { 22 | var node = item; 23 | 24 | while(node) { 25 | if (node.classList.contains(className)) { 26 | return node; 27 | } 28 | 29 | node = node.parentElement; 30 | } 31 | 32 | return null; 33 | }; 34 | 35 | window.myLib.toggleScroll = function() { 36 | myLib.body.classList.toggle('no-scroll'); 37 | }; 38 | })(); -------------------------------------------------------------------------------- /lesson5-smooth-scroll/js/myLib.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | window.myLib = {}; 3 | 4 | window.myLib.body = document.querySelector('body'); 5 | 6 | window.myLib.closestAttr = function(item, attr) { 7 | var node = item; 8 | 9 | while(node) { 10 | var attrValue = node.getAttribute(attr); 11 | if (attrValue) { 12 | return attrValue; 13 | } 14 | 15 | node = node.parentElement; 16 | } 17 | 18 | return null; 19 | }; 20 | 21 | window.myLib.closestItemByClass = function(item, className) { 22 | var node = item; 23 | 24 | while(node) { 25 | if (node.classList.contains(className)) { 26 | return node; 27 | } 28 | 29 | node = node.parentElement; 30 | } 31 | 32 | return null; 33 | }; 34 | 35 | window.myLib.toggleScroll = function() { 36 | myLib.body.classList.toggle('no-scroll'); 37 | }; 38 | })(); -------------------------------------------------------------------------------- /lesson1/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | vk -------------------------------------------------------------------------------- /lesson2/img/common/vk.svg: -------------------------------------------------------------------------------- 1 | vk -------------------------------------------------------------------------------- /lesson7/mail/mail.php: -------------------------------------------------------------------------------- 1 | $value) { 17 | if ($value === '') { 18 | continue; 19 | } 20 | $color = $color_counter % 2 === 0 ? '#fff' : '#f8f8f8'; 21 | $message .= " 22 | 23 | $key 24 | $value 25 | "; 26 | 27 | $color_counter++; 28 | } 29 | 30 | function adopt($text) { 31 | return '=?utf-8?B?'.base64_encode($text).'?='; 32 | } 33 | 34 | $message = "$message
"; 35 | 36 | $headers = "MIME-Version: 1.0\r\n"; 37 | $headers .= "Content-type: text/html; charset=utf-8\r\n"; 38 | $headers .= "From:" . adopt($form_subject) . " <$admin_email>\r\n"; 39 | 40 | $success_send = mail($admin_email, adopt($form_subject), $message, $headers); 41 | 42 | if ($success_send) { 43 | echo 'success'; 44 | } else { 45 | echo 'error'; 46 | } -------------------------------------------------------------------------------- /lesson8/mail/mail.php: -------------------------------------------------------------------------------- 1 | $value) { 17 | if ($value === '') { 18 | continue; 19 | } 20 | $color = $color_counter % 2 === 0 ? '#fff' : '#f8f8f8'; 21 | $message .= " 22 | 23 | $key 24 | $value 25 | "; 26 | 27 | $color_counter++; 28 | } 29 | 30 | function adopt($text) { 31 | return '=?utf-8?B?'.base64_encode($text).'?='; 32 | } 33 | 34 | $message = "$message
"; 35 | 36 | $headers = "MIME-Version: 1.0\r\n"; 37 | $headers .= "Content-type: text/html; charset=utf-8\r\n"; 38 | $headers .= "From:" . adopt($form_subject) . " <$admin_email>\r\n"; 39 | 40 | $success_send = mail($admin_email, adopt($form_subject), $message, $headers); 41 | 42 | if ($success_send) { 43 | echo 'success'; 44 | } else { 45 | echo 'error'; 46 | } -------------------------------------------------------------------------------- /lesson3/css/section-about.css: -------------------------------------------------------------------------------- 1 | .section-about { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | color: #fff; 4 | position: relative; 5 | } 6 | 7 | .section-about__container { 8 | position: relative; 9 | display: flex; 10 | justify-content: flex-end; 11 | width: 1400px; 12 | } 13 | 14 | .section-about__img { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 50%; 19 | height: 100%; 20 | object-fit: cover; 21 | } 22 | 23 | .section-about__content { 24 | width: 50%; 25 | padding-left: 80px; 26 | } 27 | 28 | .section-about__title { 29 | text-align: left; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .section-about__text { 34 | font-size: 18px; 35 | line-height: 1.67; 36 | margin: 0; 37 | } 38 | 39 | @media (max-width: 1200px) { 40 | .section-about { 41 | padding-top: 80px; 42 | padding-bottom: 80px; 43 | } 44 | 45 | .section-about__content { 46 | padding-left: 50px; 47 | } 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .section-about__img { 52 | width: 100%; 53 | } 54 | 55 | .section-about__container { 56 | justify-content: center; 57 | } 58 | 59 | .section-about__content { 60 | padding-left: 0; 61 | width: 500px; 62 | max-width: 100%; 63 | } 64 | } -------------------------------------------------------------------------------- /lesson4/css/section-about.css: -------------------------------------------------------------------------------- 1 | .section-about { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | color: #fff; 4 | position: relative; 5 | } 6 | 7 | .section-about__container { 8 | position: relative; 9 | display: flex; 10 | justify-content: flex-end; 11 | width: 1400px; 12 | } 13 | 14 | .section-about__img { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 50%; 19 | height: 100%; 20 | object-fit: cover; 21 | } 22 | 23 | .section-about__content { 24 | width: 50%; 25 | padding-left: 80px; 26 | } 27 | 28 | .section-about__title { 29 | text-align: left; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .section-about__text { 34 | font-size: 18px; 35 | line-height: 1.67; 36 | margin: 0; 37 | } 38 | 39 | @media (max-width: 1200px) { 40 | .section-about { 41 | padding-top: 80px; 42 | padding-bottom: 80px; 43 | } 44 | 45 | .section-about__content { 46 | padding-left: 50px; 47 | } 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .section-about__img { 52 | width: 100%; 53 | } 54 | 55 | .section-about__container { 56 | justify-content: center; 57 | } 58 | 59 | .section-about__content { 60 | padding-left: 0; 61 | width: 500px; 62 | max-width: 100%; 63 | } 64 | } -------------------------------------------------------------------------------- /lesson5/css/section-about.css: -------------------------------------------------------------------------------- 1 | .section-about { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | color: #fff; 4 | position: relative; 5 | } 6 | 7 | .section-about__container { 8 | position: relative; 9 | display: flex; 10 | justify-content: flex-end; 11 | width: 1400px; 12 | } 13 | 14 | .section-about__img { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 50%; 19 | height: 100%; 20 | object-fit: cover; 21 | } 22 | 23 | .section-about__content { 24 | width: 50%; 25 | padding-left: 80px; 26 | } 27 | 28 | .section-about__title { 29 | text-align: left; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .section-about__text { 34 | font-size: 18px; 35 | line-height: 1.67; 36 | margin: 0; 37 | } 38 | 39 | @media (max-width: 1200px) { 40 | .section-about { 41 | padding-top: 80px; 42 | padding-bottom: 80px; 43 | } 44 | 45 | .section-about__content { 46 | padding-left: 50px; 47 | } 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .section-about__img { 52 | width: 100%; 53 | } 54 | 55 | .section-about__container { 56 | justify-content: center; 57 | } 58 | 59 | .section-about__content { 60 | padding-left: 0; 61 | width: 500px; 62 | max-width: 100%; 63 | } 64 | } -------------------------------------------------------------------------------- /lesson6/css/section-about.css: -------------------------------------------------------------------------------- 1 | .section-about { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | color: #fff; 4 | position: relative; 5 | } 6 | 7 | .section-about__container { 8 | position: relative; 9 | display: flex; 10 | justify-content: flex-end; 11 | width: 1400px; 12 | } 13 | 14 | .section-about__img { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 50%; 19 | height: 100%; 20 | object-fit: cover; 21 | } 22 | 23 | .section-about__content { 24 | width: 50%; 25 | padding-left: 80px; 26 | } 27 | 28 | .section-about__title { 29 | text-align: left; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .section-about__text { 34 | font-size: 18px; 35 | line-height: 1.67; 36 | margin: 0; 37 | } 38 | 39 | @media (max-width: 1200px) { 40 | .section-about { 41 | padding-top: 80px; 42 | padding-bottom: 80px; 43 | } 44 | 45 | .section-about__content { 46 | padding-left: 50px; 47 | } 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .section-about__img { 52 | width: 100%; 53 | } 54 | 55 | .section-about__container { 56 | justify-content: center; 57 | } 58 | 59 | .section-about__content { 60 | padding-left: 0; 61 | width: 500px; 62 | max-width: 100%; 63 | } 64 | } -------------------------------------------------------------------------------- /lesson7/css/section-about.css: -------------------------------------------------------------------------------- 1 | .section-about { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | color: #fff; 4 | position: relative; 5 | } 6 | 7 | .section-about__container { 8 | position: relative; 9 | display: flex; 10 | justify-content: flex-end; 11 | width: 1400px; 12 | } 13 | 14 | .section-about__img { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 50%; 19 | height: 100%; 20 | object-fit: cover; 21 | } 22 | 23 | .section-about__content { 24 | width: 50%; 25 | padding-left: 80px; 26 | } 27 | 28 | .section-about__title { 29 | text-align: left; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .section-about__text { 34 | font-size: 18px; 35 | line-height: 1.67; 36 | margin: 0; 37 | } 38 | 39 | @media (max-width: 1200px) { 40 | .section-about { 41 | padding-top: 80px; 42 | padding-bottom: 80px; 43 | } 44 | 45 | .section-about__content { 46 | padding-left: 50px; 47 | } 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .section-about__img { 52 | width: 100%; 53 | } 54 | 55 | .section-about__container { 56 | justify-content: center; 57 | } 58 | 59 | .section-about__content { 60 | padding-left: 0; 61 | width: 500px; 62 | max-width: 100%; 63 | } 64 | } -------------------------------------------------------------------------------- /lesson6-animation/css/section-about.css: -------------------------------------------------------------------------------- 1 | .section-about { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | color: #fff; 4 | position: relative; 5 | } 6 | 7 | .section-about__container { 8 | position: relative; 9 | display: flex; 10 | justify-content: flex-end; 11 | width: 1400px; 12 | } 13 | 14 | .section-about__img { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 50%; 19 | height: 100%; 20 | object-fit: cover; 21 | } 22 | 23 | .section-about__content { 24 | width: 50%; 25 | padding-left: 80px; 26 | } 27 | 28 | .section-about__title { 29 | text-align: left; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .section-about__text { 34 | font-size: 18px; 35 | line-height: 1.67; 36 | margin: 0; 37 | } 38 | 39 | @media (max-width: 1200px) { 40 | .section-about { 41 | padding-top: 80px; 42 | padding-bottom: 80px; 43 | } 44 | 45 | .section-about__content { 46 | padding-left: 50px; 47 | } 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .section-about__img { 52 | width: 100%; 53 | } 54 | 55 | .section-about__container { 56 | justify-content: center; 57 | } 58 | 59 | .section-about__content { 60 | padding-left: 0; 61 | width: 500px; 62 | max-width: 100%; 63 | } 64 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/css/section-about.css: -------------------------------------------------------------------------------- 1 | .section-about { 2 | background: linear-gradient(to top, #2d2c2c, #1f1f1f); 3 | color: #fff; 4 | position: relative; 5 | } 6 | 7 | .section-about__container { 8 | position: relative; 9 | display: flex; 10 | justify-content: flex-end; 11 | width: 1400px; 12 | } 13 | 14 | .section-about__img { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 50%; 19 | height: 100%; 20 | object-fit: cover; 21 | } 22 | 23 | .section-about__content { 24 | width: 50%; 25 | padding-left: 80px; 26 | } 27 | 28 | .section-about__title { 29 | text-align: left; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .section-about__text { 34 | font-size: 18px; 35 | line-height: 1.67; 36 | margin: 0; 37 | } 38 | 39 | @media (max-width: 1200px) { 40 | .section-about { 41 | padding-top: 80px; 42 | padding-bottom: 80px; 43 | } 44 | 45 | .section-about__content { 46 | padding-left: 50px; 47 | } 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .section-about__img { 52 | width: 100%; 53 | } 54 | 55 | .section-about__container { 56 | justify-content: center; 57 | } 58 | 59 | .section-about__content { 60 | padding-left: 0; 61 | width: 500px; 62 | max-width: 100%; 63 | } 64 | } -------------------------------------------------------------------------------- /lesson5/js/popup.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var showPopup = function(target) { 3 | target.classList.add('is-active'); 4 | }; 5 | 6 | var closePopup = function(target) { 7 | target.classList.remove('is-active'); 8 | }; 9 | 10 | myLib.body.addEventListener('click', function(e) { 11 | var target = e.target; 12 | var popupClass = myLib.closestAttr(target, 'data-popup'); 13 | 14 | if (popupClass === null) { 15 | return; 16 | } 17 | 18 | e.preventDefault(); 19 | var popup = document.querySelector('.' + popupClass); 20 | 21 | if (popup) { 22 | showPopup(popup); 23 | myLib.toggleScroll(); 24 | } 25 | }); 26 | 27 | myLib.body.addEventListener('click', function(e) { 28 | var target = e.target; 29 | 30 | if (target.classList.contains('popup-close') || 31 | target.classList.contains('popup__inner')) { 32 | var popup = myLib.closestItemByClass(target, 'popup'); 33 | 34 | closePopup(popup); 35 | myLib.toggleScroll(); 36 | } 37 | }); 38 | 39 | myLib.body.addEventListener('keydown', function(e) { 40 | if (e.keyCode !== 27) { 41 | return; 42 | } 43 | 44 | var popup = document.querySelector('.popup.is-active'); 45 | 46 | if (popup) { 47 | closePopup(popup); 48 | myLib.toggleScroll(); 49 | } 50 | }); 51 | })(); 52 | -------------------------------------------------------------------------------- /lesson6/js/popup.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var showPopup = function(target) { 3 | target.classList.add('is-active'); 4 | }; 5 | 6 | var closePopup = function(target) { 7 | target.classList.remove('is-active'); 8 | }; 9 | 10 | myLib.body.addEventListener('click', function(e) { 11 | var target = e.target; 12 | var popupClass = myLib.closestAttr(target, 'data-popup'); 13 | 14 | if (popupClass === null) { 15 | return; 16 | } 17 | 18 | e.preventDefault(); 19 | var popup = document.querySelector('.' + popupClass); 20 | 21 | if (popup) { 22 | showPopup(popup); 23 | myLib.toggleScroll(); 24 | } 25 | }); 26 | 27 | myLib.body.addEventListener('click', function(e) { 28 | var target = e.target; 29 | 30 | if (target.classList.contains('popup-close') || 31 | target.classList.contains('popup__inner')) { 32 | var popup = myLib.closestItemByClass(target, 'popup'); 33 | 34 | closePopup(popup); 35 | myLib.toggleScroll(); 36 | } 37 | }); 38 | 39 | myLib.body.addEventListener('keydown', function(e) { 40 | if (e.keyCode !== 27) { 41 | return; 42 | } 43 | 44 | var popup = document.querySelector('.popup.is-active'); 45 | 46 | if (popup) { 47 | closePopup(popup); 48 | myLib.toggleScroll(); 49 | } 50 | }); 51 | })(); 52 | -------------------------------------------------------------------------------- /lesson7/js/popup.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var showPopup = function(target) { 3 | target.classList.add('is-active'); 4 | }; 5 | 6 | var closePopup = function(target) { 7 | target.classList.remove('is-active'); 8 | }; 9 | 10 | myLib.body.addEventListener('click', function(e) { 11 | var target = e.target; 12 | var popupClass = myLib.closestAttr(target, 'data-popup'); 13 | 14 | if (popupClass === null) { 15 | return; 16 | } 17 | 18 | e.preventDefault(); 19 | var popup = document.querySelector('.' + popupClass); 20 | 21 | if (popup) { 22 | showPopup(popup); 23 | myLib.toggleScroll(); 24 | } 25 | }); 26 | 27 | myLib.body.addEventListener('click', function(e) { 28 | var target = e.target; 29 | 30 | if (target.classList.contains('popup-close') || 31 | target.classList.contains('popup__inner')) { 32 | var popup = myLib.closestItemByClass(target, 'popup'); 33 | 34 | closePopup(popup); 35 | myLib.toggleScroll(); 36 | } 37 | }); 38 | 39 | myLib.body.addEventListener('keydown', function(e) { 40 | if (e.keyCode !== 27) { 41 | return; 42 | } 43 | 44 | var popup = document.querySelector('.popup.is-active'); 45 | 46 | if (popup) { 47 | closePopup(popup); 48 | myLib.toggleScroll(); 49 | } 50 | }); 51 | })(); 52 | -------------------------------------------------------------------------------- /lesson6-animation/js/popup.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var showPopup = function(target) { 3 | target.classList.add('is-active'); 4 | }; 5 | 6 | var closePopup = function(target) { 7 | target.classList.remove('is-active'); 8 | }; 9 | 10 | myLib.body.addEventListener('click', function(e) { 11 | var target = e.target; 12 | var popupClass = myLib.closestAttr(target, 'data-popup'); 13 | 14 | if (popupClass === null) { 15 | return; 16 | } 17 | 18 | e.preventDefault(); 19 | var popup = document.querySelector('.' + popupClass); 20 | 21 | if (popup) { 22 | showPopup(popup); 23 | myLib.toggleScroll(); 24 | } 25 | }); 26 | 27 | myLib.body.addEventListener('click', function(e) { 28 | var target = e.target; 29 | 30 | if (target.classList.contains('popup-close') || 31 | target.classList.contains('popup__inner')) { 32 | var popup = myLib.closestItemByClass(target, 'popup'); 33 | 34 | closePopup(popup); 35 | myLib.toggleScroll(); 36 | } 37 | }); 38 | 39 | myLib.body.addEventListener('keydown', function(e) { 40 | if (e.keyCode !== 27) { 41 | return; 42 | } 43 | 44 | var popup = document.querySelector('.popup.is-active'); 45 | 46 | if (popup) { 47 | closePopup(popup); 48 | myLib.toggleScroll(); 49 | } 50 | }); 51 | })(); 52 | -------------------------------------------------------------------------------- /lesson1/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson2/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson3/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson4/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/js/popup.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var showPopup = function(target) { 3 | target.classList.add('is-active'); 4 | }; 5 | 6 | var closePopup = function(target) { 7 | target.classList.remove('is-active'); 8 | }; 9 | 10 | myLib.body.addEventListener('click', function(e) { 11 | var target = e.target; 12 | var popupClass = myLib.closestAttr(target, 'data-popup'); 13 | 14 | if (popupClass === null) { 15 | return; 16 | } 17 | 18 | e.preventDefault(); 19 | var popup = document.querySelector('.' + popupClass); 20 | 21 | if (popup) { 22 | showPopup(popup); 23 | myLib.toggleScroll(); 24 | } 25 | }); 26 | 27 | myLib.body.addEventListener('click', function(e) { 28 | var target = e.target; 29 | 30 | if (target.classList.contains('popup-close') || 31 | target.classList.contains('popup__inner')) { 32 | var popup = myLib.closestItemByClass(target, 'popup'); 33 | 34 | closePopup(popup); 35 | myLib.toggleScroll(); 36 | } 37 | }); 38 | 39 | myLib.body.addEventListener('keydown', function(e) { 40 | if (e.keyCode !== 27) { 41 | return; 42 | } 43 | 44 | var popup = document.querySelector('.popup.is-active'); 45 | 46 | if (popup) { 47 | closePopup(popup); 48 | myLib.toggleScroll(); 49 | } 50 | }); 51 | })(); 52 | -------------------------------------------------------------------------------- /lesson5/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson6/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson7/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson6-animation/css/section-top.css: -------------------------------------------------------------------------------- 1 | .section-top { 2 | height: 100vh; 3 | min-height: 600px; 4 | background: #0e1419 url(../img/section-top/bg.jpg) no-repeat center; 5 | background-size: cover; 6 | color: #fff; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | text-align: center; 11 | position: relative; 12 | padding: 170px 0 100px; 13 | } 14 | 15 | .section-top::before { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0,0,0,0.5); 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | .section-top__container { 26 | position: relative; 27 | width: 520px; 28 | } 29 | 30 | .section-top__info { 31 | font-size: 24px; 32 | font-family: 'Montserrat', sans-serif; 33 | font-weight: 900; 34 | color: #fcff00; 35 | margin: 0; 36 | } 37 | 38 | .section-top__title { 39 | font-family: 'Montserrat', sans-serif; 40 | font-size: 55px; 41 | font-weight: 900; 42 | margin: 0 0 35px; 43 | } 44 | 45 | @media (max-width: 992px) { 46 | .section-top { 47 | padding-top: 150px; 48 | } 49 | } 50 | 51 | @media (max-width: 576px) { 52 | .section-top__info { 53 | font-size: 18px; 54 | } 55 | 56 | .section-top__title { 57 | font-size: 40px; 58 | } 59 | } 60 | 61 | @media (max-width: 360px) { 62 | .section-top__title { 63 | font-size: 34px; 64 | } 65 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/js/scrollTo.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 3 | var linear = function(t, b, c, d) { 4 | return c * t / d + b; 5 | }; 6 | 7 | var isAnimatedScroll = false; 8 | 9 | var smoothScroll = function(target, duration) { 10 | isAnimatedScroll = true; 11 | 12 | var startPosition = window.pageYOffset; 13 | var targetPosition = startPosition + target.getBoundingClientRect().top; 14 | var distance = targetPosition - startPosition; 15 | var startTime = null; 16 | 17 | var animation = function(currentTime) { 18 | if (startTime === null) { 19 | startTime = currentTime; 20 | } 21 | 22 | var timeElapsed = currentTime - startTime; 23 | var scrollY = distance * (timeElapsed / duration) + startPosition; // linear 24 | 25 | window.scrollTo(0, scrollY); 26 | 27 | console.log('Distance: ' + distance + '. TimeElapsed: ' + timeElapsed + '. duration: ' + duration + '. StartPosition: ' + startPosition + '. ScrollY: ' + scrollY); 28 | 29 | if (timeElapsed < duration) { 30 | requestAnimationFrame(animation); 31 | } else { 32 | isAnimatedScroll = false; 33 | } 34 | 35 | }; 36 | 37 | requestAnimationFrame(animation); 38 | }; 39 | 40 | 41 | myLib.body.addEventListener('click', function(e) { 42 | var target = e.target; 43 | var scrollToItemClass = myLib.closestAttr(target, 'data-scroll-to'); 44 | 45 | if (scrollToItemClass === null || isAnimatedScroll) { 46 | return; 47 | } 48 | 49 | e.preventDefault(); 50 | var scrollToItem = document.querySelector('.' + scrollToItemClass); 51 | 52 | if (scrollToItem) { 53 | smoothScroll(scrollToItem, 1000); 54 | } 55 | }); 56 | })(); -------------------------------------------------------------------------------- /lesson7/js/form.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var forms = document.querySelectorAll('.form-send'); 3 | 4 | if (forms.length === 0) { 5 | return; 6 | } 7 | 8 | var serialize = function(form) { 9 | var items = form.querySelectorAll('input, select, textarea'); 10 | var str = ''; 11 | for (var i = 0; i < items.length; i += 1) { 12 | var item = items[i]; 13 | var name = item.name; 14 | var value = item.value; 15 | var separator = i === 0 ? '' : '&'; 16 | 17 | if (value) { 18 | str += separator + name + '=' + value; 19 | } 20 | } 21 | return str; 22 | }; 23 | 24 | var formSend = function(form) { 25 | var data = serialize(form); 26 | var xhr = new XMLHttpRequest(); 27 | var url = 'mail/mail.php'; 28 | 29 | xhr.open('POST', url); 30 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 31 | 32 | xhr.onload = function() { 33 | var activePopup = document.querySelector('.popup.is-active'); 34 | 35 | if (activePopup) { 36 | activePopup.classList.remove('is-active'); 37 | } else { 38 | myLib.toggleScroll(); 39 | } 40 | 41 | if (xhr.response === 'success') { 42 | document.querySelector('.popup-thanks').classList.add('is-active'); 43 | } else { 44 | document.querySelector('.popup-error').classList.add('is-active'); 45 | } 46 | 47 | form.reset(); 48 | }; 49 | 50 | xhr.send(data); 51 | }; 52 | 53 | for (var i = 0; i < forms.length; i += 1) { 54 | forms[i].addEventListener('submit', function(e) { 55 | e.preventDefault(); 56 | var form = e.currentTarget; 57 | formSend(form); 58 | }); 59 | } 60 | })(); -------------------------------------------------------------------------------- /lesson6/js/catalog.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var catalogSection = document.querySelector('.section-catalog'); 3 | 4 | if (catalogSection === null) { 5 | return; 6 | } 7 | 8 | var removeChildren = function(item) { 9 | while (item.firstChild) { 10 | item.removeChild(item.firstChild); 11 | } 12 | }; 13 | 14 | var updateChildren = function(item, children) { 15 | removeChildren(item); 16 | for (var i = 0; i < children.length; i += 1) { 17 | item.appendChild(children[i]); 18 | } 19 | }; 20 | 21 | var catalog = catalogSection.querySelector('.catalog'); 22 | var catalogNav = catalogSection.querySelector('.catalog-nav'); 23 | var catalogItems = catalogSection.querySelectorAll('.catalog__item'); 24 | 25 | catalogNav.addEventListener('click', function(e) { 26 | var target = e.target; 27 | var item = myLib.closestItemByClass(target, 'catalog-nav__btn'); 28 | 29 | if (item === null || item.classList.contains('is-active')) { 30 | return; 31 | } 32 | 33 | e.preventDefault(); 34 | var filterValue = item.getAttribute('data-filter'); 35 | var previousBtnActive = catalogNav.querySelector('.catalog-nav__btn.is-active'); 36 | 37 | previousBtnActive.classList.remove('is-active'); 38 | item.classList.add('is-active'); 39 | 40 | if (filterValue === 'all') { 41 | updateChildren(catalog, catalogItems); 42 | return; 43 | } 44 | 45 | var filteredItems = []; 46 | for (var i = 0; i < catalogItems.length; i += 1) { 47 | var current = catalogItems[i]; 48 | if (current.getAttribute('data-category') === filterValue) { 49 | filteredItems.push(current); 50 | } 51 | } 52 | 53 | updateChildren(catalog, filteredItems); 54 | }); 55 | })(); -------------------------------------------------------------------------------- /lesson7/js/catalog.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var catalogSection = document.querySelector('.section-catalog'); 3 | 4 | if (catalogSection === null) { 5 | return; 6 | } 7 | 8 | var removeChildren = function(item) { 9 | while (item.firstChild) { 10 | item.removeChild(item.firstChild); 11 | } 12 | }; 13 | 14 | var updateChildren = function(item, children) { 15 | removeChildren(item); 16 | for (var i = 0; i < children.length; i += 1) { 17 | item.appendChild(children[i]); 18 | } 19 | }; 20 | 21 | var catalog = catalogSection.querySelector('.catalog'); 22 | var catalogNav = catalogSection.querySelector('.catalog-nav'); 23 | var catalogItems = catalogSection.querySelectorAll('.catalog__item'); 24 | 25 | catalogNav.addEventListener('click', function(e) { 26 | var target = e.target; 27 | var item = myLib.closestItemByClass(target, 'catalog-nav__btn'); 28 | 29 | if (item === null || item.classList.contains('is-active')) { 30 | return; 31 | } 32 | 33 | e.preventDefault(); 34 | var filterValue = item.getAttribute('data-filter'); 35 | var previousBtnActive = catalogNav.querySelector('.catalog-nav__btn.is-active'); 36 | 37 | previousBtnActive.classList.remove('is-active'); 38 | item.classList.add('is-active'); 39 | 40 | if (filterValue === 'all') { 41 | updateChildren(catalog, catalogItems); 42 | return; 43 | } 44 | 45 | var filteredItems = []; 46 | for (var i = 0; i < catalogItems.length; i += 1) { 47 | var current = catalogItems[i]; 48 | if (current.getAttribute('data-category') === filterValue) { 49 | filteredItems.push(current); 50 | } 51 | } 52 | 53 | updateChildren(catalog, filteredItems); 54 | }); 55 | })(); -------------------------------------------------------------------------------- /lesson6-animation/js/catalog.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var catalogSection = document.querySelector('.section-catalog'); 3 | 4 | if (catalogSection === null) { 5 | return; 6 | } 7 | 8 | var removeChildren = function(item) { 9 | while (item.firstChild) { 10 | item.removeChild(item.firstChild); 11 | } 12 | }; 13 | 14 | var updateChildren = function(item, children) { 15 | removeChildren(item); 16 | for (var i = 0; i < children.length; i += 1) { 17 | item.appendChild(children[i]); 18 | } 19 | }; 20 | 21 | var catalog = catalogSection.querySelector('.catalog'); 22 | var catalogNav = catalogSection.querySelector('.catalog-nav'); 23 | var catalogItems = catalogSection.querySelectorAll('.catalog__item'); 24 | 25 | catalogNav.addEventListener('click', function(e) { 26 | var target = e.target; 27 | var item = myLib.closestItemByClass(target, 'catalog-nav__btn'); 28 | 29 | if (item === null || item.classList.contains('is-active')) { 30 | return; 31 | } 32 | 33 | e.preventDefault(); 34 | var filterValue = item.getAttribute('data-filter'); 35 | var previousBtnActive = catalogNav.querySelector('.catalog-nav__btn.is-active'); 36 | 37 | previousBtnActive.classList.remove('is-active'); 38 | item.classList.add('is-active'); 39 | 40 | if (filterValue === 'all') { 41 | updateChildren(catalog, catalogItems); 42 | return; 43 | } 44 | 45 | var filteredItems = []; 46 | for (var i = 0; i < catalogItems.length; i += 1) { 47 | var current = catalogItems[i]; 48 | if (current.getAttribute('data-category') === filterValue) { 49 | filteredItems.push(current); 50 | } 51 | } 52 | 53 | updateChildren(catalog, filteredItems); 54 | }); 55 | })(); -------------------------------------------------------------------------------- /lesson6-animation/js/product.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var catalog = document.querySelector('.catalog'); 3 | 4 | if (catalog === null) { 5 | return; 6 | } 7 | 8 | var changeProductSize = function(target) { 9 | var product = myLib.closestItemByClass(target, 'product'); 10 | var previousBtnActive = product.querySelector('.product__size.is-active'); 11 | 12 | previousBtnActive.classList.remove('is-active'); 13 | target.classList.add('is-active'); 14 | }; 15 | 16 | var changeProductOrderInfo = function(target) { 17 | var product = myLib.closestItemByClass(target, 'product'); 18 | var order = document.querySelector('.popup-order'); 19 | 20 | var productTitle = product.querySelector('.product__title').textContent; 21 | var productSize = product.querySelector('.product__size.is-active').textContent; 22 | var productPrice = product.querySelector('.product__price-value').textContent; 23 | var productImgSrc = product.querySelector('.product__img').getAttribute('src'); 24 | 25 | order.querySelector('.order-info-title').setAttribute('value', productTitle); 26 | order.querySelector('.order-info-price').setAttribute('value', productPrice); 27 | order.querySelector('.order-info-size').setAttribute('value', productSize); 28 | 29 | order.querySelector('.order__img').setAttribute('src', productImgSrc); 30 | order.querySelector('.order-product-title').textContent = productTitle; 31 | order.querySelector('.order-product-price').textContent = productPrice; 32 | order.querySelector('.order__size').textContent = productSize; 33 | }; 34 | 35 | catalog.addEventListener('click', function(e) { 36 | var target = e.target; 37 | console.log(target) 38 | 39 | if (target.classList.contains('product__size')) { 40 | e.preventDefault(); 41 | changeProductSize(target); 42 | } 43 | 44 | if (target.classList.contains('product__btn')) { 45 | e.preventDefault(); 46 | changeProductOrderInfo(target); 47 | } 48 | }); 49 | })(); -------------------------------------------------------------------------------- /lesson6/js/product.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var catalog = document.querySelector('.catalog'); 3 | 4 | if (catalog === null) { 5 | return; 6 | } 7 | 8 | var changeProductSize = function(target) { 9 | var product = myLib.closestItemByClass(target, 'product'); 10 | var previousBtnActive = product.querySelector('.product__size.is-active'); 11 | 12 | previousBtnActive.classList.remove('is-active'); 13 | target.classList.add('is-active'); 14 | }; 15 | 16 | var changeProductOrderInfo = function(target) { 17 | var product = myLib.closestItemByClass(target, 'product'); 18 | var order = document.querySelector('.popup-order'); 19 | 20 | var productTitle = product.querySelector('.product__title').textContent; 21 | var productSize = product.querySelector('.product__size.is-active').textContent; 22 | var productPrice = product.querySelector('.product__price-value').textContent; 23 | var productImgSrc = product.querySelector('.product__img').getAttribute('src'); 24 | 25 | order.querySelector('.order-info-title').setAttribute('value', productTitle); 26 | order.querySelector('.order-info-size').setAttribute('value', productSize); 27 | order.querySelector('.order-info-price').setAttribute('value', productPrice); 28 | 29 | order.querySelector('.order-product-title').textContent = productTitle; 30 | order.querySelector('.order-product-price').textContent = productPrice; 31 | order.querySelector('.order__size').textContent = productSize; 32 | order.querySelector('.order__img').setAttribute('src', productImgSrc); 33 | }; 34 | 35 | catalog.addEventListener('click', function(e) { 36 | var target = e.target; 37 | 38 | if (target.classList.contains('product__size') && !target.classList.contains('is-active')) { 39 | e.preventDefault(); 40 | changeProductSize(target); 41 | } 42 | 43 | if (target.classList.contains('product__btn')) { 44 | e.preventDefault(); 45 | changeProductOrderInfo(target); 46 | } 47 | }); 48 | })(); -------------------------------------------------------------------------------- /lesson7/js/product.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var catalog = document.querySelector('.catalog'); 3 | 4 | if (catalog === null) { 5 | return; 6 | } 7 | 8 | var changeProductSize = function(target) { 9 | var product = myLib.closestItemByClass(target, 'product'); 10 | var previousBtnActive = product.querySelector('.product__size.is-active'); 11 | 12 | previousBtnActive.classList.remove('is-active'); 13 | target.classList.add('is-active'); 14 | }; 15 | 16 | var changeProductOrderInfo = function(target) { 17 | var product = myLib.closestItemByClass(target, 'product'); 18 | var order = document.querySelector('.popup-order'); 19 | 20 | var productTitle = product.querySelector('.product__title').textContent; 21 | var productSize = product.querySelector('.product__size.is-active').textContent; 22 | var productPrice = product.querySelector('.product__price-value').textContent; 23 | var productImgSrc = product.querySelector('.product__img').getAttribute('src'); 24 | 25 | order.querySelector('.order-info-title').setAttribute('value', productTitle); 26 | order.querySelector('.order-info-size').setAttribute('value', productSize); 27 | order.querySelector('.order-info-price').setAttribute('value', productPrice); 28 | 29 | order.querySelector('.order-product-title').textContent = productTitle; 30 | order.querySelector('.order-product-price').textContent = productPrice; 31 | order.querySelector('.order__size').textContent = productSize; 32 | order.querySelector('.order__img').setAttribute('src', productImgSrc); 33 | }; 34 | 35 | catalog.addEventListener('click', function(e) { 36 | var target = e.target; 37 | 38 | if (target.classList.contains('product__size') && !target.classList.contains('is-active')) { 39 | e.preventDefault(); 40 | changeProductSize(target); 41 | } 42 | 43 | if (target.classList.contains('product__btn')) { 44 | e.preventDefault(); 45 | changeProductOrderInfo(target); 46 | } 47 | }); 48 | })(); -------------------------------------------------------------------------------- /lesson4/css/popup.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | position: fixed; 3 | z-index: 10; 4 | top: 0; 5 | left: 0; 6 | background: rgba(0,0,0,.7); 7 | width: 100%; 8 | height: 100%; 9 | overflow: auto; 10 | pointer-events: none; 11 | opacity: 0; 12 | visibility: hidden; 13 | } 14 | 15 | .popup.is-active { 16 | pointer-events: auto; 17 | opacity: 1; 18 | visibility: visible; 19 | } 20 | 21 | .popup__wrapper { 22 | display: table; 23 | height: 100%; 24 | width: 100%; 25 | } 26 | 27 | .popup__inner { 28 | display: table-cell; 29 | vertical-align: middle; 30 | padding: 50px 0; 31 | } 32 | 33 | .popup__content { 34 | background: #fff; 35 | padding: 70px 20px; 36 | max-width: 730px; 37 | margin: 0 auto; 38 | position: relative; 39 | border-radius: 20px; 40 | } 41 | 42 | .popup__content--fluid { 43 | padding-left: 0; 44 | padding-right: 0; 45 | } 46 | 47 | .popup__content--centered { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | .popup__btn-close { 54 | position: absolute; 55 | top: 20px; 56 | right: 20px; 57 | } 58 | 59 | .popup__title { 60 | margin-bottom: 20px; 61 | } 62 | 63 | .popup__subtitle { 64 | margin: 0; 65 | text-align: center; 66 | font-size: 24px; 67 | } 68 | 69 | .popup__subtitle--order { 70 | max-width: 360px; 71 | margin: 0 auto 40px; 72 | } 73 | 74 | .popup__mobile-menu { 75 | margin-bottom: 30px; 76 | } 77 | 78 | .popup__phone { 79 | margin-bottom: 30px; 80 | } 81 | 82 | .popup__link { 83 | text-decoration: none; 84 | color: inherit; 85 | white-space: nowrap; 86 | } 87 | 88 | @media (max-width: 767px) { 89 | .popup__inner { 90 | padding: 0; 91 | } 92 | 93 | .popup__content { 94 | max-width: 100%; 95 | height: 100%; 96 | border-radius: 0; 97 | padding-top: 100px; 98 | } 99 | 100 | .popup__subtitle { 101 | font-size: 18px; 102 | } 103 | 104 | .popup__subtitle--order { 105 | max-width: 260px; 106 | } 107 | } -------------------------------------------------------------------------------- /lesson5/css/popup.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | position: fixed; 3 | z-index: 10; 4 | top: 0; 5 | left: 0; 6 | background: rgba(0,0,0,.7); 7 | width: 100%; 8 | height: 100%; 9 | overflow: auto; 10 | pointer-events: none; 11 | opacity: 0; 12 | visibility: hidden; 13 | } 14 | 15 | .popup.is-active { 16 | pointer-events: auto; 17 | opacity: 1; 18 | visibility: visible; 19 | } 20 | 21 | .popup__wrapper { 22 | display: table; 23 | height: 100%; 24 | width: 100%; 25 | } 26 | 27 | .popup__inner { 28 | display: table-cell; 29 | vertical-align: middle; 30 | padding: 50px 0; 31 | } 32 | 33 | .popup__content { 34 | background: #fff; 35 | padding: 70px 20px; 36 | max-width: 730px; 37 | margin: 0 auto; 38 | position: relative; 39 | border-radius: 20px; 40 | } 41 | 42 | .popup__content--fluid { 43 | padding-left: 0; 44 | padding-right: 0; 45 | } 46 | 47 | .popup__content--centered { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | .popup__btn-close { 54 | position: absolute; 55 | top: 20px; 56 | right: 20px; 57 | } 58 | 59 | .popup__title { 60 | margin-bottom: 20px; 61 | } 62 | 63 | .popup__subtitle { 64 | margin: 0; 65 | text-align: center; 66 | font-size: 24px; 67 | } 68 | 69 | .popup__subtitle--order { 70 | max-width: 360px; 71 | margin: 0 auto 40px; 72 | } 73 | 74 | .popup__mobile-menu { 75 | margin-bottom: 30px; 76 | } 77 | 78 | .popup__phone { 79 | margin-bottom: 30px; 80 | } 81 | 82 | .popup__link { 83 | text-decoration: none; 84 | color: inherit; 85 | white-space: nowrap; 86 | } 87 | 88 | @media (max-width: 767px) { 89 | .popup__inner { 90 | padding: 0; 91 | } 92 | 93 | .popup__content { 94 | max-width: 100%; 95 | height: 100%; 96 | border-radius: 0; 97 | padding-top: 100px; 98 | } 99 | 100 | .popup__subtitle { 101 | font-size: 18px; 102 | } 103 | 104 | .popup__subtitle--order { 105 | max-width: 260px; 106 | } 107 | } -------------------------------------------------------------------------------- /lesson6/css/popup.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | position: fixed; 3 | z-index: 10; 4 | top: 0; 5 | left: 0; 6 | background: rgba(0,0,0,.7); 7 | width: 100%; 8 | height: 100%; 9 | overflow: auto; 10 | pointer-events: none; 11 | opacity: 0; 12 | visibility: hidden; 13 | } 14 | 15 | .popup.is-active { 16 | pointer-events: auto; 17 | opacity: 1; 18 | visibility: visible; 19 | } 20 | 21 | .popup__wrapper { 22 | display: table; 23 | height: 100%; 24 | width: 100%; 25 | } 26 | 27 | .popup__inner { 28 | display: table-cell; 29 | vertical-align: middle; 30 | padding: 50px 0; 31 | } 32 | 33 | .popup__content { 34 | background: #fff; 35 | padding: 70px 20px; 36 | max-width: 730px; 37 | margin: 0 auto; 38 | position: relative; 39 | border-radius: 20px; 40 | } 41 | 42 | .popup__content--fluid { 43 | padding-left: 0; 44 | padding-right: 0; 45 | } 46 | 47 | .popup__content--centered { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | .popup__btn-close { 54 | position: absolute; 55 | top: 20px; 56 | right: 20px; 57 | } 58 | 59 | .popup__title { 60 | margin-bottom: 20px; 61 | } 62 | 63 | .popup__subtitle { 64 | margin: 0; 65 | text-align: center; 66 | font-size: 24px; 67 | } 68 | 69 | .popup__subtitle--order { 70 | max-width: 360px; 71 | margin: 0 auto 40px; 72 | } 73 | 74 | .popup__mobile-menu { 75 | margin-bottom: 30px; 76 | } 77 | 78 | .popup__phone { 79 | margin-bottom: 30px; 80 | } 81 | 82 | .popup__link { 83 | text-decoration: none; 84 | color: inherit; 85 | white-space: nowrap; 86 | } 87 | 88 | @media (max-width: 767px) { 89 | .popup__inner { 90 | padding: 0; 91 | } 92 | 93 | .popup__content { 94 | max-width: 100%; 95 | height: 100%; 96 | border-radius: 0; 97 | padding-top: 100px; 98 | } 99 | 100 | .popup__subtitle { 101 | font-size: 18px; 102 | } 103 | 104 | .popup__subtitle--order { 105 | max-width: 260px; 106 | } 107 | } -------------------------------------------------------------------------------- /lesson7/css/popup.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | position: fixed; 3 | z-index: 10; 4 | top: 0; 5 | left: 0; 6 | background: rgba(0,0,0,.7); 7 | width: 100%; 8 | height: 100%; 9 | overflow: auto; 10 | pointer-events: none; 11 | opacity: 0; 12 | visibility: hidden; 13 | } 14 | 15 | .popup.is-active { 16 | pointer-events: auto; 17 | opacity: 1; 18 | visibility: visible; 19 | } 20 | 21 | .popup__wrapper { 22 | display: table; 23 | height: 100%; 24 | width: 100%; 25 | } 26 | 27 | .popup__inner { 28 | display: table-cell; 29 | vertical-align: middle; 30 | padding: 50px 0; 31 | } 32 | 33 | .popup__content { 34 | background: #fff; 35 | padding: 70px 20px; 36 | max-width: 730px; 37 | margin: 0 auto; 38 | position: relative; 39 | border-radius: 20px; 40 | } 41 | 42 | .popup__content--fluid { 43 | padding-left: 0; 44 | padding-right: 0; 45 | } 46 | 47 | .popup__content--centered { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | .popup__btn-close { 54 | position: absolute; 55 | top: 20px; 56 | right: 20px; 57 | } 58 | 59 | .popup__title { 60 | margin-bottom: 20px; 61 | } 62 | 63 | .popup__subtitle { 64 | margin: 0; 65 | text-align: center; 66 | font-size: 24px; 67 | } 68 | 69 | .popup__subtitle--order { 70 | max-width: 360px; 71 | margin: 0 auto 40px; 72 | } 73 | 74 | .popup__mobile-menu { 75 | margin-bottom: 30px; 76 | } 77 | 78 | .popup__phone { 79 | margin-bottom: 30px; 80 | } 81 | 82 | .popup__link { 83 | text-decoration: none; 84 | color: inherit; 85 | white-space: nowrap; 86 | } 87 | 88 | @media (max-width: 767px) { 89 | .popup__inner { 90 | padding: 0; 91 | } 92 | 93 | .popup__content { 94 | max-width: 100%; 95 | height: 100%; 96 | border-radius: 0; 97 | padding-top: 100px; 98 | } 99 | 100 | .popup__subtitle { 101 | font-size: 18px; 102 | } 103 | 104 | .popup__subtitle--order { 105 | max-width: 260px; 106 | } 107 | } -------------------------------------------------------------------------------- /lesson6-animation/css/popup.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | position: fixed; 3 | z-index: 10; 4 | top: 0; 5 | left: 0; 6 | background: rgba(0,0,0,.7); 7 | width: 100%; 8 | height: 100%; 9 | overflow: auto; 10 | pointer-events: none; 11 | opacity: 0; 12 | visibility: hidden; 13 | } 14 | 15 | .popup.is-active { 16 | pointer-events: auto; 17 | opacity: 1; 18 | visibility: visible; 19 | } 20 | 21 | .popup__wrapper { 22 | display: table; 23 | height: 100%; 24 | width: 100%; 25 | } 26 | 27 | .popup__inner { 28 | display: table-cell; 29 | vertical-align: middle; 30 | padding: 50px 0; 31 | } 32 | 33 | .popup__content { 34 | background: #fff; 35 | padding: 70px 20px; 36 | max-width: 730px; 37 | margin: 0 auto; 38 | position: relative; 39 | border-radius: 20px; 40 | } 41 | 42 | .popup__content--fluid { 43 | padding-left: 0; 44 | padding-right: 0; 45 | } 46 | 47 | .popup__content--centered { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | .popup__btn-close { 54 | position: absolute; 55 | top: 20px; 56 | right: 20px; 57 | } 58 | 59 | .popup__title { 60 | margin-bottom: 20px; 61 | } 62 | 63 | .popup__subtitle { 64 | margin: 0; 65 | text-align: center; 66 | font-size: 24px; 67 | } 68 | 69 | .popup__subtitle--order { 70 | max-width: 360px; 71 | margin: 0 auto 40px; 72 | } 73 | 74 | .popup__mobile-menu { 75 | margin-bottom: 30px; 76 | } 77 | 78 | .popup__phone { 79 | margin-bottom: 30px; 80 | } 81 | 82 | .popup__link { 83 | text-decoration: none; 84 | color: inherit; 85 | white-space: nowrap; 86 | } 87 | 88 | @media (max-width: 767px) { 89 | .popup__inner { 90 | padding: 0; 91 | } 92 | 93 | .popup__content { 94 | max-width: 100%; 95 | height: 100%; 96 | border-radius: 0; 97 | padding-top: 100px; 98 | } 99 | 100 | .popup__subtitle { 101 | font-size: 18px; 102 | } 103 | 104 | .popup__subtitle--order { 105 | max-width: 260px; 106 | } 107 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/css/popup.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | position: fixed; 3 | z-index: 10; 4 | top: 0; 5 | left: 0; 6 | background: rgba(0,0,0,.7); 7 | width: 100%; 8 | height: 100%; 9 | overflow: auto; 10 | pointer-events: none; 11 | opacity: 0; 12 | visibility: hidden; 13 | } 14 | 15 | .popup.is-active { 16 | pointer-events: auto; 17 | opacity: 1; 18 | visibility: visible; 19 | } 20 | 21 | .popup__wrapper { 22 | display: table; 23 | height: 100%; 24 | width: 100%; 25 | } 26 | 27 | .popup__inner { 28 | display: table-cell; 29 | vertical-align: middle; 30 | padding: 50px 0; 31 | } 32 | 33 | .popup__content { 34 | background: #fff; 35 | padding: 70px 20px; 36 | max-width: 730px; 37 | margin: 0 auto; 38 | position: relative; 39 | border-radius: 20px; 40 | } 41 | 42 | .popup__content--fluid { 43 | padding-left: 0; 44 | padding-right: 0; 45 | } 46 | 47 | .popup__content--centered { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | .popup__btn-close { 54 | position: absolute; 55 | top: 20px; 56 | right: 20px; 57 | } 58 | 59 | .popup__title { 60 | margin-bottom: 20px; 61 | } 62 | 63 | .popup__subtitle { 64 | margin: 0; 65 | text-align: center; 66 | font-size: 24px; 67 | } 68 | 69 | .popup__subtitle--order { 70 | max-width: 360px; 71 | margin: 0 auto 40px; 72 | } 73 | 74 | .popup__mobile-menu { 75 | margin-bottom: 30px; 76 | } 77 | 78 | .popup__phone { 79 | margin-bottom: 30px; 80 | } 81 | 82 | .popup__link { 83 | text-decoration: none; 84 | color: inherit; 85 | white-space: nowrap; 86 | } 87 | 88 | @media (max-width: 767px) { 89 | .popup__inner { 90 | padding: 0; 91 | } 92 | 93 | .popup__content { 94 | max-width: 100%; 95 | height: 100%; 96 | border-radius: 0; 97 | padding-top: 100px; 98 | } 99 | 100 | .popup__subtitle { 101 | font-size: 18px; 102 | } 103 | 104 | .popup__subtitle--order { 105 | max-width: 260px; 106 | } 107 | } -------------------------------------------------------------------------------- /lesson2/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | } 44 | 45 | .header-page__link::before { 46 | content: ''; 47 | position: absolute; 48 | top: 50%; 49 | left: 0; 50 | background: #fff; 51 | width: 100%; 52 | height: calc(100% + 40px); 53 | transform: translateY(-50%); 54 | opacity: 0; 55 | transition: all .2s; 56 | } 57 | 58 | .header-page__link:hover::before { 59 | opacity: 1; 60 | } 61 | 62 | .header-page__text { 63 | position: relative; 64 | transition: color .2s; 65 | } 66 | 67 | .header-page__link:hover { 68 | color: #1f1f1f; 69 | } 70 | 71 | .header-page__hamburger { 72 | display: none; 73 | margin-right: -15px; 74 | } 75 | 76 | @media (max-width: 1200px) { 77 | .header-page__link { 78 | font-size: 16px; 79 | padding: 12px 30px; 80 | } 81 | 82 | .header-page__phone { 83 | font-size: 14px; 84 | padding: 7px 16px; 85 | } 86 | } 87 | 88 | @media (max-width: 992px) { 89 | .header-page__nav { 90 | display: none; 91 | } 92 | 93 | .header-page__hamburger { 94 | display: block; 95 | } 96 | 97 | .header-page { 98 | padding: 5px 0; 99 | } 100 | } 101 | 102 | @media (max-width: 480px) { 103 | .header-page__phone { 104 | display: none; 105 | } 106 | } -------------------------------------------------------------------------------- /lesson3/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | } 44 | 45 | .header-page__link::before { 46 | content: ''; 47 | position: absolute; 48 | top: 50%; 49 | left: 0; 50 | background: #fff; 51 | width: 100%; 52 | height: calc(100% + 40px); 53 | transform: translateY(-50%); 54 | opacity: 0; 55 | transition: all .2s; 56 | } 57 | 58 | .header-page__link:hover::before { 59 | opacity: 1; 60 | } 61 | 62 | .header-page__text { 63 | position: relative; 64 | transition: color .2s; 65 | } 66 | 67 | .header-page__link:hover { 68 | color: #1f1f1f; 69 | } 70 | 71 | .header-page__hamburger { 72 | display: none; 73 | margin-right: -15px; 74 | } 75 | 76 | @media (max-width: 1200px) { 77 | .header-page__link { 78 | font-size: 16px; 79 | padding: 12px 30px; 80 | } 81 | 82 | .header-page__phone { 83 | font-size: 14px; 84 | padding: 7px 16px; 85 | } 86 | } 87 | 88 | @media (max-width: 992px) { 89 | .header-page__nav { 90 | display: none; 91 | } 92 | 93 | .header-page__hamburger { 94 | display: block; 95 | } 96 | 97 | .header-page { 98 | padding: 5px 0; 99 | } 100 | } 101 | 102 | @media (max-width: 480px) { 103 | .header-page__phone { 104 | display: none; 105 | } 106 | } -------------------------------------------------------------------------------- /lesson4/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | } 44 | 45 | .header-page__link::before { 46 | content: ''; 47 | position: absolute; 48 | top: 50%; 49 | left: 0; 50 | background: #fff; 51 | width: 100%; 52 | height: calc(100% + 40px); 53 | transform: translateY(-50%); 54 | opacity: 0; 55 | transition: all .2s; 56 | } 57 | 58 | .header-page__link:hover::before { 59 | opacity: 1; 60 | } 61 | 62 | .header-page__text { 63 | position: relative; 64 | transition: color .2s; 65 | } 66 | 67 | .header-page__link:hover { 68 | color: #1f1f1f; 69 | } 70 | 71 | .header-page__hamburger { 72 | display: none; 73 | margin-right: -15px; 74 | } 75 | 76 | @media (max-width: 1200px) { 77 | .header-page__link { 78 | font-size: 16px; 79 | padding: 12px 30px; 80 | } 81 | 82 | .header-page__phone { 83 | font-size: 14px; 84 | padding: 7px 16px; 85 | } 86 | } 87 | 88 | @media (max-width: 992px) { 89 | .header-page__nav { 90 | display: none; 91 | } 92 | 93 | .header-page__hamburger { 94 | display: block; 95 | } 96 | 97 | .header-page { 98 | padding: 5px 0; 99 | } 100 | } 101 | 102 | @media (max-width: 480px) { 103 | .header-page__phone { 104 | display: none; 105 | } 106 | } -------------------------------------------------------------------------------- /lesson1/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | } 44 | 45 | .header-page__link::before { 46 | content: ''; 47 | position: absolute; 48 | top: 50%; 49 | left: 0; 50 | background: #fff; 51 | width: 100%; 52 | height: calc(100% + 40px); 53 | transform: translateY(-50%); 54 | opacity: 0; 55 | transition: all .2s; 56 | } 57 | 58 | .header-page__link:hover::before { 59 | opacity: 1; 60 | } 61 | 62 | .header-page__text { 63 | position: relative; 64 | transition: all .2s; 65 | } 66 | 67 | .header-page__link:hover .header-page__text { 68 | color: #1f1f1f; 69 | } 70 | 71 | .header-page__hamburger { 72 | display: none; 73 | margin-right: -15px; 74 | } 75 | 76 | @media (max-width: 1200px) { 77 | .header-page__link { 78 | font-size: 16px; 79 | padding: 12px 30px; 80 | } 81 | 82 | .header-page__phone { 83 | font-size: 14px; 84 | padding: 7px 16px; 85 | } 86 | } 87 | 88 | @media (max-width: 992px) { 89 | .header-page__nav { 90 | display: none; 91 | } 92 | 93 | .header-page__hamburger { 94 | display: block; 95 | } 96 | 97 | .header-page { 98 | padding: 5px 0; 99 | } 100 | } 101 | 102 | @media (max-width: 480px) { 103 | .header-page__phone { 104 | display: none; 105 | } 106 | } -------------------------------------------------------------------------------- /lesson5/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | transition: padding .4s; 44 | } 45 | 46 | .header-page__link::before { 47 | content: ''; 48 | position: absolute; 49 | top: 50%; 50 | left: 0; 51 | background: #fff; 52 | width: 100%; 53 | height: calc(100% + 40px); 54 | transform: translateY(-50%); 55 | opacity: 0; 56 | transition: all .2s; 57 | } 58 | 59 | .header-page__link:hover::before { 60 | opacity: 1; 61 | } 62 | 63 | .header-page__text { 64 | position: relative; 65 | transition: color .2s; 66 | } 67 | 68 | .header-page__link:hover { 69 | color: #1f1f1f; 70 | } 71 | 72 | .header-page__hamburger { 73 | display: none; 74 | margin-right: -15px; 75 | } 76 | 77 | .header-page.is-active .header-page__link { 78 | padding-top: 0; 79 | padding-bottom: 0; 80 | } 81 | 82 | @media (max-width: 1200px) { 83 | .header-page__link { 84 | font-size: 16px; 85 | padding: 12px 30px; 86 | } 87 | 88 | .header-page__phone { 89 | font-size: 14px; 90 | padding: 7px 16px; 91 | } 92 | } 93 | 94 | @media (max-width: 992px) { 95 | .header-page__nav { 96 | display: none; 97 | } 98 | 99 | .header-page__hamburger { 100 | display: block; 101 | } 102 | 103 | .header-page { 104 | padding: 5px 0; 105 | } 106 | } 107 | 108 | @media (max-width: 480px) { 109 | .header-page__phone { 110 | display: none; 111 | } 112 | } -------------------------------------------------------------------------------- /lesson6/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | transition: padding .4s; 44 | } 45 | 46 | .header-page__link::before { 47 | content: ''; 48 | position: absolute; 49 | top: 50%; 50 | left: 0; 51 | background: #fff; 52 | width: 100%; 53 | height: calc(100% + 40px); 54 | transform: translateY(-50%); 55 | opacity: 0; 56 | transition: all .2s; 57 | } 58 | 59 | .header-page__link:hover::before { 60 | opacity: 1; 61 | } 62 | 63 | .header-page__text { 64 | position: relative; 65 | transition: color .2s; 66 | } 67 | 68 | .header-page__link:hover { 69 | color: #1f1f1f; 70 | } 71 | 72 | .header-page__hamburger { 73 | display: none; 74 | margin-right: -15px; 75 | } 76 | 77 | .header-page.is-active .header-page__link { 78 | padding-top: 0; 79 | padding-bottom: 0; 80 | } 81 | 82 | @media (max-width: 1200px) { 83 | .header-page__link { 84 | font-size: 16px; 85 | padding: 12px 30px; 86 | } 87 | 88 | .header-page__phone { 89 | font-size: 14px; 90 | padding: 7px 16px; 91 | } 92 | } 93 | 94 | @media (max-width: 992px) { 95 | .header-page__nav { 96 | display: none; 97 | } 98 | 99 | .header-page__hamburger { 100 | display: block; 101 | } 102 | 103 | .header-page { 104 | padding: 5px 0; 105 | } 106 | } 107 | 108 | @media (max-width: 480px) { 109 | .header-page__phone { 110 | display: none; 111 | } 112 | } -------------------------------------------------------------------------------- /lesson7/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | transition: padding .4s; 44 | } 45 | 46 | .header-page__link::before { 47 | content: ''; 48 | position: absolute; 49 | top: 50%; 50 | left: 0; 51 | background: #fff; 52 | width: 100%; 53 | height: calc(100% + 40px); 54 | transform: translateY(-50%); 55 | opacity: 0; 56 | transition: all .2s; 57 | } 58 | 59 | .header-page__link:hover::before { 60 | opacity: 1; 61 | } 62 | 63 | .header-page__text { 64 | position: relative; 65 | transition: color .2s; 66 | } 67 | 68 | .header-page__link:hover { 69 | color: #1f1f1f; 70 | } 71 | 72 | .header-page__hamburger { 73 | display: none; 74 | margin-right: -15px; 75 | } 76 | 77 | .header-page.is-active .header-page__link { 78 | padding-top: 0; 79 | padding-bottom: 0; 80 | } 81 | 82 | @media (max-width: 1200px) { 83 | .header-page__link { 84 | font-size: 16px; 85 | padding: 12px 30px; 86 | } 87 | 88 | .header-page__phone { 89 | font-size: 14px; 90 | padding: 7px 16px; 91 | } 92 | } 93 | 94 | @media (max-width: 992px) { 95 | .header-page__nav { 96 | display: none; 97 | } 98 | 99 | .header-page__hamburger { 100 | display: block; 101 | } 102 | 103 | .header-page { 104 | padding: 5px 0; 105 | } 106 | } 107 | 108 | @media (max-width: 480px) { 109 | .header-page__phone { 110 | display: none; 111 | } 112 | } -------------------------------------------------------------------------------- /lesson6-animation/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | transition: padding .4s; 44 | } 45 | 46 | .header-page__link::before { 47 | content: ''; 48 | position: absolute; 49 | top: 50%; 50 | left: 0; 51 | background: #fff; 52 | width: 100%; 53 | height: calc(100% + 40px); 54 | transform: translateY(-50%); 55 | opacity: 0; 56 | transition: all .2s; 57 | } 58 | 59 | .header-page__link:hover::before { 60 | opacity: 1; 61 | } 62 | 63 | .header-page__text { 64 | position: relative; 65 | transition: color .2s; 66 | } 67 | 68 | .header-page__link:hover { 69 | color: #1f1f1f; 70 | } 71 | 72 | .header-page__hamburger { 73 | display: none; 74 | margin-right: -15px; 75 | } 76 | 77 | .header-page.is-active .header-page__link { 78 | padding-top: 0; 79 | padding-bottom: 0; 80 | } 81 | 82 | @media (max-width: 1200px) { 83 | .header-page__link { 84 | font-size: 16px; 85 | padding: 12px 30px; 86 | } 87 | 88 | .header-page__phone { 89 | font-size: 14px; 90 | padding: 7px 16px; 91 | } 92 | } 93 | 94 | @media (max-width: 992px) { 95 | .header-page__nav { 96 | display: none; 97 | } 98 | 99 | .header-page__hamburger { 100 | display: block; 101 | } 102 | 103 | .header-page { 104 | padding: 5px 0; 105 | } 106 | } 107 | 108 | @media (max-width: 480px) { 109 | .header-page__phone { 110 | display: none; 111 | } 112 | } -------------------------------------------------------------------------------- /lesson5-smooth-scroll/css/header-page.css: -------------------------------------------------------------------------------- 1 | .header-page { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | z-index: 5; 7 | background: rgba(11, 20, 25, 0.9); 8 | padding: 9px 0; 9 | overflow: hidden; 10 | } 11 | 12 | .header-page__container { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .header-page__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .header-page__nav { 24 | margin-right: 15px; 25 | } 26 | 27 | .header-page__ul { 28 | list-style: none; 29 | display: flex; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .header-page__link { 35 | color: #fff; 36 | text-decoration: none; 37 | display: block; 38 | padding: 15px 35px; 39 | font-family: 'Montserrat', sans-serif; 40 | font-weight: 900; 41 | font-size: 18px; 42 | position: relative; 43 | transition: padding .4s; 44 | } 45 | 46 | .header-page__link::before { 47 | content: ''; 48 | position: absolute; 49 | top: 50%; 50 | left: 0; 51 | background: #fff; 52 | width: 100%; 53 | height: calc(100% + 40px); 54 | transform: translateY(-50%); 55 | opacity: 0; 56 | transition: all .2s; 57 | } 58 | 59 | .header-page__link:hover::before { 60 | opacity: 1; 61 | } 62 | 63 | .header-page__text { 64 | position: relative; 65 | transition: color .2s; 66 | } 67 | 68 | .header-page__link:hover { 69 | color: #1f1f1f; 70 | } 71 | 72 | .header-page__hamburger { 73 | display: none; 74 | margin-right: -15px; 75 | } 76 | 77 | .header-page.is-active .header-page__link { 78 | padding-top: 0; 79 | padding-bottom: 0; 80 | } 81 | 82 | @media (max-width: 1200px) { 83 | .header-page__link { 84 | font-size: 16px; 85 | padding: 12px 30px; 86 | } 87 | 88 | .header-page__phone { 89 | font-size: 14px; 90 | padding: 7px 16px; 91 | } 92 | } 93 | 94 | @media (max-width: 992px) { 95 | .header-page__nav { 96 | display: none; 97 | } 98 | 99 | .header-page__hamburger { 100 | display: block; 101 | } 102 | 103 | .header-page { 104 | padding: 5px 0; 105 | } 106 | } 107 | 108 | @media (max-width: 480px) { 109 | .header-page__phone { 110 | display: none; 111 | } 112 | } -------------------------------------------------------------------------------- /lesson1/css/components.css: -------------------------------------------------------------------------------- 1 | /* btn start */ 2 | .btn { 3 | background-color: #ff5441; 4 | color: #fff; 5 | display: inline-block; 6 | padding: 18px 20px; 7 | width: 240px; 8 | max-width: 100%; 9 | border-radius: 28px; 10 | font-family: 'Montserrat', sans-serif; 11 | font-weight: 900; 12 | font-size: 18px; 13 | border: 0; 14 | cursor: pointer; 15 | text-align: center; 16 | letter-spacing: .02em; 17 | box-shadow: 0px 0px 38px 0px rgba(212, 66, 50, 0.8); 18 | transition: background .2s; 19 | } 20 | 21 | .btn:hover { 22 | background: #ec4b38; 23 | } 24 | 25 | .btn:active { 26 | opacity: 0.8; 27 | transform: scale(.95); 28 | } 29 | 30 | @media (max-width: 576px) { 31 | .btn { 32 | font-size: 16px; 33 | padding: 16px 20px; 34 | width: 220px; 35 | } 36 | } 37 | /* btn end */ 38 | 39 | /* container start */ 40 | .container { 41 | padding: 0 15px; 42 | width: 1200px; 43 | max-width: 100%; 44 | margin: 0 auto; 45 | } 46 | /* container end */ 47 | 48 | 49 | /* phone start */ 50 | .phone__item { 51 | font-family: 'Montserrat', sans-serif; 52 | font-weight: 900; 53 | color: #fff; 54 | text-decoration: none; 55 | display: inline-block; 56 | border: 3px solid #fff; 57 | padding: 8px 16px; 58 | border-radius: 21.5px; 59 | transition: background .2s, opacity .2s; 60 | } 61 | 62 | .phone__item:hover { 63 | color: #1f1f1f; 64 | background: #fff; 65 | } 66 | 67 | .phone__item:active { 68 | opacity: 0.8; 69 | } 70 | /* phone end */ 71 | 72 | /* btn-menu start */ 73 | .btn-menu { 74 | background: none; 75 | border-radius: 0; 76 | cursor: pointer; 77 | display: inline-block; 78 | padding: 15px; 79 | border: 0; 80 | } 81 | 82 | .btn-menu__box { 83 | display: inline-block; 84 | width: 40px; 85 | height: 24px; 86 | } 87 | 88 | .btn-menu__inner::before, 89 | .btn-menu__inner::after, 90 | .btn-menu__inner { 91 | background: #fff; 92 | width: 100%; 93 | height: 4px; 94 | border-radius: 5px; 95 | } 96 | 97 | .btn-menu__inner { 98 | display: block; 99 | top: 50%; 100 | position: relative; 101 | } 102 | 103 | .btn-menu__inner::before, 104 | .btn-menu__inner::after { 105 | content: ''; 106 | position: absolute; 107 | left: 0; 108 | } 109 | 110 | .btn-menu__inner::before { 111 | top: -10px; 112 | } 113 | 114 | .btn-menu__inner::after { 115 | bottom: -10px; 116 | } 117 | /* btn-menu end */ -------------------------------------------------------------------------------- /lesson1/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson2/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson3/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson4/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson5/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson6/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson7/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson8/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson6-animation/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson5-smooth-scroll/img/common/logo.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /lesson6-animation/js/productChecker.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | var catalog = document.querySelector('.catalog'); 3 | 4 | if (catalog === null) { 5 | return; 6 | } 7 | 8 | var changeProductSize = function(target) { 9 | var product = myLib.closestItemByClass(target, 'product').textContent; 10 | var previousBtnActive = product.querySelector('.product__size.is-active'); 11 | var checker = product.querySelector('.product__checker'); 12 | 13 | previousBtnActive.classList.remove('is-active'); 14 | target.classList.add('is-active'); 15 | 16 | changeCheckerPosition(target, checker); 17 | }; 18 | 19 | var changeCheckerPosition = function(target, checker) { 20 | checker.style.transform = 'translate(' + target.offsetLeft + 'px' + ', 0)'; 21 | }; 22 | 23 | catalog.addEventListener('click', function(e) { 24 | var target = e.target; 25 | 26 | if (target.classList.contains('product__size')) { 27 | e.preventDefault(); 28 | changeProductSize(target); 29 | } 30 | }); 31 | 32 | var timers = {}; 33 | 34 | catalog.addEventListener('mousemove', function(e) { 35 | var target = e.target; 36 | var parent = myLib.closestItemByClass(target, 'product__sizes'); 37 | 38 | if (parent === null) { 39 | return; 40 | } 41 | 42 | var product = myLib.closestItemByClass(target, 'product'); 43 | var productTitle = product.querySelector('.product__title').textContent; 44 | 45 | if (timers[productTitle]) { 46 | clearTimeout(timers[productTitle]); 47 | } 48 | 49 | currentItem = parent; 50 | var checker = parent.querySelector('.product__checker'); 51 | 52 | if (target.classList.contains('product__size')) { 53 | changeCheckerPosition(target, checker); 54 | } 55 | }); 56 | 57 | catalog.addEventListener('mouseout', function(e) { 58 | var target = e.target; 59 | var parent = myLib.closestItemByClass(target, 'product__sizes'); 60 | if (parent === null) { 61 | return; 62 | } 63 | 64 | var parent = target.parentNode; 65 | var activeBtn = parent.querySelector('.product__size.is-active'); 66 | var checker = parent.querySelector('.product__checker'); 67 | var product = myLib.closestItemByClass(target, 'product'); 68 | var productTitle = product.querySelector('.product__title').textContent; 69 | 70 | if (timers[productTitle]) { 71 | clearTimeout(timers[productTitle]); 72 | } 73 | 74 | timers[productTitle] = setTimeout(function() { 75 | changeCheckerPosition(activeBtn, checker); 76 | }, 150); 77 | }); 78 | })(); -------------------------------------------------------------------------------- /lesson1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Document 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | 27 |
28 |
29 | 48 |
49 | +7 (999) 999-99-99 50 |
51 |
52 | 57 |
58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 |
66 |
67 |

от итальянского повара

68 |

Лучшая пицца в Москве

69 |
70 | 71 |
72 |
73 |
74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /lesson3/css/section-contacts.css: -------------------------------------------------------------------------------- 1 | .section-contacts { 2 | overflow: hidden; 3 | } 4 | 5 | .section-contacts__container { 6 | position: relative; 7 | } 8 | 9 | .section-contacts__container::before { 10 | content: ''; 11 | position: absolute; 12 | background: url(../img/section-contacts/tomatoes.jpg) no-repeat; 13 | background-size: cover; 14 | width: 672px; 15 | height: 397px; 16 | right: -350px; 17 | bottom: -100px; 18 | } 19 | 20 | .sectoin-contacts__title { 21 | margin-bottom: 0; 22 | } 23 | 24 | .contacts { 25 | display: flex; 26 | align-items: center; 27 | position: relative; 28 | flex-wrap: wrap; 29 | justify-content: center; 30 | } 31 | 32 | .contacts__start { 33 | width: 50%; 34 | } 35 | 36 | .contacts__end { 37 | width: 50%; 38 | padding-left: 30px; 39 | } 40 | 41 | .contacts__map { 42 | height: 450px; 43 | background: #fef0b4; 44 | } 45 | 46 | .contacts__item { 47 | margin-bottom: 35px; 48 | } 49 | 50 | .contacts__item:last-of-type { 51 | margin-bottom: 0; 52 | } 53 | 54 | .contacts__title { 55 | margin: 0 0 5px; 56 | font-family: 'Montserrat', sans-serif; 57 | font-size: 18px; 58 | font-weight: 900; 59 | } 60 | 61 | .contacts__text { 62 | margin: 0; 63 | font-size: 18px; 64 | } 65 | 66 | .contacts__phone { 67 | color: inherit; 68 | text-decoration: none; 69 | transition: color .2s; 70 | } 71 | 72 | .contacts__phone:hover { 73 | color: #ffa650; 74 | } 75 | 76 | @media (max-width: 1800px) { 77 | .section-contacts__container::before { 78 | right: -250px; 79 | } 80 | } 81 | 82 | @media (max-width: 1600px) { 83 | .section-contacts__container::before { 84 | right: -150px; 85 | bottom: -200px; 86 | } 87 | } 88 | 89 | @media (max-width: 1400px) { 90 | .section-contacts__container::before { 91 | right: -100px; 92 | } 93 | } 94 | 95 | @media (max-width: 1300px) { 96 | .section-contacts__container::before { 97 | right: -50px; 98 | } 99 | } 100 | 101 | @media (max-width: 1200px) { 102 | .section-contacts__container::before { 103 | content: none; 104 | } 105 | } 106 | 107 | @media (max-width: 992px) { 108 | .contacts__map { 109 | height: 350px; 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .section-contacts { 115 | padding-bottom: 0; 116 | } 117 | 118 | .contacts__start { 119 | width: 100%; 120 | order: 1; 121 | } 122 | 123 | .contacts__end { 124 | width: 400px; 125 | max-width: 100%; 126 | margin-bottom: 40px; 127 | padding-left: 0; 128 | } 129 | 130 | .contacts__map { 131 | margin: 0 -20px; 132 | height: 300px; 133 | } 134 | 135 | 136 | } 137 | 138 | -------------------------------------------------------------------------------- /lesson4/css/section-contacts.css: -------------------------------------------------------------------------------- 1 | .section-contacts { 2 | overflow: hidden; 3 | } 4 | 5 | .section-contacts__container { 6 | position: relative; 7 | } 8 | 9 | .section-contacts__container::before { 10 | content: ''; 11 | position: absolute; 12 | background: url(../img/section-contacts/tomatoes.jpg) no-repeat; 13 | background-size: cover; 14 | width: 672px; 15 | height: 397px; 16 | right: -350px; 17 | bottom: -100px; 18 | } 19 | 20 | .sectoin-contacts__title { 21 | margin-bottom: 0; 22 | } 23 | 24 | .contacts { 25 | display: flex; 26 | align-items: center; 27 | position: relative; 28 | flex-wrap: wrap; 29 | justify-content: center; 30 | } 31 | 32 | .contacts__start { 33 | width: 50%; 34 | } 35 | 36 | .contacts__end { 37 | width: 50%; 38 | padding-left: 30px; 39 | } 40 | 41 | .contacts__map { 42 | height: 450px; 43 | background: #fef0b4; 44 | } 45 | 46 | .contacts__item { 47 | margin-bottom: 35px; 48 | } 49 | 50 | .contacts__item:last-of-type { 51 | margin-bottom: 0; 52 | } 53 | 54 | .contacts__title { 55 | margin: 0 0 5px; 56 | font-family: 'Montserrat', sans-serif; 57 | font-size: 18px; 58 | font-weight: 900; 59 | } 60 | 61 | .contacts__text { 62 | margin: 0; 63 | font-size: 18px; 64 | } 65 | 66 | .contacts__phone { 67 | color: inherit; 68 | text-decoration: none; 69 | transition: color .2s; 70 | } 71 | 72 | .contacts__phone:hover { 73 | color: #ffa650; 74 | } 75 | 76 | @media (max-width: 1800px) { 77 | .section-contacts__container::before { 78 | right: -250px; 79 | } 80 | } 81 | 82 | @media (max-width: 1600px) { 83 | .section-contacts__container::before { 84 | right: -150px; 85 | bottom: -200px; 86 | } 87 | } 88 | 89 | @media (max-width: 1400px) { 90 | .section-contacts__container::before { 91 | right: -100px; 92 | } 93 | } 94 | 95 | @media (max-width: 1300px) { 96 | .section-contacts__container::before { 97 | right: -50px; 98 | } 99 | } 100 | 101 | @media (max-width: 1200px) { 102 | .section-contacts__container::before { 103 | content: none; 104 | } 105 | } 106 | 107 | @media (max-width: 992px) { 108 | .contacts__map { 109 | height: 350px; 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .section-contacts { 115 | padding-bottom: 0; 116 | } 117 | 118 | .contacts__start { 119 | width: 100%; 120 | order: 1; 121 | } 122 | 123 | .contacts__end { 124 | width: 400px; 125 | max-width: 100%; 126 | margin-bottom: 40px; 127 | padding-left: 0; 128 | } 129 | 130 | .contacts__map { 131 | margin: 0 -20px; 132 | height: 300px; 133 | } 134 | 135 | 136 | } 137 | 138 | -------------------------------------------------------------------------------- /lesson5/css/section-contacts.css: -------------------------------------------------------------------------------- 1 | .section-contacts { 2 | overflow: hidden; 3 | } 4 | 5 | .section-contacts__container { 6 | position: relative; 7 | } 8 | 9 | .section-contacts__container::before { 10 | content: ''; 11 | position: absolute; 12 | background: url(../img/section-contacts/tomatoes.jpg) no-repeat; 13 | background-size: cover; 14 | width: 672px; 15 | height: 397px; 16 | right: -350px; 17 | bottom: -100px; 18 | } 19 | 20 | .sectoin-contacts__title { 21 | margin-bottom: 0; 22 | } 23 | 24 | .contacts { 25 | display: flex; 26 | align-items: center; 27 | position: relative; 28 | flex-wrap: wrap; 29 | justify-content: center; 30 | } 31 | 32 | .contacts__start { 33 | width: 50%; 34 | } 35 | 36 | .contacts__end { 37 | width: 50%; 38 | padding-left: 30px; 39 | } 40 | 41 | .contacts__map { 42 | height: 450px; 43 | background: #fef0b4; 44 | } 45 | 46 | .contacts__item { 47 | margin-bottom: 35px; 48 | } 49 | 50 | .contacts__item:last-of-type { 51 | margin-bottom: 0; 52 | } 53 | 54 | .contacts__title { 55 | margin: 0 0 5px; 56 | font-family: 'Montserrat', sans-serif; 57 | font-size: 18px; 58 | font-weight: 900; 59 | } 60 | 61 | .contacts__text { 62 | margin: 0; 63 | font-size: 18px; 64 | } 65 | 66 | .contacts__phone { 67 | color: inherit; 68 | text-decoration: none; 69 | transition: color .2s; 70 | } 71 | 72 | .contacts__phone:hover { 73 | color: #ffa650; 74 | } 75 | 76 | @media (max-width: 1800px) { 77 | .section-contacts__container::before { 78 | right: -250px; 79 | } 80 | } 81 | 82 | @media (max-width: 1600px) { 83 | .section-contacts__container::before { 84 | right: -150px; 85 | bottom: -200px; 86 | } 87 | } 88 | 89 | @media (max-width: 1400px) { 90 | .section-contacts__container::before { 91 | right: -100px; 92 | } 93 | } 94 | 95 | @media (max-width: 1300px) { 96 | .section-contacts__container::before { 97 | right: -50px; 98 | } 99 | } 100 | 101 | @media (max-width: 1200px) { 102 | .section-contacts__container::before { 103 | content: none; 104 | } 105 | } 106 | 107 | @media (max-width: 992px) { 108 | .contacts__map { 109 | height: 350px; 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .section-contacts { 115 | padding-bottom: 0; 116 | } 117 | 118 | .contacts__start { 119 | width: 100%; 120 | order: 1; 121 | } 122 | 123 | .contacts__end { 124 | width: 400px; 125 | max-width: 100%; 126 | margin-bottom: 40px; 127 | padding-left: 0; 128 | } 129 | 130 | .contacts__map { 131 | margin: 0 -20px; 132 | height: 300px; 133 | } 134 | 135 | 136 | } 137 | 138 | -------------------------------------------------------------------------------- /lesson6/css/section-contacts.css: -------------------------------------------------------------------------------- 1 | .section-contacts { 2 | overflow: hidden; 3 | } 4 | 5 | .section-contacts__container { 6 | position: relative; 7 | } 8 | 9 | .section-contacts__container::before { 10 | content: ''; 11 | position: absolute; 12 | background: url(../img/section-contacts/tomatoes.jpg) no-repeat; 13 | background-size: cover; 14 | width: 672px; 15 | height: 397px; 16 | right: -350px; 17 | bottom: -100px; 18 | } 19 | 20 | .sectoin-contacts__title { 21 | margin-bottom: 0; 22 | } 23 | 24 | .contacts { 25 | display: flex; 26 | align-items: center; 27 | position: relative; 28 | flex-wrap: wrap; 29 | justify-content: center; 30 | } 31 | 32 | .contacts__start { 33 | width: 50%; 34 | } 35 | 36 | .contacts__end { 37 | width: 50%; 38 | padding-left: 30px; 39 | } 40 | 41 | .contacts__map { 42 | height: 450px; 43 | background: #fef0b4; 44 | } 45 | 46 | .contacts__item { 47 | margin-bottom: 35px; 48 | } 49 | 50 | .contacts__item:last-of-type { 51 | margin-bottom: 0; 52 | } 53 | 54 | .contacts__title { 55 | margin: 0 0 5px; 56 | font-family: 'Montserrat', sans-serif; 57 | font-size: 18px; 58 | font-weight: 900; 59 | } 60 | 61 | .contacts__text { 62 | margin: 0; 63 | font-size: 18px; 64 | } 65 | 66 | .contacts__phone { 67 | color: inherit; 68 | text-decoration: none; 69 | transition: color .2s; 70 | } 71 | 72 | .contacts__phone:hover { 73 | color: #ffa650; 74 | } 75 | 76 | @media (max-width: 1800px) { 77 | .section-contacts__container::before { 78 | right: -250px; 79 | } 80 | } 81 | 82 | @media (max-width: 1600px) { 83 | .section-contacts__container::before { 84 | right: -150px; 85 | bottom: -200px; 86 | } 87 | } 88 | 89 | @media (max-width: 1400px) { 90 | .section-contacts__container::before { 91 | right: -100px; 92 | } 93 | } 94 | 95 | @media (max-width: 1300px) { 96 | .section-contacts__container::before { 97 | right: -50px; 98 | } 99 | } 100 | 101 | @media (max-width: 1200px) { 102 | .section-contacts__container::before { 103 | content: none; 104 | } 105 | } 106 | 107 | @media (max-width: 992px) { 108 | .contacts__map { 109 | height: 350px; 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .section-contacts { 115 | padding-bottom: 0; 116 | } 117 | 118 | .contacts__start { 119 | width: 100%; 120 | order: 1; 121 | } 122 | 123 | .contacts__end { 124 | width: 400px; 125 | max-width: 100%; 126 | margin-bottom: 40px; 127 | padding-left: 0; 128 | } 129 | 130 | .contacts__map { 131 | margin: 0 -20px; 132 | height: 300px; 133 | } 134 | 135 | 136 | } 137 | 138 | -------------------------------------------------------------------------------- /lesson7/css/section-contacts.css: -------------------------------------------------------------------------------- 1 | .section-contacts { 2 | overflow: hidden; 3 | } 4 | 5 | .section-contacts__container { 6 | position: relative; 7 | } 8 | 9 | .section-contacts__container::before { 10 | content: ''; 11 | position: absolute; 12 | background: url(../img/section-contacts/tomatoes.jpg) no-repeat; 13 | background-size: cover; 14 | width: 672px; 15 | height: 397px; 16 | right: -350px; 17 | bottom: -100px; 18 | } 19 | 20 | .sectoin-contacts__title { 21 | margin-bottom: 0; 22 | } 23 | 24 | .contacts { 25 | display: flex; 26 | align-items: center; 27 | position: relative; 28 | flex-wrap: wrap; 29 | justify-content: center; 30 | } 31 | 32 | .contacts__start { 33 | width: 50%; 34 | } 35 | 36 | .contacts__end { 37 | width: 50%; 38 | padding-left: 30px; 39 | } 40 | 41 | .contacts__map { 42 | height: 450px; 43 | background: #fef0b4; 44 | } 45 | 46 | .contacts__item { 47 | margin-bottom: 35px; 48 | } 49 | 50 | .contacts__item:last-of-type { 51 | margin-bottom: 0; 52 | } 53 | 54 | .contacts__title { 55 | margin: 0 0 5px; 56 | font-family: 'Montserrat', sans-serif; 57 | font-size: 18px; 58 | font-weight: 900; 59 | } 60 | 61 | .contacts__text { 62 | margin: 0; 63 | font-size: 18px; 64 | } 65 | 66 | .contacts__phone { 67 | color: inherit; 68 | text-decoration: none; 69 | transition: color .2s; 70 | } 71 | 72 | .contacts__phone:hover { 73 | color: #ffa650; 74 | } 75 | 76 | @media (max-width: 1800px) { 77 | .section-contacts__container::before { 78 | right: -250px; 79 | } 80 | } 81 | 82 | @media (max-width: 1600px) { 83 | .section-contacts__container::before { 84 | right: -150px; 85 | bottom: -200px; 86 | } 87 | } 88 | 89 | @media (max-width: 1400px) { 90 | .section-contacts__container::before { 91 | right: -100px; 92 | } 93 | } 94 | 95 | @media (max-width: 1300px) { 96 | .section-contacts__container::before { 97 | right: -50px; 98 | } 99 | } 100 | 101 | @media (max-width: 1200px) { 102 | .section-contacts__container::before { 103 | content: none; 104 | } 105 | } 106 | 107 | @media (max-width: 992px) { 108 | .contacts__map { 109 | height: 350px; 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .section-contacts { 115 | padding-bottom: 0; 116 | } 117 | 118 | .contacts__start { 119 | width: 100%; 120 | order: 1; 121 | } 122 | 123 | .contacts__end { 124 | width: 400px; 125 | max-width: 100%; 126 | margin-bottom: 40px; 127 | padding-left: 0; 128 | } 129 | 130 | .contacts__map { 131 | margin: 0 -20px; 132 | height: 300px; 133 | } 134 | 135 | 136 | } 137 | 138 | -------------------------------------------------------------------------------- /lesson6-animation/css/section-contacts.css: -------------------------------------------------------------------------------- 1 | .section-contacts { 2 | overflow: hidden; 3 | } 4 | 5 | .section-contacts__container { 6 | position: relative; 7 | } 8 | 9 | .section-contacts__container::before { 10 | content: ''; 11 | position: absolute; 12 | background: url(../img/section-contacts/tomatoes.jpg) no-repeat; 13 | background-size: cover; 14 | width: 672px; 15 | height: 397px; 16 | right: -350px; 17 | bottom: -100px; 18 | } 19 | 20 | .sectoin-contacts__title { 21 | margin-bottom: 0; 22 | } 23 | 24 | .contacts { 25 | display: flex; 26 | align-items: center; 27 | position: relative; 28 | flex-wrap: wrap; 29 | justify-content: center; 30 | } 31 | 32 | .contacts__start { 33 | width: 50%; 34 | } 35 | 36 | .contacts__end { 37 | width: 50%; 38 | padding-left: 30px; 39 | } 40 | 41 | .contacts__map { 42 | height: 450px; 43 | background: #fef0b4; 44 | } 45 | 46 | .contacts__item { 47 | margin-bottom: 35px; 48 | } 49 | 50 | .contacts__item:last-of-type { 51 | margin-bottom: 0; 52 | } 53 | 54 | .contacts__title { 55 | margin: 0 0 5px; 56 | font-family: 'Montserrat', sans-serif; 57 | font-size: 18px; 58 | font-weight: 900; 59 | } 60 | 61 | .contacts__text { 62 | margin: 0; 63 | font-size: 18px; 64 | } 65 | 66 | .contacts__phone { 67 | color: inherit; 68 | text-decoration: none; 69 | transition: color .2s; 70 | } 71 | 72 | .contacts__phone:hover { 73 | color: #ffa650; 74 | } 75 | 76 | @media (max-width: 1800px) { 77 | .section-contacts__container::before { 78 | right: -250px; 79 | } 80 | } 81 | 82 | @media (max-width: 1600px) { 83 | .section-contacts__container::before { 84 | right: -150px; 85 | bottom: -200px; 86 | } 87 | } 88 | 89 | @media (max-width: 1400px) { 90 | .section-contacts__container::before { 91 | right: -100px; 92 | } 93 | } 94 | 95 | @media (max-width: 1300px) { 96 | .section-contacts__container::before { 97 | right: -50px; 98 | } 99 | } 100 | 101 | @media (max-width: 1200px) { 102 | .section-contacts__container::before { 103 | content: none; 104 | } 105 | } 106 | 107 | @media (max-width: 992px) { 108 | .contacts__map { 109 | height: 350px; 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .section-contacts { 115 | padding-bottom: 0; 116 | } 117 | 118 | .contacts__start { 119 | width: 100%; 120 | order: 1; 121 | } 122 | 123 | .contacts__end { 124 | width: 400px; 125 | max-width: 100%; 126 | margin-bottom: 40px; 127 | padding-left: 0; 128 | } 129 | 130 | .contacts__map { 131 | margin: 0 -20px; 132 | height: 300px; 133 | } 134 | 135 | 136 | } 137 | 138 | -------------------------------------------------------------------------------- /lesson5-smooth-scroll/css/section-contacts.css: -------------------------------------------------------------------------------- 1 | .section-contacts { 2 | overflow: hidden; 3 | } 4 | 5 | .section-contacts__container { 6 | position: relative; 7 | } 8 | 9 | .section-contacts__container::before { 10 | content: ''; 11 | position: absolute; 12 | background: url(../img/section-contacts/tomatoes.jpg) no-repeat; 13 | background-size: cover; 14 | width: 672px; 15 | height: 397px; 16 | right: -350px; 17 | bottom: -100px; 18 | } 19 | 20 | .sectoin-contacts__title { 21 | margin-bottom: 0; 22 | } 23 | 24 | .contacts { 25 | display: flex; 26 | align-items: center; 27 | position: relative; 28 | flex-wrap: wrap; 29 | justify-content: center; 30 | } 31 | 32 | .contacts__start { 33 | width: 50%; 34 | } 35 | 36 | .contacts__end { 37 | width: 50%; 38 | padding-left: 30px; 39 | } 40 | 41 | .contacts__map { 42 | height: 450px; 43 | background: #fef0b4; 44 | } 45 | 46 | .contacts__item { 47 | margin-bottom: 35px; 48 | } 49 | 50 | .contacts__item:last-of-type { 51 | margin-bottom: 0; 52 | } 53 | 54 | .contacts__title { 55 | margin: 0 0 5px; 56 | font-family: 'Montserrat', sans-serif; 57 | font-size: 18px; 58 | font-weight: 900; 59 | } 60 | 61 | .contacts__text { 62 | margin: 0; 63 | font-size: 18px; 64 | } 65 | 66 | .contacts__phone { 67 | color: inherit; 68 | text-decoration: none; 69 | transition: color .2s; 70 | } 71 | 72 | .contacts__phone:hover { 73 | color: #ffa650; 74 | } 75 | 76 | @media (max-width: 1800px) { 77 | .section-contacts__container::before { 78 | right: -250px; 79 | } 80 | } 81 | 82 | @media (max-width: 1600px) { 83 | .section-contacts__container::before { 84 | right: -150px; 85 | bottom: -200px; 86 | } 87 | } 88 | 89 | @media (max-width: 1400px) { 90 | .section-contacts__container::before { 91 | right: -100px; 92 | } 93 | } 94 | 95 | @media (max-width: 1300px) { 96 | .section-contacts__container::before { 97 | right: -50px; 98 | } 99 | } 100 | 101 | @media (max-width: 1200px) { 102 | .section-contacts__container::before { 103 | content: none; 104 | } 105 | } 106 | 107 | @media (max-width: 992px) { 108 | .contacts__map { 109 | height: 350px; 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .section-contacts { 115 | padding-bottom: 0; 116 | } 117 | 118 | .contacts__start { 119 | width: 100%; 120 | order: 1; 121 | } 122 | 123 | .contacts__end { 124 | width: 400px; 125 | max-width: 100%; 126 | margin-bottom: 40px; 127 | padding-left: 0; 128 | } 129 | 130 | .contacts__map { 131 | margin: 0 -20px; 132 | height: 300px; 133 | } 134 | 135 | 136 | } 137 | 138 | -------------------------------------------------------------------------------- /lesson1/img/common/marker.svg: -------------------------------------------------------------------------------- 1 | marker --------------------------------------------------------------------------------