CSS Meme Slider

README.md

@@ -1 +1,5 @@
-# cssMemeSlider
+# cssMemeSlider
+
+[cssMemeSlider](https://lynxBios.github.io/cssMemeSlider/cssMemeSlider/index.html) 
+
+дексктопную версию проверять на разрешении 1024px

cssMemeSlider/css/.slider {.css

@@ -0,0 +1,60 @@
+.slider {
+    width: 80%;
+    height: 80%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.slides {
+    flex: 1;
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+    flex: 0 0 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.slide img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.text {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 8px 16px;
+    color: #fff;
+    font-size: 18px;
+    white-space: nowrap;
+}
+
+.navigation {
+    display: flex;
+    gap: 5px;
+    justify-content: center;
+}
+
+.bar {
+    width: 10px;
+    height: 10px;
+    background-color: #fff;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+}
+
+input[type="radio"]:checked + .bar {
+    background-color: #a104d5;
+}
+
+

cssMemeSlider/css/style.css

@@ -0,0 +1,258 @@
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Forum';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/forum-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
+* {
+    box-sizing: border-box;   
+    margin: 0;
+    padding: 0;
+
+    scroll-behavior: smooth;
+}
+
+html {
+    overflow-x: hidden;
+
+    font-family: Forum;
+    font-size: 62.5%;
+    color: #73c3ff;
+
+    background-color: #1a1a1a;   
+}
+
+img {
+    max-width: 100%;
+    height: auto;    
+    margin: 0 auto;
+    margin-bottom: 2rem;
+
+    border-radius: 2%;
+}
+
+.slider {    
+    width: 90%;
+    max-width: 53rem;  
+    height: 90vh;
+    max-height: 70rem;     
+    margin: 0 auto;
+    margin-top: 6rem;     
+}
+
+.images__wrapper {        
+    width: 100%;    
+    margin: 0 auto;            
+}
+
+.images {
+    overflow: hidden;
+
+    display: flex;
+    width: 100%;    
+    max-width: 400%;    
+    margin: 0 auto;
+}
+
+.slide {
+    flex-shrink: 0; /*1*/;
+    width: 100%;    
+
+    transition: all 0.7s ease;    
+}
+
+.slide img {
+    width: 100%;    
+    max-width: 100%;    
+
+    transition: 0.5s;
+}
+
+.navigation__wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;       
+}
+
+.navigation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 3rem;     
+}
+
+.text_wrapper {
+    overflow: hidden;
+
+    display: flex;           
+}
+
+.text {
+    flex-shrink: 0;    
+    width: 100%;    
+
+    font-size: 2.5rem;    
+}
+
+input[name="button"] {
+    display: none;    
+}
+
+label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3.5rem;
+    height: 3.5rem;      
+}
+
+/* buttons layout and animation start*/
+.bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;     
+
+    cursor: pointer;    
+}
+
+.area__circle__bars {    
+    width: 2rem;
+    height: 2rem;
+
+    background-color: #73c3ff;
+    border-radius: 50%; 
+
+    cursor: pointer;
+    transition: 0.8s;    
+}
+
+.bar:hover .area__circle__bars {
+    border: #fefefe solid 0.1rem;
+    background-color: #fefefe;   
+}
+
+#btn_1:checked ~ .navigation__wrapper  #area_1 {
+    border: #73c3ff solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+
+#btn_1:checked ~ .navigation__wrapper label:hover #area_1 {
+    border: #fefefe solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+
+#btn_2:checked ~ .navigation__wrapper #area_2 {
+    border: #73c3ff solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+
+#btn_2:checked ~ .navigation__wrapper label:hover #area_2 {
+    border: #fefefe solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+
+#btn_3:checked ~ .navigation__wrapper #area_3 {
+    border: #73c3ff solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+
+#btn_3:checked ~ .navigation__wrapper label:hover #area_3 {
+    border: #fefefe solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+
+#btn_4:checked ~ .navigation__wrapper #area_4 {
+    border: #73c3ff solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+
+#btn_4:checked ~ .navigation__wrapper label:hover #area_4 {
+    border: #fefefe solid 0.2rem;
+    background-color: #0e0e0e;
+    transition: 0.8s;
+}
+/* buttons layout and animation end*/
+
+
+
+/* change text animation start*/
+#btn_1:checked ~ .navigation__wrapper .text_wrapper div {
+    transform: translate(0);
+    transition: 0.5s;    
+}
+
+#btn_2:checked ~ .navigation__wrapper .text_wrapper div {
+    transform: translate(-100%);
+    transition: 0.5s;    
+}
+
+#btn_3:checked ~ .navigation__wrapper .text_wrapper div {
+    transform: translate(-200%);
+    transition: 0.5s;
+}
+
+#btn_4:checked ~ .navigation__wrapper .text_wrapper div {
+    transform: translate(-300%);
+    transition: 0.5s;
+}
+/* change text animation end*/
+
+
+/*change images animation start*/
+#btn_1:checked ~ .images img {
+    transform: translate(0);
+}
+
+#btn_2:checked ~ .images img {
+    transform: translate(-100%);
+}
+
+#btn_3:checked ~ .images  img {
+    transform: translate(-200%);
+}
+
+#btn_4:checked ~ .images img {
+    transform: translate(-300%);
+}
+/*change images animation end*/
+
+
+/*media 660px start*/
+@media screen and (max-width: 660px) {
+
+    img {
+        margin-bottom: 1rem;
+    }
+    .slider {    
+        width: 100%;
+        max-width: 90%;            
+        margin: 0 auto;
+        margin-top: 2rem;          
+    }
+
+    .navigation__wrapper {        
+        flex-direction: column-reverse;
+        margin-top: 1rem;             
+    }    
+
+    .navigation__wrapper .navigation {
+        width: 100%;  
+        margin-bottom: 2rem;         
+    }
+
+    .navigation__wrapper .text_wrapper {
+        width: 100%;
+        max-width: 100%;
+        margin-bottom: 1rem;
+    }   
+}
+/*media 660px end*/

