Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!-- macfustythemes -->
- <head>
- <title>{Title}</title>
- {block:Description}
- <meta name="description" content="{MetaDescription}">
- {/block:Description}
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css" />
- <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
- <!-- HTML5 Shiv -->
- <!--[if lt IE 9]>
- <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
- <![endif]-->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
- <script type="text/javascript" src="http://static.tumblr.com/01wstkc/7Kvnq7h6j/jquery.fullpage.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $('#fullpage').fullpage({
- anchors: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8', 'c9', 'c10', 'c11', 'c12', 'c13', 'c14', 'c15'],
- menu: '#menu',
- scrollingSpeed: 1000
- });
- });
- </script>
- <style>
- body {
- background-repeat: repeat;
- font-size: 11px;
- font-family: 'Calibri', sans-serif;
- line-height: 18px;
- background-color: #fff;
- }
- a {
- color: #717171;
- text-decoration: none;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- -webkit-transition: all 0.5s ease;
- transition: all 0.5s ease;
- }
- a:hover {
- color: #0a0a0a;
- }
- /** HEADER **/
- #header {
- position: fixed;
- width: 100%;
- height: 75px;
- top: 0;
- z-index: 999;
- text-align: left;
- background-color: #f3f3f3;
- border-bottom: 15px solid #d5d5d5;
- }
- h1 {
- float: left;
- margin: 30px 20px 0 20px;
- font-family: 'Roboto Condensed', sans-serif;
- font-weight: normal;
- text-transform: uppercase;
- letter-spacing: 5px;
- font-size: 28px;
- color: #0a0a0a;
- }
- #links {
- margin-top: 32px;
- text-transform: lowercase;
- letter-spacing: 2px;
- }
- /** MENU **/
- ul#menu {
- position: fixed;
- z-index: 9999;
- width: 220px;
- top: 28.5%;
- left: 10%;
- }
- ul#menu li {
- display: inline-block;
- list-style-type: none;
- width: 50px;
- height: 50px;
- margin: 0 10px 10px 0;
- padding: 5px;
- opacity: 0.4;
- }
- ul#menu li.active {
- margin: 0 10px 10px 0;
- border: 1px solid #d5d5d5;
- opacity: 0.6;
- }
- ul#menu li.active a:hover{
- border: none;
- }
- ul#menu li img {
- width: 50px;
- height: 50px;
- }
- .scrollheader {
- position: fixed;
- width: 240px;
- top: 27.5%;
- left: 12%;
- text-align: center;
- font-family: 'Roboto Condensed', sans-serif;
- text-transform: uppercase;
- letter-spacing: 6px;
- }
- /** CONTENT **/
- #content {
- position: absolute;
- left: 40%;
- top: 20%;
- width: 670px;
- height: 350px;
- padding: 10px 20px;
- background-color: #f3f3f3;
- border: 20px solid #d5d5d5;
- }
- .text {
- float: left;
- width: 280px;
- height: 320px;
- padding: 10px;
- overflow: auto;
- text-align: justify;
- margin-right: 20px;
- }
- .text::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- border-radius: 10px;
- background-color: #F5F5F5;
- }
- .text::-webkit-scrollbar
- {
- width: 6px;
- background-color: #F5F5F5;
- }
- .text::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
- background-color: #d5d5d5;
- }
- h2 {
- font-family: 'Roboto Condensed', sans-serif;
- font-weight: normal;
- text-transform: uppercase;
- letter-spacing: 5px;
- font-size: 24px;
- color: #0a0a0a;
- text-align: center;
- }
- h3 {
- text-align: center;
- font-weight: normal;
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 2px;
- }
- h3 span {
- font-size: 20px;
- }
- .mainimage {
- width: 250px;
- height: 250px;
- float: left;
- margin-top: 15px;
- }
- .mainimage img {
- width: 100%;
- height: 100%;
- }
- .colorholder {
- float: left;
- width: 250px;
- height: 62.5px;
- margin-top: 10px;
- }
- .color {
- float: left;
- width: 62.5px;
- height: 62.5px;
- }
- .sideimageholder {
- float: right;
- margin-top: -250px;
- }
- .sideimg {
- width: 73px;
- height: 73px;
- margin-bottom: 10px;
- }
- .sideimg img {
- width: 100%;
- height: 100%;
- }
- </style>
- </head>
- <body>
- <div id="header">
- <h1>Your Header Here</h1>
- <div id="links">
- <a href="/">Index</a> |
- <a href="/ask">Message</a> |
- <a href="/">Link 1</a> |
- <a href="/">Link 2</a> |
- <a href="/">Link 3</a> |
- <a href="http://macfustythemes.tumblr.com/">Theme</a>
- </div>
- </div>
- <!-- ICON NAVIGATION -->
- <div class="scrollheader">Scroll to navigate</div>
- <ul id="menu">
- <li data-menuanchor="c1"><a href="#c1"><img src="http://placehold.it/50x50"></a></li>
- <li data-menuanchor="c2"><a href="#c2"><img src="http://placehold.it/50x50"></a></li>
- <li data-menuanchor="c3"><a href="#c3"><img src="http://placehold.it/50x50"></a></li>
- <li data-menuanchor="c4"><a href="#c4"><img src="http://placehold.it/50x50"></a></li>
- <li data-menuanchor="c5"><a href="#c5"><img src="http://placehold.it/50x50"></a></li>
- <li data-menuanchor="c6"><a href="#c6"><img src="http://placehold.it/50x50"></a></li>
- <!-- COPY AND PASTE TO ADD MORE ICONS HERE. DON'T FORGET TO AMEND THE 'C1' NUMBERS TO FOLLOW CHRONOLOGICALLY. YOU CAN HAVE UP TO FIFTEEN ICONS AND PAGES. -->
- </ul>
- <div id="fullpage">
- <!-- PAGE 1 -->
- <div class="section" id="section0">
- <div id="content">
- <div class="text">
- <h2>Content Header 1</h2>
- <h3><a href="/">Link</a> | <a href="/">Link</a>
- <p><span>“</span> Include a quotation here! <span>”</span>
- </h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- <div class="mainimage">
- <img src="http://placehold.it/250x250">
- </div>
- <div class="colorholder">
- <div class="color" style="background-color: #6f0000"></div>
- <div class="color" style="background-color: #f1f87a"></div>
- <div class="color" style="background-color: #439d27"></div>
- <div class="color" style="background-color: #0e477c"></div>
- </div>
- <div class="sideimageholder">
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- </div>
- </div>
- </div>
- <!-- END OF PAGE 1 -->
- <!-- PAGE 2 -->
- <div class="section" id="section1">
- <div id="content">
- <div class="text">
- <h2>Content Header 2</h2>
- <h3><a href="/">Link</a> | <a href="/">Link</a>
- <p><span>“</span> Include a quotation here! <span>”</span>
- </h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- <div class="mainimage">
- <img src="http://placehold.it/250x250">
- </div>
- <div class="colorholder">
- <div class="color" style="background-color: #6f0000"></div>
- <div class="color" style="background-color: #f1f87a"></div>
- <div class="color" style="background-color: #439d27"></div>
- <div class="color" style="background-color: #0e477c"></div>
- </div>
- <div class="sideimageholder">
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- </div>
- </div>
- </div>
- <!-- PAGE 3 -->
- <div class="section" id="section2">
- <div id="content">
- <div class="text">
- <h2>Content Header 3</h2>
- <h3><a href="/">Link</a> | <a href="/">Link</a>
- <p><span>“</span> Include a quotation here! <span>”</span>
- </h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- <div class="mainimage">
- <img src="http://placehold.it/250x250">
- </div>
- <div class="colorholder">
- <div class="color" style="background-color: #6f0000"></div>
- <div class="color" style="background-color: #f1f87a"></div>
- <div class="color" style="background-color: #439d27"></div>
- <div class="color" style="background-color: #0e477c"></div>
- </div>
- <div class="sideimageholder">
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- </div>
- </div>
- </div>
- <!-- END OF PAGE 3 -->
- <!-- PAGE 4 -->
- <div class="section" id="section3">
- <div id="content">
- <div class="text">
- <h2>Content Header 4</h2>
- <h3><a href="/">Link</a> | <a href="/">Link</a>
- <p><span>“</span> Include a quotation here! <span>”</span>
- </h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- <div class="mainimage">
- <img src="http://placehold.it/250x250">
- </div>
- <div class="colorholder">
- <div class="color" style="background-color: #6f0000"></div>
- <div class="color" style="background-color: #f1f87a"></div>
- <div class="color" style="background-color: #439d27"></div>
- <div class="color" style="background-color: #0e477c"></div>
- </div>
- <div class="sideimageholder">
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- </div>
- </div>
- </div>
- <!-- END OF PAGE 4 -->
- <!-- PAGE 5 -->
- <div class="section" id="section3">
- <div id="content">
- <div class="text">
- <h2>Content Header 5</h2>
- <h3><a href="/">Link</a> | <a href="/">Link</a>
- <p><span>“</span> Include a quotation here! <span>”</span>
- </h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- <div class="mainimage">
- <img src="http://placehold.it/250x250">
- </div>
- <div class="colorholder">
- <div class="color" style="background-color: #6f0000"></div>
- <div class="color" style="background-color: #f1f87a"></div>
- <div class="color" style="background-color: #439d27"></div>
- <div class="color" style="background-color: #0e477c"></div>
- </div>
- <div class="sideimageholder">
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- </div>
- </div>
- </div>
- <!-- END OF PAGE 5 -->
- <!-- PAGE 6 -->
- <div class="section" id="section3">
- <div id="content">
- <div class="text">
- <h2>Content Header 6</h2>
- <h3><a href="/">Link</a> | <a href="/">Link</a>
- <p><span>“</span> Include a quotation here! <span>”</span>
- </h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sem id orci porta commodo. Cras a lectus id nisl posuere pretium eget a nisl. Integer ac lacus non sem vestibulum mollis quis ut urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at ultricies arcu. Vivamus convallis in mi feugiat molestie. Pellentesque lacinia pretium imperdiet. Vestibulum sit amet leo dictum, fringilla arcu vel, malesuada metus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- <div class="mainimage">
- <img src="http://placehold.it/250x250">
- </div>
- <div class="colorholder">
- <div class="color" style="background-color: #6f0000"></div>
- <div class="color" style="background-color: #f1f87a"></div>
- <div class="color" style="background-color: #439d27"></div>
- <div class="color" style="background-color: #0e477c"></div>
- </div>
- <div class="sideimageholder">
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- <div class="sideimg"><img src="http://placehold.it/73x73"></div>
- </div>
- </div>
- </div>
- <!-- END OF PAGE 6 -->
- <!-- COPY AND PASTE TO ADD MORE PAGES HERE -->
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement