From c29cb5659cf89a425c25288e18a0d6410d82a86c Mon Sep 17 00:00:00 2001 From: talestris Date: Sat, 14 Sep 2024 23:25:03 +0300 Subject: [PATCH] feat: update html and css files (Sat, Sep 14, 2024 11:25:02 PM) --- cssMemeSlider/index.html | 61 ++++++++++++--------------------- cssMemeSlider/styles/styles.css | 61 ++++++++++++++++----------------- 2 files changed, 51 insertions(+), 71 deletions(-) diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html index a9b534c..452b793 100644 --- a/cssMemeSlider/index.html +++ b/cssMemeSlider/index.html @@ -12,47 +12,30 @@
-
- - - - - -
- - - - - + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-
diff --git a/cssMemeSlider/styles/styles.css b/cssMemeSlider/styles/styles.css index 0124ae5..20f495b 100644 --- a/cssMemeSlider/styles/styles.css +++ b/cssMemeSlider/styles/styles.css @@ -1,56 +1,53 @@ -html, body { +html, +body { margin: 0; padding: 0; - width: 100%; - height: 100%; + box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; + width: 100%; + height: 100vh; + background-color: black; } -.slide { +.slides { margin: 0 auto; - width: 80%; - height: 80%; - transition: transform 0.3s linear; - cursor: pointer; + width: 50%; + height: 50%; + display: flex; + overflow-x: hidden; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; } -.container { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; +.slides img { + scroll-snap-align: start; + flex-grow: 1; + flex-shrink: 0; + flex-basis: 100%; + object-fit: cover; } .controls { display: flex; - order: 2; + transform: translateX(30%); width: 20%; - justify-content: space-between; - margin-top: 10%; - margin-left: 70%; -} - -.slides { - order: 1; -} - -.slide { - width: 100%; - height: 100%; - object-fit: cover; + height: 10%; + transition: 0.3s; } -.list { - list-style-type: none; +.control1, .control2, .control3, .control4, .control5 { + width: 1em; + height: 1em; + background-color: gold; display: flex; - order: 2; - width: 30%; justify-content: space-between; } +.controls a:hover { + opacity: 0.7; +} \ No newline at end of file