semion-sergeenko · semion-sergeenko · Sep 15, 2024 · Sep 15, 2024 · Sep 15, 2024 · Sep 15, 2024
diff --git a/cssMemeSlider/assets/1.jpg b/cssMemeSlider/assets/1.jpg
diff --git a/cssMemeSlider/assets/2.jpg b/cssMemeSlider/assets/2.jpg
diff --git a/cssMemeSlider/assets/3.jpg b/cssMemeSlider/assets/3.jpg
diff --git a/cssMemeSlider/assets/4.jpg b/cssMemeSlider/assets/4.jpg
diff --git a/cssMemeSlider/assets/icons8-favicon-50.png b/cssMemeSlider/assets/icons8-favicon-50.png
diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <link type="Image/x-icon" href="assets/icons8-favicon-50.png" rel="icon">
+</head>
+<body>
+    <!-- box_and_internal -->
+
+    <div class="box">
+        <div class="memewindow">
+            <input type="radio" name="radio" class="radio" id="radio_btn1" checked>
+            <input type="radio" name="radio" class="radio" id="radio_btn2">
+            <input type="radio" name="radio" class="radio" id="radio_btn3">
+            <input type="radio" name="radio" class="radio" id="radio_btn4">
+            <div class="pictures">
+                <div class="overflow">
+                    <div class="image">                
+                        <div class="img"><img class="im" src="assets/1.jpg" alt="meme1"></div>
+                        <div class="img"><img class="im" src="assets/2.jpg" alt="meme2"></div>
+                        <div class="img"><img class="im" src="assets/3.jpg" alt="meme3"></div>
+                        <div class="img"><img class="im" src="assets/4.jpg" alt="meme4"></div>                    
+                    </div>
+                </div>
+            </div>
+            <div class="text_wrapper">
+                <div class="text_block">
+                    <div class="overflow_text">
+                        <div class="texts">
+                            <div class="tx">Я не знаю</div>
+                            <div class="tx">что</div>
+                            <div class="tx">такое</div>
+                            <div class="tx">мемы.</div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="active">
+                    <label for="radio_btn1"><div class="round"></div></label>
+                    <label for="radio_btn2"><div class="round"></div></label>
+                    <label for="radio_btn3"><div class="round"></div></label>
+                    <label for="radio_btn4"><div class="round"></div></label>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css
@@ -0,0 +1,151 @@
+/* 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 */
+.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;
+}
+
+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;
+
+    }
+
+}