diff --git a/b2-cwd/integration/live/session5/checkbox/index.html b/b2-cwd/integration/live/session5/checkbox/index.html new file mode 100644 index 0000000..3295cb5 --- /dev/null +++ b/b2-cwd/integration/live/session5/checkbox/index.html @@ -0,0 +1,28 @@ + + + + + + + + +
+

S'abonner à

+ fermer le formulaire +
+ +
+ + +
+
+ +
+ + +
+
+ +
+ + \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/checkbox/style.css b/b2-cwd/integration/live/session5/checkbox/style.css new file mode 100644 index 0000000..f669930 --- /dev/null +++ b/b2-cwd/integration/live/session5/checkbox/style.css @@ -0,0 +1,16 @@ +.freq { + display: none; +} + +#sport:checked ~ .freq.sport { + display: block; +} + +#culture { + background-color: red; +} +#culture:checked ~ .freq.culture { + display: block; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/b2-cwd/integration/live/session5/checkbox/style.scss b/b2-cwd/integration/live/session5/checkbox/style.scss new file mode 100644 index 0000000..a2222de --- /dev/null +++ b/b2-cwd/integration/live/session5/checkbox/style.scss @@ -0,0 +1,19 @@ + +.freq { + display:none; +} + +#sport:checked { + ~ .freq.sport { + display:block; + } +} + +#culture { + background-color:red; + &:checked { + ~ .freq.culture { + display:block; + } + } +} diff --git a/b2-cwd/integration/live/session5/slider-css-2/_pinard.scss b/b2-cwd/integration/live/session5/slider-css-2/_pinard.scss new file mode 100644 index 0000000..46aea5f --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-css-2/_pinard.scss @@ -0,0 +1,117 @@ + + +body { + height: 600px; + margin: 0; + display: grid; + grid-template-rows: 500px 100px; + grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr; + align-items: center; + justify-items: center; + } + + main#carousel { + grid-row: 1 / 2; + grid-column: 1 / 8; + width: 100vw; + height: 500px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transform-style: preserve-3d; + perspective: 600px; + --items: 5; + --middle: 3; + --position: 1; + pointer-events: none; + } + + div.item { + position: absolute; + width: 300px; + height: 400px; + + --r: calc(var(--position) - var(--offset)); + --abs: max(calc(var(--r) * -1), var(--r)); + transition: all 0.25s linear; + transform: rotateY(calc(-10deg * var(--r))) + translateX(calc(-300px * var(--r))); + z-index: calc((var(--position) - var(--abs))); + } + + div.item:nth-of-type(1) { + --offset: 1; + + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); + } + div.item:nth-of-type(2) { + --offset: 2; + + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); + } + + div.item:nth-of-type(3) { + --offset: 3; + + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); + } + + div.item:nth-of-type(4) { + --offset: 4; + + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); + } + + div.item:nth-of-type(5) { + --offset: 5; + + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); + } + + + input:nth-of-type(1) { + grid-column: 2 / 3; + grid-row: 2 / 3; + } + input:nth-of-type(1):checked ~ main#carousel { + --position: 1; + } + + input:nth-of-type(2) { + grid-column: 3 / 4; + grid-row: 2 / 3; + } + input:nth-of-type(2):checked ~ main#carousel { + --position: 2; + } + + input:nth-of-type(3) { + grid-column: 4 /5; + grid-row: 2 / 3; + } + input:nth-of-type(3):checked ~ main#carousel { + --position: 3; + } + + input:nth-of-type(4) { + grid-column: 5 / 6; + grid-row: 2 / 3; + } + input:nth-of-type(4):checked ~ main#carousel { + --position: 4; + } + + input:nth-of-type(5) { + grid-column: 6 / 7; + grid-row: 2 / 3; + } + input:nth-of-type(5):checked ~ main#carousel { + --position: 5; + } + h1{ + padding-bottom: auto; + } + + + \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/slider-css-2/images/8382.jpg b/b2-cwd/integration/live/session5/slider-css-2/images/8382.jpg new file mode 100644 index 0000000..964d240 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css-2/images/8382.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-css-2/images/B2681373_27.jpg b/b2-cwd/integration/live/session5/slider-css-2/images/B2681373_27.jpg new file mode 100644 index 0000000..e12c7e7 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css-2/images/B2681373_27.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-css-2/images/aligote-ballorin-300x400.jpg b/b2-cwd/integration/live/session5/slider-css-2/images/aligote-ballorin-300x400.jpg new file mode 100644 index 0000000..52c297a Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css-2/images/aligote-ballorin-300x400.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-css-2/images/chateau-smith-haut-lafitte-pessac-leognan.png b/b2-cwd/integration/live/session5/slider-css-2/images/chateau-smith-haut-lafitte-pessac-leognan.png new file mode 100644 index 0000000..2d24e73 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css-2/images/chateau-smith-haut-lafitte-pessac-leognan.png differ diff --git a/b2-cwd/integration/live/session5/slider-css-2/images/external-content.duckduckgo.com.jpg b/b2-cwd/integration/live/session5/slider-css-2/images/external-content.duckduckgo.com.jpg new file mode 100644 index 0000000..7b0cd04 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css-2/images/external-content.duckduckgo.com.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-css-2/index.html b/b2-cwd/integration/live/session5/slider-css-2/index.html new file mode 100644 index 0000000..8b46c00 --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-css-2/index.html @@ -0,0 +1,30 @@ + + + + + + + + Slider à Pinards + + + +

