Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*index.html page*/
- <!DOCTYPE html>
- <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
- <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
- <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
- <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
- <head>
- <!-- Basic Page Needs
- ================================================== -->
- <meta charset="utf-8">
- <title>Your Page Title Here :)</title>
- <meta name="description" content="">
- <meta name="author" content="">
- <!-- Mobile Specific Metas
- ================================================== -->
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <!-- CSS
- ================================================== -->
- <link rel="stylesheet" href="stylesheets/base.css">
- <link rel="stylesheet" href="stylesheets/skeleton.css">
- <link rel="stylesheet" href="stylesheets/layout.css">
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <!-- Favicons
- ================================================== -->
- <link rel="shortcut icon" href="images/favicon.ico">
- <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
- <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
- <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
- </head>
- <body>
- <!-- Primary Page Layout
- ================================================== -->
- <!-- Delete everything in this .container and get started on your own site! -->
- <div class="wrap-header">
- <div class="container">
- <h1 class="logo"><a title="Artthatworks" href="#">Artthatworks</a></h1>
- <nav class="primary">
- <ul>
- <li><a class="active" href="#">home</a> /</li>
- <li><a href="#">portfolio</a> /</li>
- <li><a href="#">blog</a> /</li>
- <li><a href="#">contact</a></li>
- </ul>
- </nav>
- </div>
- <div class="container slides">
- <ul class="rslides clearfix">
- <li>
- <img src="images/slide-1.jpg" alt="" />
- <p class="desc">Description goes here</p>
- </li>
- <li>
- <img src="images/slide-2.jpg" alt="" />
- <p class="desc">Another Description goes here</p>
- </li>
- <li>
- <img src="images/slide-3.jpg" alt="" />
- <p class="desc">Last Description goes here</p>
- </li>
- </ul>
- <h2>Featured Project</h2>
- </div>
- </div><!-- end wrap-header -->
- <div class="container welcome">
- <h1>Hi! Im <span class="green">Sanjeev Shrestha</span> a graphic/ web developer </br>based in Nepal.
- </h1>
- <span class="graphic">
- <img src="images/graphic.png" alt=""/>
- </span>
- </div> <!-- end welcome -->
- <div class="container service">
- <div class="one-third column">
- <h2>Web Design</h2>
- <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>
- <a href="#" class="more">read more</a>
- </div>
- <div class="one-third column">
- <h2>Graphic Design</h2>
- <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>
- <a href="#" class="more">read more</a>
- </div>
- <div class="one-third column">
- <h2>Other Services</h2>
- <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>
- <a href="#" class="more">read more</a>
- </div>
- </div>
- <div class="container recent-projects">
- <h2>My Current Projects</h2>
- <div id="carousel" class="es-carousel-wrapper">
- <div class="es-carousel">
- <ul>
- <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li>
- <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li>
- <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li>
- <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li>
- <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li>
- <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li>
- </ul>
- </div>
- </div>
- </div> <!-- end recent-project -->
- <div class="container testimonial">
- <img src="images/me.jpg" alt=""/>
- <blockquote>
- <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>
- <cite><strong>Michael Burns</strong></cite>
- <a href="#" target="_blank">www.sanjeevstha.com.np</a>
- </blockquote>
- </div> <!-- end testimonial -->
- <footer>
- <div class="container widgets">
- <div class="one-third column about">
- <h2>About Me</h2>
- <img src="images/me-large.png" alt="" class="thumb" />
- </div>
- <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>
- <ul>
- <li><a href="#" target="_blank"><img src="images/facebook.png" alt="" /> </a></li>
- <li><a href="#" target="_blank"><img src="images/twitter.png" alt="" /> </a></li>
- <li><a href="#" target="_blank"><img src="images/rss.png" alt="" /> </a></li>
- </ul>
- </div> <!-- end about-->
- <div class="one-third column blog">
- <h2>Latest News</h2>
- <ul>
- <li>
- <p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p>
- <small>10.11.11 - Web Design</small>
- </li>
- <li><p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p>
- <small>10.11.11 - Web Design</small></li>
- </ul>
- <a class="dark-more">view more</a>
- </div><!-- end blog-->
- <div class="one-third column tweet">
- <h2>Latest Tweets</h2>
- <ul>
- <li> <p>AT&T Announces Five New Android Smartphones - <a href="#">http://on.mash.to/oCgEWK</a></p>
- <small>1 min ago</small>
- </li>
- <li> <p>AT&T Announces Five New Android Smartphones - <a href="#">http://on.mash.to/oCgEWK</a></p>
- <small>1 hour ago</small>
- </li>
- </ul>
- <a class="dark-more">@_burnstudio</a>
- </div> <!--end tweet-->
- </footer>
- <footer class="sub-footer">
- Copyright content goes here
- </footer>
- <!-- End Document
- ================================================== -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="js/responsiveslides.min.js"></script>
- <script src="js/jquery.easing.1.3.js"></script>
- <script src="js/jquery.elastislide.js"></script>
- <script>
- $(function () {
- $(".rslides").responsiveSlides({
- pager: true,
- nav: true });
- });
- $('#carousel').elastislide({
- imageW : 300,
- minItems : 3
- });
- </script>
- </body>
- </html>
- /*Layout.css page*/
- /*
- * Skeleton V1.2
- * Copyright 2011, Dave Gamache
- * www.getskeleton.com
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- * 6/20/2012
- */
- /* Table of Content
- ==================================================
- #Site Styles
- #Page Styles
- #Media Queries
- #Font-Face */
- /* #Site Styles
- ================================================== */
- /* #Page Styles
- ================================================== */
- /* #Media Queries
- ================================================== */
- /* Smaller than standard 960 (devices and browsers) */
- @media only screen and (max-width: 959px) {}
- /* Tablet Portrait size to standard 960 (devices and browsers) */
- @media only screen and (min-width: 768px) and (max-width: 959px) {}
- /* All Mobile Sizes (devices and browser) */
- @media only screen and (max-width: 767px) {}
- /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
- @media only screen and (min-width: 480px) and (max-width: 767px) {}
- /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
- @media only screen and (max-width: 479px) {}
- /* #Font-Face
- ================================================== */
- /* This is the proper syntax for an @font-face file
- Just create a "fonts" folder at the root,
- copy your FontName into code below and remove
- comment brackets */
- @font-face {
- font-family: 'Rokkitt';
- src: url('../fonts/Rokkitt/Rokkitt-Regular.ttf') format('truetype');
- }
- *{
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
- body
- {
- font-family: Arial, Helvetica, sans-serif;
- background: #d8e4d6 url(../images/body-bg.png);
- }
- a,a:visited
- {
- color:#67b256;
- text-decoration:none;
- outline:0;
- }
- a:hover, a:focus
- {
- text-decoration:underline;
- }
- p{
- font-size: 14px;
- color: #3b464b;
- }
- h1{
- font-size: 30px;
- font-family: 'Rokkitt', serif; color: #23353e;
- }
- h1.logo a{
- display: block;
- width: 183px;
- height: 32px;
- background: url(../images/logo.png) no-repeat;
- float: left;
- /* Nicolas Gallagher Image replacement technique */
- font: 0/0 a;
- text-shadow: none;
- color: transparent;
- }
- /* NAVIGATION */
- nav.primary{
- float: right;
- }
- nav.primary ul{
- float: right;
- margin-top: 5px;
- }
- nav.primary ul li{
- float: left;
- margin-left: 20px;
- color: #67b256;
- }
- nav.primary ul li a{
- display: inline-block;
- padding-right: 20px;
- text-decoration: none;
- font-family: 'Rokkitt', serif;
- font-size: 19px;
- font-weight: 600;
- color: #67b256;
- text-shadow: 0 1px 0 #090d0f;
- }
- nav.primary ul li:last-child a{
- padding-left: 20px;
- }
- nav.primary ul li a.active{
- color: #fff;
- }
- nav.primary ul li a:hover{
- color: #fff;
- }
- /*rslides styles*/
- .rslides{
- position:relative;
- list-style:none;
- width:100%;
- padding:0;
- margin:0 0 20px 0;
- }
- .rslides li{
- position:absolute;
- display:none;
- width:100%;
- left:0;
- top:0;
- }
- .rslides li:first-child{
- position:relative;
- display:block;
- float:left;
- }
- .rslides img{
- display:block;
- height:auto;
- float:left;
- width:100%;
- border:0;
- }
- .slides{
- position:relative;
- margin-top:30px;
- }
- .slides h2{
- display:inline-block;
- padding-right:30px;
- border-right:1px solid #9b9b9b;
- }
- .desc{
- display:inline-block;
- margin:0;
- position:absolute;
- bottom:-62px;
- left:210px;
- }
- .rslides li img{
- border:5px solid #fff;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
- }
- a.prev{
- position:absolute;
- right:130px;
- display:block;
- width:13px;
- height:22px;
- background:url(../images/prev-next.png) no-repeat;
- background-position: top left;
- font:0/0 a;
- text-shadow:none;
- color:transparent;
- }
- a.prev:hover{
- background-position:bottom left;
- }
- a.next{
- position:absolute;
- right:0;
- display:block;
- width:13px;
- height:22px;
- background: url(../images/prev-next.png) no-repeat;
- background-position: top right;
- font:0/0 a;
- text-shadow:none;
- color:transparent;
- }
- a.next:hover{ background-position:bottom right; }
- ul.rslides_tabs{ position:absolute; right:20px; }
- ul.rslides_tabs li{ float:left; margin-right:10px; }
- ul.rslides_tabs li a{ display:block; background:url(../images/pagination.png) no-repeat; background-position:top; width:20px; height:21px;
- font:0/0 a; text-shadow:none; color:transparent; }
- ul.rslides_tab li.rslides_here a, ul.rslides_tabs li a:hover{ background-position:bottom; }
- .welcome{ position:relative; padding:15px 0; border:1px dashed #9b9b9b; border-right:none; border-left:none; margin:40px auto; }
- .welcome h1{ text-align:center; }
- .green{ color:#67b256; }
- .welcome .graphic img{ position:absolute; margin:0 auto; left:0; right:0; bottom: -7px; }
- a.more{ display:inline-block; padding:5px 15px; background:#67b256; border: 1px solid #539544; border-top: 1px solid #93cc84;
- box-shadow: 0 -1px 0 #539544;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px; text-decoration: none; color:#fff; text-shadow: 0 -1px 0 #539544; }
- a.more:hover{ background: #6ebd5c; }
- .service{ margin:20px auto;}
- .recent-projects{
- margin: 40px auto;
- }
- /* Elastislide Style */
- .es-carousel-wrapper{
- padding:10px 37px;
- position:relative;
- }
- .es-carousel{
- overflow:hidden;
- }
- .es-carousel ul{
- display:none;
- }
- .es-carousel ul li{
- height:100%; float:left;
- display:block;
- }
- .es-carousel ul li a{
- display:block;
- margin: 0 10px;
- }
- .es-carousel ul li a img{
- display:block;
- border: 5px solid #fff;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
- max-height:100%;
- max-width:100%;
- }
- .es-nav span{
- position:absolute;
- top:50%;
- left:0;
- background:transparent url(../images/prev-next.png) top left no-repeat; width: 13px;
- height: 22px;
- margin-top:-13px;
- text-indent:-9000px; cursor:pointer;
- }
- .es-nav span.es-nav-next{
- right: 0;
- left:auto;
- background-position:top right;
- }
- .es-nav span:hover{
- background-position: bottom left;
- }
- .es-nav span.es-nav-next:hover{
- background-position: bottom right;
- }
- .testimonial{ margin:40px auto; padding:0 50px;}
- .testimonial img{ float:left; margin-right:35px; border: 5pxsolid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2)}
- blockquote{ background:url(../images/quote.png)no-repeat; overflow:hidden; border:none;}
- blockquote p{ font-size:14px; padding-left:30px; font-style:normal;}
- blockquote a{ display:block; text-align:right; font-size:12px; font-style:italic;}
- cite{ text-align:right; font-style:normal; color:#23353e;}
- /* END TESTIMONIAL */
- /*WIDGET*/
- footer{ background: url(../images/triangle-top.png) 0 0 repeat-x,url(../images/noise.jpg) 0 0; padding:30px 0 30px 0;}
- footer h2{ color:#fff; text-shadow:0 1px 0 #111a1f;}
- .about img.thumb{ float:left; margin-right: 20px;}
- .about div{ overflow:hidden;}
- .about p{color:#a4afb4; font-size:13px; text-shadow:0 1px 0 #111a1f;}
- .about ul li{float:left; margin-right:10px;}
- .blog ul li, .tweet ul li{margin:0;border-bottom: 1px dashed #37515e; padding:15px 0;}
- .blog p, .tweet p{color:#a4afb4; font-size:13px; text-shadow:0 1px 0 #111a1f; margin-bottom: 10px;}
- .blog small, .tweet small{ color:#667983; text-shadow:0 1px 0 #111a1f;}
- .blog ul li:first-child, .tweet ul li:first-child{border-top:none; padding-top:0;}
- .blog ul li:first-child, .tweet ul li:last-child{border-bottom:none; padding-top:0;}
- a.dark-more{display:inline-block; padding:5px 15px;}
- h2{ font-size: 22px; font-family: 'Rokkitt', serif; color: #23353e; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement