API tools faq
paste
Advertisement
internetpirate11

Arthatwork fixes

internetpirate11
Dec 28th, 2012
237
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.87 KB | None | 0 0
raw download clone embed print report
  1. /*index.html page*/
  2.  
  3. <!DOCTYPE html>
  4. <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
  5. <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
  6. <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
  7. <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
  8. <head>
  9.  
  10. <!-- Basic Page Needs
  11. ================================================== -->
  12. <meta charset="utf-8">
  13. <title>Your Page Title Here :)</title>
  14. <meta name="description" content="">
  15. <meta name="author" content="">
  16.  
  17. <!-- Mobile Specific Metas
  18. ================================================== -->
  19. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  20.  
  21. <!-- CSS
  22. ================================================== -->
  23. <link rel="stylesheet" href="stylesheets/base.css">
  24. <link rel="stylesheet" href="stylesheets/skeleton.css">
  25. <link rel="stylesheet" href="stylesheets/layout.css">
  26.  
  27. <!--[if lt IE 9]>
  28. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  29. <![endif]-->
  30.  
  31. <!-- Favicons
  32. ================================================== -->
  33. <link rel="shortcut icon" href="images/favicon.ico">
  34. <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
  35. <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
  36. <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  37.  
  38.  
  39.  
  40.  
  41.  
  42. </head>
  43. <body>
  44.  
  45.  
  46.  
  47.  
  48.  
  49. <!-- Primary Page Layout
  50. ================================================== -->
  51.  
  52. <!-- Delete everything in this .container and get started on your own site! -->
  53.  
  54. <div class="wrap-header">
  55. <div class="container">
  56. <h1 class="logo"><a title="Artthatworks" href="#">Artthatworks</a></h1>
  57. <nav class="primary">
  58. <ul>
  59. <li><a class="active" href="#">home</a> /</li>
  60. <li><a href="#">portfolio</a> /</li>
  61. <li><a href="#">blog</a> /</li>
  62. <li><a href="#">contact</a></li>
  63. </ul>
  64. </nav>
  65. </div>
  66.  
  67. <div class="container slides">
  68. <ul class="rslides clearfix">
  69. <li>
  70. <img src="images/slide-1.jpg" alt="" />
  71. <p class="desc">Description goes here</p>
  72. </li>
  73.  
  74. <li>
  75. <img src="images/slide-2.jpg" alt="" />
  76. <p class="desc">Another Description goes here</p>
  77. </li>
  78.  
  79. <li>
  80. <img src="images/slide-3.jpg" alt="" />
  81. <p class="desc">Last Description goes here</p>
  82. </li>
  83. </ul>
  84. <h2>Featured Project</h2>
  85. </div>
  86. </div><!-- end wrap-header -->
  87.  
  88. <div class="container welcome">
  89. <h1>Hi! Im <span class="green">Sanjeev Shrestha</span> a graphic/ web developer </br>based in Nepal.
  90. </h1>
  91.  
  92. <span class="graphic">
  93. <img src="images/graphic.png" alt=""/>
  94.  
  95. </span>
  96. </div> <!-- end welcome -->
  97.  
  98. <div class="container service">
  99. <div class="one-third column">
  100. <h2>Web Design</h2>
  101. <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p>
  102.  
  103. <a href="#" class="more">read more</a>
  104. </div>
  105.  
  106. <div class="one-third column">
  107. <h2>Graphic Design</h2>
  108. <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p>
  109. <a href="#" class="more">read more</a>
  110.  
  111. </div>
  112.  
  113. <div class="one-third column">
  114. <h2>Other Services</h2>
  115. <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p>
  116. <a href="#" class="more">read more</a>
  117.  
  118. </div>
  119. </div>
  120.  
  121.  
  122. <div class="container recent-projects">
  123. <h2>My Current Projects</h2>
  124. <div id="carousel" class="es-carousel-wrapper">
  125. <div class="es-carousel">
  126. <ul>
  127. <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li>
  128. <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li>
  129. <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li>
  130. <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li>
  131. <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li>
  132. <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li>
  133.  
  134. </ul>
  135.  
  136. </div>
  137. </div>
  138. </div> <!-- end recent-project -->
  139.  
  140.  
  141. <div class="container testimonial">
  142. <img src="images/me.jpg" alt=""/>
  143. <blockquote>
  144. <p>In hac habitasse platea dictumst. Donec sodales elit sed orci consectetur mollis. Cras eget erat tellus, eu elementum felis. Morbi tincidunt varius nisl, molestie ullamcorper sapien accumsan quis. Quisque velit risus, ullamcorper non tempor id, venenatis quis metus. </p>
  145. <cite><strong>Michael Burns</strong></cite>
  146. <a href="#" target="_blank">www.sanjeevstha.com.np</a>
  147.  
  148. </blockquote>
  149. </div> <!-- end testimonial -->
  150.  
  151. <footer>
  152. <div class="container widgets">
  153. <div class="one-third column about">
  154. <h2>About Me</h2>
  155. <img src="images/me-large.png" alt="" class="thumb" />
  156.  
  157. </div>
  158. <p>In hac habitasse platea dictumst. Donec sodales, elit sed orci consectetur mollis. Cras eget erat tellus, eu elementum felis. Morbi tincidunt varius nisl. </p>
  159.  
  160. <ul>
  161. <li><a href="#" target="_blank"><img src="images/facebook.png" alt="" /> </a></li>
  162. <li><a href="#" target="_blank"><img src="images/twitter.png" alt="" /> </a></li>
  163. <li><a href="#" target="_blank"><img src="images/rss.png" alt="" /> </a></li>
  164.  
  165. </ul>
  166. </div> <!-- end about-->
  167.  
  168. <div class="one-third column blog">
  169. <h2>Latest News</h2>
  170. <ul>
  171. <li>
  172. <p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p>
  173. <small>10.11.11 - Web Design</small>
  174. </li>
  175.  
  176. <li><p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p>
  177. <small>10.11.11 - Web Design</small></li>
  178. </ul>
  179.  
  180. <a class="dark-more">view more</a>
  181.  
  182. </div><!-- end blog-->
  183.  
  184. <div class="one-third column tweet">
  185. <h2>Latest Tweets</h2>
  186. <ul>
  187. <li> <p>AT&T Announces Five New Android Smartphones - <a href="#">http://on.mash.to/oCgEWK</a></p>
  188. <small>1 min ago</small>
  189. </li>
  190.  
  191. <li> <p>AT&T Announces Five New Android Smartphones - <a href="#">http://on.mash.to/oCgEWK</a></p>
  192. <small>1 hour ago</small>
  193. </li>
  194. </ul>
  195.  
  196. <a class="dark-more">@_burnstudio</a>
  197. </div> <!--end tweet-->
  198.  
  199. </footer>
  200.  
  201. <footer class="sub-footer">
  202. Copyright content goes here
  203.  
  204.  
  205. </footer>
  206.  
  207.  
  208. <!-- End Document
  209. ================================================== -->
  210. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  211. <script src="js/responsiveslides.min.js"></script>
  212. <script src="js/jquery.easing.1.3.js"></script>
  213. <script src="js/jquery.elastislide.js"></script>
  214.  
  215. <script>
  216. $(function () {
  217. $(".rslides").responsiveSlides({
  218. pager: true,
  219. nav: true });
  220. });
  221.  
  222. $('#carousel').elastislide({
  223. imageW : 300,
  224. minItems : 3
  225. });
  226.  
  227. </script>
  228.  
  229.  
  230.  
  231. </body>
  232. </html>
  233.  
  234.  
  235.  
  236.  
  237. /*Layout.css page*/
  238.  
  239.  
  240. /*
  241. * Skeleton V1.2
  242. * Copyright 2011, Dave Gamache
  243. * www.getskeleton.com
  244. * Free to use under the MIT license.
  245. * http://www.opensource.org/licenses/mit-license.php
  246. * 6/20/2012
  247. */
  248.  
  249. /* Table of Content
  250. ==================================================
  251. #Site Styles
  252. #Page Styles
  253. #Media Queries
  254. #Font-Face */
  255.  
  256. /* #Site Styles
  257. ================================================== */
  258.  
  259. /* #Page Styles
  260. ================================================== */
  261.  
  262. /* #Media Queries
  263. ================================================== */
  264.  
  265. /* Smaller than standard 960 (devices and browsers) */
  266. @media only screen and (max-width: 959px) {}
  267.  
  268. /* Tablet Portrait size to standard 960 (devices and browsers) */
  269. @media only screen and (min-width: 768px) and (max-width: 959px) {}
  270.  
  271. /* All Mobile Sizes (devices and browser) */
  272. @media only screen and (max-width: 767px) {}
  273.  
  274. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  275. @media only screen and (min-width: 480px) and (max-width: 767px) {}
  276.  
  277. /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  278. @media only screen and (max-width: 479px) {}
  279.  
  280.  
  281. /* #Font-Face
  282. ================================================== */
  283. /* This is the proper syntax for an @font-face file
  284. Just create a "fonts" folder at the root,
  285. copy your FontName into code below and remove
  286. comment brackets */
  287.  
  288. @font-face {
  289. font-family: 'Rokkitt';
  290. src: url('../fonts/Rokkitt/Rokkitt-Regular.ttf') format('truetype');
  291.  
  292. }
  293.  
  294. *{
  295. -moz-box-sizing: border-box;
  296. -webkit-box-sizing: border-box;
  297. box-sizing: border-box;
  298. }
  299.  
  300. body
  301. {
  302. font-family: Arial, Helvetica, sans-serif;
  303. background: #d8e4d6 url(../images/body-bg.png);
  304.  
  305. }
  306.  
  307. a,a:visited
  308. {
  309. color:#67b256;
  310. text-decoration:none;
  311. outline:0;
  312. }
  313.  
  314. a:hover, a:focus
  315. {
  316. text-decoration:underline;
  317.  
  318. }
  319.  
  320. p{
  321. font-size: 14px;
  322. color: #3b464b;
  323. }
  324.  
  325. h1{
  326. font-size: 30px;
  327. font-family: 'Rokkitt', serif; color: #23353e;
  328. }
  329.  
  330. h1.logo a{
  331. display: block;
  332. width: 183px;
  333. height: 32px;
  334. background: url(../images/logo.png) no-repeat;
  335. float: left;
  336. /* Nicolas Gallagher Image replacement technique */
  337. font: 0/0 a;
  338. text-shadow: none;
  339. color: transparent;
  340. }
  341.  
  342. /* NAVIGATION */
  343. nav.primary{
  344. float: right;
  345. }
  346.  
  347. nav.primary ul{
  348. float: right;
  349. margin-top: 5px;
  350. }
  351.  
  352. nav.primary ul li{
  353. float: left;
  354. margin-left: 20px;
  355. color: #67b256;
  356. }
  357.  
  358. nav.primary ul li a{
  359. display: inline-block;
  360. padding-right: 20px;
  361. text-decoration: none;
  362. font-family: 'Rokkitt', serif;
  363. font-size: 19px;
  364. font-weight: 600;
  365. color: #67b256;
  366. text-shadow: 0 1px 0 #090d0f;
  367. }
  368.  
  369. nav.primary ul li:last-child a{
  370. padding-left: 20px;
  371. }
  372.  
  373. nav.primary ul li a.active{
  374. color: #fff;
  375. }
  376.  
  377. nav.primary ul li a:hover{
  378. color: #fff;
  379. }
  380.  
  381.  
  382. /*rslides styles*/
  383. .rslides{
  384. position:relative;
  385. list-style:none;
  386. width:100%;
  387. padding:0;
  388. margin:0 0 20px 0;
  389. }
  390.  
  391. .rslides li{
  392. position:absolute;
  393. display:none;
  394. width:100%;
  395. left:0;
  396. top:0;
  397. }
  398.  
  399. .rslides li:first-child{
  400. position:relative;
  401. display:block;
  402. float:left;
  403. }
  404.  
  405. .rslides img{
  406. display:block;
  407. height:auto;
  408. float:left;
  409. width:100%;
  410. border:0;
  411. }
  412.  
  413. .slides{
  414. position:relative;
  415. margin-top:30px;
  416. }
  417.  
  418. .slides h2{
  419. display:inline-block;
  420. padding-right:30px;
  421. border-right:1px solid #9b9b9b;
  422. }
  423.  
  424. .desc{
  425. display:inline-block;
  426. margin:0;
  427. position:absolute;
  428. bottom:-62px;
  429. left:210px;
  430. }
  431.  
  432. .rslides li img{
  433. border:5px solid #fff;
  434. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  435. }
  436.  
  437.  
  438. a.prev{
  439. position:absolute;
  440. right:130px;
  441. display:block;
  442. width:13px;
  443. height:22px;
  444. background:url(../images/prev-next.png) no-repeat;
  445. background-position: top left;
  446. font:0/0 a;
  447. text-shadow:none;
  448. color:transparent;
  449. }
  450.  
  451. a.prev:hover{
  452. background-position:bottom left;
  453. }
  454.  
  455. a.next{
  456. position:absolute;
  457. right:0;
  458. display:block;
  459. width:13px;
  460. height:22px;
  461. background: url(../images/prev-next.png) no-repeat;
  462. background-position: top right;
  463. font:0/0 a;
  464. text-shadow:none;
  465. color:transparent;
  466. }
  467.  
  468. a.next:hover{ background-position:bottom right; }
  469.  
  470. ul.rslides_tabs{ position:absolute; right:20px; }
  471.  
  472. ul.rslides_tabs li{ float:left; margin-right:10px; }
  473.  
  474. ul.rslides_tabs li a{ display:block; background:url(../images/pagination.png) no-repeat; background-position:top; width:20px; height:21px;
  475. font:0/0 a; text-shadow:none; color:transparent; }
  476.  
  477. ul.rslides_tab li.rslides_here a, ul.rslides_tabs li a:hover{ background-position:bottom; }
  478.  
  479.  
  480. .welcome{ position:relative; padding:15px 0; border:1px dashed #9b9b9b; border-right:none; border-left:none; margin:40px auto; }
  481.  
  482. .welcome h1{ text-align:center; }
  483.  
  484. .green{ color:#67b256; }
  485.  
  486. .welcome .graphic img{ position:absolute; margin:0 auto; left:0; right:0; bottom: -7px; }
  487.  
  488. a.more{ display:inline-block; padding:5px 15px; background:#67b256; border: 1px solid #539544; border-top: 1px solid #93cc84;
  489. box-shadow: 0 -1px 0 #539544;
  490. -webkit-border-radius: 2px;
  491. -moz-border-radius: 2px;
  492. border-radius: 2px; text-decoration: none; color:#fff; text-shadow: 0 -1px 0 #539544; }
  493.  
  494. a.more:hover{ background: #6ebd5c; }
  495.  
  496. .service{ margin:20px auto;}
  497.  
  498. .recent-projects{
  499. margin: 40px auto;
  500. }
  501.  
  502. /* Elastislide Style */
  503.  
  504. .es-carousel-wrapper{
  505. padding:10px 37px;
  506. position:relative;
  507. }
  508.  
  509. .es-carousel{
  510. overflow:hidden;
  511. }
  512.  
  513. .es-carousel ul{
  514. display:none;
  515. }
  516.  
  517. .es-carousel ul li{
  518. height:100%; float:left;
  519. display:block;
  520. }
  521.  
  522. .es-carousel ul li a{
  523. display:block;
  524. margin: 0 10px;
  525. }
  526.  
  527. .es-carousel ul li a img{
  528. display:block;
  529. border: 5px solid #fff;
  530. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  531. max-height:100%;
  532. max-width:100%;
  533. }
  534. .es-nav span{
  535. position:absolute;
  536. top:50%;
  537. left:0;
  538. background:transparent url(../images/prev-next.png) top left no-repeat; width: 13px;
  539. height: 22px;
  540. margin-top:-13px;
  541. text-indent:-9000px; cursor:pointer;
  542. }
  543.  
  544. .es-nav span.es-nav-next{
  545. right: 0;
  546. left:auto;
  547. background-position:top right;
  548. }
  549.  
  550. .es-nav span:hover{
  551. background-position: bottom left;
  552. }
  553. .es-nav span.es-nav-next:hover{
  554. background-position: bottom right;
  555. }
  556.  
  557. .testimonial{ margin:40px auto; padding:0 50px;}
  558. .testimonial img{ float:left; margin-right:35px; border: 5pxsolid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2)}
  559.  
  560. blockquote{ background:url(../images/quote.png)no-repeat; overflow:hidden; border:none;}
  561.  
  562. blockquote p{ font-size:14px; padding-left:30px; font-style:normal;}
  563.  
  564. blockquote a{ display:block; text-align:right; font-size:12px; font-style:italic;}
  565.  
  566. cite{ text-align:right; font-style:normal; color:#23353e;}
  567. /* END TESTIMONIAL */
  568.  
  569. /*WIDGET*/
  570.  
  571. footer{ background: url(../images/triangle-top.png) 0 0 repeat-x,url(../images/noise.jpg) 0 0; padding:30px 0 30px 0;}
  572.  
  573.  
  574.  
  575. footer h2{ color:#fff; text-shadow:0 1px 0 #111a1f;}
  576.  
  577. .about img.thumb{ float:left; margin-right: 20px;}
  578.  
  579. .about div{ overflow:hidden;}
  580.  
  581. .about p{color:#a4afb4; font-size:13px; text-shadow:0 1px 0 #111a1f;}
  582.  
  583. .about ul li{float:left; margin-right:10px;}
  584.  
  585. .blog ul li, .tweet ul li{margin:0;border-bottom: 1px dashed #37515e; padding:15px 0;}
  586.  
  587. .blog p, .tweet p{color:#a4afb4; font-size:13px; text-shadow:0 1px 0 #111a1f; margin-bottom: 10px;}
  588.  
  589. .blog small, .tweet small{ color:#667983; text-shadow:0 1px 0 #111a1f;}
  590.  
  591. .blog ul li:first-child, .tweet ul li:first-child{border-top:none; padding-top:0;}
  592.  
  593. .blog ul li:first-child, .tweet ul li:last-child{border-bottom:none; padding-top:0;}
  594.  
  595. a.dark-more{display:inline-block; padding:5px 15px;}
  596. h2{ font-size: 22px; font-family: 'Rokkitt', serif; color: #23353e; }
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!