33 lines
1.4 KiB
HTML
33 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" >
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Hover effect: borders to underlines</title>
|
||
<link rel="stylesheet" href="./style.css">
|
||
</head>
|
||
<body>
|
||
<!-- partial:index.partial.html -->
|
||
<figure class="card" tabindex="0">
|
||
<img class="card-image" src="https://images.unsplash.com/photo-1503475173304-5d340b3e30dc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
|
||
<div class="box">
|
||
<div class="box-side-borders"></div>
|
||
<blockquote class="text">“Don't be into trends. Don't make fashion own you, but you decide what you are, what you want to express by the way you dress and the way to live.”</blockquote>
|
||
</div>
|
||
<figcaption>
|
||
<cite class="cite">— Gianni Versace —</cite>
|
||
</figcaption>
|
||
</figure>
|
||
<figure class="card dark" tabindex="0">
|
||
<img class="card-image" src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
||
<div class="box">
|
||
<div class="box-side-borders"></div>
|
||
<blockquote class="text">“Style is the only thing you can’t buy. It’s not in a shopping bag, a label, or a price tag. It’s something reflected from our soul to the outside world — an emotion.”</blockquote>
|
||
</div>
|
||
<figcaption>
|
||
<cite class="cite">— Alber Elbaz —</cite>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- partial -->
|
||
|
||
</body>
|
||
</html> |