Slider à pinard

+ + + + + + +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/slider-css-2/main-style.scss b/b2-cwd/integration/live/session5/slider-css-2/main-style.scss new file mode 100644 index 0000000..426f9b1 --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-css-2/main-style.scss @@ -0,0 +1 @@ +@import "pinard"; \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/slider-css-2/style.css b/b2-cwd/integration/live/session5/slider-css-2/style.css new file mode 100644 index 0000000..a8a14a2 --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-css-2/style.css @@ -0,0 +1,113 @@ +body { + height: 600px; + margin: 0; + display: grid; + grid-template-rows: 500px 100px; + grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr; + align-items: center; + justify-items: center; +} + +main#carousel { + grid-row: 1/2; + grid-column: 1/8; + width: 100vw; + height: 500px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transform-style: preserve-3d; + perspective: 600px; + --items: 5; + --middle: 3; + --position: 1; + pointer-events: none; +} + +div.item { + position: absolute; + width: 300px; + height: 400px; + --r: calc(var(--position) - var(--offset)); + --abs: max(calc(var(--r) * -1), var(--r)); + transition: all 0.25s linear; + transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r))); + z-index: calc((var(--position) - var(--abs))); +} + +div.item:nth-of-type(1) { + --offset: 1; + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); +} + +div.item:nth-of-type(2) { + --offset: 2; + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); +} + +div.item:nth-of-type(3) { + --offset: 3; + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); +} + +div.item:nth-of-type(4) { + --offset: 4; + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); +} + +div.item:nth-of-type(5) { + --offset: 5; + background-image: url(images/chateau-smith-haut-lafitte-pessac-leognan.png); +} + +input:nth-of-type(1) { + grid-column: 2/3; + grid-row: 2/3; +} + +input:nth-of-type(1):checked ~ main#carousel { + --position: 1; +} + +input:nth-of-type(2) { + grid-column: 3/4; + grid-row: 2/3; +} + +input:nth-of-type(2):checked ~ main#carousel { + --position: 2; +} + +input:nth-of-type(3) { + grid-column: 4/5; + grid-row: 2/3; +} + +input:nth-of-type(3):checked ~ main#carousel { + --position: 3; +} + +input:nth-of-type(4) { + grid-column: 5/6; + grid-row: 2/3; +} + +input:nth-of-type(4):checked ~ main#carousel { + --position: 4; +} + +input:nth-of-type(5) { + grid-column: 6/7; + grid-row: 2/3; +} + +input:nth-of-type(5):checked ~ main#carousel { + --position: 5; +} + +h1 { + padding-bottom: auto; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/b2-cwd/integration/live/session5/slider-css/assets/img/img-1.jpeg b/b2-cwd/integration/live/session5/slider-css/assets/img/img-1.jpeg new file mode 100644 index 0000000..9795381 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css/assets/img/img-1.jpeg differ diff --git a/b2-cwd/integration/live/session5/slider-css/assets/img/img-2.jpeg b/b2-cwd/integration/live/session5/slider-css/assets/img/img-2.jpeg new file mode 100644 index 0000000..28185bd Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css/assets/img/img-2.jpeg differ diff --git a/b2-cwd/integration/live/session5/slider-css/assets/img/img-3.jpeg b/b2-cwd/integration/live/session5/slider-css/assets/img/img-3.jpeg new file mode 100644 index 0000000..e0cbb01 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css/assets/img/img-3.jpeg differ diff --git a/b2-cwd/integration/live/session5/slider-css/assets/img/img-4.jpeg b/b2-cwd/integration/live/session5/slider-css/assets/img/img-4.jpeg new file mode 100644 index 0000000..7522e11 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css/assets/img/img-4.jpeg differ diff --git a/b2-cwd/integration/live/session5/slider-css/assets/img/img-5.jpeg b/b2-cwd/integration/live/session5/slider-css/assets/img/img-5.jpeg new file mode 100644 index 0000000..65eaae6 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-css/assets/img/img-5.jpeg differ diff --git a/b2-cwd/integration/live/session5/slider-css/css/slider.css b/b2-cwd/integration/live/session5/slider-css/css/slider.css new file mode 100644 index 0000000..b6a38d1 --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-css/css/slider.css @@ -0,0 +1,158 @@ +img { + max-width: 100%; +} + +#slider { + margin: 0 auto; + width: 800px; + max-width: 100%; + text-align: center; +} + +#slider label { + cursor: pointer; + text-decoration: none; +} + +#slides { + padding: 10px; + border: 3px solid #ccc; + background: #fff; + position: relative; + z-index: 1; +} + +#overflow { + width: 100%; + overflow: hidden; +} + +#slide1:checked ~ #slides .inner { + margin-left: 0; +} + +#slide2:checked ~ #slides .inner { + margin-left: -100%; +} + +#slide3:checked ~ #slides .inner { + margin-left: -200%; +} + +#slide4:checked ~ #slides .inner { + margin-left: -300%; +} + +#slides .inner { + transition: margin-left 800ms cubic-bezier(0.77, 0, 0.175, 1); + width: 400%; + line-height: 0; + height: 300px; +} + +#slides .slide { + width: 25%; + float: left; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: #fff; +} + +#slides .slide_1 { + background: #00171F; +} + +#slides .slide_2 { + background: #003459; +} + +#slides .slide_3 { + background: #007EA7; +} + +#slides .slide_4 { + background: #00A8E8; +} + +#controls { + margin: -180px 0 0 0; + width: 100%; + height: 50px; + z-index: 3; + position: relative; +} + +#controls label { + transition: opacity 0.2s ease-out; + display: none; + width: 50px; + height: 50px; + opacity: 0.4; +} + +#controls label:hover { + opacity: 1; +} + +#slide1:checked ~ #controls label:nth-child(2), +#slide2:checked ~ #controls label:nth-child(3), +#slide3:checked ~ #controls label:nth-child(4), +#slide4:checked ~ #controls label:nth-child(1) { + background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat; + float: right; + margin: 0 -50px 0 0; + display: block; +} + +#slide1:checked ~ #controls label:nth-last-child(2), +#slide2:checked ~ #controls label:nth-last-child(3), +#slide3:checked ~ #controls label:nth-last-child(4), +#slide4:checked ~ #controls label:nth-last-child(1) { + background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat; + float: left; + margin: 0 0 0 -50px; + display: block; +} + +#bullets { + margin: 150px 0 0; + text-align: center; +} + +#bullets label { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 100%; + background: #ccc; + margin: 0 10px; +} + +#slide1:checked ~ #bullets label:nth-child(1), +#slide2:checked ~ #bullets label:nth-child(2), +#slide3:checked ~ #bullets label:nth-child(3), +#slide4:checked ~ #bullets label:nth-child(4) { + background: #444; +} + +@media screen and (max-width: 900px) { + #slide1:checked ~ #controls label:nth-child(2), +#slide2:checked ~ #controls label:nth-child(3), +#slide3:checked ~ #controls label:nth-child(4), +#slide4:checked ~ #controls label:nth-child(1), +#slide1:checked ~ #controls label:nth-last-child(2), +#slide2:checked ~ #controls label:nth-last-child(3), +#slide3:checked ~ #controls label:nth-last-child(4), +#slide4:checked ~ #controls label:nth-last-child(1) { + margin: 0; + } + + #slides { + max-width: calc(100% - 140px); + margin: 0 auto; + } +} + +/*# sourceMappingURL=slider.css.map */ diff --git a/b2-cwd/integration/live/session5/slider-css/css/slider.scss b/b2-cwd/integration/live/session5/slider-css/css/slider.scss new file mode 100644 index 0000000..979cb41 --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-css/css/slider.scss @@ -0,0 +1,155 @@ +img { + max-width: 100%; +} + +#slider { + margin: 0 auto; + width: 800px; + max-width: 100%; + text-align: center; +} + +#slider label { + cursor:pointer; + text-decoration: none; +} + +#slides { + padding: 10px; + border: 3px solid #ccc; + background: #fff; + position: relative; + z-index: 1; +} + +#overflow { + width: 100%; + overflow: hidden; +} + +#slide1:checked ~ #slides .inner { + margin-left: 0; +} + +#slide2:checked ~ #slides .inner { + margin-left: -100%; +} + +#slide3:checked ~ #slides .inner { + margin-left: -200%; +} + +#slide4:checked ~ #slides .inner { + margin-left: -300%; +} + +#slides .inner { + transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); + width: 400%; + line-height: 0; + height: 300px; +} + +#slides .slide { + width: 25%; + float:left; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: #fff; +} + +#slides .slide_1 { + background: #00171F; +} + +#slides .slide_2 { + background: #003459; +} + +#slides .slide_3 { + background: #007EA7; +} + +#slides .slide_4 { + background: #00A8E8; +} + +#controls { + margin: -180px 0 0 0; + width: 100%; + height: 50px; + z-index: 3; + position: relative; +} + +#controls label { + transition: opacity 0.2s ease-out; + display: none; + width: 50px; + height: 50px; + opacity: .4; +} + +#controls label:hover { + opacity: 1; +} + +#slide1:checked ~ #controls label:nth-child(2), +#slide2:checked ~ #controls label:nth-child(3), +#slide3:checked ~ #controls label:nth-child(4), +#slide4:checked ~ #controls label:nth-child(1) { + background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat; + float:right; + margin: 0 -50px 0 0; + display: block; +} + +#slide1:checked ~ #controls label:nth-last-child(2), +#slide2:checked ~ #controls label:nth-last-child(3), +#slide3:checked ~ #controls label:nth-last-child(4), +#slide4:checked ~ #controls label:nth-last-child(1) { + background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat; + float:left; + margin: 0 0 0 -50px; + display: block; +} + +#bullets { + margin: 150px 0 0; + text-align: center; +} + +#bullets label { + display: inline-block; + width: 10px; + height: 10px; + border-radius:100%; + background: #ccc; + margin: 0 10px; +} + +#slide1:checked ~ #bullets label:nth-child(1), +#slide2:checked ~ #bullets label:nth-child(2), +#slide3:checked ~ #bullets label:nth-child(3), +#slide4:checked ~ #bullets label:nth-child(4) { + background: #444; +} + +@media screen and (max-width: 900px) { + #slide1:checked ~ #controls label:nth-child(2), + #slide2:checked ~ #controls label:nth-child(3), + #slide3:checked ~ #controls label:nth-child(4), + #slide4:checked ~ #controls label:nth-child(1), + #slide1:checked ~ #controls label:nth-last-child(2), + #slide2:checked ~ #controls label:nth-last-child(3), + #slide3:checked ~ #controls label:nth-last-child(4), + #slide4:checked ~ #controls label:nth-last-child(1) { + margin: 0; + } + #slides { + max-width: calc(100% - 140px); + margin: 0 auto; + } +} diff --git a/b2-cwd/integration/live/session5/slider-css/slider.html b/b2-cwd/integration/live/session5/slider-css/slider.html new file mode 100644 index 0000000..840634c --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-css/slider.html @@ -0,0 +1,58 @@ + + + + + + + Slider + + + +
+
+ + + + +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ + + + +
+
+ + + + +
+
+
+ + diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/.gitignore b/b2-cwd/integration/live/session5/slider-js-et-vars-css/.gitignore new file mode 100644 index 0000000..06b34da --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/.gitignore @@ -0,0 +1,2 @@ +*.css +*.map diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/README.md b/b2-cwd/integration/live/session5/slider-js-et-vars-css/README.md new file mode 100644 index 0000000..403e8fa --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/README.md @@ -0,0 +1,7 @@ +## howto : +uses sass to generate style.css in root dir : + +``` +sass .\scss\common.scss .\style.css +``` + diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.svg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.svg new file mode 100644 index 0000000..8fdf12e --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.svg @@ -0,0 +1,21 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.ttf b/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.ttf new file mode 100644 index 0000000..36fda2a Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.ttf differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.woff b/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.woff new file mode 100644 index 0000000..2e30c87 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/fonts/icomoon.woff differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/empty.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/empty.jpg new file mode 100644 index 0000000..70bec50 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/empty.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-autumn.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-autumn.jpg new file mode 100644 index 0000000..1f66a17 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-autumn.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-moss.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-moss.jpg new file mode 100644 index 0000000..b74d0d3 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-moss.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-river.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-river.jpg new file mode 100644 index 0000000..fd6deb5 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/full/forest-river.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-autumn.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-autumn.jpg new file mode 100644 index 0000000..eacd967 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-autumn.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-moss.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-moss.jpg new file mode 100644 index 0000000..a6de38d Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-moss.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-river.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-river.jpg new file mode 100644 index 0000000..c0347d9 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/mobile/forest-river.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/Bialowieza-Forest-poland-belarus.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/Bialowieza-Forest-poland-belarus.jpg new file mode 100644 index 0000000..f20b893 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/Bialowieza-Forest-poland-belarus.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/autumn-forest-full-of-foliage-at-pewits-nest-wisconsin.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/autumn-forest-full-of-foliage-at-pewits-nest-wisconsin.jpg new file mode 100644 index 0000000..7e66184 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/autumn-forest-full-of-foliage-at-pewits-nest-wisconsin.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/paul-gray-rUmuM-z08RQ-unsplash.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/paul-gray-rUmuM-z08RQ-unsplash.jpg new file mode 100644 index 0000000..41cb5ef Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/sources/paul-gray-rUmuM-z08RQ-unsplash.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-autumn.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-autumn.jpg new file mode 100644 index 0000000..0ea535e Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-autumn.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-moss.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-moss.jpg new file mode 100644 index 0000000..02aab3d Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-moss.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-river.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-river.jpg new file mode 100644 index 0000000..b1c0648 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/imgs/tablet/forest-river.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/index-var.html b/b2-cwd/integration/live/session5/slider-js-et-vars-css/index-var.html new file mode 100644 index 0000000..5475f1a --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/index-var.html @@ -0,0 +1,66 @@ + + + + + Welcome to the forest + + + + + + +
+ + + +
+

