From 7623b03d8282ab6901e4da9090cc5f57b1f2f181 Mon Sep 17 00:00:00 2001
From: totaro <66010583+totaro@users.noreply.github.com>
Date: Thu, 4 Jan 2024 17:45:22 +0200
Subject: [PATCH] sliding cards

---
 index.html      |  61 +++++++++++++++++++
 style.css       |  55 ++++++++----------
 style_cards.css | 152 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 236 insertions(+), 32 deletions(-)
 create mode 100644 style_cards.css
diff --git a/index.html b/index.html
index 55ad557..055e3d7 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
 	
 	<!-- styles-->
 	<link rel="stylesheet" href="style.css">
+	<link rel="stylesheet" href="style_cards.css">
 	
 </head>
 <body>
@@ -60,6 +61,7 @@
 				<li><a href="#animatedbutton" id="menu-link">Animated Button</a></li>
 				<li><a href="#typewritereffect" id="menu-link">Typewriter Effect</a></li>
 				<li><a href="#mousefollow" id="menu-link">Mouse Follow</a></li>
+				<li><a href="#slidingcards" id="menu-link">Sliding Cards</a></li>
 			</ul>
 		</div>
 
@@ -184,6 +186,65 @@ <h5><ul class="inner-links">
 			
 		</div>
 
+		<a id="slidingcards"></a>
+		<div class="entry">
+			<div class="entry__meta">
+				<h6>Motion<span></span>#6</h6>
+				<h4>Sliding Cards</h4><br>
+				<h5><ul class="inner-links">
+					<li><a href="#top">Top <i class="fa-solid fa-arrow-turn-up"></i></a></li>
+				</ul>
+				</h5>
+			</div>
+			<figure class="entry__media">
+				
+				<div class="card_container">
+					<input type="radio" name="slide" id="c1" checked>
+					<label for="c1" class="card">
+						<div class="row">
+							<div class="icon">1</div>
+							<div class="description">
+								<h4>Winter</h4>
+								<p>The coldest season of the year</p>
+							</div>
+						</div>
+					</label>
+					<input type="radio" name="slide" id="c2" >
+					<label for="c2" class="card">
+						<div class="row">
+							<div class="icon">2</div>
+							<div class="description">
+								<h4>Spring</h4>
+								<p>The season after winter and before summer</p>
+							</div>
+						</div>
+					</label>
+					<input type="radio" name="slide" id="c3" >
+					<label for="c3" class="card">
+						<div class="row">
+							<div class="icon">3</div>
+							<div class="description">
+								<h4>Summer</h4>
+								<p>The warmest season of the year</p>
+							</div>
+						</div>
+					</label>
+					<input type="radio" name="slide" id="c4" >
+					<label for="c4" class="card">
+						<div class="row">
+							<div class="icon">4</div>
+							<div class="description">
+								<h4>Autumn</h4>
+								<p>The season after summer and before winter</p>
+							</div>
+						</div>
+					</label>
+				</div>
+				
+			</figure>
+			
+		</div>
+
 	</section>
 
 	<footer>
diff --git a/style.css b/style.css
index 30b7521..588eb73 100644
--- a/style.css
+++ b/style.css
@@ -82,11 +82,7 @@
 			margin: 0;
 		}
 
-		#typewriter,
-		 #cursor{
-			color: var(--color-accent);
-		}
-
+		
 		h6 {
 			color: var(--white-50);
 			font-size: 1.125rem;
@@ -99,7 +95,8 @@
 			min-height: 100dvh;
 		}
 
-		
+		/* video bg fading from bottom--------- */
+
 		#hero::after{
 			content:'';
 			position:absolute;
@@ -241,7 +238,8 @@
 
 		.entry {
 			display: grid;
-			grid-template-columns: .6fr 1.4fr;
+			/*grid-template-columns: .6fr 1.4fr;*/
+			grid-template-columns: .6fr 3fr;
 			align-items: center;
 			gap: 4rem;
 			margin-inline: 4rem;
@@ -255,7 +253,7 @@
 
 		.entry figure {
 			margin: 0;
-			padding: 6rem;
+			padding: 6rem 1.5rem 6rem 1.5rem;
 			/*background-color: var(--white-5);*/
 			display: flex;
 			justify-content: center;
@@ -287,7 +285,7 @@
 		}
 
 
-		/* sub menu ------------------------------------- */
+		/* sub menu --------------------------------------------------------- */
 
 		.has-submenu {
 			position: relative;
@@ -297,14 +295,6 @@
 			justify-content: flex-start;
 		}
 
-			/*
-		.has-submenu::after {
-			content: url('icons/icon-arrow-down.svg');
-			opacity: .6;
-			height: 25px;
-		}
-		*/
-
 		.has-submenu:hover ul {
 			display: block;
 		}
@@ -329,14 +319,7 @@
 			min-width: 15rem;
 			border-radius: .5rem;
 		}
-		/*
-		.has-submenu ul a::after {
-			content: url(icons/icon-arrow-right.svg);
-			height: 17px;
-			opacity: 0;
-		}
-		*/
-
+		
 		.has-submenu ul a:hover {
 			
 			background-color: var(--color-submenu-bg-hover);
@@ -400,7 +383,7 @@
 			transition-timing-function: ease-in-out;
 		}
 
-		/* Menu button and container----------------------------------------*/
+		/* Menu container and button ----------------------------------------*/
 		#menu-container {
 			position: absolute;
 			inset: 0;
@@ -447,7 +430,7 @@
 
 		
 		
-		/* menu button ---------------*/
+		/* menu button -----*/
 		
 		.button {
 			appearance: none;
@@ -493,7 +476,7 @@
 			transform: translate3d(0,-6px, 0) rotate(-45deg);
 		}
 
-		/* Hero video background ---------------------------- */
+		/* ero video background ------------------------------------------------ */
 
 		video {
 			position: absolute;
@@ -505,7 +488,7 @@
 			z-index: -3;
 		}
 
-		/* scroll down */
+		/* hero scroll down effect --------------------------------------- */
 
 		#scroll-down {
 			color: var(--gray-80);
@@ -602,7 +585,7 @@
 		}
 
 
-		/* Loader text (svg) --------------------------------------- */
+		/* Loader text (svg) ------------------------------------------------------ */
 
 		.text_loader svg {
 			width: 20rem;
@@ -673,7 +656,7 @@
 		}
 
 
-		/* Button animation loader --------------------------- */
+		/* Button animation loader -------------------------------------------- */
 
 		.button-animation .button {
 			width: 100%;
@@ -757,8 +740,16 @@
 			cursor: wait;
 		}
 
+		/* typewriter and cursor ---------------------------------------------- */
+		
+		#typewriter,
+		#cursor{
+			color: var(--color-accent);
+		}
 
-		/* mouse follow ------------------------------------------*/
+
+		/* mouse follow ------------------------------------------------------*/
+		
 		#debugger {
 			display: none;
 			visibility: hidden;
diff --git a/style_cards.css b/style_cards.css
new file mode 100644
index 0000000..60f397a
--- /dev/null
+++ b/style_cards.css
@@ -0,0 +1,152 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+	
+	
+	transition: var(--transition-delay);
+  
+}
+
+body.dark {
+  --accent-color: #eeeeea;
+  --background-color: #333;
+  --text-color: white;
+}
+
+.togglebutton {
+  background-color: var(--accent-color);
+  color: var(--button-text-color);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  padding: .5em 1em;
+  border-radius: .3em;
+  margin: 1rem;
+  border: none;
+  outline: none;
+  transition: var(--transition-delay);
+  transform: scale(1);
+}
+
+.togglebutton .icon {
+  margin-right: .5em;
+}
+
+.togglebutton:hover,
+.togglebutton:focus {
+  transform: scale(1.1);
+}
+
+.wrapper {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card_container {
+    height: 200px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: start;
+    /*border: 1px solid white;*/
+    
+    }
+
+.card {
+    width: 80px;
+    border-radius: .75rem;
+    background-size: cover;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: .75rem;
+    margin: 0 10px;
+    display: flex;
+    align-items: flex-end;
+    transition: .6s cubic-bezier(.28,-0.03,0,.99);
+    box-shadow: 0px 5px 20px -5px rgba(0,0,0,0.6);
+}
+
+.card > .row {
+    color: white;
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.card > .row > .icon {
+    /*background: #223;*/
+	background: #4682B4;
+    color: white;
+    border-radius: 15%;
+    width: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 15px;
+}
+
+.card > .row > .icon:hover{
+	box-shadow: 0px 5px 20px -5px rgba(0,0,0,0.6);
+}
+
+.card > .row > .description {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    overflow: hidden;
+    height: 80px;
+    width: 520px;
+    opacity: 0;
+    transform: translateY(30px);
+    transition-delay: .3s;
+    transition: all .3s ease;
+}
+
+.card > .row > .description p{
+        display: none;
+}
+
+.description p {
+    color: #FFFAF0;
+    padding-top: 5px;
+}
+
+.description h4 {
+    font-size: 1.5rem;
+    text-transform: uppercase;
+}
+
+input {
+    display: none;
+}
+
+input:checked + label {
+    width: 200px;
+}
+
+input:checked + label .description {
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+}
+
+.card[for="c1"] {
+    background-image: url('https://images.unsplash.com/photo-1453306458620-5bbef13a5bca?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+	
+}
+.card[for="c2"] {
+    background-image: url('https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+}
+.card[for="c3"] {
+    background-image: url('https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+}
+.card[for="c4"] {
+    background-image: url('https://images.unsplash.com/flagged/photo-1552863047-1dd55fb6f8fa?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+}
