diff --git a/src/01-gallery.html b/src/01-gallery.html new file mode 100644 index 0000000..dcb3045 --- /dev/null +++ b/src/01-gallery.html @@ -0,0 +1,19 @@ + + + + + + + SimpleLightbox library + + + + +

Go back

+ + + + + + + diff --git a/src/02-video.html b/src/02-video.html new file mode 100644 index 0000000..b30eda7 --- /dev/null +++ b/src/02-video.html @@ -0,0 +1,25 @@ + + + + + + + Video playback + + + +

Go back

+ + + + + + diff --git a/src/03-feedback.html b/src/03-feedback.html new file mode 100644 index 0000000..2ab22db --- /dev/null +++ b/src/03-feedback.html @@ -0,0 +1,28 @@ + + + + + + + Feedback form + + + + +

Go back

+ +
+ + + +
+ + + + diff --git a/src/css/01-gallery.css b/src/css/01-gallery.css new file mode 100644 index 0000000..4138e3d --- /dev/null +++ b/src/css/01-gallery.css @@ -0,0 +1,42 @@ +:root { + --timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --animation-duration: 250ms; +} + +.gallery { + display: grid; + max-width: 1140px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + grid-auto-rows: 240px; + grid-gap: 12px; + justify-content: center; + margin-left: auto; + margin-right: auto; +} + +.gallery__item { + position: relative; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); +} + +.gallery__image:hover { + transform: scale(1.03); +} + +.gallery__image { + height: 100%; + width: 100%; + object-fit: cover; + transition: transform var(--animation-duration) var(--timing-function); +} + +.gallery__link { + display: block; + text-decoration: none; + height: 100%; +} + +.gallery__link:hover { + cursor: zoom-in; +} diff --git a/src/css/03-feedback.css b/src/css/03-feedback.css new file mode 100644 index 0000000..98a682b --- /dev/null +++ b/src/css/03-feedback.css @@ -0,0 +1,31 @@ +.feedback-form { + display: flex; + flex-direction: column; + max-width: 480px; + padding: 12px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 4px; +} + +.feedback-form label { + display: flex; + flex-direction: column; + margin-bottom: 16px; +} + +.feedback-form button { + padding: 8px 12px; + font: inherit; + cursor: pointer; +} + +input, +textarea { + padding: 8px; + font: inherit; +} + +textarea { + resize: none; +} diff --git a/src/css/common.css b/src/css/common.css new file mode 100644 index 0000000..48f7996 --- /dev/null +++ b/src/css/common.css @@ -0,0 +1,18 @@ +* { + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #fafafa; + color: #212121; + line-height: 1.5; +} + +img { + display: block; + max-width: 100%; +} diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100755 index a6ce651..0000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/index.html b/src/index.html old mode 100755 new mode 100644 index 83f66ef..f033bf9 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,17 @@ - + + - Page title - - + Homework 8 + - - + diff --git a/src/index.js b/src/index.js deleted file mode 100755 index e69de29..0000000 diff --git a/src/js/01-gallery.js b/src/js/01-gallery.js new file mode 100644 index 0000000..3c9112a --- /dev/null +++ b/src/js/01-gallery.js @@ -0,0 +1,5 @@ +// Add imports above this line +import { galleryItems } from './gallery-items'; +// Change code below this line + +console.log(galleryItems); diff --git a/src/js/02-video.js b/src/js/02-video.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/js/02-video.js @@ -0,0 +1 @@ + diff --git a/src/js/03-feedback.js b/src/js/03-feedback.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/js/03-feedback.js @@ -0,0 +1 @@ + diff --git a/src/js/gallery-items.js b/src/js/gallery-items.js new file mode 100644 index 0000000..26e0b6f --- /dev/null +++ b/src/js/gallery-items.js @@ -0,0 +1,65 @@ +export const galleryItems = [ + { + preview: + 'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820__480.jpg', + original: + 'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820_1280.jpg', + description: 'Hokkaido Flower', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677_1280.jpg', + description: 'Container Haulage Freight', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785_1280.jpg', + description: 'Aerial Beach View', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619_1280.jpg', + description: 'Flower Blooms', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334_1280.jpg', + description: 'Alpine Mountains', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571_1280.jpg', + description: 'Mountain Lake Sailing', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272_1280.jpg', + description: 'Alpine Spring Meadows', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255_1280.jpg', + description: 'Nature Landscape', + }, + { + preview: + 'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843__340.jpg', + original: + 'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843_1280.jpg', + description: 'Lighthouse Coast Sea', + }, +]; diff --git a/src/partials/example.html b/src/partials/example.html deleted file mode 100755 index f7f444c..0000000 --- a/src/partials/example.html +++ /dev/null @@ -1,37 +0,0 @@ -
-

HTML-partials

- - - - -

- The - - posthtml-include - - plugin allows you to add code from other HTML files (fragments) to HTML page - files. Fragments are stored in the src/partials folder. The - addition occurs when compiling page files, such as index.html. -

- -

- This example.html file is an example of such a snippet, with - the markup of a certain part of the main page. This is very convenient for - team development on student projects, when several people write in one HTML - file at once. -

- -

- The syntax for adding a fragment to the main file is: - <include src="./partials/filename.html"></include> -

- -
-
diff --git a/src/sass/_common.scss b/src/sass/_common.scss deleted file mode 100755 index dd493e4..0000000 --- a/src/sass/_common.scss +++ /dev/null @@ -1 +0,0 @@ -@import '~node_modules/modern-normalize/modern-normalize.css'; diff --git a/src/sass/_example.scss b/src/sass/_example.scss deleted file mode 100755 index 05c89b4..0000000 --- a/src/sass/_example.scss +++ /dev/null @@ -1,28 +0,0 @@ -.example { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - line-height: 1.5; - background-color: #fff; - color: #2f2f37; - max-width: 960px; - padding: 16px; -} - -.example code { - font-family: monospace; - font-size: 16px; - font-weight: 700; - background-color: #ff6b0a; - color: #fff; - padding: 2px 6px; - border-radius: 2px; -} - -.example .background { - height: 240px; - // ❗️❗️❗️ The path to images from a SASS file - // is always the same as from the css folder. - background-image: url('../images/logo.png'); - background-size: cover; - background-position: center; -} diff --git a/src/sass/index.scss b/src/sass/index.scss deleted file mode 100755 index 8d1a014..0000000 --- a/src/sass/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './common'; -@import './example';