-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (88 loc) · 5.04 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
<!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"/>
<title>kiiniAfrica</title>
<link rel="stylesheet" href="./assets/css/bootstrap.css"/>
<link rel="stylesheet" href="./assets/icons/bootstrapicons/bootstrap-icons.css" media="all"/>
<link rel="stylesheet" href="./assets/css/styles.css" media="all"/>
<script src="./assets/js/scripts.js" defer></script>
</head>
<body>
<div id="root-cont" class="container">
<div class="row">
<div class="col-lg-4 left-pane">
<div class="row">
<div class="col ms-0">
<img src="./assets/images/logo.png" alt="logo" class="logo">
</div>
<div class="col">
<ul class="social-icons">
<li><a href=""><i class="bi bi-meta"></i></a></li>
<li><a href=""><i class="bi bi-instagram"></i></a></li>
<li><a href="https://twitter.com/Nyghlee?t=xxD9su_tgEWSJveMSw8bGA&s=09"><i class="bi bi-twitter"></i></a></i></li>
<li><a href="https://www.linkedin.com/in/kemuel-nalifuma-7a083981/"><i class="bi bi-linkedin"></i></a></i></li>
</ul>
</div>
</div>
<img class="img-left mx-auto" src="./assets/images/name-wh-g.png" alt=""/>
<p class="text-light mx-auto descript">Kiini Africa loosely translated the Essence of Africa presents the Akan name App
that tries to elavete Africas' culture through fun and give you fun facts about the day you were
born by telling you what day of the week it was and what name you would likely be called based on the Ghanaian Akan culture.
</p>
<p class="text-center mx-auto copy-r">© 2021 KiiniAfrica</p>
</div>
<div class="col-lg-8 right-pane">
<div class="row main-row">
<form id="main-left" class="col-xl-6">
<div class="row birthdate">
<div class="input-group input-group-sm">
<span class="input-group-text span-text">Day</span>
<input id="day" type="text" aria-label="Day" class="form-control day-class" placeholder="01" value=""/>
<span class="input-group-text span-text">Month</span>
<input id="month" type="text" aria-label="Month" class="form-control month-class" placeholder="01" value=""/>
<span class="input-group-text span-text">Year</span>
<input id="year" type="text" aria-label="Year" class="form-control year-class" placeholder="1900" value=""/>
</div>
</div>
<div id="error-msg" class="row alerts"><p id="alert-day" class="col error"></p><p id="alert-month" class="col error"></p><p id="alert-year" class="col error"></p></div>
<div id = "gender" class="row gender-class">
<div class="col form-check">
<input class="form-check-input fe-icon gnd" type="radio" name="flexRadioDefault" id="flexRadioDefault1" value="female">
<label class="form-check-label" for="flexRadioDefault1">
Female
</label>
</div>
<div class="col form-check">
<input class="form-check-input ma-icon gnd" type="radio" name="flexRadioDefault" id="flexRadioDefault2" value="male">
<label class="form-check-label" for="flexRadioDefault2">
Male
</label>
</div>
</div>
<p id="alert-radio" class="error"></p>
<div class="row me-3">
<button id="submit" type="submit" class="btn btn-warning btn-sm col-md-2">Submit</button>
<p class="col-md-8 p-tag">Enter your birth date, choose gender and submit to see what your akan name could be.</p>
</div>
<div id="img-box" class="d-flex justify-content-center"></div>
</form>
<div id="main-right" class="col-xl-6">
<div id="content-box">
<p class="intro-tag">You were born on a <em><span class="day-tag">...</span> <span class="dayAkanIntro">(also known as <span class="dayAkan">...</span> in Akan)</span></em>, Your Akan Name would likely be:</p>
<p class="text-center tx-tag"><span class="name-tag">...</span> <span><i class="bi bi-check2-circle"></i></span></p>
<p class="title-m-tag"><em>Meaning of the name:</em></p>
<p class="meaning-tag">...</p>
<p class="adopted-tag">Name meanings adopted from: <a href="https://essenceofasabea.com/blogs/news/the-akan-day-names-their-meanings-and-creative-acts">www.essenceofaseba.com</a></p>
<p class="annotation">Although the App is meant for fun, the names and their meanings are real and derived from the Akan culture in Ghana, Largely pegged on the creation story.</p>
<button id="reset" class="btn btn-secondary btn-sm" onClick="window.location.reload();" >Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>