diff --git a/cssMemeSlider/img/favicon-32x32.png b/cssMemeSlider/img/favicon-32x32.png new file mode 100644 index 0000000..0c40c96 Binary files /dev/null and b/cssMemeSlider/img/favicon-32x32.png differ diff --git a/cssMemeSlider/img/imd1.jpg b/cssMemeSlider/img/imd1.jpg new file mode 100644 index 0000000..68516dc Binary files /dev/null and b/cssMemeSlider/img/imd1.jpg differ diff --git a/cssMemeSlider/img/imd2.jpg b/cssMemeSlider/img/imd2.jpg new file mode 100644 index 0000000..79c2049 Binary files /dev/null and b/cssMemeSlider/img/imd2.jpg differ diff --git a/cssMemeSlider/img/imd3.jpg b/cssMemeSlider/img/imd3.jpg new file mode 100644 index 0000000..5848a26 Binary files /dev/null and b/cssMemeSlider/img/imd3.jpg differ diff --git a/cssMemeSlider/img/imd4.jpg b/cssMemeSlider/img/imd4.jpg new file mode 100644 index 0000000..3029989 Binary files /dev/null and b/cssMemeSlider/img/imd4.jpg differ diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html new file mode 100644 index 0000000..7cef07c --- /dev/null +++ b/cssMemeSlider/index.html @@ -0,0 +1,62 @@ + + + + CSS Meme Slider + + + + + + + + + +

CSS Meme Slider

+
+
+ + + + +
+
+ imd1 +
+
+ imd2 +
+
+ imd3 +
+
+ imd4 +
+
+
+
+
+
When it is prohibited to use js and px in that task
+
When you see a photo of the screen and not a screenshot
+
This is me running to look at my grades for the Cross-Check
+
When you're trying to pronounce "tough", "through", "thought", "though" correctly
+
+
+
+ + + + +
+
+
+
+ + \ No newline at end of file diff --git a/cssMemeSlider/style/style_body.css b/cssMemeSlider/style/style_body.css new file mode 100644 index 0000000..a764403 --- /dev/null +++ b/cssMemeSlider/style/style_body.css @@ -0,0 +1,168 @@ +body { + margin: 0 auto; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + background-color: #25282A; + font-family: 'Montserrat', sans-serif; + color: #FFFFFF; +} +.container { + display: flex; + flex-direction: column; + width: 80%; + max-width: 46rem; +} +.slider_body { + margin: 0 auto; + display: flex; + width: 100%; + flex-direction: column; + overflow: hidden; +} +.s1 { + display: flex; + width: 400%; + transition: all 0.6s ease; +} +.img { + width: 25%; + height: 100%; +} +.img img { + object-fit: contain; + width: 100%; + height: 100%; +} +.container_content { + width: 100%; + margin-top: 4%; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.button { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 10rem; + height: 1rem; +} +.button div { + width: 1.5rem; + height: 1.5rem; +} +input[name="radio"] { + display: none; +} +.my_button_b1, +.my_button_b2, +.my_button_b3, +.my_button_b4 { + display: flex; + justify-content: center; + align-items: center; + width: 1.5rem; + height: 1.5rem; +} +.my_button_b1:hover, +.my_button_b2:hover, +.my_button_b3:hover, +.my_button_b4:hover { + cursor: pointer; +} +.my_button_b1 span, +.my_button_b2 span, +.my_button_b3 span, +.my_button_b4 span { + display: flex; + width: 1rem; + height: 1rem; + border-radius: 50%; + background-color: #71ABFE; + transition: all 0.6s ease; +} +.my_button_b1:hover span, +.my_button_b2:hover span, +.my_button_b3:hover span, +.my_button_b4:hover span { + box-shadow: 0.2em 0.2em .4em red, -0.5em 0 .4em olive; +} +.title_h1 { + width: 52rem; + overflow: hidden; +} +.title_h2 { + width: 400%; + display: flex; + flex-direction: row; + overflow: hidden; + transition: all 0.6s ease; +} +.title { + width: 50rem; +} +.container1 { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: baseline; + margin-top: 2rem; +} +@media (max-width: 800px) { + .container1 { + flex-direction: column-reverse; + align-items: center; + } + .title_h1 { + width: 100%; + margin-top: 2rem; + margin-left: 0; + } + .title { + width: 100%; + } +} + + +#radio1:checked ~ .s1 { + margin-left: 0; +} +#radio2:checked ~ .s1 { + margin-left: -100%; +} +#radio3:checked ~ .s1 { + margin-left: -200%; +} +#radio4:checked ~ .s1 { + margin-left: -300%; +} + +#radio1:checked ~ .container1 .button .my_button_b1 span { + background-color: #2bffff; +} +#radio2:checked ~ .container1 .button .my_button_b2 span { + background-color: #2bffff; +} +#radio3:checked ~ .container1 .button .my_button_b3 span { + background-color: #2bffff; +} +#radio4:checked ~ .container1 .button .my_button_b4 span { + background-color: #2bffff; +} + +#radio1:checked ~ .container1 .title_h1 .title_h2 { + margin-left: 0; +} +#radio2:checked ~ .container1 .title_h1 .title_h2 { + margin-left: -100%; +} +#radio3:checked ~ .container1 .title_h1 .title_h2 { + margin-left: -200%; +} +#radio4:checked ~ .container1 .title_h1 .title_h2 { + margin-left: -300%; +} \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index e69de29..0000000