-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
244 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>SimpleLightbox library</title> | ||
| <link rel="stylesheet" href="css/common.css" /> | ||
| <link rel="stylesheet" href="css/01-gallery.css" /> | ||
| </head> | ||
| <body> | ||
| <p><a href="index.html">Go back</a></p> | ||
|
|
||
| <!-- Add gallery items to this list --> | ||
| <ul class="gallery"></ul> | ||
|
|
||
| <script src="js/01-gallery.js" type="module"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Video playback</title> | ||
| <link rel="stylesheet" href="css/common.css" /> | ||
| </head> | ||
| <body> | ||
| <p><a href="index.html">Go back</a></p> | ||
|
|
||
| <iframe | ||
| id="vimeo-player" | ||
| src="https://player.vimeo.com/video/236203659" | ||
| width="640" | ||
| height="360" | ||
| frameborder="0" | ||
| allowfullscreen | ||
| allow="autoplay; encrypted-media" | ||
| ></iframe> | ||
|
|
||
| <script src="js/02-video.js" type="module"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Feedback form</title> | ||
| <link rel="stylesheet" href="css/common.css" /> | ||
| <link rel="stylesheet" href="css/03-feedback.css" /> | ||
| </head> | ||
| <body> | ||
| <p><a href="index.html">Go back</a></p> | ||
|
|
||
| <form class="feedback-form" autocomplete="off"> | ||
| <label> | ||
| <input type="email" name="email" autofocus /> | ||
| </label> | ||
| <label> | ||
| Message | ||
| <textarea name="message" rows="8"></textarea> | ||
| </label> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
|
|
||
| <script src="js/03-feedback.js" type="module"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,17 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ru"> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Page title</title> | ||
| <link rel="stylesheet" href="./sass/index.scss" /> | ||
| <script type="module" src="./index.js"></script> | ||
| <title>Homework 8</title> | ||
| <link rel="stylesheet" href="css/common.css" /> | ||
| </head> | ||
| <body> | ||
| <!-- ❗️❗️❗️ Add partials like so for every page --> | ||
| <include src="./partials/example.html"></include> | ||
| <ul> | ||
| <li><a href="01-gallery.html">Image gallery</a></li> | ||
| <li><a href="02-video.html">Video playback</a></li> | ||
| <li><a href="03-feedback.html">Feedback form</a></li> | ||
| </ul> | ||
| </body> | ||
| </html> |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| // Add imports above this line | ||
| import { galleryItems } from './gallery-items'; | ||
| // Change code below this line | ||
|
|
||
| console.log(galleryItems); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }, | ||
| ]; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.