-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory_susanna.html
124 lines (123 loc) · 6.03 KB
/
story_susanna.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stories</title>
<meta name="description" content="Stories">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/wide.css" media="(min-width: 480px)">
</head>
<body>
<div id="navigation">
<nav>
<img src="img/logo.png" alt="Logo">
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
<li class="active"><a href="stories.html">STORIES</a></li>
<li><a href="magazines.html">MAGAZINES</a></li>
<li><a href="homepage.html">HOME</a></li>
</ul>
<div class="dropdown"><p>MENU</p>
<div class="dropdown-content">
<a href="homepage.html">HOME</a>
<a href="magazines.html">MAGAZINES</a>
<a href="stories.html">STORIES</a>
<a href="contactus.html">CONTACT US</a>
<a href="about.html">ABOUT</a>
</div>
</div>
</nav>
</div>
<div id="titlepage">
<img src="img/susanna_wide.jpg" alt="Susanna's story">
<div id="title-text"><p>Stories</p></div>
</div>
<div class="white">
<div class="whole-article">
<p class="magatitle">WHO SAID YOU CAN ONLY CHOOSE ONE FROM <span>TRAVELLING</span> THE WORLD AND <span>BUYING</span> A HOUSE?</p>
<p class="magasubtitle">Susanna Cullen</p>
<p class="time">White Collar</p>
<p class="tag">MEMBER STORIES</p>
<ul class="social">
<li class="facebook"></li>
<li class="twitter"></li>
<li class="email"></li>
</ul>
<hr>
<p class="storytext">
<span>S</span>usanna is a cheerful woman who has employed in an IT company for over five years. Although she has a high income, she still has a big dream wanted to be realized, which is travelling the world. “I want to travel around the world since I was a child.” She said, “Many people may think I am crazy, but I just feel do it now or never.”
</p>
<p class="magatext">She has saved enough money for this travel and will go to her first stop New York next December. “I can’t wait to see the white Christmas!” Susanna laughed. For this over one year’s travel, she has planned with her boyfriend for over eight months. The life after the travel is also considered. “I won’t worry too about the life when the travel finish. I can still work can get paid during travel because of my job nature.” Susanna explained. When asked when is planned to settle down, she answered with a considerable plan. “My boyfriend and I will continue work and travel from time to time, when we find the city we love most, we will buy a house with our superannuation after we retire.”
</p>
<p class="magatext">“Who said you can only choose one from travelling the world and buying a house?” Susanna laughed again with the longing for the future.</p>
</div>
</div>
<div class="gray">
<div class="input-comment">
<p class="magacomment">Please Leave Your <span>Comment</span></p>
<hr>
<div class="comment-subtitle">
<p>Nickname</p>
<input class="commentbox" type="text" value=" Please enter your nickname" onfocus="this.value=''" onblur="this.value=' Please enter your nickname'">
<p>Comment</p>
<textarea class="comment-text" type="text" onfocus="this.value=''" onblur="this.value=' How you feel about this story'"> How you feel about this story</textarea>
<a>Submit</a>
</div>
<hr>
<div class="whitebox">
<p class="member-name">Star</p>
<p class="member-time">24 September, 2017</p>
<hr>
<p class="member-text">I wish I can do the same thing some day.</p>
</div>
<div class="whitebox">
<p class="member-name">Colson</p>
<p class="member-time">04 September, 2017</p>
<hr>
<p class="member-text">Goodluck and wish you can enjoy your travel.</p>
</div>
</div>
</div>
<div class="white">
<div class="relate-maga">
<p><span>You may also like</span></p>
<div class="storybox2">
<p class="categorybox">
Rosalie Goodwin
</p>
<img class="story-img2" src="img/rosalie_thumbnail.jpg">
<p class="story-brief2"><span>“ </span>It will never be too early to choose your super.</p>
<a class="viewbox" href="story_rosalie.html">View Story</a>
</div>
<div class="storybox2">
<p class="categorybox">Jack Pearson
</p>
<img class="story-img2" src="img/jack.jpg" alt="Jack's story">
<p class="story-brief2"><span>“ </span>Are you ready to start a new journey in your life?</p>
<a href="story_jack.html" class="viewbox">View Story</a>
</div>
</div>
</div>
<footer>
<div id="contact">
<div class="logo-text">
<img src="img/tel.png" alt="Telephone">
<p>(+061) 414 5492 32</p>
<p>(+061) 414 5232 32</p>
</div>
<div class="logo-text">
<img src="img/mail.png" alt="Mail">
<p>[email protected]</p>
<p>[email protected]</p>
</div>
<div class="logo-text">
<img src="img/twitter.png" alt="Twitter">
<p>@bestsuper1</p>
<p>@bestsuper2</p>
</div>
</div>
<p class="rights">©2017 Best Super Company. All Right Reserved</p></footer>
</body>
</html>