Welcome to the forest

+

+ + + +

+ + \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/index.html b/b2-cwd/integration/live/session5/slider-js-et-vars-css/index.html new file mode 100644 index 0000000..0e295ab --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/index.html @@ -0,0 +1,50 @@ + + + + + Welcome to the forest + + + + + +
+ + + +
+

Welcome to the forest

+ + \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/maquette/draft.jpg b/b2-cwd/integration/live/session5/slider-js-et-vars-css/maquette/draft.jpg new file mode 100644 index 0000000..48c5de4 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/maquette/draft.jpg differ diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/scripts/slider.js b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scripts/slider.js new file mode 100644 index 0000000..5fe653d --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scripts/slider.js @@ -0,0 +1,64 @@ +console.log('scripts loaded'); +run = true; +document.onreadystatechange = function(event) { + if (document.readyState === "complete") { + console.log('document loaded'); + if(slide = document.getElementById("slide-3")) + { + document.getElementById("slider").setAttribute('data-current-slide',3); + //setTimeout(moveSlide, 10, slide); + } + document.addEventListener("click",function (event) { + console.log(event.target); + if(event.target.matches('.pause') || event.target.matches('.ico-pause2') ) { + console.log("pause requested"); + run=false; + } + }); + } +} + +function moveSlide(slide) { + if(!run) { + slide.setAttribute('style','opacity:0%;margin-left:-100%;z-index:3'); + return; + } + start=0; + if(slide.getAttribute('data-position')) + { + start = parseInt(slide.getAttribute('data-position')); + } + slide.setAttribute('data-position',start-1); + slide.setAttribute('style','opacity:'+(100+start)+'%;margin-left:'+(start-1)+'%;z-index:3'); + if(start > -100) { + setTimeout(moveSlide, 10, slide); + return; + } + nextSlide(); +} + +function nextSlide() +{ + next = 3; + if(current = document.getElementById("slider").getAttribute('data-current-slide')) + { + next = parseInt(current) -1; + } + if(next < 1) + { + next = 3; + } + + console.log("next " + next); + console.log("current " + current); + + next_slide = document.getElementById("slide-"+next); + next_slide.setAttribute('data-position',0); + next_slide.setAttribute('style','margin-left:0%;z-index:3'); + + current_slide = document.getElementById("slide-"+current); + current_slide.setAttribute('data-position',0); + current_slide.setAttribute('style','margin-left:0%;z-index:0'); + document.getElementById("slider").setAttribute('data-current-slide',next); + setTimeout(moveSlide, 10, next_slide); +} diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/_icons.scss b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/_icons.scss new file mode 100644 index 0000000..2364e01 --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/_icons.scss @@ -0,0 +1,59 @@ +@font-face { + font-family: 'icomoon'; + src: + url('fonts/icomoon.ttf?e3ejhb') format('truetype'), + url('fonts/icomoon.woff?e3ejhb') format('woff'), + url('fonts/icomoon.svg?e3ejhb#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +i { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.ico-close-circle:before { + content: "\ea0d"; +} +.ico-close:before { + content: "\ea0f"; +} +.ico-play3:before { + content: "\ea1c"; +} +.ico-pause2:before { + content: "\ea1d"; +} +.ico-circle-up:before { + content: "\ea41"; +} +.ico-circle-right:before { + content: "\ea42"; +} +.ico-circle-down:before { + content: "\ea43"; +} +.ico-circle-left:before { + content: "\ea44"; +} +.ico-radio-checked:before { + content: "\ea54"; +} +.ico-radio-checked2:before { + content: "\ea55"; +} +.ico-radio-unchecked:before { + content: "\ea56"; +} diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/_normalize.scss b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/_normalize.scss new file mode 100644 index 0000000..c45a85f --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/_normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/common.scss b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/common.scss new file mode 100644 index 0000000..d458227 --- /dev/null +++ b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/common.scss @@ -0,0 +1,130 @@ +@import "icons"; +@import "normalize"; + +h1 +{ + font-weight:700; + font-size:24px; + text-align: center; + color:#666; + font-family: Arial, Helvetica, sans-serif; +} + +#top-slider +{ + position: relative; + max-width: 100vw; + width: 100vw; + height: 50vh; + overflow: hidden; +} +#slider-position +{ + width: 100vw; + height: 30px; + line-height: 30px; + text-align: center; + i + { + content:"\00a0"; + display: inline-block; + height: 20px; + width: 20px; + border-radius: 20px; + font-size: 20px; + line-height: 1; + vertical-align: middle; + color:lightseagreen; + &.on + { + background-color:lightseagreen; + } + } +} +.slider +{ + position:absolute; + top:0; + left:0; + bottom:0; + right:0; + picture + { + display: block; + position:relative; + max-width:100vw; + overflow: hidden; + } + .slide + { + width:100vw; + height:50vh; + position:absolute; + top:0; + left:0; + bottom:0; + right:0; + transition: all 0.01s; + z-index:1; + } + .slider-nav + { + position:absolute; + z-index:12; + top:50%; + left:0; + right:0; + height:15vh; + //background-color:red; + transform: translateY(-50%); + display: inline-block; + line-height: 15vh; + i + { + color:rgba(255,255,255,0.75); + font-size:9vh; + line-height: 1; + display: inline-block; + vertical-align: middle; + } + span + { + display: block; + position: absolute; + opacity:0; + &:hover + { + opacity: 1; + } + } + .pause + { + width:34%; + left:33%; + text-align: center; + } + .next + { + width:33%; + left:67%; + text-align:right; + } + .prev + { + width:33%; + text-align:left; + } + } +} + +.ico-pause2 +{ + pointer-events: none; +} + +#slide-1 +{ + background: url(./imgs/full/forest-river.jpg); + background-position: center center; + background-size: 100% auto; +} diff --git a/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/sources/icomoon-v1.0.zip b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/sources/icomoon-v1.0.zip new file mode 100644 index 0000000..f4ef027 Binary files /dev/null and b/b2-cwd/integration/live/session5/slider-js-et-vars-css/scss/sources/icomoon-v1.0.zip differ