75 lines
2.2 KiB
HTML
75 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
|
crossorigin="anonymous" /> -->
|
|
<link rel="stylesheet" href="style.css" />
|
|
<title>Day 1 - Expanding Cards</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<input type="radio" name="images" id="img-01" class="img-toggle" />
|
|
<label
|
|
for="img-01"
|
|
class="panel"
|
|
style="
|
|
background-image: url(https://images.unsplash.com/photo-1508672019048-805c876b67e2?w=1350);
|
|
"
|
|
>
|
|
<h3>Explore The World</h3>
|
|
</label>
|
|
<input type="radio" name="images" id="img-02" class="img-toggle" />
|
|
|
|
<label
|
|
for="img-02"
|
|
class="panel"
|
|
style="
|
|
background-image: url(https://images.unsplash.com/photo-1485123263479-f5ea30a2f92d?w=1350);
|
|
"
|
|
>
|
|
<h3>Winter in Sweden</h3>
|
|
</label>
|
|
|
|
<input type="radio" name="images" id="img-03" class="img-toggle" />
|
|
|
|
<label
|
|
for="img-03"
|
|
class="panel"
|
|
style="
|
|
background-image: url(https://images.unsplash.com/photo-1585392569893-c33ab1e3f3f5?w=1350);
|
|
"
|
|
>
|
|
<h3>Summer in Australia</h3>
|
|
</label>
|
|
<input type="radio" name="images" id="img-04" class="img-toggle" />
|
|
<label
|
|
for="img-04"
|
|
class="panel"
|
|
style="
|
|
background-image: url(https://images.unsplash.com/photo-1534430480872-3498386e7856?w=1350);
|
|
"
|
|
>
|
|
<h3>New York</h3>
|
|
</label>
|
|
<input type="radio" name="images" id="img-05" class="img-toggle" />
|
|
<label
|
|
for="img-05"
|
|
class="panel"
|
|
style="
|
|
background-image: url(https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?w=1350);
|
|
"
|
|
>
|
|
<h3>South East Asia</h3>
|
|
</label>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|