Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- [ᴀᴘᴘᴀʀᴇʟ] - by dyothms/luhyns
- Please do not remove the credit
- -->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <style type="text/css">
- body {
- font-family:calibri;
- font-size:11px;
- line-height:12px;
- color:#aaa; /** font colour **/
- background-color:#fff; /** background colour **/
- background-image:url(/); /** background image **/
- background-attachment:fixed;
- background-repeat:repeat;
- }
- a:link, a:active, a:visited{
- color:#888; /** link colour **/
- text-decoration:none;
- transition: all 0.5s ease-out;
- -o-transition-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- }
- a:hover {
- color:#ccc; /** link hover colour **/
- cursor:help;
- }
- img {
- border:0;
- max-width:100%;
- }
- ::-webkit-scrollbar {
- width: 6px;
- height: 6px;
- }
- ::-webkit-scrollbar-thumb {
- border:1px solid white;
- background-color: #ddd; /** scroll bar colour **/
- }
- #sidebar {
- z-index:100;
- position:fixed;
- top:0; bottom:0;
- left:40px;
- margin-top:auto;
- margin-bottom:auto;
- height:570px;
- width:180px;
- padding-left:160px;
- padding-right:20px;
- background-color:/; /** sidebar background colour **/
- background-image:url(); /** sidebar background image **/
- background-attachment:fixed;
- background-repeat:repeat;
- }
- .blogt {
- margin-top:30px;
- line-height:40px;
- font-size:42px;
- text-align:right;
- font-family:Arial;
- font-weight:bold;
- }
- .desc {
- position:absolute;
- bottom:60px;
- width:180px;
- text-align:right;
- }
- .nav {
- margin-top:40px;
- margin-left:-50px;
- width:230px;
- line-height:16px;
- font-size:15px;
- text-align:right;
- font-family:Arial;
- font-weight:bold;
- }
- .nav a {
- padding-left:5px;
- color:#aaa; /** navigation font colour **/
- }
- .ct {
- overflow:hidden;
- height:500px;
- width:375px;
- }
- .ct img {
- z-index:5;
- height:500px;
- width:375px;
- -webkit-transition: all 0.6s ease;
- -moz-transition: all 0.6s ease;
- -o-transition: all 0.6s ease;
- transition: all 0.6s ease;
- }
- .ct:hover img{
- margin-left:-300px;
- }
- .ctinf {
- z-index:2;
- overflow:hidden;
- position:absolute;
- margin-left:375px;
- width:0px;
- height:500px;
- background:white;
- -webkit-transition: all 0.6s ease;
- -moz-transition: all 0.6s ease;
- -o-transition: all 0.6s ease;
- transition: all 0.6s ease;
- }
- .ct:hover .ctinf {
- margin-left:75px;
- width:300px;
- }
- .pcont {
- margin-left:10px;
- width:220px;
- }
- .pname {
- color:#aaa; /** font colour of names **/
- line-height:34px;
- font-size:35px;
- text-align:left;
- font-family:Arial;
- font-weight:bold;
- }
- .pname a {
- color:#aaa; /** font colour of names as links **/
- }
- .pdesc {
- position:absolute;
- bottom:20px;
- width:220px;
- color:#aaa;
- text-align:left;
- }
- .poth {
- margin-top:30px;
- color:#aaa; /** font colour of position **/
- line-height:14px;
- font-size:15px;
- text-align:left;
- font-family:Arial;
- font-weight:bold;
- }
- #cont {
- position:absolute;
- overflow:hidden;
- overflow-x:scroll;
- left:400px;
- right:40px;
- top:0px; bottom:0px;
- margin-top:auto;
- margin-bottom:auto;
- height:510px;
- border:30px solid white;
- background:white;
- }
- table {
- position:absolute;
- width:auto;
- height:500px;
- background:white;
- }
- td {
- border:0px;
- padding:0px;
- }
- #crt2 {
- z-index: 4783;
- position:fixed;
- bottom:15px;
- right:15px;
- width:12px;
- background:white;
- border: 1px solid #ddd;
- padding: 5px;
- font-family: calibri;
- font-size: 8px;
- line-height: 12px;
- letter-spacing:1px;
- font-style:italic;
- text-align:center;
- transition: all 0.5s ease-out;
- -o-transition-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- }
- #min {
- z-index: 4780;
- opacity:0;
- position:fixed;
- bottom:15px;
- right:38px;
- width:auto;
- background: white;
- border: 1px solid #ddd;
- padding: 5px;
- font-family: calibri;
- font-size: 8px;
- line-height: 12px;
- letter-spacing:1px;
- text-transform:uppercase;
- text-align:center;
- transition: all 0.5s ease-out;
- -o-transition-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- }
- #tm:hover #min{
- opacity:1;
- }
- #tm a {
- color: #eee;
- }
- {CustomCSS}
- </style>
- <!------title------>
- <title>{title}</title>
- <link rel="shortcut icon" href="{Favicon}" />
- <meta name="viewport" content="width=820" />
- </head>
- <body>
- <div id="sidebar">
- <!-- blog title -->
- <div class="blogt">Apparel</div>
- <div class="desc">
- <!-- description -->
- Page 2 by dyothms / <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="nav">
- <!-- navigation -->
- <a href="/">Back</a>
- <a href="/ask">Message</a>
- <a href="https://www.tumblr.com/dashboard">Dashboard</a>
- </div>
- </div>
- </div>
- <div id="cont">
- <table>
- <tr>
- <!-- start of content -->
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <!-- name of person (replace with <a href="http://tumblr.com">NAME</a> to become link) -->
- <div class="pname">Xiumin</div>
- <div class="pdesc">
- <!-- description for person -->
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <!-- position of person -->
- <div class="poth">Exo-M member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/a7f506c5f3294ae29a9db3c056afe6d7/5hjtxt6/aJWnryuut/tumblr_static_4e6xoxocpjwgkcwcwo0wowso4.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">Suho</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-K member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/a2453878ca661dc78bdfaa52a76c43c8/5hjtxt6/Vmgnryuuv/tumblr_static_7rg7e2rdicso48ck4008ogo4g.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">Lay</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-M member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/2e4cabd714366f3ab30d22a001573225/5hjtxt6/Avznryuuw/tumblr_static_bppgsh1p7o084gskss4g4g0sg.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">Baekhyun</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-K member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/da5039c6087f372da0bf6fa125e973e8/5hjtxt6/stTnryuux/tumblr_static_5ahk77tp4iw4c0c8s400k4c8g.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">Chen</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-M member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/833e29b320c81c9bf0d823f52e35ffe3/5hjtxt6/d0Pnryuuy/tumblr_static_5i4jx8k5x44k0s4o008g40k84.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">Chanyeol</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-K member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/0a15c315b73e94c51fe343228e5c1260/5hjtxt6/a3nnryuuz/tumblr_static_43iwvnoqhtgkcwsko84kcgkog.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">D.O</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-K member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/5964da66fc0b6ef453842280aeaaf857/5hjtxt6/ufhnryuv0/tumblr_static_3goafl8lofokw40wcoosw0k44.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">Kai</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-K member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/5ba7d8cfebbd27d6a806d5f6cae7f2a8/5hjtxt6/Ru6nryuv2/tumblr_static_3mw9bi5dahgk4cg8k4goco8ck.png" />
- </div></td>
- <td><div class="ct">
- <div class="ctinf"><div class="pcont">
- <div class="pname">Sehun</div>
- <div class="pdesc">
- <b>bold</b> <i>italic</i> <s>strike</s> <a href="/">link</a></br></br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vivamus nec nibh a nulla volutpat ultrices. Morbi viverra laoreet ex, pellentesque tristique ipsum finibus luctus.</br></br>
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed quam eget dui pharetra egestas.
- <div class="poth">Exo-K member</div>
- </div></div></div>
- <img src="http://static.tumblr.com/867736e024861272b67ca0ed0e2bc383/5hjtxt6/qOBnryuv3/tumblr_static_aovt60liovks8c8sg4g4okwog.png" />
- </div></td>
- <!-- end -->
- </tr>
- </table>
- </div>
- <a href="http://luhyns.tumblr.com/"><div id="tm"><div id="crt2">TM</div>
- <div id="min">dyothms</div></div></a>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement