-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·218 lines (187 loc) · 9.27 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
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License
Name : MetroBiz
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20140207
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<link href="index.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1><a href="#">MetroBiz</a></h1>
<span>Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a></span>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
<li><a href="ourClients.html" accesskey="2" title="">Our Clients</a></li>
<li><a href="aboutUs.html" accesskey="3" title="">About Us</a></li>
<li><a href="#" accesskey="4" title="">Careers</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div id="wrapper2">
<div id="welcome" class="container">
<div class="title">
<h2>Welcome to MetroBiz</h2>
<!-- When hovering over the text it changes color and in line 68 this text here.. -->
<h3 onclick="textChanged(), changeText(this)" onmouseover="style.color='white'" onmouseout="style.color='#261300'">
Click here for a new costumer surprise!</h3>
<!-- ..changes to this one -->
<div id="whiteDIV" style="display: none;">
<p class="register-text">Register for member benefits and spacial events!</p>
<!-- input boxes for the registration in the form div -->
<h4>Enter your name: <input type="text" id="name" onfocus="nameInput(this)"></h4>
<h4>Enter your e-mail: <input type="text" id="e-mail" onfocus="emailInput(this)"></h4>
<h4>Enter your password: <input type="text" id="password" onfocus="passwordInput(this)"></h4>
<div class="register-info-text">
<h4>As a new costumer you will recive an e-mail with the latest news and events! Just register and with your first order you will get 20% off!<br>
Isn't this a deal?</h4>
</div>
<!-- The registration Button which changes to 'thank you!' when clicked -->
<div class="registerButton" onmousedown="mDown(this)" onmouseup="mUp(this)">Register</div>
</div>
</div>
<p>This is <strong>MetroBiz</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
</div>
</div>
<!-- pop-up form for registration -->
<!-- closed form, click button to open it -->
<button class="open-button" onclick="openForm()">Login</button>
<!-- opened form -->
<div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<h1>Welcome Back!</h1>
<label for="email"><b>E-mail</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<!-- when login is clicked and inputs aren't filled out an alarm apears to make sure to fill these out-->
<!-- click close to close form -->
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
<div id="wrapper3">
<!-- Page jumpes to top by clicking th button on the right at the bottom -->
<button onclick="topFunction()" id="myBtn" title="Go to top">To Top</button>
<div id="three-column" class="container">
<div><span class="arrow-down"></span></div>
<!-- text with lean more button -->
<div id="tbox1"> <span class="icon icon-wrench"></span>
<div class="title">
<h2>Maecenas luctus</h2>
</div>
<p> Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna.
Duis pretium velit ac suscipit mauris. Proin eu wisi suscipit nulla suscipit interdum.
<span id="dot1">...</span>
<span id="more1">
erisque enim ligula venenatis dolor. Maecenas nisl est,
ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</span>
</p>
<button id="Btn1" onclick="toggle1(this)" onmouseover="style.color='pink'" onmouseout="style.color='white'" class="myButton">Learn more</button>
</div>
<!-- <a href="#" class="button" onclick="readMore()" onmouseover="style.color='pink'" onmouseout="style.color='white'">
Learn More</a></div> -->
<div id="tbox2"> <span class="icon icon-cogs"></span>
<div class="title">
<h2>Integer gravida</h2>
</div>
<!-- read more button -->
<p>Proin eu wisi suscipit nulla suscipit interdum. Nullam non wisi a sem semper suscipit eleifend.
Donec mattis libero eget urna. Duis pretium velit ac mauris.
<span id="dot2">...</span>
<span id="more2">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Fusce luctus vestibulum augue ut aliquet.
</span>
</p>
<button id="Btn2" onclick="toggle2(this)" onmouseover="style.color='pink'" onmouseout="style.color='white'" class="myButton">Learn more</button>
</div>
<div id="tbox3"> <span class="icon icon-legal"></span>
<div class="title">
<h2>Praesent mauris</h2>
</div>
<p>Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.
Nullam non wisi a sem suscipit semper eleifend.
<span id="dot3">...</span>
<span id="more3">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Fusce luctus vestibulum augue ut aliquet.
</span>
</p>
<button id="Btn3" onclick="toggle3(this)" onmouseover="style.color='pink'" onmouseout="style.color='white'" class="myButton">Learn more</button></div>
</div>
<div id="portfolio" class="container">
<div class="title">
<h2>Vivamus fermentum nibh</h2>
<span class="byline">Integer sit amet pede vel arcu aliquet pretium</span> </div>
<div class="column1">
<div class="box">
<h3>Vestibulum venenatis</h3>
<p>Fermentum nibh augue praesent a lacus at urna congue rutrum.</p>
<a href="#" class="button button-small" onmouseover="style.color='pink'" onmouseout="style.color='white'">
Etiam posuere</a> </div>
</div>
<div class="column2">
<div class="box">
<h3>Praesent scelerisque</h3>
<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
<a href="#" class="button button-small" onmouseover="style.color='pink'" onmouseout="style.color='white'">
Etiam posuere</a> </div>
</div>
<div class="column3">
<div class="box">
<h3>Donec dictum metus</h3>
<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
<a href="#" class="button button-small" onmouseover="style.color='pink'" onmouseout="style.color='white'">
Etiam posuere</a> </div>
</div>
<div class="column4">
<div class="box">
<h3>Mauris vulputate dolor</h3>
<p>Rutrum fermentum nibh in augue praesent urna congue rutrum.</p>
<a href="#" class="button button-small" onmouseover="style.color='pink'" onmouseout="style.color='white'">
Etiam posuere</a> </div>
</div>
</div>
</div>
<div id="wrapper4">
<div id="footer" class="container">
<div>
<header class="title">
<h2>Get in touch</h2>
<span class="byline">Phasellus nec erat sit amet nibh pellentesque congue</span> </header>
<ul class="contact">
<li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li>
<li><a href="#" class="icon icon-facebook"><span></span></a></li>
<li><a href="#" class="icon icon-dribbble"><span>Pinterest</span></a></li>
<li><a href="#" class="icon icon-tumblr"><span>Google+</span></a></li>
<li><a href="#" class="icon icon-rss"><span>Pinterest</span></a></li>
</ul>
</div>
</div>
</div>
<div id="copyright" class="container">
<p>© Untitled. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>