diff --git a/06-lection4/02-background-image/README.md b/06-lection4/02-background-image/README.md new file mode 100644 index 0000000..80f56fd --- /dev/null +++ b/06-lection4/02-background-image/README.md @@ -0,0 +1,7 @@ +# background-image + +В директории `public` лежат картинки в нескольких разрешениях.
+Нужно вставить картинку на фон страницы так, чтобы не грузились картинки избыточного размера.
+ +Воспользоваться нужно способом вставки картинки через `background-image` и медиа-запросы. + diff --git a/06-lection4/02-background-image/background-image.css b/06-lection4/02-background-image/background-image.css new file mode 100644 index 0000000..e69de29 diff --git a/06-lection4/02-background-image/index.html b/06-lection4/02-background-image/index.html new file mode 100644 index 0000000..7a10fca --- /dev/null +++ b/06-lection4/02-background-image/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/06-lection4/02-background-image/public/forest_1024.jpg b/06-lection4/02-background-image/public/forest_1024.jpg new file mode 100644 index 0000000..45913b7 Binary files /dev/null and b/06-lection4/02-background-image/public/forest_1024.jpg differ diff --git a/06-lection4/02-background-image/public/forest_2560.jpg b/06-lection4/02-background-image/public/forest_2560.jpg new file mode 100644 index 0000000..5290f45 Binary files /dev/null and b/06-lection4/02-background-image/public/forest_2560.jpg differ diff --git a/06-lection4/02-background-image/public/forest_400.jpg b/06-lection4/02-background-image/public/forest_400.jpg new file mode 100644 index 0000000..a79014c Binary files /dev/null and b/06-lection4/02-background-image/public/forest_400.jpg differ diff --git a/06-lection4/02-background-image/public/forest_768.jpg b/06-lection4/02-background-image/public/forest_768.jpg new file mode 100644 index 0000000..5d7a834 Binary files /dev/null and b/06-lection4/02-background-image/public/forest_768.jpg differ diff --git a/06-lection4/02-background-image/test/solution.test.js b/06-lection4/02-background-image/test/solution.test.js new file mode 100644 index 0000000..f24f0b3 --- /dev/null +++ b/06-lection4/02-background-image/test/solution.test.js @@ -0,0 +1,7 @@ +const expect = require('chai').expect; + +describe('lection4/background-image', () => { + it('Фон', () => { + expect(1).to.equal(1); + }); +}); diff --git a/06-lection4/03-srcset/README.md b/06-lection4/03-srcset/README.md new file mode 100644 index 0000000..d9d9d97 --- /dev/null +++ b/06-lection4/03-srcset/README.md @@ -0,0 +1,5 @@ +# srcset + +В директории `public` лежат картинки в нескольких разрешениях.
+Нужно вставить на страницу квадратный блок 300x300, а в него вписать картинку так, чтобы для экранов с высокой плотностью пикселей загружалась картинка в 2 раза больше.
+ diff --git a/06-lection4/03-srcset/index.html b/06-lection4/03-srcset/index.html new file mode 100644 index 0000000..6d5ab43 --- /dev/null +++ b/06-lection4/03-srcset/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/06-lection4/03-srcset/public/forest_400.jpg b/06-lection4/03-srcset/public/forest_400.jpg new file mode 100644 index 0000000..a79014c Binary files /dev/null and b/06-lection4/03-srcset/public/forest_400.jpg differ diff --git a/06-lection4/03-srcset/public/forest_768.jpg b/06-lection4/03-srcset/public/forest_768.jpg new file mode 100644 index 0000000..5d7a834 Binary files /dev/null and b/06-lection4/03-srcset/public/forest_768.jpg differ diff --git a/06-lection4/03-srcset/srcset.css b/06-lection4/03-srcset/srcset.css new file mode 100644 index 0000000..e69de29 diff --git a/06-lection4/03-srcset/test/solution.test.js b/06-lection4/03-srcset/test/solution.test.js new file mode 100644 index 0000000..a05e0b5 --- /dev/null +++ b/06-lection4/03-srcset/test/solution.test.js @@ -0,0 +1,7 @@ +const expect = require('chai').expect; + +describe('lection4/srcset', () => { + it('Srcset', () => { + expect(1).to.equal(1); + }); +});