Untuk menampilkan CSS Card secara horizontal kita dapat membuatnya dengan coding berikut ini.
<!doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Vertical Cards</title>
<style>
html, body {
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
margin:0;padding:0;
}
header {
overflow: hidden;
background-color:#1A237E;
color:#ffffff;
padding: 10px;
text-align: center;
font: bold 25px Roboto;
}
nav {
background-color:#3F51B5;
padding: 5px;
text-align: center;
}
select {
border: 0;
font: 20px Roboto;
}
article {
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: max-content;
grid-auto-flow: row dense;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 95%;
margin:10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 10px;
}
footer {
position: relative;
left: 0;
bottom: 0;
padding: 2px 0;
height: 40px;
width: 100%;
background-color:#1A237E;
color: white;
text-align: center;
font: 12px Arial;
}
@keyframes spin {to {stroke-dashoffset:-264;}}
.spinner circle {
fill: none;
stroke: yellow;
stroke-width: 16;
stroke-linecap: round;
stroke-dasharray: 0, 0, 70, 194;
stroke-dashoffset: 0;
animation: spin 1s infinite linear;
}
</style>
</head>
<body>
<header>CSS Vertical Cards</header>
<nav>
<select id="sources" onchange='document.getElementById("spinner").style.display="inline";'>
<option value="cat1">Category 1</option>
<option value="cat2">Category 2</option>
<option value="cat3">Category 3</option>
<option value="cat4">Category 4</option>
<option value="cat5">Category 5</option>
</select>
<svg id="spinner" class="spinner" viewBox="0 0 100 100" width="20" height="20" style="display:none;">
<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)"></circle></svg>
</nav>
<article>
<div class="card">
<img src="https://cdn.mos.cms.futurecdn.net/8pa9E97uBFicnzfDGWcuFW-1200-80.jpg" alt="Amazon Echo Show review" style="width:100%">
<div class="container">
<a href="https://www.techradar.com/reviews/amazon-echo-show-review">
<h3>Amazon Echo Show review</h3></a>
<p>This isn't Amazon's first entry into the world of smart screens – the company has two smart screen products currently on the market - the original Echo Show and the smaller Echo Spot. While the Spot is an incredibly cute, quirky little guy with charm in spade…..</p>
</div>
</div>
<div class="card">
<img src="https://cdn.mos.cms.futurecdn.net/kdjAsfBqajhQR2ZFTu7CAb-1200-80.jpg" alt="Your iPad Pro might have a bend but it’s not a defect" style="width:100%">
<div class="container">
<a href="https://www.techradar.com/news/your-ipad-pro-might-have-a-bend-but-its-not-a-defect">
<h3>Your iPad Pro might have a bend but it’s not a defect</h3></a>
<p>Back in November we started hearing reports that some of Apple’s latest iPads – the iPad Pro 11 and iPad Pro 12.9 (2018) - were exhibiting slight bends, either straight out of the box or after normal use. Now, Apple has responded to these claims, admitting th…..</p>
</div>
</div>
<div class="card">
<img src="https://cdn.mos.cms.futurecdn.net/ugAWR3oUmPFtzrKs5ptJwP-1200-80.jpg" alt="PlayStation Classic drops to just $75 on Amazon" style="width:100%">
<div class="container">
<a href="https://www.techradar.com/news/playstation-classic-drops-to-just-dollar75-on-amazon">
<h3>PlayStation Classic drops to just $75 on Amazon</h3></a>
<p>Sony’s PlayStation Classic is an amazing device, but we found it doesn’t quite measure up to Nintendo’s NES and SNES nostalgia boxes. Namely, the PS1 revival machine’s games catalog left out some of heavy-hitters. But, thanks to a $25 off deal on Amazon right…..</p>
</div>
</div>
<div class="card">
<img src="https://cdn.mos.cms.futurecdn.net/tpDMjdzhEQ4Fe2czRELHhH-1200-80.jpg" alt="HP Spectre Folio review" style="width:100%">
<div class="container">
<a href="https://www.techradar.com/reviews/hp-spectre-folio-review">
<h3>HP Spectre Folio review</h3></a>
<p>When HP unveiled the HP Spectre Folio earlier this year, it made some big claims about how the 2-in-1 laptop would reinvent the PC. That’s a pretty huge promise, especially as we’ve seen a number of innovative designs that have changed how we think about PCs.…..</p>
</div>
</div>
<div class="card">
<img src="https://cdn.mos.cms.futurecdn.net/fPJqvxAMVtc46AyzAKVPbX-1200-80.jpg" alt="TechRadar's Holiday Gift Guide 2018" style="width:100%">
<div class="container">
<a href="https://www.techradar.com/best/holiday-gift-guide-2018">
<h3>TechRadar's Holiday Gift Guide 2018</h3></a>
<p>The TechRadar editorial team spends all year testing and writing about gadgets so that you, the consumer, know about the best gadgets to buy. And there's no more important time for us than Black Friday and Cyber Monday. It's when we see our tech buying advice…..</p>
</div>
</div>
<div class="card">
<img src="https://cdn.mos.cms.futurecdn.net/FtQZs2si8P9CozVhQ8W56c-1200-80.jpg" alt="10 ways to stay connected on the go without your smartphone" style="width:100%">
<div class="container">
<a href="https://www.techradar.com/news/10-ways-to-stay-connected-on-the-go-without-your-smartphone">
<h3>10 ways to stay connected on the go without your smartphone</h3></a>
<p>Ten years after the first iPhone burst onto the scene, defining the smartphone, more than a billion people across the world use a smartphone every day, and in the west roughly two-thirds of the population have committed to the ‘smart’ life. From breakfast to …..</p>
</div>
</div>
</article>
<footer><p>CSS Card Vertical © 2019</p></footer>
</body>
</html>
Selamat mencoba. Semoga berhasil.