You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.1 KiB
HTML
73 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Card Hover Interaction</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<figure class="card card--1" style="--image-src: url('https://source.unsplash.com/78A265wPiO4')">
|
|
<figcaption>
|
|
<span class="info">
|
|
<h3>The Hills</h3>
|
|
<span>by David Marcu</span>
|
|
</span>
|
|
<span class="links">
|
|
<a href="#"><i class="fas fa-heart"></i></a>
|
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
|
<a href="https://unsplash.com/photos/78A265wPiO4" target="_blank"><i class="fas fa-share"></i></a>
|
|
</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="card card--2" style="--image-src: url('https://source.unsplash.com/TFyi0QOx08c')">
|
|
<figcaption>
|
|
<span class="info">
|
|
<h3>The Forest</h3>
|
|
<span>by Jay Mantri</span>
|
|
</span>
|
|
<span class="links">
|
|
<a href="#"><i class="fas fa-heart"></i></a>
|
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
|
<a href="https://unsplash.com/photos/TFyi0QOx08c" target="_blank"><i class="fas fa-share"></i></a>
|
|
</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="card card--3" style="--image-src: url('https://source.unsplash.com/PP8Escz15d8')">
|
|
<figcaption>
|
|
<span class="info">
|
|
<h3>The Desert</h3>
|
|
<span>by Keith Hardy</span>
|
|
</span>
|
|
<span class="links">
|
|
<a href="#"><i class="fas fa-heart"></i></a>
|
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
|
<a href="https://unsplash.com/photos/PP8Escz15d8" target="_blank"><i class="fas fa-share"></i></a>
|
|
</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="card card--4" style="--image-src: url('https://source.unsplash.com/DLwUVlzrP0Q')">
|
|
<figcaption>
|
|
<span class="info">
|
|
<h3>The Ocean</h3>
|
|
<span>by Dan Stark</span>
|
|
</span>
|
|
<span class="links">
|
|
<a href="#"><i class="fas fa-heart"></i></a>
|
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
|
<a href="https://unsplash.com/photos/DLwUVlzrP0Q" target="_blank"><i class="fas fa-share"></i></a>
|
|
</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|