Анимированное портфолио на jQuery
|
1 2 3 |
<link rel="stylesheet" media="screen" href="/css/portfolio/portfolio.css"> <script src="/css/portfolio/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="/css/portfolio/js.js" type="text/javascript" charset="utf-8"></script> |
2#: Туда, где будет само портфолио:
|
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 |
<div class="page"> <div id="header"> <h1><a href="/">Ваш <span>сайт</span></a></h1> <h2>Freelance Interactive Designer</h2> </div> <div id="about"> <h2>О нас</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla adipiscing, est ut sodales luctus, ipsum dui vehicula libero, et eleifend nunc quam sed urna. Suspendisse lobortis scelerisque nisi. Nulla tellus. Suspendisse odio sem, pulvinar sed, ultricies a, porttitor et, purus. Praesent pellentesque magna in quam. Cras quis lorem non lectus iaculis scelerisque. Donec ipsum nibh, varius sed, pulvinar non, mollis ultrices, sapien. Suspendisse posuere dignissim nulla. Phasellus congue nibh vitae ligula dignissim luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce vestibulum, ante a ultrices fermentum, mi felis consectetuer risus, non eleifend velit mauris sed massa. Sed risus lectus, dignissim nec, tincidunt vel, vulputate et, felis. In malesuada nulla et diam. Suspendisse interdum urna eget augue. <br><br>Sed in est eget est porttitor aliquet. Suspendisse potenti. Maecenas eget pede. Integer vel nisl. Donec nec lorem at leo congue dignissim. Fusce orci. Curabitur tempus, nibh aliquam molestie egestas, ipsum nunc gravida lacus, id suscipit erat justo quis nulla. Nunc id nunc in lorem tempor pharetra. Suspendisse mollis fermentum nunc. Nulla facilisi. </p> </div> <div id="portfolio"><div id="portfoliostrip"> <!-- START OF ITEM 1 --> <div class="item"> <div class="itemImage"> <img src="/css/portfolio/1.png" alt="PortfolioItem1"> </div> <div class="itemDescription"> <h2>Название материала</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla adipiscing, est ut sodales luctus, ipsum dui vehicula libero, et eleifend nunc quam sed urna. Suspendisse lobortis scelerisque nisi.</p> </div> </div> <!-- START OF ITEM 2 --> <div class="item"> <div class="itemImage"> <img src="/css/portfolio/2.png" alt="PortfolioItem2"> </div> <div class="itemDescription"> <h2>Название материала</h2> Praesent erat quam, rutrum ut, pulvinar nec, dignissim quis, ante. Sed feugiat ultrices mi. Vestibulum venenatis facilisis nisi. Aenean pulvinar. Sed sit amet nisl. Proin libero. Aliquam erat volutpat. Donec id mi. Ut magna magna, aliquet ut, porttitor vitae, dapibus ultrices, lectus. Fusce eu turpis. Quisque mattis est quis turpis.</p> </div> </div> <!-- START OF ITEM 3 --> <div class="item"> <div class="itemImage"> <img src="/css/portfolio/3.png" alt="PortfolioItem3"> </div> <div class="itemDescription"> <h2>Название материала</h2> Sed in est eget est porttitor aliquet. Suspendisse potenti. Maecenas eget pede. Integer vel nisl. Donec nec lorem at leo congue dignissim. Fusce orci.</p> </div> </div> <!-- START OF ITEM 4 --> <div class="item"> <div class="itemImage"> <img src="/css/portfolio/4.png" alt="PortfolioItem4"> </div> <div class="itemDescription"> <h2>Название материала</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla adipiscing, est ut sodales luctus, ipsum dui vehicula libero, et eleifend nunc quam sed urna. Suspendisse lobortis scelerisque nisi.</p> </div> </div> <!-- START OF ITEM 5 --> <div class="item"> <div class="itemImage"> <img src="/css/portfolio/5.png" alt="PortfolioItem5"> </div> <div class="itemDescription"> <h2>Название материала</h2> Cras gravida posuere lectus. Quisque et pede. Nunc non enim pulvinar arcu posuere imperdiet. Donec tellus arcu, commodo at, venenatis quis, pretium ut, mi. Suspendisse ac turpis vel elit laoreet accumsan. Sed in massa. Pellentesque sit amet sem sit amet nunc viverra adipiscing. Phasellus bibendum nisl ac risus. Vivamus blandit ante vitae est. Fusce viverra, ipsum at accumsan suscipit, odio nunc lobortis est, mollis mattis erat libero ut lacus.</p> </div> </div> </div></div> <div class="buttons"> <div class="left"> <a href="#" class="portfolioBtn1">1</a> <a href="#" class="portfolioBtn2">2</a> <a href="#" class="portfolioBtn3">3</a> <a href="#" class="portfolioBtn4">4</a> <a href="#" class="portfolioBtn5">5</a> </div> <div class="right"> <a href="#" class="aboutBtn">О нас</a> <a href="#" class="portfolioBtn">Портфолио</a> </div> </div> </div> |
