API tools faq
paste
Advertisement
Heidel

Untitled

Heidel
Oct 24th, 2012
144
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.74 KB | None | 0 0
raw download clone embed print report diff
  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. <!-- <script src="/script/lightbox.js"></script> -->
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!