web-html5-scripts/cards/expanding-flex-cards/index.html

82 lines
3.0 KiB
HTML
Raw Permalink Normal View History

2020-01-20 21:00:54 +01:00
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Expanding flex cards</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://static.fontawesome.com/css/fontawesome-app.css'>
<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.2.0/css/all.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700'><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="options">
<div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-walking"></i>
</div>
<div class="info">
<div class="main">Blonkisoaz</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-snowflake"></i>
</div>
<div class="info">
<div class="main">Oretemauw</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-tree"></i>
</div>
<div class="info">
<div class="main">Iteresuselle</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-tint"></i>
</div>
<div class="info">
<div class="main">Idiefe</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-sun"></i>
</div>
<div class="info">
<div class="main">Inatethi</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="./script.js"></script>
</body>
</html>