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.
82 lines
3.0 KiB
HTML
82 lines
3.0 KiB
HTML
<!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>
|