-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (104 loc) · 5.28 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
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Life In Weeks</title>
<link rel=icon href=images/favicon.ico>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<div class="center-items">
<h1 class="col-xs-12">
<div class="symbol center-items "><img id="logo-id" alt="" style="width:300px" /></div>
<span class="title col-xs-12 center-items">Life In Weeks</span>
</h1>
</div>
<div class="col-xs-12">
<p class="center-items">This would visually help give meaning to the phrase "Life is short so make the most of it". </p>
<p class="center-items"> This is a grid of 4160 blocks where each block represents one week of your life. Each row represents one year and each row contains 52 columns. </p>
<p class="center-items">Just enter your birth date and press submit.</p>
</div>
</div>
</header>
<!-- Menu -->
<div id="main">
<div class="inner">
<div class="col-md-6 col-xs-12">
<h2 class="col-xs-12 center-items" style="margin-bottom:0px">Birth Date
<input id="datepicker" style="padding-left: 15px;width:120px; margin-left:15px;" placeholder="DD/MM/YYYY">
<button id="submit-button" class="button primary display-for-pc" style="margin-left:20px">Submit</button>
</h2>
</div>
<div class="col-xs-12 display-for-mobile">
<div class="center-items custom-mobile-padding">
<button id="submit-button" class="button primary" style="margin-left:20px" onclick="populateFunction();">Submit</button>
</div>
</div>
<div class="col-md-6 col-xs-12 custom-mobile-padding">
<h2 class="col-xs-12 center-items"> Ideal age
<div style="border:1px solid black; width:25px">
<input type="checkbox" name="ideal-age" id="ideal-age" >
</div>
</h2>
</div>
<div class="center-items col-xs-12">
</div>
<br>
<br>
<div id="chart-ages" class="col-xs-12" style="display:none">
<div class="col-xs-4 col-md-2"><div class="square-icon current-age"></div>Current</div>
<div class="col-xs-4 col-md-2"><div class="square-icon early-age"></div>Early Years</div>
<div class="col-xs-4 col-md-2"><div class="square-icon school-age"></div>School</div>
<div class="col-xs-4 col-md-2"><div class="square-icon college-age"></div>College</div>
<div class="col-xs-4 col-md-2"><div class="square-icon career-age"></div>Career</div>
<div class="col-xs-4 col-md-2"><div class="square-icon retirement-age"></div>Retirement</div>
</div>
<div class="col-xs-12 custom-no-padding" >
<div id="container">
<div id="blank-grid"></div>
<div id="color-grid" style="display:none"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" style="padding-top:150px;">
<div class="inner">
<div class="col-xs-12">
<p class="center-items">This will motivate you to be self aware and reflect upon your own actions. When you know that your time is limited, it can help you feel more oriented in life and create a drive to go out there and do whatever you have always wanted to do. Most importantly, spend time with your loved ones, have fun and stop procrastinating.</p>
</div>
<div class="col-xs-12" style="margin-top:30px;">
<h2 class="center-items">Follow</h2>
<ul class="icons center-items">
<li><a href="https://shubhankar30.in" class="icon style2 fa-user-circle"><span class="label">Profile</span></a></li>
<li><a href="https://www.linkedin.com/in/shubhankar300794/" class="icon style2 fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="https://www.facebook.com/30shubhankar" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://github.com/shubhankar30" class="icon style2 fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon style2 fa-envelope-o"><span class="label">Email</span></a></li>
</ul>
</div>
<ul class="copyright center-items">
<li style="color:black!important;font-size:16px">© Shubhankar Ranade</li>
<li style="color:black!important;font-size:16px">© [email protected] / [email protected]</li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/populate.js"></script>
<script src="https://unpkg.com/moment"></script>
</body>
</html>