-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (65 loc) · 3.58 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
<!DOCTYPE html>
<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/692524ab42.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/style.css">
<link rel="stylesheet" href="./static/css/animation.css">
<link rel="icon" href="./static/images/icons8-child-with-pacifier-100.png" type="image/x-icon">
<title>Akan-name-generator</title>
</head>
<body>
<div class="container-fluid ">
<div class="container-fluid ">
<div class=" container d-flex flex-column justify-content-center form-container">
<div class="akan">
<h1 class="t-h">Akan Name</h1>
</div>
<div class=" top-p">
<p class="p-txt">The Akan people of Ghana frequently name their children after the day of the week they were born and the order in which they were born. These "day names" have further meanings concerning the soul and character of the person. click <a href="https://www.behindthename.com/names/usage/akan">here</a> to check akan names and meaning.<br> This is a web application that takes a user's birthday and calculates the day of the week they were born and then depending on their gender outputs their Akan Name.
<div>
<button class="btn btn-warning gen-button">Generate My Akan Name!</button>
</div>
</div>
</div>
<div class=" container-fluid fom-cont">
<form id="form" class="position-relative p-3 frm-container">
<div class="position-absolute top-2 clossing">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="mb-3">
<label for="day" class="form-label">Day Of Birth</label>
<input type="number" class="form-control" id="day" required>
<div class="mb-3">
<label for="month" class="form-label">Month Of Birth</label>
<input type="number" class="form-control" id="month" required>
</div>
<div class="mb-3">
<label for="year" class="form-label">Year Of Birth</label>
<input type="number" class="form-control" id="year" required>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="male" required>
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="female" value="option2">
<label class="form-check-label" for="female">Female</label>
</div>
<div class="form-check form-check-inline">
</div>
<div><button type="submit" id="submit" class="btn btn-primary">Submit</button></div>
</form>
</div>
<div class="container mt-2 output ">
<p id="output"></p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="./static/js/script.js"></script>
</body>
</html>