AlexanderSUS · AlexanderSUS · Oct 16, 2021 · Oct 16, 2021 · Oct 16, 2021 · Oct 17, 2021
diff --git a/cssMemSlider/assets/0.jpg b/cssMemSlider/assets/0.jpg
diff --git a/cssMemSlider/assets/1.jpg b/cssMemSlider/assets/1.jpg
diff --git a/cssMemSlider/assets/2.jpg b/cssMemSlider/assets/2.jpg
diff --git a/cssMemSlider/assets/3.gif b/cssMemSlider/assets/3.gif
diff --git a/cssMemSlider/assets/4.jpg b/cssMemSlider/assets/4.jpg
diff --git a/cssMemSlider/assets/5.jpg b/cssMemSlider/assets/5.jpg
diff --git a/cssMemSlider/assets/6.jpg b/cssMemSlider/assets/6.jpg
diff --git a/cssMemSlider/index.html b/cssMemSlider/index.html
@@ -0,0 +1,65 @@
+<!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">
+  <link rel="preconnect" href="https://fonts.googleapis.com"> 
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./style.css">
+  <title>cssMemeSlider</title>
+</head>
+<body>
+  <main class="slider">
+   <div class="slides">
+      <div class="slide" id="slide0">
+        <div class="picture picture0"></div>
+        <div class="empty"></div>
+        <div class="text sign0">What are you studying?</div>
+      </div>
+      <div class="slide" id="slide1">
+        <div class="picture picture1"></div>
+        <div class="empty"></div>
+        <div class="text sign1">Without words...</div>
+      </div>
+      <div class="slide" id="slide2">
+        <div class="picture picture2"></div>
+        <div class="empty"></div>
+        <div class="text sign2">When you got special task from RS School (like this slider)</div>
+      </div>
+      <div class="slide" id="slide3">
+        <div class="picture picture3"></div>
+        <div class="empty"></div>
+        <div class="text sign3">First time meet css</div>
+      </div>
+      <div class="slide" id="slide4">
+        <div class="picture picture4"> </div>
+        <div class="empty"></div>
+        <div class="text sign4">When you are learning js... </div>
+      </div>
+      <div class="slide" id="slide5">
+        <div class="picture picture5"></div>
+        <div class="empty"></div>
+        <div class="text sign5">Work with git</div>
+      </div>
+      <div class="slide" id="slide6">
+        <div class="picture picture6"></div>
+        <div class="empty"></div>
+        <div class="text sign6">Reality...</div>
+      </div>
+   </div> 
+   <div class="text-window"></div>
+   <div class="mask"></div>
+   <div class="control-window">
+    <a href="#slide0"><span></span></a>
+    <a href="#slide1"><span></span></a>
+    <a href="#slide2"><span></span></a>
+    <a href="#slide3"><span></span></a>
+    <a href="#slide4"><span></span></a>
+    <a href="#slide5"><span></span></a>
+    <a href="#slide6"><span></span></a>
+    </div>
+  </main>
+</body>
+</html>
diff --git a/cssMemSlider/style.css b/cssMemSlider/style.css
@@ -0,0 +1,221 @@
+:root {
+  --full-screen-width: 75vw;
+  --full-screen-height: 75vmin;
+  --full-screen-row-height: 4vmin;
+}
+
+* { box-sizing: border-box;}
+ html, body {
+   height: 100%;
+   overflow: hidden;
+ }
+
+body {
+  margin: 0 auto;
+  color: white;
+  font-family: 'Roboto', sans-serif;
+  background-color: #141518;
+}
+
+.slider {
+  display: grid;
+  grid-template-columns: 6fr 2fr;
+  grid-template-rows: var(--full-screen-height) var(--full-screen-row-height) calc(var(--full-screen-row-height) * 2);
+
+  width: var(--full-screen-width);
+  margin: 2vmax auto auto auto;
+
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.slides {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 4;
+  display: flex;
+
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+.slides::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.slides::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+}
+
+.slides::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.picture {
+  scroll-snap-align: start;
+  flex-shrink: 0;
+  width: var(--full-screen-width);
+  height: var(--full-screen-height);
+  border-radius: 10px;
+  transform-origin: center center;
+  transform: scale(1);
+  transition: transform 0.5s;
+  position: relative;
+  align-items: center;
+  background-color: #111215;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-color: #111215;
+}
+
+.picture0 { background-image: url(./assets/0.jpg); }
+.picture1 { background-image: url(./assets/1.jpg); }
+.picture2 { background-image: url(./assets/2.jpg); }
+.picture3 { background-image: url(./assets/3.gif); }
+.picture4 { background-image: url(./assets/4.jpg); }
+.picture5 { background-image: url(./assets/5.jpg); }
+.picture6 { background-image: url(./assets/6.jpg); }
+
+.empty {
+  height: var(--full-screen-row-height);
+}
+
+.text {
+  font-size: 3vmin;
+}
+
+.control-window {
+  z-index: 5;
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 3;
+  grid-row-end: 4;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-start;
+
+  background-color:#141518;
+}
+
+a {
+  display: block;
+  position: relative;
+
+  width: 1.5vmin;
+  height: 1.5vmin;
+
+  margin: 0.75vmin;
+  text-decoration: none;
+
+  background: rgb(50, 160, 235);
+  border: 0.2vmin solid transparent; 
+  border-radius: 50%;
+}
+
+a:hover {
+  border-color: white;
+  background-color: white;
+}
+
+a:focus {
+  border-color: rgb(50, 160, 235);
+  background-color: transparent; 
+}
+
+a:active {
+  background-color: transparent;
+  border-color: rgb(50, 160, 235);
+}
+
+span {
+  position: relative;
+  left: -6px;
+  top: -2px;
+  padding: 2.5vmax 1.5vmin;
+}
+
+span:hover a {
+  border-color: gainsboro;
+  background-color: white;
+}
+
+.mask {
+  z-index: 5;
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 2;
+  grid-row-end: 4;
+
+  background: linear-gradient(to left, rgba(20, 21, 24, 0.8),rgba(20, 21, 24, 0), rgba(20, 21, 24, 0), rgba(20, 21, 24, 0), rgba(20, 21, 24, 0));
+}
+
+@media (hover: none) {
+  a:hover {
+    border-color: white;
+    background-color: transparent;
+  }
+}
+
+@media (max-width: 1024px) {
+  .slider,
+  .slide,
+  .picture {
+    width: 96vw;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .slider {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--full-screen-height) 3vmax 3vmax 3vmax auto;
+  }
+
+  .slides {
+    grid-column: 1 / 2;
+    grid-row: 1 / 6;
+  }
+
+  .control-window {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4;
+    justify-content: center;
+  }
+
+  .mask {
+    display: none;
+  }
+
+  .empty {
+    height: 9vmax;
+  }
+
+  .text {
+    font-size: 4vmax;
+  }
+
+  a {
+    width: 2vmax;
+    height: 2vmax;
+    margin: 0.5vmax 1.5vmax;
+  }
+
+  span {
+    left: -7px;
+    padding-left: 2vmin;
+    padding-right: 2.6vmin;
+  }
+
+  a:hover {
+    border-color: white;
+    background-color: transparent;
+  }
+}