This repository was archived by the owner on Jun 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
77 lines (75 loc) · 3.14 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!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" />
<title>The Best Cat Page!</title>
<link rel="icon" href="./icon.svg" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<h1>Welcome to the best collaborative cat page!</h1>
</div>
</nav>
<header>
<p>We want to make sure that you have the best experience possible!</p>
<p>
If you want to contribute, you can do it
<a href="https://github.com/ChristianECG/TheBestCatPage">here</a>.
</p>
<p>We are beginning friendly!</p>
</header>
<main id="app">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col" v-for="cat in printableCats">
<div class="card">
<img class="card-img-top" :src="cat.url" :alt="cat.username" />
<div class="card-body">
<div class="user-container">
<div class="user-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h5 class="card-title"><a :href="`https://github.com/${cat.username}`">{{cat.username}}</a></h5>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<svg
height="100%"
width="100%"
id="svg"
viewBox="0 0 1440 400"
xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150"
>
<path
d="M 0,400 C 0,400 0,133 0,133 C 154.2666666666667,117.26666666666667 308.5333333333334,101.53333333333333 465,107 C 621.4666666666666,112.46666666666667 780.1333333333334,139.13333333333333 943,147 C 1105.8666666666666,154.86666666666667 1272.9333333333334,143.93333333333334 1440,133 C 1440,133 1440,400 1440,400 Z"
stroke="none"
stroke-width="0"
fill="#22a6f1"
></path>
<path
d="M 0,400 C 0,400 0,266 0,266 C 153.33333333333337,266.5333333333333 306.66666666666674,267.06666666666666 456,261 C 605.3333333333333,254.93333333333334 750.6666666666665,242.26666666666668 914,242 C 1077.3333333333335,241.73333333333332 1258.6666666666667,253.86666666666667 1440,266 C 1440,266 1440,400 1440,400 Z"
stroke="none"
stroke-width="0"
fill="#0084cfff"
></path>
</svg>
<footer>With ❤️ from Mexico and the Internet, to the World 🌎</footer>
</body>
<script src="./script.js"></script>
</html>