Swiping Cards


by Jeremy Caudle
code

I didn't quite get to the point I wanted to with today's post. I'll have to tackle this another day, but I like the concept of swiping through a stack of cards. Though it may have few uses, I think it might be a fun way to display information on certain types of webpages, or it may even be useful in a game.

Title

Text here...

Title

Text here...

Title

Text here...

Title

Text here...

Title

Text here...

View the code:

HTML and JS 
<div class="wrapper">
        <div class="card-block">

            <div class="card">
                <h2>Title</h2>
                <img src="https://jeremycaudle.com/floorshotJC.jpeg" height="200" width="200">
                <footer>Text here...</footer>
            </div>

            <div class="card">
                <h2>Title</h2>
                <img src="https://jeremycaudle.com/floorshotJC.jpeg" height="200" width="200">
                <footer>Text here...</footer>
            </div>

            <div class="card">
                <h2>Title</h2>
                <img src="https://jeremycaudle.com/floorshotJC.jpeg" height="200" width="200">
                <footer>Text here...</footer>
            </div>

            <div class="card">
                <h2>Title</h2>
                <img src="https://jeremycaudle.com/floorshotJC.jpeg" height="200" width="200">
                <footer>Text here...</footer>
            </div>

            <div class="card">
                <h2>Title</h2>
                <img src="https://jeremycaudle.com/floorshotJC.jpeg" height="200" width="200">
                <footer>Text here...</footer>
            </div>

        </div>
        </div>
CSS 
.wrapper {
    background-color: black;
    padding: 1rem;
}

.card-block {
	width: 30ch;
	margin: 2rem auto;
    padding: 1rem;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: 0;
    scrollbar-track-color: transparent;
    border-radius: 1rem;
}

.card {
    scroll-snap-align: center;
    font-size: 18px;
	line-height: 1.5;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	border-radius: 1rem;
	border-right: solid 1px darkgray;
	border-left: solid 1px darkgray;
    margin-right: 1rem;
    min-width:30ch;
}

.card h2 {
	font-size: 2.25rem;
	font-weight: 900;
	margin: 0;
	padding: .5rem 1rem;
	background-color: darkgray;
	color: white;
    text-shadow: 2px 0 rgba(0,0,0,0.25);
	text-align: center;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
    text-transform: uppercase;
}

.card p {
line-height: 1.5;
background-color: white;
padding: 1rem;
}

.card img {
    display: block;
    opacity: .7;
    width: 100%;
    height: auto;
}

.card footer {
padding: .5rem 1rem;
background-color: darkgray;
color: #fff;
font-size: .75rem;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}

@supports (display: flex) {

.card-block {
    display: flex;
    flex-direction: row;
}

}

Tags