cssMemeSlider/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Meme Slider</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+    <main>
+        <div class="slider wrapper">
+
+            <div class="images__wrapper">
+
+                <input type="radio" name="button" id="btn_1" checked>
+                <input type="radio" name="button" id="btn_2">
+                <input type="radio" name="button" id="btn_3">
+                <input type="radio" name="button" id="btn_4">
+
+                <div class="images">
+                    <div class="slide"><img src="./assets/img/mem-7.jpg" alt="Your code is the worst I've ever run"></div>                
+                    <div class="slide"><img src="./assets/img/mem-5.jpg" alt="What do I want to do"></div>
+                    <div class="slide"><img src="./assets/img/mem-9.jpg" alt="Dad, why is the sky blue?"></div>
+                    <div class="slide"><img src="./assets/img/mem-3.jpg" alt="What the client wants"></div>
+                </div>
+
+                <div class="navigation__wrapper">
+
+                    <div class="text_wrapper">
+                        <div class="text first_text">Your code is the worst</div>
+                        <div class="text">What do I want to do</div>
+                        <div class="text">Dad, why is the sky blue?</div>
+                        <div class="text">What the client wants</div>                
+                    </div>
+
+                    <div class="navigation">
+
+                        <label for="btn_1" class="bar">
+                            <div class="area__circle__bars" id="area_1"></div>
+                        </label>
+
+                        <label for="btn_2" class="bar">
+                            <div class="area__circle__bars" id="area_2"></div>
+                        </label>
+
+                        <label for="btn_3" class="bar">
+                            <div class="area__circle__bars" id="area_3"></div>
+                        </label>
+
+                        <label for="btn_4" class="bar">
+                            <div class="area__circle__bars" id="area_4"></div>
+                        </label>                                              
+                    </div>                     
+                </div>    
+            </div>            
+        </div> 
+    </main>   
+</body>
+</html>
+<!-- git commit -m "feat: nazvanie_vashego_commita ($(LC_TIME=en_US.UTF-8 date '+%a, %b %d, %Y %I:%M:%S %p'))" -->