├── README.md
└── public
    ├── avatar.png
    ├── card.css
    └── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # Stacked Card List
2 | 
3 | A stacked card list inspired by css-tricks.com. 


--------------------------------------------------------------------------------
/public/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fireship-io/stacked-card-list/ef90458ff2d795e3ae6f993834208c18e081d320/public/avatar.png


--------------------------------------------------------------------------------
/public/card.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');
  2 | 
  3 | body {
  4 |     padding: 0;
  5 |     margin: 0;
  6 |     background-color: #17141d;
  7 |     color: white;
  8 |     font-family: 'DM Mono', monospace;
  9 | }
 10 | 
 11 | a {
 12 |     text-decoration: none;
 13 | }
 14 | 
 15 | .card-list {
 16 |     display: flex;
 17 |     padding: 3rem;
 18 |     overflow-x: scroll;
 19 | }
 20 | 
 21 | .card-list::-webkit-scrollbar {
 22 |     width: 10px;
 23 |     height: 10px;
 24 | }
 25 | .card-list::-webkit-scrollbar-thumb {
 26 |     background: #201c29;
 27 |     border-radius: 10px;
 28 |     box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
 29 | }
 30 | 
 31 | .card-list::-webkit-scrollbar-track {
 32 |     background: linear-gradient(90deg,#201c29,#201c29 1px,#17141d 0,#17141d);
 33 | }
 34 | 
 35 | 
 36 | .card {
 37 |     height: 350px;
 38 |     width: 400px;
 39 |     min-width: 250px;
 40 |     padding: 1.5rem;
 41 |     border-radius: 16px;
 42 |     background: #17141d;
 43 |     box-shadow: -1rem 0 3rem #000;
 44 |     display: flex;
 45 |     flex-direction: column;
 46 |     transition: .2s;
 47 |     margin: 0;
 48 |     scroll-snap-align: start;
 49 |     clear: both;
 50 |     position: relative;
 51 | }
 52 | 
 53 | .card:focus-within~.card, .card:hover~.card {
 54 |     transform: translateX(130px);
 55 | }
 56 | 
 57 | .card:hover {
 58 |     transform: translateY(-1rem);
 59 | }
 60 | 
 61 | .card:not(:first-child) {
 62 |     margin-left: -130px;
 63 | }
 64 | 
 65 | 
 66 | .card-header {
 67 |     margin-bottom: auto;
 68 | }
 69 | 
 70 | .card-header p {
 71 |     font-size: 14px;
 72 |     margin: 0 0 1rem;
 73 |     color: #7a7a8c;
 74 | }
 75 | 
 76 | .card-header h2 {
 77 |     font-size: 20px;
 78 |     margin: .25rem 0 auto;
 79 |     text-decoration: none;
 80 |     color: inherit;
 81 |     border: 0;
 82 |     display: inline-block;
 83 |     cursor: pointer;
 84 | }
 85 | 
 86 | .card-header h2:hover {
 87 |     background: linear-gradient(90deg,#ff8a00,#e52e71);
 88 |     text-shadow: none;
 89 |     -webkit-text-fill-color: transparent;
 90 |     -webkit-background-clip: text;
 91 |     background-clip: text;
 92 | }
 93 | 
 94 | .card-author {
 95 |     margin: 3rem 0 0;
 96 |     display: grid;
 97 |     grid-template-columns: 75px 1fr;
 98 |     align-items: center;
 99 |     position: relative;
100 | }
101 | 
102 | .author-avatar {
103 |     grid-area: auto;
104 |     align-self: start;
105 |     position: relative;
106 |     box-sizing: border-box;
107 | }
108 | 
109 | .author-avatar img {
110 |     width: 40px;
111 |     height: 40px;
112 |     border-radius: 50%;
113 |     filter: grayscale(100%);
114 |     display: block;
115 |     overflow: hidden;
116 |     margin: 16px 10px;
117 | }
118 | 
119 | .author-name {
120 |     grid-area: auto;
121 |     box-sizing: border-box;
122 | }
123 | 
124 | .author-name-prefix {
125 |     font-style: normal;
126 |     font-weight: 700;
127 |     color: #7a7a8c;
128 | }
129 | 
130 | .half-circle {
131 |     position: absolute;
132 |     bottom: 0;
133 |     left: 0;
134 |     width: 60px;
135 |     height: 48px;
136 |     fill: none;
137 |     stroke: #ff8a00;
138 |     stroke-width: 8;
139 |     stroke-linecap: round;
140 |     pointer-events: none;
141 | }
142 | 
143 | .tags {
144 |     margin: 1rem 0 2rem;
145 |     padding: .5rem 0 1rem;
146 |     line-height: 2;
147 |     margin-bottom: 0;
148 | }
149 | 
150 | .tags a {
151 |     font-style: normal;
152 |     font-weight: 700;
153 |     font-size: .5rem;
154 |     color: #7a7a8c;
155 |     text-transform: uppercase;
156 |     font-size: .66rem;
157 |     border: 3px solid #28242f;
158 |     border-radius: 2rem;
159 |     padding: .2rem .85rem .25rem;
160 |     position: relative;
161 | }
162 | 
163 | .tags a:hover {
164 |     background: linear-gradient(90deg,#ff8a00,#e52e71);
165 |     text-shadow: none;
166 |     -webkit-text-fill-color: transparent;
167 |     -webkit-background-clip: text;
168 |     -webkit-box-decoration-break: clone;
169 |     background-clip: text;
170 |     border-color: white;
171 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Cards</title>
  7 |     <link rel="stylesheet" href="card.css" />
  8 |   </head>
  9 |   <body>
 10 |  <section class="card-list">
 11 |       <article class="card">
 12 |         <header class="card-header">
 13 |           <p>Sep 11th 2020</p>
 14 |           <h2>Never forget</h2>
 15 |         </header>
 16 | 
 17 |         <div class="card-author">
 18 |           <a class="author-avatar" href="#">
 19 |             <img src="avatar.png" />
 20 |           </a>
 21 |           <svg class="half-circle" viewBox="0 0 106 57">
 22 |             <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
 23 |           </svg>
 24 | 
 25 |           <div class="author-name">
 26 |             <div class="author-name-prefix">Author</div>
 27 |             Jeff Delaney
 28 |           </div>
 29 |         </div>
 30 |         <div class="tags">
 31 |           <a href="#">html</a>
 32 |           <a href="#">css</a>
 33 |           <a href="#">web-dev</a>
 34 |         </div>
 35 |       </article>
 36 | 
 37 | 
 38 | 
 39 |       <article class="card">
 40 |         <header class="card-header">
 41 |           <p>Sep 11th 2020</p>
 42 |           <h2>Card Tricks are fun!</h2>
 43 |         </header>
 44 | 
 45 |         <div class="card-author">
 46 |           <a class="author-avatar" href="#">
 47 |             <img src="https://api.adorable.io/avatars/172/a.png" />
 48 |           </a>
 49 |           <svg class="half-circle" viewBox="0 0 106 57">
 50 |             <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
 51 |           </svg>
 52 | 
 53 |           <div class="author-name">
 54 |             <div class="author-name-prefix">Pirate</div>
 55 |             Zheng Zhilong
 56 |           </div>
 57 |         </div>
 58 |         <div class="tags">
 59 |           <a href="#">html</a>
 60 |           <a href="#">css</a>
 61 |         </div>
 62 |       </article>
 63 | 
 64 | 
 65 | 
 66 | 
 67 |       <article class="card">
 68 |         <header class="card-header">
 69 |           <p>Sep 11th 2020</p>
 70 |           <h2>Card Tricks are fun!</h2>
 71 |         </header>
 72 | 
 73 |         <div class="card-author">
 74 |           <a class="author-avatar" href="#">
 75 |             <img src="https://api.adorable.io/avatars/172/b.png" />
 76 |           </a>
 77 |           <svg class="half-circle" viewBox="0 0 106 57">
 78 |             <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
 79 |           </svg>
 80 | 
 81 |           <div class="author-name">
 82 |             <div class="author-name-prefix">Pirate</div>
 83 |             Francis Drake
 84 |           </div>
 85 |         </div>
 86 |         <div class="tags">
 87 |           <a href="#">html</a>
 88 |           <a href="#">css</a>
 89 |         </div>
 90 |       </article>
 91 | 
 92 |       <article class="card">
 93 |         <header class="card-header">
 94 |           <p>Sep 11th 2020</p>
 95 |           <h2>Card Tricks are fun!</h2>
 96 |         </header>
 97 | 
 98 |         <div class="card-author">
 99 |           <a class="author-avatar" href="#">
100 |             <img src="https://api.adorable.io/avatars/172/c.png" />
101 |           </a>
102 |           <svg class="half-circle" viewBox="0 0 106 57">
103 |             <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
104 |           </svg>
105 | 
106 |           <div class="author-name">
107 |             <div class="author-name-prefix">Pirate</div>
108 |             Edward Teach
109 |           </div>
110 |         </div>
111 |         <div class="tags">
112 |           <a href="#">html</a>
113 |           <a href="#">css</a>
114 |         </div>
115 |       </article>
116 | 
117 | 
118 |       <article class="card">
119 |         <header class="card-header">
120 |           <p>Sep 11th 2020</p>
121 |           <h2>Card Tricks are fun!</h2>
122 |         </header>
123 | 
124 |         <div class="card-author">
125 |           <a class="author-avatar" href="#">
126 |             <img src="https://api.adorable.io/avatars/172/d.png" />
127 |           </a>
128 |           <svg class="half-circle" viewBox="0 0 106 57">
129 |             <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
130 |           </svg>
131 | 
132 |           <div class="author-name">
133 |             <div class="author-name-prefix">Pirate</div>
134 |             William Kidd
135 |           </div>
136 |         </div>
137 |         <div class="tags">
138 |           <a href="#">html</a>
139 |           <a href="#">css</a>
140 |         </div>
141 |       </article>
142 | 
143 |       <article class="card">
144 |         <header class="card-header">
145 |           <p>Sep 11th 2020</p>
146 |           <h2>Card Tricks are fun!</h2>
147 |         </header>
148 | 
149 |         <div class="card-author">
150 |           <a class="author-avatar" href="#">
151 |             <img src="https://api.adorable.io/avatars/172/d.png" />
152 |           </a>
153 |           <svg class="half-circle" viewBox="0 0 106 57">
154 |             <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
155 |           </svg>
156 | 
157 |           <div class="author-name">
158 |             <div class="author-name-prefix">Pirate</div>
159 |             William Kidd
160 |           </div>
161 |         </div>
162 |         <div class="tags">
163 |           <a href="#">html</a>
164 |           <a href="#">css</a>
165 |         </div>
166 |       </article>
167 | 
168 |       <article class="card">
169 |         <header class="card-header">
170 |           <p>Sep 11th 2020</p>
171 |           <h2>Card Tricks are fun!</h2>
172 |         </header>
173 | 
174 |         <div class="card-author">
175 |           <a class="author-avatar" href="#">
176 |             <img src="https://api.adorable.io/avatars/172/d.png" />
177 |           </a>
178 |           <svg class="half-circle" viewBox="0 0 106 57">
179 |             <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
180 |           </svg>
181 | 
182 |           <div class="author-name">
183 |             <div class="author-name-prefix">Pirate</div>
184 |             William Kidd
185 |           </div>
186 |         </div>
187 |         <div class="tags">
188 |           <a href="#">html</a>
189 |           <a href="#">css</a>
190 |         </div>
191 |       </article>
192 | 
193 | 
194 | 
195 |  </section>
196 |   </body>
197 | </html>
198 | 


--------------------------------------------------------------------------------