API tools faq
paste
Advertisement
mebuckner

Sunshine Daisies Bottom Yellow

mebuckner
Jan 6th, 2021
1,274
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.10 KB | None | 0 0
raw download clone embed print report
  1. This layout was made by Edits By M (/1631904). Do not remove any credit, claim this layout as your own, or use this on an account that has not asked for it. Thank you SO much for wanting to use this layout. You are wonderful.
  2.  
  3.  
  4. <!--about me-->
  5.  
  6. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  7.  
  8. <style>
  9.  
  10.     @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
  11.  
  12.  
  13.     body{
  14.         background-image:url('https://i.imgur.com/RYvJ8Nk.png');
  15.         background-size:cover;
  16.         background-attachment: left bottom;
  17.         margin-top: 220px;
  18.     }
  19.  
  20.     h1 {
  21.         text-align: center;
  22.         font-family: 'Playfair Display';
  23.         text-transform: uppercase;
  24.         font-size: 20px;
  25.         margin: 0;
  26.         margin-bottom: 10px;
  27.         background: #ecaa5d;
  28.         color: #e5e5e5;
  29.         font-weight: 100;
  30.         padding-top: 5px;
  31.         padding-bottom: 5px;
  32.         position: absolute;
  33.         width: 237px;
  34.         margin-top: -37px;
  35.     }
  36.  
  37.     h2 {
  38.         text-align: center;
  39.         font-family: 'Playfair Display';
  40.         text-transform: uppercase;
  41.         font-size: 20px;
  42.         margin: 0;
  43.         margin-bottom: 10px;
  44.         color: #ecaa5d;
  45.         font-weight: 100;
  46.         padding-top: 11px;
  47.         padding-bottom: 5px;
  48.         width: 426px;
  49.     }
  50.  
  51.     h3 {
  52.         text-align: center;
  53.         font-family: 'Playfair Display';
  54.         text-transform: uppercase;
  55.         font-size: 20px;
  56.         margin: 0;
  57.         margin-bottom: 10px;
  58.         background: #ecaa5d;
  59.         color: #e5e5e5;
  60.         font-weight: 100;
  61.         padding-top: 5px;
  62.         padding-bottom: 5px;
  63.         position: absolute;
  64.         width: 424px;
  65.         margin-top: -37px;
  66.     }
  67.  
  68.     .topBanner{
  69.         width:800px;
  70.         height:250px;
  71.         position: fixed;
  72.         top:0;
  73.         left: 0;
  74.         right:0;
  75.         margin:auto;
  76.         background:#e5e5e5;
  77.         text-align: center;
  78.         z-index: 9;
  79.     }
  80.  
  81.     .bioHolder{
  82.         width: 237px;
  83.         height: 119px;
  84.         background: #e5e5e5;
  85.         margin-right: 10px;
  86.         display: inline-block;
  87.         vertical-align: top;
  88.         overflow: auto;
  89.         padding-top: 37px;
  90.     }
  91.  
  92.     .iconHolder{
  93.         width: 233px;
  94.         background: #e5e5e5;
  95.         color: #d39245;
  96.         text-align: center;
  97.         letter-spacing: 9px;
  98.         font-size: 25px;
  99.         margin-left: 1px;
  100.         margin-top: 10px;
  101.     }
  102.  
  103.     a.navigationalLinks:link, a.navigationalLinks:visited {
  104.         background-color: #ecaa5d;
  105.         color: #ffffff;
  106.         padding: 12px 0px;
  107.         text-align: center;
  108.         text-decoration: none;
  109.         display: inline-block;
  110.         width: 109px;
  111.         font-family: Playfair Display;
  112.         font-size: 13px;
  113.         text-transform: uppercase;
  114.         margin-top: 10px;
  115.         font-weight: 100;
  116.         border-left: 10px solid #e5e5e5;
  117.         border-right: 10px solid #e5e5e5;
  118.     }
  119.  
  120.     a.navigationalLinks:hover, a.navigationalLinks:active {
  121.         background-color: #e7e7e9;
  122.         color:#6e3a51;
  123.     }
  124.  
  125.     td{
  126.         background-color: #e5e5e5;
  127.     }
  128.  
  129.     span.nametext {
  130.         font-family: 'Playfair Display';
  131.         font-size: 24px;
  132.         margin-top: -10px;
  133.         display: inline-block;
  134.         color: #e19f52;
  135.         font-weight: 100;
  136.     }
  137.  
  138.     body, td, li, p, div, textarea {
  139.         font-family: 'Playfair Display';
  140.         font-size: 12px;
  141.         color: #000;
  142.         text-align: justify;
  143.     }
  144.  
  145.     .tabs {
  146.         margin-top: 10px;
  147.         min-width: 802px;
  148.         height: 300px;
  149.         margin-left: -337px;
  150.         position: absolute;
  151.     }
  152.  
  153.     label, #slider {
  154.         display: inline-block;
  155.         font-weight: 100;
  156.         text-align: center;
  157.         background: #ecaa5d;
  158.         color: #e5e5e5;
  159.         width: 267px;
  160.         height: auto;
  161.         padding: 17px 0px;
  162.         font-family: 'Playfair Display';
  163.         font-size: 16px;
  164.     }
  165.  
  166.     label:hover {
  167.         color: white;
  168.         cursor: pointer;
  169.     }
  170.  
  171.     .tabs [type=radio] {
  172.         display: none;  
  173.     }
  174.  
  175.     .content {
  176.         position: absolute;
  177.         margin-top: 50px;
  178.         background: #e5e5e5;
  179.         padding: 20px;
  180.         box-shadow: inset 0px 5px 5px -5px;
  181.         display: none;
  182.         margin-left: -270px;
  183.         width: 767px;
  184.         height: 209px;
  185.     }
  186.  
  187.     #tabIndicator {
  188.         background-color: transparent;
  189.         position: absolute;
  190.         border-bottom: 3px solid #45773c;
  191.         margin: 7px 68px;
  192.         transition: transform 0.5s;
  193.         width: 130px;
  194.     }
  195.  
  196.     [type=radio],#tabOne:checked ~ #tabIndicator {
  197.         transform: translate(0px, -12px);
  198.     }
  199.  
  200.     [type=radio],#tabTwo:checked ~ #tabIndicator {
  201.         transform: translate(269px, -12px);
  202.     }
  203.  
  204.     [type=radio],#tabThree:checked ~ #tabIndicator {
  205.         transform: translate(532px, -12px);
  206.     }
  207.  
  208.     [type=radio]:checked + label {
  209.         color: white;
  210.     }
  211.  
  212.     [type=radio]:checked + label + .content {
  213.         display: inline-block;
  214.     }
  215.  
  216.     .content.tabNumbaTwo {
  217.         margin-left: -540px;
  218.     }
  219.  
  220.     .content.tabNumbaThree {
  221.         margin-left: -807px;
  222.     }
  223.  
  224.     .smallSide{
  225.         width: 277px;
  226.         height: 189px;
  227.         display: inline-block;
  228.         border: 10px solid #d3c1b8;
  229.         vertical-align: top;
  230.     }
  231.  
  232.     .bigSide{
  233.         width: 441px;
  234.         height: 169px;
  235.         display: inline-block;
  236.         background: #e5e5e5;
  237.         border: 10px solid #e5e5e5;
  238.         vertical-align: top;
  239.         overflow: auto;
  240.         margin-top: 20px;
  241.     }
  242.  
  243.     #profileV1main{
  244.         margin-top:30px;
  245.     }
  246.  
  247.     #footerWarpper, .friendsComments, .friendSpace, .orangetext15, table.blurbs, table.latestBlogEntry, table.contactTable, .userProfileURL, .userProfileDetail, #Groups, .interestsAndDetails, div#googlebar, #topnav, table.profileInfo table tr:last-child, div td{
  248.         display:none;
  249.     }      
  250.  
  251.     a:link, a:active, a:visited, a:hover {
  252.         color: #45773c;
  253.         font-family: 'Playfair Display';
  254.         font-size: 12px;
  255.     }
  256.  
  257.     b {
  258.         padding: 5px;
  259.         background: #45773c;
  260.         color: #fff;
  261.         line-height: 42px;
  262.         font-weight: 100;
  263.     }
  264.  
  265.     ::-webkit-scrollbar-thumb:vertical {height:12px; background:#11130f; border-top:10px solid #e5e5e5; border-bottom:10px solid #e5e5e5;}
  266.     ::-webkit-scrollbar-thumb:horizontal {background-color:#11130f;}
  267.     ::-webkit-scrollbar {width:5px; height:7px;}
  268.  
  269. </style>
  270.  
  271.  
  272.  
  273. <!--like to meet-->
  274. </table> </td> </tr> </table> <br /> <table bordercolor="white" cellspacing="0" cellpadding="0" width="450" bgcolor="white" border="0" style="margin-top:-30px;"> <tr> <td class="text" valign="" align="left" width="450" bgcolor="0" height="0" style="word-wrap:break-word"><span class="orangetext15"> </td> </tr> <tr> <td><table bordercolor="0" cellspacing="0" cellpadding="0" width="450" align="" bgcolor="white" border="0"> <td valign="top" align="" width="450" bgcolor="white" style="word-wrap:break-word">
  275.     <div class="topBanner">
  276.         <img src="https://i.imgur.com/p728utZ.png"><br>
  277.         <a href="/home.php" class="navigationalLinks">Home</a>
  278.         <a href="/send_message.php?member_id=" class="navigationalLinks">Message</a>
  279.         <a href="/add_comment.php?member_id=" class="navigationalLinks">Commnet</a>
  280.         <a href="/status_stream.php?member_id=" class="navigationalLinks">Stream</a>
  281.         <a href="/view_member_blog.php?member_id=" class="navigationalLinks">Blog</a>
  282.         <a href="/albums.php?member_id=" class="navigationalLinks">Pictures</a>
  283.     </div>
  284.  
  285.     <div style="width:auto; height:auto; display: inline-block; vertical-align: top;">
  286.         <div class="bioHolder">
  287.             <h1>the story of her</h1>
  288.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt interdum odio, ornare condimentum ligula pharetra quis. Aliquam at dignissim nunc, a elementum metus. Integer iaculis eros ante, ut feugiat lorem cursus ut. Integer id enim hendrerit, sollicitudin libero ac, facilisis ligula. Phasellus ac laoreet sem, vitae tempor mi. Nunc ullamcorper consequat leo, at auctor libero hendrerit eu. Aenean nec velit sit amet orci tincidunt sagittis in id tortor. Sed eget dictum nulla, ac vestibulum sapien. Curabitur ac libero ac nunc malesuada maximus vel convallis augue. Proin consequat nunc eget velit vehicula pellentesque.
  289.             <br><br>
  290.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt interdum odio, ornare condimentum ligula pharetra quis. Aliquam at dignissim nunc, a elementum metus. Integer iaculis eros ante, ut feugiat lorem cursus ut. Integer id enim hendrerit, sollicitudin libero ac, facilisis ligula. Phasellus ac laoreet sem, vitae tempor mi. Nunc ullamcorper consequat leo, at auctor libero hendrerit eu. Aenean nec velit sit amet orci tincidunt sagittis in id tortor. Sed eget dictum nulla, ac vestibulum sapien. Curabitur ac libero ac nunc malesuada maximus vel convallis augue. Proin consequat nunc eget velit vehicula pellentesque.
  291.         </div>
  292.         <div class="iconHolder">
  293.             <span class="th th-flower-1-o"></span>
  294.             <span class="th th-flower-1-o"></span>
  295.             <span class="th th-flower-1-o"></span>
  296.             <span class="th th-flower-1-o"></span>
  297.             <span class="th th-flower-1-o"></span>
  298.         </div>
  299.     </div>
  300.     <img src="https://i.imgur.com/5qH7wnh.png">
  301.  
  302.     <br><br>
  303.  
  304.     <div class='tabs'>
  305.         <input type='radio' id='tabOne' name='t' checked>
  306.         <label for='tabOne'>Basic Info</label>
  307.         <div class='content tabNumbaOne'>
  308.             <div class="smallSide">
  309.                   <img src="https://i.imgur.com/Q0Fm4YQ.png">
  310.             </div>
  311.             <div class="bigSide">
  312.                 <h3>Basic Information</h3>
  313.                 <b>Full Name</b> here<br>
  314.                 <b>Pronunciation</b> here<br>
  315.                 <b>Nickname/Alias</b> here<br>
  316.                 <b>Gender</b> here<br>
  317.                 <b>Orientation</b> here<br>
  318.                 <b>Real Age</b> here<br>
  319.                 <b>Birthday</b> here<br>
  320.                 <b>Birthplace</b> here<br>
  321.                 <b>Astrological Sign</b> here<br>
  322.                 <b>Species</b> here<br>
  323.                 <b>Ethnicity</b> here<br>
  324.                 <b>Preferred Hand</b> here<br>
  325.                 <b>Eye Color</b> here<br>
  326.                 <b>Hair Color</b> here<br>
  327.                 <b>Hairstyle</b> here<br>
  328.                 <b>Skin Tone</b> here<br>
  329.                 <b>Makeup</b> here<br>
  330.                 <b>Build</b> here<br>
  331.                 <b>Height</b> here<br>
  332.                 <b>Weight</b> here<br>
  333.                 <b>Shoe Size</b> here<br>
  334.                 <b>Birthmarks/scars</b> here<br>
  335.                 <b>Distinguishing Features</b> here<br>
  336.                 <b>Health</b> here<br>
  337.                 <b>Allergies</b> here<br>
  338.             </div>
  339.         </div>
  340.         <input type='radio' id='tabTwo' name='t'>
  341.         <label for='tabTwo'>Love Interest</label>
  342.         <div class='content tabNumbaTwo'>
  343.             <div class="bigSide">
  344.                 <h3>The Love Life</h3>
  345.                 <b>status</b> here <br>
  346.                 <b>to whom</b> <a href="/">link here</a><br>
  347.                 <b>since when</b> 00.00 <br>
  348.                 <b>Comments</b>  Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
  349.             </div>
  350.             <div class="smallSide">
  351. <img src="https://i.imgur.com/gfBriB5.png">
  352.             </div>
  353.         </div>
  354.         <input type='radio' id='tabThree' name='t'>
  355.         <label for='tabThree'>Owes List</label>
  356.         <div class='content tabNumbaThree'>
  357.             <div class="smallSide">
  358. <img src="https://i.imgur.com/71QJzgQ.png">
  359.             </div>
  360.             <div class="bigSide">
  361.                 <h3>Current Owes List</h3>
  362.                 <h2>I owe You</h2>
  363.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  364.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  365.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  366.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  367.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  368.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  369.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  370.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  371.  
  372.  
  373.                 <h2>You owe Me</h2>
  374.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  375.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  376.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  377.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  378.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  379.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  380.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  381.                 <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  382.             </div>
  383.         </div>
  384.         <div id='tabIndicator'></div>
  385.     </div>
  386.  
  387.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!