-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (132 loc) · 7.66 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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Smart Accordion Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link href="https://fonts.googleapis.com/css?family=Bevan" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<main>
<div class="fluid-container">
<header>
<h1 class="text-center">Time to get some</h1>
</header>
<div class="smart-accordion">
<div id="sa-panel-1" class="sa-panel">
<div class="sa-panel-body">
<header class="sa-panel-heading">
<p class="sa-title">S<span>pecific</span> <span class="fa fa-crosshairs"></span></p>
</header>
<div class="sa-desc">
<p>
Specifics goals have a much greater chance of being accomplished than generals goals.
</p>
<p>
EXAMPLE: A general goal would be “Get in shape” but a specific goal would say “Join a health club and workout 3 days a week”
</p>
<p class="text-center">
<a href="#" class="btn btn-inverse"
title="Learn more about this point of the SMART methodology">Learn more
</a>
</p>
</div>
<div class="spelling text-center">G</div>
</div>
</div>
<div id="sa-panel-2" class="sa-panel">
<div class="sa-panel-body">
<header class="sa-panel-heading">
<p class="sa-title">M<span>esurable</span> <span class="fa fa-pie-chart"><span class="diamond"></span></span></p>
</header>
<div class="sa-desc">
<p>
Establish concrete criteria for measuring progress toward the attainment of each goal you set.
<br>
To determine if your goals are measurables, ask questions such as :
</p>
<p>
How much? How many? How will I know when it is accomplished?
</p>
<p class="text-center">
<a href="#" class="btn btn-inverse"
title="Learn more about this point of the SMART methodology">Learn more
</a>
</p>
</div>
<div class="spelling text-center">O</div>
</div>
</div>
<div id="sa-panel-3" class="sa-panel">
<div class="sa-panel-body">
<header class="sa-panel-heading">
<p class="sa-title">A<span>chievable</span> <span class="fa fa-check-square-o"></span></p>
</header>
<div class="sa-desc">
<p>
When you identify goals that are most important to you, you begin to figure out ways
you can make them come true. You develop the attitudes, abilities, skills, and financial
capacity to reach them. You begin seeing previously overlooked opportunities to bring yourself
closer to the achievement of your goals.
</p>
<p class="text-center">
<a href="#" class="btn btn-inverse"
title="Learn more about this point of the SMART methodology">Learn more
</a>
</p>
</div>
<div class="spelling text-center">A</div>
</div>
</div>
<div id="sa-panel-4" class="sa-panel">
<div class="sa-panel-body">
<header class="sa-panel-heading">
<p class="sa-title">R<span>ealistic</span> <span class="fa fa-check-circle-o"></span></p>
</header>
<div class="sa-desc">
<p>
Goals must represent an objective toward which you are both willing and able to work.
Goals can be both high and realistic; you are the only one who can decide just how high
your goals should be. Be sure that every goal represents substantial progress.
</p>
<p class="text-center">
<a href="#" class="btn btn-inverse"
title="Learn more about this point of the SMART methodology">Learn more
</a>
</p>
</div>
<div class="spelling text-center">L</div>
</div>
</div>
<div id="sa-panel-5" class="sa-panel">
<div class="sa-panel-body">
<header class="sa-panel-heading">
<p class="sa-title">T<span>ime-bound</span> <span class="fa fa-clock-o"></span></p>
</header>
<div class="sa-desc">
<p>
Goals should be grounded within a time frame. With no time frame tied to it there’s no sense of urgency.
If you want to lose 10 lbs, when do you want to lose it by? “Someday” won’t work. But if you anchor it within a timeframe,
“by May 1st”, then you’ve set your unconscious mind into motion to begin working on the goal.
</p>
<p class="text-center">
<a href="#" class="btn btn-inverse"
title="Learn more about this point of the SMART methodology">Learn more
</a>
</p>
</div>
<div class="spelling text-center">S</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>