-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (155 loc) · 7.62 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="//db.onlinewebfonts.com/c/d9a58a393d946d86051fbd9a0b594d2f?family=Audrey" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Akan Name Generator</title>
</head>
<body>
<!-- Website logo and Websitename -->
<div class="container">
<nav class="avbar navbar-expand-sm">
<div class="container-fluid ">
<a class="navbar-brand img-responsive" href="#">
<img src="images/akanlogo.png" alt="Logo" style="width:50px;">
</a>
<div class="websitename text-responsive">
<h1 class="navbar-header text-warning">Akan<small class="header text-info">Name</small></h1>
</div>
</div>
</nav>
</div>
<!-- Description and users input form -->
<div class="container" id="container-fluid">
<div class="row ">
<div class="col-md-6 bg-info" id="column">
<h2 class="text-center">Ghanaian Name</h2>
<div class="about">
<i class="fa fa-male text-warning"></i> <br><br>
<p> <strong>Akan names </strong>are the day names in Ghana and are derived from <strong>Ghanaian culture</strong>.</p>
</div>
<div class="about">
<i class="fa fa-female text-danger"></i>
<p> In <strong>Ghana</strong>, the days of the week are very impotant aspects of the naming culture.</p>
</div>
<div class="about">
<i class="fa fa-male text-success"> </i> <br><br>
<p> <strong>Babies</strong> are give a day name according to the day of the week they were born.</p>
</div>
<div class="about">
<i class="fa fa-female text-white"></i>
<p> These day names come in pairs for each <strong>specific day</strong>; one for males and the other for females.</p>
</div>
</div>
<div class="col-md-6 text-center" id="column2">
<p class="guide">Enter your information and get your <strong>Akan Name</strong>:</p>
<form>
<div class="form-group">
<label for="birthday">Please enter your birthday here:</label>
<input type="date" name="date" class="form-control" placeholder="Enter Your BirthYear" id="date">
</div>
<div class="form-group">
<label for="birthday">Please select your gender here:</label>
<select class="form-control mb-2" id="gender">
<option value="choose">Select Your Gender</option>
<option value="male" class="form-control" id="male">Male</option>
<option value="female" class="form-control" id="female">Female</option>
</select>
</div>
<div class="input-wrapper">
<input type="submit" class="form-control3 text-center bg-info" id="btn btn-default" onclick="additionSubmit()" value=" Get Akan Name " />
</div>
<button onclick="document.getElementById('').value= ''" class="bg-info">Cancel</button>
<br>
<br>
<div class="text-center bg-dark text-warning" id="result"></div>
</form>
</div>
</div>
</div>
<!-- Cards for days of the week, male names and female names -->
<div class="container">
<p class="chart text-responsive text-center">Below is a chart indicating the <strong>male</strong> or <strong>female</strong> names for each corresponding day of the week to be displayed in accordance to your <strong>birthday</strong>:</p>
<div class="row2 text-responsive" id="row2">
<div class="col1-md-4 text-responsive text-center">
<div class="card card-info">
<div class="card-heading ">
<h2 class="card-title text-center">Days Of The Week</h2>
</div>
<div class="card-body bg-warning">
<ul class="dayweek">
<p class="text-gray">Sunday</p>
<p class="text-danger">Monday</p>
<p class="text-info">Tuesday</p>
<p class="text-success">Wednesday</p>
<p class="text-dark">Thursday</p>
<p class="text-light">Friday</p>
<p class="text-secondary">Saturday</p>
</ul>
</div>
<div class="card-footer">
<p>Akan Name Days</p>
</div>
</div>
</div>
<div class="col2-md-4 text-center">
<div class="card card-info">
<div class="card-heading">
<h2 class="card-title text-center">Ghananian Male</h2>
</div>
<div class="card-body bg-warning">
<ul class="genmale">
<p>Kwasi</p>
<p>Kwadwo</p>
<p>Kwabena</p>
<p>Kwaku</p>
<p>Yaw</p>
<p>Kofi</p>
<p>Kwame</p>
</ul>
</div>
<div class="card-footer ">
<p>Males Akan Name</p>
</div>
</div>
</div>
<div class="col3-md-4-responsive text-center ">
<div class="card card-info ">
<div class="card-heading ">
<h2 class="card-title text-center ">Ghananian Female</h2>
</div>
<div class="card-body bg-warning ">
<ul>
<p>Akosua</p>
<p>Adwoa</p>
<p>Abenaa</p>
<p>Akua</p>
<p>Yaa</p>
<p>Afua</p>
<p>Ama</p>
</ul>
</div>
<div class="card-footer ">
<p>Females Akan Name</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer text-center ">
Copyright (c) 2020 Collins Akumu.All rigths reserved
</div>
<!-- Javascript links -->
<script src="js/styles.js "></script>
<script src="js/bootstrap.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js "></script>
</body>
</html>