Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!---
- * ( codes by bella || serendipitythms )
- 002. holiday night
- — dont redistribute/claim as your own
- — dont remove the credits
- — dont copy parts of the code
- — edit as much as you want!
- * ( thanks for using my codes! ♡ )
- --->
- <!DOCTYPE html>
- <html>
- <link rel="shortcut icon" href="{Favicon}" />
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function() {
- $("[title],a[title],img[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:90,
- tip_fade_speed:600,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <title>meet the muses.</title> <!--- page title --->
- <link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
- <script src="//pull.cappuccicons.com/cpf.js"></script>
- </head>
- <style>
- @font-face {font-family: "chasing embers";src:url('http://static.tumblr.com/zx3ibzm/v8Dorvn30/chasing_embers_demo_version.ttf');}
- </style>
- <style type="text/css">
- /* ------------------------- credits ------------------------- */
- /* -------------------- don't touch this! -------------------- */
- .credit {
- position: fixed;
- bottom: 15px;
- right: 15px;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- padding: 5px;
- font-size:15px;
- background: rgba(255,255,255,0.5);
- z-index: 99999;
- }
- /* ------------------------- scrollbar ------------------------- */
- ::-webkit-scrollbar-thumb {
- background-color: #F699A1; /* -- bar color -- */
- }
- ::-webkit-scrollbar-track {
- background-color: #F1F1F1; /* -- bg color -- */
- }
- ::-webkit-scrollbar {
- height:2px;
- width:2px;
- }
- /* ------------------------- tooltip ------------------------- */
- #s-m-t-tooltip {
- max-width: 300px;
- border-radius: 3px;
- padding: 5px 5px;
- margin: 25px 20px 5px 0px;
- color: #969696; /* -- text color -- */
- background: #DAE4D9; /* -- bg color -- */
- border: 1px solid #B7D3CB; /* -- border color -- */
- z-index: 99999;
- font-size: 7px;
- text-transform: uppercase;
- font-family: 'ABeeZee';
- letter-spacing: 2px;
- }
- /* ------------------------- basics ------------------------- */
- body {
- background-image: url('urlhere'); /* -- image bg url (if u want) -- */
- background-color: #f0f0f0; /* -- bg color -- */
- padding: 30px;
- font-family: 'ABeeZee', sans-serif;
- font-size: 9px;
- letter-spacing: 1px;
- text-align: justify;
- color: #969696; /* -- font color -- */
- }
- b, strong {
- color: #F699A1; /* -- bold color -- */
- }
- i, em {
- color: #111111; /* -- italics color -- */
- }
- u {
- text-decoration: none;
- background-color: #DAE4D9; /* -- underlined bg color -- */
- padding: 3px;
- border-radius: 3px;
- color: #969696; /* -- underlined color -- */
- }
- a {
- text-decoration: none;
- color: #F699A1; /* -- link color -- */
- -webkit-transition: ease-in-out .5s;
- -moz-transition: ease-in-out .5s;
- -o-transition: ease-in-out .5s;
- -ms-transition: ease-in-out .5s;
- transition: ease-in-out .5s;
- }
- a:hover {
- color: #969696; /* -- link hover color -- */
- -webkit-transition: ease-in-out .5s;
- -moz-transition: ease-in-out .5s;
- -o-transition: ease-in-out .5s;
- -ms-transition: ease-in-out .5s;
- transition: ease-in-out .5s;
- }
- /* ------------------------- navigation ------------------------- */
- .topbar {
- background-color: rgba(255,255,255,0.5); /* -- navi bg color; the last number is opacity (default is 1) -- */
- position: absolute;
- top: 0px;
- left: 0px;
- width: 100%;
- }
- .inside {
- padding: 10px 200px 10px 200px;
- }
- .title {
- text-transform: uppercase;
- font-size: 11px;
- font-weight: bold;
- color: #969696; /* -- title color -- */
- }
- .navi {
- padding-left: 50px;
- }
- /* ------------------------- boxes ------------------------- */
- .container {
- margin: auto;
- margin-top: 50px;
- width: 1010px;
- display: grid;
- grid-template-columns: 500px 500px;
- grid-gap: 30px 10px;
- list-style: none;
- }
- .container li {
- background-color: rgba(255,255,255,0.5); /* -- box bg color -- */
- border:1px solid rgba(0,0,0,0.1); /* -- box border color -- */
- border-radius: 3px;
- padding: 20px;
- line-height: 150%;
- }
- .profim {
- width: 150px !important;
- position: relative;
- }
- .profile {
- margin-top: -40px;
- margin-right: 20px;
- padding: 5px;
- border-radius: 3px;
- width: 150px;
- height: 275px;
- float: left;
- background-color: #F699A1; /* -- image border bottom color -- */
- overflow: hidden;
- position: relative;
- text-align: center;
- }
- .profile .background {
- z-index: 0;
- display: block;
- position: absolute;
- left: -20%;
- top: -20%;
- width: 150%;
- height: 90%;
- background-color: #DAE4D9; /* -- image border top color -- */
- -ms-transform: rotate(10deg); /* IE 9 */
- -webkit-transform: rotate(10deg); /* Safari */
- transform: rotate(10deg); /* Standard syntax */
- }
- .profile img {
- width: 150px;
- height: 250px;
- z-index: 0;
- }
- .profile .cp {
- margin-top:5px;
- margin-left:10px;
- margin-right:10px;
- font-size:20px;
- color: #EFEFEF; /* -- under pic links color -- */
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .profile .cp:hover {
- text-shadow: 0px 0px 5px #fff; /* -- under pic links hover shadow color -- */
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .profile h1 {
- margin-top: -75px;
- margin-bottom:-12px; /* -- only touch this if you change the font size of the name -- */
- font-family: 'chasing embers';
- font-size: 80px; /* -- name font size; if you change this, you'll need to adjust the margin bottom -- */
- color: rgba(255,255,255,0.7); /* -- name color -- */
- font-weight: normal;
- line-height:110%;
- }
- .box {
- margin-left:180px;
- }
- .box h2 {
- background-color: #f1f1f1; /* -- bg color -- */
- padding: 5px;
- border-radius: 3px;
- text-transform: uppercase;
- font-size: 11px;
- color: #B7D3CB; /* -- font color -- */
- margin: 0px 0px 5px 0px;
- text-align: right;
- }
- .box ul {
- display: grid;
- grid-template-columns: 50% 50%;
- grid-gap: 0px;
- padding: 0px;
- margin-bottom: 5px;
- }
- .box li {
- background-color: transparent;
- list-style-type: none;
- border: none;
- border-radius: 0;
- padding: 8px;
- }
- .info li {
- border-left: 1px solid #f1f1f1; /* -- keep this the same color as the box h2 bg -- */
- margin: -5px;
- margin-left: 5px;
- color: #F699A1; /* -- info text color -- */
- }
- .info li:before {
- content: "●";
- margin-left: -12px;
- margin-right: 5px;
- font-size: 12px;
- line-height: 100%;
- color: #F1DBCC; /* -- info bullet color -- */
- }
- .stats li {
- margin-top: -4px;
- }
- .info li b {
- color: #969696; /* -- info bold color -- */
- }
- .bar {
- background: #f1f1f1; /* -- stats bar bg color -- */
- width: 109%;
- height: 5px;
- border-radius: 3px;
- margin-left: -6px;
- }
- .done {
- background-color: #B7D3CB; /* -- stats bar done color -- */
- height: 5px;
- border-radius: 3px;
- }
- .desc {
- overflow: auto;
- width: 99%;
- height: 100px;
- padding-right: 5px;
- padding-top: 2px;
- }
- </style>
- <body>
- <!--- CREDITS, PLEASE DON'T TOUCH THIS --->
- <div class="credit"><a href="http://serendipitythms.tumblr.com" title="coded by bella"><i class="cp cp-bee-o"></i></a></div>
- <div class="topbar">
- <div class="inside">
- <span class="title">meet the muses.</span>
- <span class="navi">
- <a href="urlhere">link one</a> ·
- <a href="urlhere">link two</a> ·
- <a href="urlhere">link three</a>
- </span>
- </div>
- </div>
- <ul class="container">
- <!-------------------- box begins -------------------->
- <li>
- <div class="profile">
- <div class="background"></div>
- <div class="profim">
- <img src="https://via.placeholder.com/150x250/cccccc">
- <h1>name</h1>
- <a href="urlhere" title="title"><span class="cp cp-moon-o"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-constellation"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-shooting-star-o"></span></a>
- </div></div>
- <div class="box">
- <h2>name</h2>
- <ul class="info">
- <li><b>species</b> species</li>
- <li><b>gender</b> gender</li>
- <li><b>ethnicity</b> ethnicity</li>
- <li><b>age</b> age</li>
- <li><b>nationality</b> nationality</li>
- <li><b>bday</b> month dd, yyyy</li>
- <li><b>sexuality</b> sexuality</li>
- <li><b>zodiac</b> zodiac</li>
- <li><b>status</b> un/active</li>
- <li><b>availability</b> open</li>
- </ul>
- <h2 style="text-align:left">occupation</h2>
- <ul class="stats" style="padding-top: 2px;">
- <li><b>stat 1</b><br><div class="bar"><div class="done" style="width:70%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 2</b><br><div class="bar"><div class="done" style="width:30%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 3</b><br><div class="bar"><div class="done" style="width:50%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 4</b><br><div class="bar"><div class="done" style="width:60%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 5</b><br><div class="bar"><div class="done" style="width:20%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 6</b><br><div class="bar"><div class="done" style="width:90%"></span></span></li> <!--- adjust the width percentage for the done part --->
- </ul>
- </div>
- <div class="desc">
- <u>Lorem ipsum</u> dolor sit amet, consectetur adipiscing elit, sed do <i>eiusmod tempor</i> incididunt ut labore et <b>dolore magna aliqua</b>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </li>
- <!-------------------- box ends-------------------->
- <!-------------------- box begins -------------------->
- <li>
- <div class="profile">
- <div class="background"></div>
- <div class="profim">
- <img src="https://via.placeholder.com/150x250/cccccc">
- <h1>name</h1>
- <a href="urlhere" title="title"><span class="cp cp-moon-o"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-constellation"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-shooting-star-o"></span></a>
- </div></div>
- <div class="box">
- <h2>name</h2>
- <ul class="info">
- <li><b>species</b> species</li>
- <li><b>gender</b> gender</li>
- <li><b>ethnicity</b> ethnicity</li>
- <li><b>age</b> age</li>
- <li><b>nationality</b> nationality</li>
- <li><b>bday</b> month dd, yyyy</li>
- <li><b>sexuality</b> sexuality</li>
- <li><b>zodiac</b> zodiac</li>
- <li><b>status</b> un/active</li>
- <li><b>availability</b> open</li>
- </ul>
- <h2 style="text-align:left">occupation</h2>
- <ul class="stats" style="padding-top: 2px;">
- <li><b>stat 1</b><br><div class="bar"><div class="done" style="width:70%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 2</b><br><div class="bar"><div class="done" style="width:30%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 3</b><br><div class="bar"><div class="done" style="width:50%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 4</b><br><div class="bar"><div class="done" style="width:60%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 5</b><br><div class="bar"><div class="done" style="width:20%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 6</b><br><div class="bar"><div class="done" style="width:90%"></span></span></li> <!--- adjust the width percentage for the done part --->
- </ul>
- </div>
- <div class="desc">
- <u>Lorem ipsum</u> dolor sit amet, consectetur adipiscing elit, sed do <i>eiusmod tempor</i> incididunt ut labore et <b>dolore magna aliqua</b>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </li>
- <!-------------------- box ends-------------------->
- <!-------------------- box begins -------------------->
- <li>
- <div class="profile">
- <div class="background"></div>
- <div class="profim">
- <img src="https://via.placeholder.com/150x250/cccccc">
- <h1>name</h1>
- <a href="urlhere" title="title"><span class="cp cp-moon-o"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-constellation"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-shooting-star-o"></span></a>
- </div></div>
- <div class="box">
- <h2>name</h2>
- <ul class="info">
- <li><b>species</b> species</li>
- <li><b>gender</b> gender</li>
- <li><b>ethnicity</b> ethnicity</li>
- <li><b>age</b> age</li>
- <li><b>nationality</b> nationality</li>
- <li><b>bday</b> month dd, yyyy</li>
- <li><b>sexuality</b> sexuality</li>
- <li><b>zodiac</b> zodiac</li>
- <li><b>status</b> un/active</li>
- <li><b>availability</b> open</li>
- </ul>
- <h2 style="text-align:left">occupation</h2>
- <ul class="stats" style="padding-top: 2px;">
- <li><b>stat 1</b><br><div class="bar"><div class="done" style="width:70%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 2</b><br><div class="bar"><div class="done" style="width:30%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 3</b><br><div class="bar"><div class="done" style="width:50%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 4</b><br><div class="bar"><div class="done" style="width:60%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 5</b><br><div class="bar"><div class="done" style="width:20%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 6</b><br><div class="bar"><div class="done" style="width:90%"></span></span></li> <!--- adjust the width percentage for the done part --->
- </ul>
- </div>
- <div class="desc">
- <u>Lorem ipsum</u> dolor sit amet, consectetur adipiscing elit, sed do <i>eiusmod tempor</i> incididunt ut labore et <b>dolore magna aliqua</b>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </li>
- <!-------------------- box ends-------------------->
- <!-------------------- box begins -------------------->
- <li>
- <div class="profile">
- <div class="background"></div>
- <div class="profim">
- <img src="https://via.placeholder.com/150x250/cccccc">
- <h1>name</h1>
- <a href="urlhere" title="title"><span class="cp cp-moon-o"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-constellation"></span></a>
- <a href="urlhere" title="title"><span class="cp cp-shooting-star-o"></span></a>
- </div></div>
- <div class="box">
- <h2>name</h2>
- <ul class="info">
- <li><b>species</b> species</li>
- <li><b>gender</b> gender</li>
- <li><b>ethnicity</b> ethnicity</li>
- <li><b>age</b> age</li>
- <li><b>nationality</b> nationality</li>
- <li><b>bday</b> month dd, yyyy</li>
- <li><b>sexuality</b> sexuality</li>
- <li><b>zodiac</b> zodiac</li>
- <li><b>status</b> un/active</li>
- <li><b>availability</b> open</li>
- </ul>
- <h2 style="text-align:left">occupation</h2>
- <ul class="stats" style="padding-top: 2px;">
- <li><b>stat 1</b><br><div class="bar"><div class="done" style="width:70%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 2</b><br><div class="bar"><div class="done" style="width:30%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 3</b><br><div class="bar"><div class="done" style="width:50%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 4</b><br><div class="bar"><div class="done" style="width:60%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 5</b><br><div class="bar"><div class="done" style="width:20%"></span></span></li> <!--- adjust the width percentage for the done part --->
- <li><b>stat 6</b><br><div class="bar"><div class="done" style="width:90%"></span></span></li> <!--- adjust the width percentage for the done part --->
- </ul>
- </div>
- <div class="desc">
- <u>Lorem ipsum</u> dolor sit amet, consectetur adipiscing elit, sed do <i>eiusmod tempor</i> incididunt ut labore et <b>dolore magna aliqua</b>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </li>
- <!-------------------- box ends-------------------->
- </ul>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement