Repository: webtutorialsw/css_sliding_cards
Branch: master
Commit: 73e6f79aae4e
Files: 3
Total size: 4.0 KB
Directory structure:
gitextract_i4m5tu3f/
├── README.md
├── index.html
└── style.css
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
# Stunning HTML & CSS Card Animation
Full tutorial here: https://www.youtube.com/watch?v=45mnmy2JUl0
Sliding images (not in repo): https://wirestock.io/james591
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Animated Flex Cards</title>
</head>
<body>
<div class="wrapper">
<div class="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>Winter has so much to offer -
creative activities</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>Digital Technology</h4>
<p>Gets better every day -
stay tuned</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>Globalization</h4>
<p>Help people all over the world</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>New technologies</h4>
<p>Space engineering becomes
more and more advanced</p>
</div>
</div>
</label>
</div>
</div>
</body>
</html>
================================================
FILE: style.css
================================================
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #eeeeea;
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
height: 400px;
display: flex;
flex-wrap: nowrap;
justify-content: start;
}
.card {
width: 80px;
border-radius: .75rem;
background-size: cover;
cursor: pointer;
overflow: hidden;
border-radius: 2rem;
margin: 0 10px;
display: flex;
align-items: flex-end;
transition: .6s cubic-bezier(.28,-0.03,0,.99);
box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
}
.card > .row {
color: white;
display: flex;
flex-wrap: nowrap;
}
.card > .row > .icon {
background: #223;
color: white;
border-radius: 50%;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 15px;
}
.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;
}
.description p {
color: #b0b0ba;
padding-top: 5px;
}
.description h4 {
text-transform: uppercase;
}
input {
display: none;
}
input:checked + label {
width: 600px;
}
input:checked + label .description {
opacity: 1 !important;
transform: translateY(0) !important;
}
.card[for="c1"] {
background-image: url('./img1.jpeg');
}
.card[for="c2"] {
background-image: url('./img2.jpeg');
}
.card[for="c3"] {
background-image: url('./img3.jpeg');
}
.card[for="c4"] {
background-image: url('./img4.jpeg');
}
gitextract_i4m5tu3f/ ├── README.md ├── index.html └── style.css
Condensed preview — 3 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4K chars).
[
{
"path": "README.md",
"chars": 192,
"preview": "# Stunning HTML & CSS Card Animation\n\n\n\nFull tutorial here: https://www.youtube.com/watch?v=4"
},
{
"path": "index.html",
"chars": 2077,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "style.css",
"chars": 1796,
"preview": "* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n}\n\nbody {\n"
}
]
About this extraction
This page contains the full source code of the webtutorialsw/css_sliding_cards GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 3 files (4.0 KB), approximately 1.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.