-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
68 lines (63 loc) · 3.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chuck's Jokes</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Wrapper -->
<div class="wrapper">
<!-- Header -->
<nav class="header">
<h1><a href="/">Chuck's Jokes</a></h1>
<img class="img-header" src="/img/chuck_norris_approved.png" alt="image: chuck norris approved">
</nav>
<div class="container">
<div class="joke-container" id="joke-container">
<!-- Joke -->
<div class="joke-text">
<i class="fas fa-quote-left"></i>
<span id="joke"></span>
<i class="fas fa-quote-right"></i>
</div>
<div>
<button class="btn-twitter" id="btn-twitter" title="Tweet it!">
<i class="fab fa-twitter"></i>
</button>
</div>
</div>
<div class="input-container">
Type to search or leave it empty for a random joke: <br>
<input type="text" id="input-search">
<button id="btn-new-joke" title="Get a new joke!">New joke</button>
<button id="btn-clear">Clear</button>
</div>
<!-- Message -->
<div class="message"></div>
<!-- Loader -->
<div class="loader" id="loader"></div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<p>
<a href="https://github.com/guinuxbr/" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://twitter.com/guinuxbr" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/in/gllmarques/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.instagram.com/guinuxbr" target="_blank"><i class="fab fa-instagram"></i></a><br>
<a href="https://guinuxbr.com" target="_blank">GuinuxBR</a><br>
Jokes powered by <a href="https://api.chucknorris.io/" target="_blank">chucknorris.io</a>
</p>
<span class="disclaimer">Legal disclaimer: This website and its creators are not affiliated with Chuck Norris, any motion picture corporation, any television corporation, parent, or affiliate corporation. All motion pictures, products, and brands mentioned on this website are the respective trademarks and copyrights of their owners. All material on this website is intended for humorous entertainment (satire) purposes only. The content on this website is not necessarily true and should not be regarded as truth.</span>
</footer>
<!-- Script -->
<script src="js/script.js"></script>
</body>
</html>