-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (67 loc) · 3.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dictionary project</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/e823734a38.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body class="d-flex flex-column align-items-center min-vh-100 min-vw-100">
<div class="container-fluid mx-auto page-wrapper d-flex flex-column justify-content-evenly mt-3">
<nav id="navbar" class="d-flex container-md justify-content-between align-items-center">
<i class="fa-solid fa-book"></i>
<span class="sun-moon-icons">
<i id="sun-icon" class="fa-solid fa-sun"></i>
<i id="moon-icon" class="fa-solid fa-cloud-moon"></i>
<span>Theme</span>
</span>
</nav>
<form action="" class="form-text container-fluid w-100 ms-0 mb-4 input-group">
<input id="search" class="form-control" type="search" name="search" id="search-bar" placeholder="Search" />
<button aria-label="form submit button" form-action="submit" class="input-group-text">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
<div id="word-container" class="w-100 d-flex justify-content-between align-items-baseline">
<h1 id="word" class="fw-bold">Word Here</h1>
<i id="play" class="fa-solid fa-play">
<audio src=""></audio>
</i>
</div>
<p id="enunciate" class="mt-2 link">/Sound thing here/</p>
<div class="part-of-speech d-flex justify-content-start w-100">
<span id="first-pos" class="fst-italic fs-6">Noun</span>
<hr class="border border-1 border-opacity-100 border-dark-subtle ms-3" />
</div>
<section class="meaning-box w-100">
<p class="fw-light">Meaning</p>
<ul id="first-list"></ul>
</section>
<section id="synonym-section" class="row">
<span class="col"> Synonyms </span>
<span id="synonym" class="col" href="">Synonym: </span>
</section>
<div class="part-of-speech d-flex justify-content-start w-100">
<span id="second-pos" class="fst-italic fs-6">Verb</span>
<hr class="border border-1 border-opacity-100 border-dark-subtle ms-3" />
</div>
<section class="meaning-box w-100">
<p class="fw-light">Meaning</p>
<ul id="second-list"></ul>
</section>
<p class="sourcURL row">
<span class="col">Source:</span>
<a id="source-link" class="col" href="http://">Source Url</a>
</p>
</div>
<a id="link" href="https://web-dev-jev-blogsite.ue.r.appspot.com/">Please check out my other projects</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="java.js"></script>
</body>
</html>