View difference between Paste ID: QcdEhk55 and LXe17nCN
SHOW: | | - or go back to the newest paste.
1
<!DOCTYPE html>
2
<html>
3
	<head>
4
		<meta charset="utf-8">
5
		<title>index</title>
6
		<link href="/css/style.css" rel="stylesheet">
7-
		<link href="/css/lightbox.css" rel="stylesheet">
7+
8
		<script src="/script/jquery-1.8.2.min.js"></script>
9
				<!--[if lt IE 9]> 
10
		<script src="/script/html5.js"></script> 
11
		<![endif]-->
12
		<script type="text/javascript">
13
        jQuery(document).ready(function(){
14
        jQuery("article #news-box .news .news-link a").toggle(function(e) {
15
			jQuery(this).parent().siblings("article #news-box .news .news-text").removeClass("short");
16
			jQuery(this).html("&#8226; collapse");
17
			e.preventDefault();
18
		}, function(e) {
19
			jQuery(this).parent().siblings("article #news-box .news .news-text").addClass("short");
20
			jQuery(this).html("&#8226; read more");
21
			e.preventDefault();
22
		})​;
23
		});
24
25
		</script>
26
                <style>
27
/*css*/
28
html, body {
29
	margin: 0;
30
	padding: 0;
31
}
32
33
img {
34
border: none;
35
}
36
37
@font-face {
38
    font-family: freesetc-bold; 
39
    src: url(/fonts/freesetc-bold.otf);
40
}
41
	
42
body {
43
	background: #FFFFFF;
44
	font-family: Tahoma, sans-serif;
45
	width: 778px;
46
	margin: 0 auto;
47
}
48
	
49
header {
50
	display: block; 
51
	position: relative;
52
	width: 778px;
53
	height: 328px; 
54
	background: url(/images/header.png) no-repeat center top;
55
	z-index: 10;
56
}
57
58
/*Логотип, название компании*/
59
#logo {
60
	padding: 10px 0 0 275px;
61
	width: 200px;
62
	text-align: center;
63
	font-family: freesetc-bold;
64
	position: relative;
65
}
66
67
#logo a {
68
	text-decoration: none;
69
}
70
71
#logo .company-name {
72
	color: #003d5a;
73
	font-size: 24px;
74
}
75
76
#logo .slogan {
77
	display: block; 
78
	margin-top: -3px;
79
	color: #9a0000;
80
	font-size: 14px;
81
}
82
83
#logo .home {
84
	background: url(/images/icon-home.png) no-repeat;
85
	height: 11px;
86
	width: 11px;
87
	position: absolute;
88
	top: 122px;
89
	left: 335px;
90
	z-index: 10;
91
}
92
93
#logo .sitemap {
94
	background: url(/images/icon-sitemap.png) no-repeat;
95
	height: 11px;
96
	width: 11px;
97
	position: absolute;
98
	top: 122px;
99
	left: 365px;
100
	z-index: 10;
101
}
102
103
#logo .search {
104
	background: url(/images/icon-search.png) no-repeat;
105
	height: 11px;
106
	width: 11px;
107
	position: absolute;
108
	top: 122px;
109
	left: 395px;
110
	z-index: 10;
111
}
112
113
/*Навигация*/
114
nav {
115
	display: block; 
116
	font-family: freesetc-bold;
117
	position: relative;
118
	padding: 59px 0 0 24px; 
119
}
120
121
nav a.menu { 
122
	background: url(/images/icon-menu.png) center top no-repeat ; 
123
	text-decoration: none;
124
	font-size: 14px;
125
	letter-spacing: -0.1em;
126
	margin: 0 12px 0 0; 
127
	padding-top: 20px;
128
	display: table-cell;
129
	text-align: center;
130
	width: 60px;
131
}
132
133
nav a.menu:link,
134
nav a.menu:visited,
135
nav a.menu:hover,
136
nav a.menu:active {
137
	color: #235f79;
138
}
139
140
/*Новости*/
141
article {
142
	display: block; 
143
	position: relative;
144
	background: url(/images/right.png) right bottom no-repeat;
145
	float: right;
146
	height: 456px;
147
	margin: -35px 0 0 0;
148
}
149
150
article #news-box{
151
	background: url(/images/news-backg.png) no-repeat center top;
152
	position: relative;
153
	width: 267px;
154
	margin: 3px 20px 0 0;
155
	padding-bottom: 12px;
156
	border: 1px solid #d7d7d7;
157
	border-top: 2px solid #d7d7d7;
158
	border-left: 2px solid #a8a8a8;
159
	border-radius: 10px;
160
	-moz-border-radius: 10px; /* Для Firefox 3 */
161
	-webkit-border-radius: 10px; /* Для Safari 4 и Chrome */
162
	-khtml-border-radius: 10px;
163
	behavior: url(/css/PIE.htc); /*Для IE*/
164
}
165
166
article #news-box h2.title {
167
	background: url(/images/title-icon.png) no-repeat left center;
168
	padding: 10px 0 13px 43px;
