-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (83 loc) · 2.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thesaurus API</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Righteous|Indie+Flower|Courgette|Josefin+Sans" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="wrapper">
<div class="half-wrapper">
<div class="section top-left flip-card">
<div class="flip-card-inner" id="word">
<div class="flip-card-f" id="word">
<form class="word-form" action="">
<input class="userWord" type="text" autocomplete="off" name="word" placeholder="Type your word! Adjectives work best :)" required>
<p class="no-result hide">No results 🤷♀️ Try another word!</p>
<input class="submit" type="submit" name="submit">
</form>
</div>
<div class="flip-card-b" id="word">
<button class="new-word-button">New Word</button>
<h2 class="chosen-word rainbow-text">
<!-- chosen word goes here -->
</h2>
</div>
</div>
</div>
<!-- Definition Card -->
<div class="section top-right flip-card">
<div class="flip-card-inner" id="def">
<div class="flip-card-front" id="def">
<h2 class="def-title fade">Definitions</h2>
<i class="fas fa-arrow-circle-right front-arrow hide" id="def"></i>
</div>
<div class="flip-card-back" id="def">
<ul class="word-list definition-list fade">
<!-- definitions go here -->
</ul>
<i class="fas fa-arrow-circle-right back-arrow hide" id="def"></i>
</div>
</div>
</div>
</div>
<!-- Antonyms Card -->
<div class="half-wrapper">
<div class="section bottom-left flip-card">
<div class="flip-card-inner" id="ant">
<div class="flip-card-front" id="ant">
<h2 class="ant-title fade">Antonyms</h2>
<i class="fas fa-arrow-circle-right front-arrow hide" id="ant"></i>
</div>
<div class="antonyms flip-card-back" id="ant">
<ul class="word-list antonym-list fade">
<!-- antonyms go here -->
</ul>
<i class="fas fa-arrow-circle-right back-arrow hide" id="ant"></i>
</div>
</div>
</div>
<!-- Synonyms Card -->
<div class="section bottom-right flip-card">
<div class="flip-card-inner" id="syn">
<div class="flip-card-front" id="syn">
<h2 class="syn-title fade">Synonyms</h2>
<i class="fas fa-arrow-circle-right front-arrow hide" id="syn"></i>
</div>
<div class="synonyms flip-card-back" id="syn">
<ul class="word-list synonym-list fade">
<!-- synonyms go here -->
</ul>
<i class="fas fa-arrow-circle-right back-arrow hide" id="syn"></i>
</div>
</div>
</div>
</div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>