PavelMPS · PavelMPS · Oct 16, 2021 · Oct 16, 2021 · Oct 16, 2021 · Oct 16, 2021
diff --git a/cssMemSlider/images/01.jpg b/cssMemSlider/images/01.jpg
diff --git a/cssMemSlider/images/02.jpg b/cssMemSlider/images/02.jpg
diff --git a/cssMemSlider/images/03.jpg b/cssMemSlider/images/03.jpg
diff --git a/cssMemSlider/images/04.jpg b/cssMemSlider/images/04.jpg
diff --git a/cssMemSlider/images/git.png b/cssMemSlider/images/git.png
diff --git a/cssMemSlider/images/rs_school_js.svg b/cssMemSlider/images/rs_school_js.svg
diff --git a/cssMemSlider/index.html b/cssMemSlider/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mem Slider</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <header>
+        <div class="header_info">
+            <h1>Welcome to Mem's Slider</h1>
+        </div>      
+    </header>
+    <div class="my_slider_container">
+        <div class="my_slider_inner">
+            <div class="slider_wrapper">
+
+                <input type="radio" name="rad" id="rad1" checked>
+                <input type="radio" name="rad" id="rad2">
+                <input type="radio" name="rad" id="rad3">
+                <input type="radio" name="rad" id="rad4">
+
+                <div class="my_slider1">
+                    <div class="slides">                    
+                        <div class="slide s1"><img src="images/01.jpg" alt=""></div>
+                        <div class="slide"><img src="images/02.jpg" alt=""></div>
+                        <div class="slide"><img src="images/03.jpg" alt=""></div>
+                        <div class="slide"><img src="images/04.jpg" alt=""></div>
+                    </div>
+                </div>
+
+                <div class="slider_bottom">
+                    <div class="my_slider2" >
+                        <div class="slides1" id="slider2">
+                            <div class="slide1 s2">
+                                <p>Нам нужно создать 1 слайдер за 48 часов :)
+                                    Изи баллы)
+                                </p>
+                            </div>
+                            <div class="slide1">
+                                <p>Погодите-ка! Как без JavaScript?!</p>
+                            </div>
+                            <div class="slide1">
+                                <p>Мой кот: "Подумаешь - без JavaScript!А как я без яиц хожу?"</p>
+                            </div>
+                            <div class="slide1">
+                                <p>Тем временем тот, кто выдал таск читает гневные вопли в discord.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="paginator">
+                        <label for="rad1" class="bullet"></label>
+                        <label for="rad2" class="bullet"></label>
+                        <label for="rad3" class="bullet"></label>
+                        <label for="rad4" class="bullet"></label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer>
+        <div class="footer_info">
+            <p>Copyright 2021</p>
+            <a href="https://rollingscopes.com/" target="_blank"><p>RSschool</p></a>
+            <a href="https://github.com/PavelMPS/cssMemSlider/tree/gh-pages" target="_blank"><p>PavelMPS</p></a>
+        </div>
+
+    </footer>
+</body>
+
+</html>
diff --git a/cssMemSlider/style.css b/cssMemSlider/style.css
@@ -0,0 +1,287 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+header{
+    width: 50%;
+    background: rgb(196, 195, 194);
+    margin: 0 auto;
+    border-radius: 0.25em;
+    margin-top: 0.5em;
+}
+.header_info{
+    margin: auto;
+    width: 99%;
+    background: rgb(29, 29, 28);
+    border-top: 0.1em solid rgb(196, 195, 194);
+    border-bottom: 0.1em solid rgb(196, 195, 194);
+    border-radius: 0.25em 0.25em 0 0;
+}
+h1{
+    text-align: center;
+    color: rgb(231, 43, 9);
+    text-shadow: 0 0 0.2em yellow;
+    animation: pulsar 2s infinite;
+}
+@keyframes pulsar{
+    0%{
+        transform: scale(0.9);
+        text-shadow: 0.1em 0 0.1em yellow;
+    }
+    50%{
+        transform: scale(1.0);
+        text-shadow: 0.2em 0 0.3em yellow;
+    }
+    100%{
+        transform: scale(0.9);
+        text-shadow: 0.1em 0 0.1em yellow;
+    }
+}
+.my_slider_container{
+    width: 50vw;
+    height: auto;
+    margin: auto;
+    border-radius: 0.25em;
+    background-color: rgb(196, 195, 194);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.my_slider_inner{
+    width: 99%;
+    height: 99%;
+    background-color: rgb(29, 29, 28);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 0.1em solid rgb(196, 195, 194);
+    border-bottom: 0.1em solid rgb(196, 195, 194);
+}
+.slider_wrapper{
+    width: 95%;
+    height: 95%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-top: 0.4em;
+}
+.slider_bottom{
+    width: 100%;
+    height: 25%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.my_slider1{
+    width: 100%;
+    height: 70%;
+    overflow: hidden;
+    border-radius: 0.4em;
+}
+.my_slider2{
+    width: 40%;
+    height: auto;
+    overflow: hidden; 
+}
+p{
+    font-family: "Times New Roman";
+    color: rgb(182, 182, 70);
+    font-size: 1.375em;
+}
+.paginator{
+    width: 30%;
+    height: 10%;
+    display: flex;
+    justify-content: end;
+    padding-top: 0.3em;
+}
+.bullet{
+    width: 0.9375em;
+    height: 0.9375em;
+    margin-left: 0.8em;
+    background-color: rgb(252, 41, 3);
+    border-radius: 50%;
+    transition: all .3s ease;
+    cursor: pointer;
+}
+.bullet:hover{
+    background-color: cornsilk;
+    transform: scale(1.2);
+}
+.bullet:active{
+    background-color: rgb(179, 179, 3);
+    transform: scale(1.4);
+}
+input[name="rad"]{
+    display: none;
+}
+.slides{
+    width: 400%;
+    height: 100%;
+    display: flex;
+}
+.slide{
+    transition: all .6s ease;
+    width: 25%;
+}
+.slide1{
+    transition: all 1s ease;
+    width: 25%;
+}
+.slides1{
+    width: 400%;
+    height: 100%;
+    display: flex; 
+    align-items: center;
+}
+img{
+    width: 100%;
+    height: 100%;
+}
+#rad1:checked ~.my_slider1 .slides .s1{
+    margin-left: 0;
+}
+#rad2:checked ~.my_slider1 .slides .s1{
+    margin-left: -25%;
+}
+#rad3:checked ~.my_slider1 .slides .s1{
+    margin-left: -50%;
+}
+#rad4:checked ~.my_slider1 .slides .s1{
+    margin-left: -75%;
+}
+
+#rad1:checked ~ .slider_bottom .my_slider2 .slides1 .s2{
+    margin-left: 0;
+}
+#rad2:checked ~.slider_bottom .my_slider2 .slides1 .s2{
+    margin-left: -25%;
+}
+#rad3:checked ~.slider_bottom .my_slider2 .slides1 .s2{
+    margin-left: -50%;
+}
+#rad4:checked ~.slider_bottom .my_slider2 .slides1 .s2{
+    margin-left: -75%;
+}
+
+#rad1:checked ~ .slider_bottom .paginator label:nth-child(1){
+    background:rgb(3, 245, 3);
+}
+#rad2:checked ~ .slider_bottom .paginator label:nth-child(2){
+    background:rgb(3, 245, 3);
+}
+#rad3:checked ~ .slider_bottom .paginator label:nth-child(3){
+    background:rgb(3, 245, 3);
+}
+#rad4:checked ~ .slider_bottom .paginator label:nth-child(4){
+    background:rgb(3, 245, 3);
+}
+
+#rad1:checked ~ .slider_bottom .paginator label:nth-child(1):hover{
+    background:cornsilk;   
+}
+label::before{
+    content: '';
+    display: block;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    padding-left: 0.0625em;
+    position: relative;
+    top: -0.4375em;
+    left: -0.5em;
+    border-radius: 50%;
+}
+footer{
+    width: 50%;
+    background: rgb(196, 195, 194);
+    margin: 0 auto;
+    border-radius: 0.3125em;
+}
+.footer_info{
+    margin: auto;
+    width: 99%;
+    background: rgb(29, 29, 28);
+    border-top: 0.125em solid rgb(196, 195, 194);
+    border-bottom: 0.1875em solid rgb(196, 195, 194);
+    border-radius: 0 0 0.3125em 0.3125em;
+    display: flex;
+    justify-content: space-around;
+}
+.footer_info p{
+    color: rgb(170, 170, 2);
+    transition: all 0.5s ease;
+}
+a{
+    text-decoration: none;
+}
+.footer_info p:hover{
+    color: rgb(122, 122, 2);
+    transition: all 0.5s ease;
+}
+
+@media (max-width:1024px){
+    .my_slider_container{
+        max-width: 75vw;
+        /* height: 75vh; */
+    }
+    p{
+        font-size: 0.9375em;
+    }
+}
+@media (max-width:768px){
+    .my_slider_container{
+        max-width: 75vw;
+        /* height: 75vh; */
+    }
+    .slider_bottom{
+        width: 100%;
+        height: 25%;
+        display: flex;
+        flex-direction:column-reverse;
+    }
+    .my_slider2{
+        width: 100%;
+        height: 70%;
+        overflow: hidden; 
+    }
+    .paginator{
+        width: 32%;
+        height: 23%;
+        display: flex;
+        justify-content: center;
+    }
+    p{
+        font-size: 0.875em;
+    }
+    h1{
+        font-size: 1.25em;
+    }
+    .footer_info p{
+        font-size: 0.625em;
+    }
+}
+@media (max-width:320px){
+    h1{
+        font-size: 0.875em;
+    }
+    .my_slider_container{
+        max-width: 95vw;
+    }
+    .paginator{
+        width: 61%;
+        height: 23%;
+        display: flex;
+        justify-content: end;
+    }
+    .bullet{
+        width: 0.7em;
+        height: 0.7em;
+    }
+    p{
+        font-size: 0.625em;
+    }
+    .footer_info p{
+        font-size: 0.5em;
+    }
+}