forked from szymonpopio/discordbot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (118 loc) · 6.45 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<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="icon" type="image/x-icon" href="kh1.png">
<title>Disaster Bot Home Page</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="header">
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<i class="fas fa-key px-2"></i>
<span class="fs-4">Disaster Bot</span>
</a>
</div>
</section>
<section id="hero" class="bg-dark text-light">
<div class="px-4 py-5 text-center">
<img class="d-block mx-auto mb-4" src="kh1.png" alt="Disaster bot logo" height="150px">
<h1 class="display-1 fw-bold">Disaster Bot</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Disaster bot is a Discord bot made by <b> Helene Amlo, Szymon Popiolek and Jakob Danielsen.</b> It´s a bot made for school purposes but hopefully may be utilized for everyday discord usage</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<!-- <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> -->
</div>
</div>
</div>
</section>
<section id="features">
<div class="container px-4 py-5" id="hanging-icons">
<h2 class="pb-2 border-bottom">Features</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<i class="fas fa-users pe-3 fa-3x mb-3"></i>
<div>
<h2>Microsoft Teams API Fetching</h2>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Click to learn more
</a>
</div>
</div>
<div class="col d-flex align-items-start">
<i class="fab fa-bitcoin pe-3 fa-3x mb-3"></i>
<div>
<h2>Real time Cryptocurrency calculators</h2>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Click to learn more
</a>
</div>
</div>
<div class="col d-flex align-items-start">
<i class="fas fa-gamepad pe-3 fa-3x mb-3"></i>
<div>
<h2>Mini games</h2>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Click to learn more
</a>
</div>
</div>
</div>
</div>
</section>
<section id="car" class="text-center">
<h2 class="pb-2 border-bottom" >About us</h2>
<div class="row">
<div class="col-lg-4">
<img src="H.png" class="my-5 rounded-circle" height="140px" height="140px" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title></img>
<h2>Helene</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
<p><a class="btn btn-secondary" href="#">View details»</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="J.png" class="my-5 rounded-circle" height="140px" height="140px" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title></img>
<h2>Jakob</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
<p><a class="btn btn-secondary" href="#">View details»</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="s.png" class="my-5 rounded-circle" height="140px" height="140px" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title></img>
<h2>Szymon</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a class="btn btn-secondary" href="#">View details»</a></p>
</div><!-- /.col-lg-4 -->
</div>
</section>
<section id="discord-widget">
<h2 class="pb-2 border-bottom">Documentation timeline</h2>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 text-white bg-dark rounded-3" >
<h2>Join our documentation discord server!</h2>
<p>Join and watch how we communicated and how we bug tested our bot!</p>
</div>
</div>
<div class="col-md-6">
<div class="h-100">
<iframe src="https://discord.com/widget?id=915162759971352596&theme=dark" width="100%" height="300px" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
</div>
</div>
</div>
</section>
</body>
</html>