169
	margin: 0 0 -10px 27px;
170
	color: #003d5a;
171
	font-family: freesetc-bold;
172
	font-size: 18px;
173
	vertical-align: middle;
174
	letter-spacing: -0.1em;
175
	line-height: 1.5;
176
}
177
178
article #news-box .news {
179
	background: url(/images/news-border.png) no-repeat;
180
	position: relative;
181
	margin: 0 0 0 28px;
182
}
183
184
article #news-box .news .news-date {
185
	float: right;
186
	position: relative;
187
	margin: 5px 12px 0 0;
188
	font-weight: bold;
189
	font-size: 11px;
190
	color: #97c71b;
191
}
192
193
article #news-box .news .news-text {
194
	font-size: 11px;
195
	color: #7c7c7c;
196
	text-align: justify;
197
	margin: 5px 12px 0 -12px;
198
	text-indent: 6px;
199
}
200
201
.short {
202
	height: 80px;
203
	overflow: hidden;
204
}
205
206
article #news-box .news .news-photo{
207
	text-align: center;
208
	margin: 0 0 5px -10px;
209
	padding: 13px 0 0 0;
210
}
211
212
article #news-box .news .news-text a:link,
213
article #news-box .news .news-text a:visited,
214
article #news-box .news .news-text a:hover,
215
article #news-box .news .news-text a:active {
216
color: #074f69;
217
}
218
219
article #news-box .news .news-link {
220
	float: right;
221
	position: relative;
222
	margin: 0 12px 5px 0;
223
}
224
225
article #news-box .news .news-link a:link,
226
article #news-box .news .news-link a:visited,
227
article #news-box .news .news-link a:hover,
228
article #news-box .news .news-link a:active
229
 {
230
	text-decoration: none;
231
	font-weight: bold;
232
	font-size: 11px;
233
	color: #97c71b;
234
}
235
236
/*Контент*/
237
#content {
238
	margin: -42px 295px 0 0;
239
	padding: 13px 0 20px 30px;
240
	font-size: 11px;
241
	color: #7c7c7c;
242
	background: url(/images/left.png) left bottom no-repeat;
243
	position: relative;
244
	z-index: 10;
245
}
246
247
#content #cont  {
248
	height: 305px;
249
}
250
251
#content #cont h2.title {
252
	background: url(/images/title-icon.png) no-repeat;
253
	padding: 0 0 0 43px;
254
	margin: 13px 0 -10px 0;
255
	color: #003d5a;
256
	font-family: freesetc-bold;
257
	font-size: 18px;
258
	vertical-align: middle;
259
	letter-spacing: -0.1em;
260
	line-height: 1.8;
261
}
262
263
#content #cont .description {
264
	font-family: freesetc-bold;
265
	font-size: 12px;
266
	color: #820404;
267
	margin: 0 0 0 45px;
268
}
269
270
#content #cont .item {
271
	background: url(/images/item-border.png) no-repeat;
272
	padding-top: 12px;
273
	margin-top: 6px;
274
}
275
276
#content #cont .item-photo {
277
	position: relative;
278
	float: right;
279
}
280
281
#content #cont .item-text {
282
	text-align: justify;
283
	margin: -4px 151px 0 0;
284
	text-indent: 6px;
285
}
286
287
#content #cont .item-text a:link,
288
#content #cont .item-text a:visited,
289
#content #cont .item-text a:hover,
290
#content #cont .item-text a:active {
291
	color: #6da501;
292
}
293
294
#content #cont .item-link {
295
	text-align: right;
296
	margin: 8px 151px 8px 0;
297
}
298
299
#content #cont .item-link a:link,
300
#content #cont .item-link a:visited,
301
#content #cont .item-link a:hover,
302
#content #cont .item-link a:active
303
 {
304
	text-decoration: none;
305
	font-weight: bold;
306
	font-size: 11px;
307
	color: #07b9d4;
308
}
309
310
/*Информация о компании*/
311
#about {
312
	background: url(/images/item-border.png) no-repeat;
313
	padding: 5px 0 0 0;
314
}
315
316
#about h2.title {
317
	background: url(/images/title-icon.png) no-repeat;
318
	padding: 0 0 0 43px;
319
	margin: 0;
320
	color: #003d5a;
321
	font-family: freesetc-bold;
322
	font-size: 18px;
323
	vertical-align: middle;
324
	letter-spacing: -0.1em;
325
	line-height: 1.8;
326
}
327
328
#content #about .about-text {
329
	text-align: justify;
330
	margin: 4px 0 0 0;
331
	text-indent: 6px;
332
}
333
334
#content #about .about-text a:link,
335
#content #about .about-text a:visited,
336
#content #about .about-text a:hover,
337
#content #about .about-text a:active {
338
	color: #7c7c7c;
339
}
340
341
#content #about .about-contacts {
342
	margin: 10px 0 0 130px;
343
}
344
345
#content #about .about-contacts  table{
346
	margin-top: -5px;
