From 59f95bced00ba193681c11f97583d7497df508e0 Mon Sep 17 00:00:00 2001 From: Semion Date: Sun, 15 Sep 2024 17:16:01 +0300 Subject: [PATCH 1/7] feat: create initial project file structure (Sun, Sep 15, 2024 5:16:01 PM) --- cssMemeSlider/index.html | 12 ++++++++++++ cssMemeSlider/style.css | 0 2 files changed, 12 insertions(+) create mode 100644 cssMemeSlider/index.html create mode 100644 cssMemeSlider/style.css diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html new file mode 100644 index 0000000..d533d14 --- /dev/null +++ b/cssMemeSlider/index.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css new file mode 100644 index 0000000..e69de29 From ebe47edc8a1e5d38b61a4340a4d25a1f15f87ed3 Mon Sep 17 00:00:00 2001 From: Semion Date: Sun, 15 Sep 2024 17:49:07 +0300 Subject: [PATCH 2/7] feat: add images to assets and favicon (Sun, Sep 15, 2024 5:49:06 PM) --- cssMemeSlider/assets/1.jpg | Bin 0 -> 8021 bytes cssMemeSlider/assets/2.jpg | Bin 0 -> 8671 bytes cssMemeSlider/assets/3.jpg | Bin 0 -> 9565 bytes cssMemeSlider/assets/4.jpg | Bin 0 -> 8608 bytes cssMemeSlider/assets/icons8-favicon-50.png | Bin 0 -> 1257 bytes cssMemeSlider/index.html | 3 ++- 6 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 cssMemeSlider/assets/1.jpg create mode 100644 cssMemeSlider/assets/2.jpg create mode 100644 cssMemeSlider/assets/3.jpg create mode 100644 cssMemeSlider/assets/4.jpg create mode 100644 cssMemeSlider/assets/icons8-favicon-50.png diff --git a/cssMemeSlider/assets/1.jpg b/cssMemeSlider/assets/1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5c4a0b9391584aa9ce8cddcd2cb431b91a75e9a8 GIT binary patch literal 8021 zcmeH|do+}39LJw`-WfB7Frr$Q@Z(B11`Y%2E-9D3Z#W ztgMv{t!R+jPLjh$OgUrR)l`Nlm*m}d+D?1U?%6%N`=7J#?|FXDdCqx$&vSm?-|utY z7wJNJfr=~5g$5u90s-g%hzRIyh}stffV(>|1ptuHGgSbiI|v;g40#Hi0S^P|B8 zSY~o~JWL?U5s5M<$t%c{NMsU`NM1lDD=4Bylvh$-pr|C<%N~(km)%0AB8f3k4DF! z=KxP3sOnN3PoiXA)A=E~IB% zyp)-h`)wZgM*epNH-EfcT2_ANr;5Ax>*^aCn||g$X#eGLN9U8SZh@$;e_(KEcx3ds zWPC#U=I!Lv^o&dw1mNFfeNy%ZT@+Lo4($P+DANVuB2kAac!DlfPSw$qxbx6LJFx-5ShqiRYG3!(b#PfqBJtr2ir1T`7Y+wJxC=RB}7!tFSS~&6=31mxXF^WYQHMYthC*_sKg;Blc~49E2T}Iofh0U z=^){YuiXw%OrgKwXpR&aHuO{kCEa-6ayB?H;_SHGORk!!r12FCH0dw&kc0|PS26Ow zza089WBgfSaHP3oEL4e4_0JecJyKIsqf@Kpcb{iG#oeMdF=}6Elsnu^YZZ8JzL%Ym z>{Ir7jqh?pa#+utD1AuFrYu^2Z-$Efm1J2dq5{$3STQ9BB zMu0y1A_5pGoRPrWOt)I$xXnJ!o9V@K@n%hZ%G2t7oEOg!AkAR!LBMNzb%Rce_T1lB zY*teWBOv8?_?)fIjJxw&4py@Nb;*dF}aV64Vix4o8$TP)m}ATsx-{tg}a76Z12*_azC!0A*9JNDB{iTWZfhBZSI!ox2eIvIza(1O4q0?Tt;La0X z{);X}25w9KrU;W(fx+eD2&gZLl=yQ}y1Twsa2weZ;M$~D0rQlY3UlhbD+q983TFXh z&dzV`Sk4YktKGqOgVl}araZn_JACEN`*C4EBW)_Qw>r5>-u2#6t*E0Rm5Eoa3m&~P z;T{OCJm#@$)asE%uUJ$&L=GFcSDIS(GA2uW=GfNWOVZ^QcFq0;KZqudWqx(ue2u?~ zYXC8@n~VT=USGvbM@QAp$imU9yUshE&s_hIa)b@y_y$tN9_nPpBRR{$cfz{U68orV z<)u_s6au0Jw(P;FK|a%mAlRi~)=Ri~)=Ri~)=Ri~)=RjDf#oKpE-&6^V!U`v3p{ literal 0 HcmV?d00001 diff --git a/cssMemeSlider/assets/2.jpg b/cssMemeSlider/assets/2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..384e534f7c94889aa8c9155cacfeee7c3147e560 GIT binary patch literal 8671 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 V9bh`Zbb#pq(}Dkm1EKW(e*oo8^h5vv literal 0 HcmV?d00001 diff --git a/cssMemeSlider/assets/3.jpg b/cssMemeSlider/assets/3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..894ac7b29514d35859f3eb94f68a75e1c5daf5cc GIT binary patch literal 9565 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 Tj0tNY00000NkvXXu0mjflulwA literal 0 HcmV?d00001 diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html index d533d14..cd28f4e 100644 --- a/cssMemeSlider/index.html +++ b/cssMemeSlider/index.html @@ -4,7 +4,8 @@ Document - + + From 7cf35421baf68c8daef68cf1cdb3de2534e76caa Mon Sep 17 00:00:00 2001 From: Semion Date: Sun, 15 Sep 2024 18:35:44 +0300 Subject: [PATCH 3/7] feat: content without sliding (Sun, Sep 15, 2024 6:35:44 PM) --- cssMemeSlider/index.html | 34 +++++++++++++ cssMemeSlider/style.css | 100 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 134 insertions(+) diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html index cd28f4e..0d51f63 100644 --- a/cssMemeSlider/index.html +++ b/cssMemeSlider/index.html @@ -8,6 +8,40 @@ + + +
+
+
+
+
+
meme1
+
meme2
+
meme3
+
meme4
+
+
+
+
+
+
+
+
Я не знаю
+
что
+
такое
+
мемы.
+
+ +
+
+
+
+ +
+ +
+ +
\ No newline at end of file diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css index e69de29..6c3dfe3 100644 --- a/cssMemeSlider/style.css +++ b/cssMemeSlider/style.css @@ -0,0 +1,100 @@ +/* box and internal */ + +body { + margin: 0 0 0 0; + display: flex; + align-items: center; + justify-content: center; +} + +.box{ + display: flex; + width: 99vw; + height: 98vh; + align-items: center; + justify-content: center; + background-color: rgb(240, 240, 240); + border: 5vh; + border-radius: 1vh; + margin: 0 0 0 0; + +}.memewindow{ + display: flex; + flex-direction: column; + width: 98vw; + height: 96vh; + align-items: center; + background-color: rgb(35, 35, 35); +} +.overflow{ + margin-top: 3vh; + width: 80vw; + height: 70vh; + border-radius: 1vh; + overflow: hidden; +} +.image{ + width: 320vw; + height: 70vh; + display: flex; +} +.im{ + width: 80vw; + height: 70vh; + border-radius: 1vh; +} +/* text block */ +.overflow_text{ + width: 30vw; + height: 10vh; + overflow: hidden; +} +.texts{ + width: 120vw; + height: 6vh; + display: flex; + justify-content: center; + align-items: center; + font-size: 4vw; + color: white; +} +.tx{ + width: 30vw; + height: 6vh; + justify-content: center; + align-items: center; +} +.text_wrapper{ + display: flex; + justify-content: space-between; + margin-top: 5vh; + width: 80vw; + height: 10vh; + +} +.text_block{display: flex;} +/* end text block */ +/* 320 */ +@media screen and (max-width: 320px) { + /* .im{object-fit: contain;} */ + .box{height: 40vh;} + .memewindow{height: 39vh;} + .overflow{height: 25vh; margin-top: .5vh;} + .image{height: 25vh;} + .im{height: 25vh;} + .text_wrapper{height: 5vh;margin-top: 5vh;} + .overflow_text{height: 5vh;} + .active label { + width: 3vh; + height: 3vh; + } + .active{position: absolute;margin-left: 15vh;margin-top: -4vh;} + .round{ + width: 1vh; + height: 1vh; + margin: 0.7vh auto; + + } + + } + From f4f1e8a0c3bb6c2d9d9c56f6a7e0c692969e5646 Mon Sep 17 00:00:00 2001 From: Semion Date: Sun, 15 Sep 2024 19:10:48 +0300 Subject: [PATCH 4/7] fix: correct path to images (Sun, Sep 15, 2024 7:10:48 PM) --- cssMemeSlider/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html index 0d51f63..c408a3d 100644 --- a/cssMemeSlider/index.html +++ b/cssMemeSlider/index.html @@ -15,10 +15,10 @@
-
meme1
-
meme2
-
meme3
-
meme4
+
meme1
+
meme2
+
meme3
+
meme4
From 46fa0fb0077ce87a1bf2548003093eb7b77f490a Mon Sep 17 00:00:00 2001 From: Semion Date: Sun, 15 Sep 2024 20:47:40 +0300 Subject: [PATCH 5/7] feat: complete interactive slider (Sun, Sep 15, 2024 8:47:40 PM) --- cssMemeSlider/index.html | 8 +++++++ cssMemeSlider/style.css | 49 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html index c408a3d..efe7ecf 100644 --- a/cssMemeSlider/index.html +++ b/cssMemeSlider/index.html @@ -12,6 +12,10 @@
+ + + +
@@ -35,6 +39,10 @@
+ + + +
diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css index 6c3dfe3..a2cf5cd 100644 --- a/cssMemeSlider/style.css +++ b/cssMemeSlider/style.css @@ -96,5 +96,52 @@ body { } - } +} + +.radio {display: none;} + +.active label { + display: inline-block; + width: 3.5ex; + height: 3.5ex; + background-color: rgb(35, 35, 35); + cursor: pointer; +} +.round{ + width: 2ex; + height: 2ex; + margin: 0.7ex auto; + border: solid; + border-width: 0.1ex; + border-radius: 100%; + border-color: rgb(7, 167, 236); + background-color: rgb(7, 167, 236); +} + +/* img movement */ +#radio_btn1:checked ~ .pictures .image{margin-left: 0;} +#radio_btn2:checked ~ .pictures .image{margin-left: -100%;} +#radio_btn3:checked ~ .pictures .image{margin-left: -200%;} +#radio_btn4:checked ~ .pictures .image{margin-left: -300%;} + +/* text movement */ +#radio_btn1:checked ~ .text_wrapper .texts{margin-left: 0;} +#radio_btn2:checked ~ .text_wrapper .texts{margin-left: -100%;} +#radio_btn3:checked ~ .text_wrapper .texts{margin-left: -200%;} +#radio_btn4:checked ~ .text_wrapper .texts{margin-left: -300%;} + +#radio_btn1:checked ~ .text_wrapper .active label[for=radio_btn1] .round, +#radio_btn2:checked ~ .text_wrapper .active label[for=radio_btn2] .round, +#radio_btn3:checked ~ .text_wrapper .active label[for=radio_btn3] .round, +#radio_btn4:checked ~ .text_wrapper .active label[for=radio_btn4] .round +{ + background-color: rgb(35, 35, 35); +} + +.pictures .image { + transition: 1s margin-left linear; +} +.text_wrapper .texts { + transition: 1s margin-left linear; +} From 65ab31e7348b08c018ebc35e725412d54dd1c2a1 Mon Sep 17 00:00:00 2001 From: Semion Date: Sun, 15 Sep 2024 20:54:12 +0300 Subject: [PATCH 6/7] fix: chenge style for hovered label (Sun, Sep 15, 2024 8:54:12 PM) --- cssMemeSlider/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css index a2cf5cd..9b3df24 100644 --- a/cssMemeSlider/style.css +++ b/cssMemeSlider/style.css @@ -145,3 +145,7 @@ body { transition: 1s margin-left linear; } +label:hover .round { + border-color: white; + background-color: white; +} From 04547c3e692b3b09078dbc19911d8ae6a84300f6 Mon Sep 17 00:00:00 2001 From: Semion Date: Sun, 15 Sep 2024 21:18:28 +0300 Subject: [PATCH 7/7] fix: bugs in mobile version (Sun, Sep 15, 2024 9:19:33 PM) --- cssMemeSlider/style.css | 48 ++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css index 9b3df24..0e7ddab 100644 --- a/cssMemeSlider/style.css +++ b/cssMemeSlider/style.css @@ -74,30 +74,6 @@ body { } .text_block{display: flex;} /* end text block */ -/* 320 */ -@media screen and (max-width: 320px) { - /* .im{object-fit: contain;} */ - .box{height: 40vh;} - .memewindow{height: 39vh;} - .overflow{height: 25vh; margin-top: .5vh;} - .image{height: 25vh;} - .im{height: 25vh;} - .text_wrapper{height: 5vh;margin-top: 5vh;} - .overflow_text{height: 5vh;} - .active label { - width: 3vh; - height: 3vh; - } - .active{position: absolute;margin-left: 15vh;margin-top: -4vh;} - .round{ - width: 1vh; - height: 1vh; - margin: 0.7vh auto; - - } - -} - .radio {display: none;} .active label { @@ -149,3 +125,27 @@ label:hover .round { border-color: white; background-color: white; } + +/* 320 */ +@media screen and (max-width: 320px) { + /* .im{object-fit: contain;} */ + .box{height: 40vh;} + .memewindow{height: 39vh;} + .overflow{height: 25vh; margin-top: .5vh;} + .image{height: 25vh;} + .im{height: 25vh;} + .text_wrapper{height: 5vh;margin-top: 5vh;flex-wrap:wrap-reverse;} + .overflow_text{height: 5vh;} + .active label { + width: 3vh; + height: 3vh; + } + .active{margin-left: 15vh;margin-top: -4vh;} + .round{ + width: 1vh; + height: 1vh; + margin: 0.7vh auto; + + } + +}