forked from km776/frogspawn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (92 loc) · 4.87 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE HTML>
<title> frogspawn </title>
<head>
<style>
body {
background-image: url("./assets/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
background-blend-mode: soft-light;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/index.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<title>Bootstrap demo</title>
</head>
<body style="background-color:#222529;">
<!-- nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="background-color: #222529;">
<div class="container-fluid">
<img class="logo d-inline" width="75" height="50" src="assets/frogcord.svg" alt="frog logo">
<a class="navbar-brand" href="index.html"> frogspawn</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-text collapse navbar-collapse" id="navbarNavDropdown">
<ul class="ms-auto navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"><u>home</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://km776.notion.site/meet-the-team-behind-frogspawn-0e4f07f529c349eb9402310ba0e7062c">meet the team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.google.com/document/d/1da70852AdqlNaTckDAjo_ZmEx3fXvTxzTW2NgjAcIaw/edit?usp=sharing">the process</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="title-container">
<div class="text-center">
<img src="assets/frogcord.svg" alt="frogcord" style="width:100px">
<h1 class="frogsinSTEM">frogspawn</h1>
</div>
</div>
<div class="container-sm">
<div class="spaced-sections">
<div class="rounded-rectangle text-wrap" id="test1">
<p style="color: white;">
Something bugs us about frogs, and it’s not just the amount of
puns they have to offer. Around 29% of frog species are
threatened, according to the 2012 IUCN Red List. frogspawn is
a Discord bot which aims to raise awareness and educate people
on endangered frog species. It is a gacha-type game that allows
users to “collect” frogs and learn about new frog species. </p>
</div>
<div class="rounded-rectangle" id="test1">
<p style="color: white;">
This bot will also send links for users to be able to donate to
environmental conservation websites. If you’re interested in
adding frogspawn to your server, please click the button below:
<a class="btn btn-dark d-block" id="serverbutton" href="https://discord.com/api/oauth2/authorize?client_id=1023319272266682408&permissions=275951733824&scope=bot" role="button">add frogspawn to your server here!</a>
</p>
</div>
<div class="disc-img text-wrap" id="test1">
<img src="assets/disclmg.svg" alt="discImg" style="width:100%">
</div>
</div>
<div class="spaced-sections">
<div class="rounded-rectangle" id="test1">
<p style="color: white;">
There are three rarities of frogs: 3 star, 4 star, and 5 star frogs
that correspond to their endangerment level, critically endangered
frogs being 5 stars. The the frog card will show a certain number of ★
symbols.Each frog card contains the species name, scientific name,
rarity, and a small description of your new frog friend.
</p>
</div>
<div class="disc-img" id="test1">
<img src="assets/discImg2.jpeg" alt="discImg2" style="width: 95%;">
</div>
<div class="disc-img" id="test1">
<img src="assets/discImg3.jpeg" alt="discImg3" style="width: 95%;">
</div>
</div>
</div>
<!--Comment-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>