-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
181 lines (168 loc) · 10.3 KB
/
home.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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Mark Fasel's Front-End Developer Exercise</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Open+Sans:300,700', 'Source+Sans+Pro:300,400,600']
}
});
</script>
<link rel="stylesheet" href="/assets/stylesheets/style.min.css">
<script src="/assets/javascripts/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<noscript>
<div class="no-js-message"><p>Please enable JavaScript for the best experience.</p></div>
</noscript>
<div class="site-container">
<header class="site-header">
<div class="site-header--masthead">
<img src="assets/images/header.jpg" />
<!-- Header Text -->
<h1>
<span class="site-header--masthead-line1">Real Life, Love and Money with</span>
<span class="site-header--masthead-line2">America's Most <span>Trusted Guy</span></span>
</h1>
</div>
</header>
<!--
***************************
Page Content
***************************
-->
<div id="content">
<!-- Page Navigation -->
<nav role="navigation" class="content--navigation">
<ul>
<li class="active active--step1"><a href="/" data-step="1">Baby Step 1 <i class="nav-icon nav-icon--step1"></i></a></li>
<li><a href="/step/2.html" data-step="2">Baby Step 2 <i class="nav-icon nav-icon--step2"></i></a></li>
<li><a href="/step/3.html" data-step="3">Baby Step 3 <i class="nav-icon nav-icon--step3"></i></a></li>
<li><a href="/step/4.html" data-step="4">Baby Step 4 <i class="nav-icon nav-icon--step4"></i></a></li>
<li><a href="/step/5.html" data-step="5">Baby Step 5 <i class="nav-icon nav-icon--step5"></i></a></li>
<li><a href="/step/6.html" data-step="6">Baby Step 6 <i class="nav-icon nav-icon--step6"></i></a></li>
<li><a href="/step/7.html" data-step="7">Baby Step 7 <i class="nav-icon nav-icon--step7"></i></a></li>
</ul>
</nav>
<!-- Main Content -->
<main role="main" class="content--main">
<section id="step1" data-section="1" class="active content--main-step">
<div class="step-heading">
<figure class="step-heading--icon">
<img src="assets/images/icons/individual/icons_large_bs1_blue.png" alt="Baby Step 1 - $1,000 Emergency Fund" />
</figure>
<div class="step-heading--text">
<h2>Baby Step 1</h2>
<h3>$1,000 Emergency Fund</h3>
</div>
</div>
<div class="step--content">
<p>An emergency fund is for those unexpected events in life that you can’t plan for: the loss of a job, an unexpected pregnancy, a faulty car transmission, and the list goes on and on. It’s not a matter of if these events will happen; it’s simply a matter of when they will happen.</p>
<p>This beginning emergency fund will keep life’s little Murphies from turning into new debt while you work off the old debt. If a real emergency happens, you can handle it with your emergency fund. No more borrowing. It’s time to break the cycle of debt!</p>
</div>
</section>
<section id="step2" data-section="2" class="hidden content--main-step">
<div class="step-heading">
<figure class="step-heading--icon">
<img src="assets/images/icons/individual/icons_large_bs2_blue.png" alt="Baby Step 2 - Pay off all debt using the Debt Snowball" />
</figure>
<div class="step-heading--text">
<h2>Baby Step 2</h2>
<h3>Pay off all debt using the Debt Snowball</h3>
</div>
</div>
<div class="step--content">
<p>List your debts, excluding the house, in order. The smallest balance should be your number one priority. Don’t worry about interest rates unless two debts have similar payoffs. If that’s the case, then list the higher interest rate debt first.</p>
<p>The point of the debt snowball is simply this: You need some quick wins in order to stay pumped up about getting out of debt! Paying off debt is not always about math. It’s about motivation. Personal finance is 20% head knowledge and 80% behavior. When you start knocking off the easier debts, you will see results and you will stay motivated to dump your debt.</p>
</div>
</section>
<section id="step3" data-section="3" class="hidden content--main-step">
<div class="step-heading">
<figure class="step-heading--icon">
<img src="assets/images/icons/individual/icons_large_bs3_blue.png" alt="Baby Step 3 - 3 to 6 months of exepenses in savings" />
</figure>
<div class="step-heading--text">
<h2>Baby Step 3</h2>
<h3>3 to 6 months of expenses in savings</h3>
</div>
</div>
<div class="step--content">
<p>Once you complete the first two baby steps, you will have built serious momentum. But don’t start throwing all your "extra" money into investments quite yet. It’s time to build your full emergency fund. Ask yourself, "What would it take for me to live for three to six months if I lost my income?" Your answer to that question is how much you should save.</p>
<p>Use this money for emergencies only: incidents that would have a major impact on you and your family. Keep these savings in a money market account. Remember, this stash of money is not an investment; it is insurance you’re paying to yourself, a buffer between you and life.</p>
</div>
</section>
<section id="step4" data-section="4" class="hidden content--main-step">
<div class="step-heading">
<figure class="step-heading--icon">
<img src="assets/images/icons/individual/icons_large_bs4_blue.png" alt="Baby Step 4 - Invest 15% of household income for retirement" />
</figure>
<div class="step-heading--text">
<h2>Baby Step 4</h2>
<h3>Invest 15% of household income for retirement</h3>
</div>
</div>
<div class="step--content">
<p>When you reach this step, you’ll have no payments—except the house—and a fully funded emergency fund. Now it’s time to get serious about building wealth.</p>
<p>Dave suggests investing 15% of your household income into Roth IRAs and pre-tax retirement plans. Don’t invest more than that because the extra money will help you complete the next two steps: college savings and paying off your home early.</p>
</div>
</section>
<section id="step5" data-section="5" class="hidden content--main-step">
<div class="step-heading">
<figure class="step-heading--icon">
<img src="assets/images/icons/individual/icons_large_bs5_blue.png" alt="Baby Step 5 - College funding for children" />
</figure>
<div class="step-heading--text">
<h2>Baby Step 5</h2>
<h3>College funding for children</h3>
</div>
</div>
<div class="step--content">
<p>By this point, you should have already started Baby Step 4—investing 15% of your income—before saving for college. Whether you are saving for you or your child to go to college, you need to start now.</p>
<p>In order to have enough money saved for college, you need to have a goal. Determine how much per month you should be saving at 12% interest in order to have enough for college. If you save at 12% and inflation is at 4%, then you are moving ahead of inflation at a net of 8% per year!</p>
</div>
</section>
<section id="step6" data-section="6" class="hidden content--main-step">
<div class="step-heading">
<figure class="step-heading--icon">
<img src="assets/images/icons/individual/icons_large_bs6_blue.png" alt="Baby Step 6 - Pay off your house early" />
</figure>
<div class="step-heading--text">
<h2>Baby Step 6</h2>
<h3>Pay off your house early</h3>
</div>
</div>
<div class="step--content">
<p>Now it’s time to begin chunking all of your extra money toward the mortgage. You are getting closer to realizing the dream of a life with no house payments.</p>
<p>As you attack this last debt, you will gain momentum much like you did back in the second step of the debt snowball. Remember, having absolutely no payments is totally within your reach!</p>
</div>
</section>
<section id="step7" data-section="7" class="hidden content--main-step">
<div class="step-heading">
<figure class="step-heading--icon">
<img src="assets/images/icons/individual/icons_large_bs7_blue.png" alt="Baby Step 7 - Build wealth and give!" />
</figure>
<div class="step-heading--text">
<h2>Baby Step 7</h2>
<h3>Build wealth and give!</h3>
</div>
</div>
<div class="step--content">
<p>It’s time to build wealth and give like never before. Leave an inheritance for future generations, and bless others now with your excess. It's really the only way to live!</p>
<p>Golda Meir says, "You can’t shake hands with a clenched fist." Vow to never hold your money so tightly that you never give any away. Hoarding money is not the way to wealth. Save for yourself, save for your family’s future, and be gracious enough to bless others. You can do all three at the same time.</p>
</div>
</section>
</main>
</div>
</div>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js" type="text/javascript"></script>
<script src="/assets/javascripts/app.min.js"></script>
</body>
</html>