-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
46 lines (45 loc) · 2.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Smooth Curve</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- With Image -->
<article class="card">
<figure class="card__header">
<img class="card__header__bg" src="https://tinyurl.com/card-building-image" alt="building image" loading="lazy" draggable="false">
</figure>
<div class="card__body">
<h1 class="card__title">Your title goes here</h1>
<p class="card__text">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="card__icon" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
</svg>
Location goes here
</p>
<h2 class="card__sub-title">$100.50 <small class="text-small">/ per day</small></h2>
</div>
</article>
<!-- With Video -->
<article class="card">
<figure class="card__header">
<video class="card__header__bg card__header__bg--video" playsinline autoplay muted loop preload="none">
<source src="//cdn-cf-east.streamable.com/video/mp4/50t33i.mp4?Expires=1702330320&Signature=MODKH38dRhgh4kxNah~JGJphhsmhPW-C-C2ZCiluqXOw0wcY-50PSvV22lwlHrmuzhsJv9IOZBPy0VJ-YUfQGmCdIDUq8SCfh0WCm49MItBXXzQY~Ufs3oDIXMmPEBChArW4FzCJTTfUymqb2F-Y8cJCXE1vINGc3xLfsTluQYKt4YIdJXSHRRv5eiv4PNISravCEF0uuTwh44-UdiNq6HhWiqLyZUZSYG4tyr~6pZPvDKyVJFjNq-0VwMJGP4n27MN8~LhPTfXueqZoMW7YWVgRpEXkm1JKeEKjDHYXfI1xwd3u45CzqZFC8tHuEa4rKkU7Y4lp9NyVtDpF7wd8lA__&Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ" type="video/mp4" />
</video>
</figure>
<div class="card__body">
<h1 class="card__title">Your title goes here</h1>
<p class="card__text">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="card__icon" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
</svg>
Location goes here
</p>
<h2 class="card__sub-title">$100.50 <small class="text-small">/ per day</small></h2>
</div>
</article>
</body>
</html>