347
}
348
349
#content #about .about-contacts  td{
350
	vertical-align: top;
351
}
352
353
#content #about .about-contacts  td.titl{
354
	font-weight: bold;
355
}
356
357
/*Футер*/
358
footer{
359
	display: block; 
360
	width: 778px;
361
	height: 95px; 
362
	background: url(/images/footer.png) no-repeat right top;
363
	margin: -42px 0 0 0;
364
	padding: 20px 0 0 0;
365
}
366
367
footer #copyright {
368
	float: right;
369
	width: 150px;
370
	margin: 38px 0 0 370px;
371
	font-size: 10px;
372
	color: #ffffff;
373
	text-align: center;
374
	line-height: 1.5;
375
}
376
377
378
379
380
381
382
                </style>
383
384
		<!--[if IE 7]> 
385
		<link href="/css/style-ie7.css" rel="stylesheet">
386
		<![endif]-->
387
		<!--[if IE 8]> 
388
		<link href="/css/style-ie8.css" rel="stylesheet">
389
		<![endif]-->
390
	</head>
391
	
392
	<body>
393
	<section>
394
	
395
	<header>
396
		<div id="logo">
397
			<a href="/" title="">
398
				<img src="/images/logo.png" title="Главная страница" width="60" height="60">
399
			</a><br>
400
			<span class="company-name">COMPANY NAME</span>
401
			<span class="slogan">short slogan goes here</span>
402
			<a href="/" class="home" title="Главная страница"></a>
403
			<a href="/" class="sitemap" title="Карта сайта"></a>
404
			<a href="/" class="search" title="Поиск"></a>
405
		</div>
406
		
407
		<nav>
408
			<a href="/" class="menu" title="About Us">About Us</a>
409
			<a href="/" class="menu" title="Services">Services</a>
410
			<a href="/" class="menu" title="Partners">Partners</a>
411
			<a href="/" class="menu" title="Contact Us">Contact&nbsp;Us</a>
412
		</nav>
413
	</header>
414
	
415
	<article>
416
		<div id="news-box">
417
			<h2 class="title">Company News</h2>
418
			<div class="news">
419
				<div class="news-date">12/01/2004</div>
420
				<div style="clear: both;"></div>
421
				<div class="news-text short"><a href="/">Lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</div>
422
				<div class="news-link"><a href="/">&#8226; read more</a></div>
423
				<div style="clear: both;"></div>
424
			</div>
425
			<div class="news">
426
				<p class="news-photo">
427
					<a href="/images/photo1.jpg" rel="lightbox" title="Изображение"><img src="/images/photo1.jpg" title="Изображение" width="169" height="112"></a>
428
				</p>
429
				<div class="news-date">12/01/2004</div>
430
				<div style="clear: both;"></div>
431
				<div class="news-text short"><a href="/">Lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis </div>
432
				<div class="news-link"><a href="/">&#8226; read more</a></div>
433
				<div style="clear: both;"></div>
434
			</div>
435
		</div>
436
	</article>
437
	
438
	<div id="content">
439
		<div id="cont">
440
			<h2 class="title">Welcome to Site</h2>
441
			<span class="description">description goes here</span>
442
			<div class="item">
443
				<div class="item-photo">
444
					<a href="/images/photo2.jpg" rel="lightbox" title="Изображение"><img src="/images/photo2.jpg" title="Изображение" width="147" height="98"></a>
445
				</div>
446
				<div class="item-text"><a href="/">Lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
447
				</div>
448
				<div class="item-link"><a href="/">&#8226; read more</a></div>
449
			</div>
450
			
451
			<div class="item">
452
				<div class="item-photo">
453
					<a href="/images/photo3.jpg" rel="lightbox" title="Изображение"><img src="/images/photo3.jpg" title="Изображение" width="147" height="98"></a>
454
				</div>
455
				<div class="item-text"><a href="/">Lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
456
				</div>
457
				<div class="item-link"><a href="/">&#8226; read more</a></div>
458
			</div>
459
		</div>
460
		
461
		<div id="about">
462
			<h2 class="title">Short About</h2>
463
			<div class="about-text"><a href="/">Lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis 
464
			</div>
465
			<div class="about-contacts">
466
				<table>
467
				<tr>
468
					<td class="titl">Phone Number:</td>
469
					<td>1-888-000-4755 E</td>
470
				</tr>
471
				</table>
472
				
473
				<table>
474
				<tr>
475
					<td class="titl">E-mail Addresses:</td>
476
					<td>veterimary@clinic.com<br>
477
					    servise@clinic.com<br>
478
						support@clinic.com<br></td>
479
				</tr>
480
				</table>
481
			</div>
482
		</div>
483
	</div>
484
	
485
	<div style="clear: both;"></div>
486
	
487
	<footer>
488
		<div id="copyright">
489
			<span>&copy; 2000-2005 Company Name.</span><br>
490
			<span>All Rights Reserved.</span>
491
		</div>
492
		<div style="clear: both;"></div>
493
	</footer>
494
	
495
	</section>
496
	</body>
497
</html>