-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (124 loc) · 5.24 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
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<title>Akan Name</title>
<meta charset="utf8">
<script src="https://kit.fontawesome.com/3a068c1444.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script defer src="js/script.js"></script>
<link rel="icon" href="img/icon.png">
</head>
<body>
<nav class="navbar navbar-light fixed-top">
<a class="navbar-brand" href="#">
<img src="https://fontmeme.com/permalink/200821/098d2ebc56e62ec44a59414e8f6ec83c.png" alt="african-style-font" height="30" alt="" loading="lazy">
</a>
</nav>
<div class="container">
<h1 id="about-tt"> What are Akan names?</h1>
<p id="about-b">In West Africa, newborns are given special names depending on the day they are born. Diverse ethnicities have variants and meanings as a symbol of cultural integrity and ancestral affiliation.</p>
<p id="about-b">The Akan people use the Kwa language group’s system of timekeeping, which is based on a six-day week (‘nnanson‘), with the seventh day inclusive.</p>
<a href="#form-c"><button type="button" class="btn btn-outline-danger" id="about-b">Get Akan Name</button></a>
</div>
<div class="container">
<h1 id="about-tt">Day Names</h1>
<table class="table table-hover">
<thread>
<tr>
<th id="table-head">Day Born</th>
<th id="table-head">Male Name</th>
<th id="table-head">Female Name</th>
</tr>
</thread>
<tbody id="about-b">
</tr>
<td>Monday</td>
<td>Kwadwo</td>
<td>Adwoa</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Kwabena</td>
<td>Abena, Abina, Abenaa</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Kwaku</td>
<td>Akua</td>
</tr>
<tr>
<td>Thursday</td>
<td>Yaw</td>
<td>Yaa</td>
</tr>
<tr>
<td>Friday</td>
<td>Kofi, Koffi</td>
<td>Afua</td>
</tr>
<tr>
<td>Saturdday</td>
<td>Kwame</td>
<td>Ama, Amma</td>
</tr>
<tr>
<td>Sunday</td>
<td>Kwasi</td>
<td>Akosua</td>
</tr>
</tbody>
</table>
</div>
<div class="container" id="form-c">
<div class="header" id="about-tt">
<h2>Whats your akan name</h2>
</div>
<form class="form" id="form">
<div class="form-control ">
<label for="year">Year of Birth</label><br>
<input type="number" id="year" placeholder="yyyy">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control ">
<label for="month">Month of birth</label><br>
<input type="number" id="month" placeholder="mm">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="dob">Day of Month</label><br>
<input type="number" id="dob" placeholder="DD">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="sel1">Gender:</label>
<select id="sel1">
<option value="" selected disabled hidden>Select gender</option>
<option>Male</option>
<option>Female</option>
</select>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button class="btn btn-outline-danger">Let's Go!</button>
</form>
<div class="akan" id="akan">
<p>Your were born on a <span id="dayb"> text</span>.<br> Your Akan name is <span id="akanN"> txt</span><br> which means: <span id="meaning"></span>.</p>
<button class="btn btn-outline-danger" onclick="myFunction();">Try another date</button>
</div>
</div>
<nav class="navbar navbar-light " id="footer">
<a href="https://github.com/Brian-Weloba"><i class="fab fa-github-alt fa-2x" id="icon"></i></a>
<p class="bt" id="icon">© 2020 All Rights Reserved. Developed by Brian Weloba.</p>
<a href="mailto: bweloba@gmail.com"><i class="fas fa-envelope fa-2x" id="icon"></i></a>
</nav>
</body>
</html>