API tools faq
paste
heytony

Smoke Leather & Pine SpaceHey Layout

heytony
Feb 27th, 2021 (edited)
152
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.07 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
  3. </style>
  4. <style>
  5. @import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Playfair+Display:wght@900&display=swap');
  6. </style>
  7. <style>
  8. /*   Smoke Leather & Pine Layout
  9.             by TonyTheTiger (spacehey.com/heytony) */
  10.  
  11. /*  to start off, this part bellow will control the base of your profile.
  12. P.S. backround attachment is the one that makes your background either stay put
  13. or scroll with you. use "fixed" or "scroll" for that part. */
  14.     body {
  15.         background-image: url(https://www.lawnstarter.com/blog/wp-content/uploads/2020/07/pine-needles-green-pexels.jpeg);
  16.         background-color: rgb(20,20,20);
  17.         background-repeat: repeat;
  18.         background-attachment: fixed;
  19.     }
  20.     Main {
  21.         Background-color: rgb(50,50,50);
  22.         background-image: url('https://img2.pngio.com/leather-black-leatherblack01png-opengameartorg-seamless-black-texture-png-1024_1024.png');
  23.         background-position:bottom center;
  24.         background-repeat: repeat-y;
  25.         background-size: contain;
  26.         background-position: scroll;
  27.     }
  28.     nav a {
  29.         font-family: 'Playfair Display', serif;
  30.     }
  31.     nav a:hover{
  32.         color: grey!important;
  33.         text-decoration: underline;
  34.     }
  35.     nav .top {
  36.         background-color: rgb(0,0,0)!important;
  37.     }
  38.     nav .links {
  39.         background: rgb(750,750,750);
  40.         padding: 3.5px 16px 5.5px 16px;
  41.     }
  42.     nav .links a {
  43.         color: black!important;
  44.         font-family: 'Playfair Display', serif!important;
  45.         font-style: normal;
  46.         font-size: 13px;
  47.     }
  48.     nav .links a:hover {
  49.         color: rgb(48,107,100)!important;
  50.         text-decoration: underline;
  51.         font-style: oblique;
  52.     }
  53.     footer {
  54.         background: rgb(0,0,0);
  55.         color: white!important;
  56.         margin: 0px;
  57.     }
  58.     body, div {
  59.         font-family: 'Berkshire Swash', cursive;
  60.         font-size: 14px;
  61.         color: white;
  62.         font-style: oblique;
  63.         text-decoration: none;
  64.     }
  65.    
  66.  
  67. /*  bellow this you can change the left side of your profile,
  68. including the intrerests details' table, but only the heading! */  
  69.    
  70.     .profile h1 {
  71.         font-family: 'Playfair Display', serif!important;
  72.         font-style: normal!important;
  73.         font-size: 30px;
  74.         color: rgb(48,107,100);
  75.     }
  76.     .supporter a {
  77.         color:#306b64!important;
  78.        
  79.     }
  80.     .supporter img {
  81.         font-size:0;
  82.         font-family: 'Playfair Display', serif!important;
  83.     }
  84.     .supporter:before {
  85.         content: url('https://icons.iconarchive.com/icons/mkho/christmas/16/Ribbon-Green-icon.png')!important;
  86.        
  87.     }
  88.     .online {
  89.         color: rgb(48,107,100)!important;
  90.         font-family: 'Playfair Display', serif!important;
  91.     }
  92.     .online img,
  93.     .offline img {
  94.         display: none;
  95.     }
  96.     .online:before {
  97.         content: url('https://icons.iconarchive.com/icons/emey87/social-button/16/tree-icon.png');
  98.         animation-name: blink;
  99.         animation-iteration-count: infinite;
  100.         animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  101.         animation-duration: 2s;
  102.     }
  103.     .blog-preview {
  104.         text-align: center;
  105.         color: white!important;
  106.     }
  107.     .profile-pic img {
  108.         border: inset #306b64;
  109.         }
  110.     .friends img {
  111.         border: inset #306b64;
  112.     }
  113.     .mood {
  114.         color: white;
  115.         font-family: 'Playfair Display', serif!important;
  116.     }
  117.    
  118.     .profile .url-info{
  119.         background: rgba(48,107,100,0.4);
  120.         border: none;
  121.     }
  122.     .profile .contact,
  123.     .profile .table-section,
  124.     .home-actions {
  125.         background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
  126.         background-size: 275%;
  127.         background-position: center;
  128.         background-repeat: no-repeat;
  129.         background-attachment: scroll;
  130.         border: none;
  131.         width: 100%;
  132.         border: none;
  133.         margin: 10px 0;
  134.     }
  135.     .url-info {
  136.         text-align: center;
  137.     }
  138.     .contact .inner a img {
  139.         font-size: 0;
  140.     }
  141.     .contact .inner a img:before {
  142.         font-size: 1em;
  143.         display: block
  144.     }
  145.     .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
  146.             /* Add to Friends */
  147.         content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Users-Add-User-icon.png)
  148.     }
  149.     .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
  150.             /* Add to Favorites */
  151.         content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Messaging-Star-icon.png)
  152.     }
  153.     .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
  154.             /* Send Message */
  155.         content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Messaging-Message-icon.png)
  156.     }
  157.     .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
  158.             /* Forward to Friend */
  159.         content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Arrows-Right-2-icon.png)
  160.     }
  161.     .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
  162.             /* Instant Message */
  163.         content: url(https://icons.iconarchive.com/icons/icons8/windows-8/16/Messaging-Chat-icon.png)
  164.     }
  165.     .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
  166.             /* Block User */
  167.         content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Very-Basic-Close-icon.png)
  168.     }
  169.     .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
  170.             /* Add to Group */
  171.         content: url(https://icons.iconarchive.com/icons/icons8/windows-8/16/Users-Group-icon.png)
  172.     }
  173.     .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  174.             /* Report Profile */
  175.         content: url(https://icons.iconarchive.com/icons/iconsmind/outline/16/Flag-2-2-icon.png)
  176.     }
  177.     .profile .contact {
  178.         background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
  179.         background-size: 275%;
  180.         background-position: center;
  181.         background-repeat: no-repeat;
  182.         background-attachment: scroll;
  183.         border: none;
  184.     }
  185.     .profile .contact .heading,
  186.     .profile .table-section .heading,
  187.     .home-actions .heading {
  188.         background: rgb(48,107,100);
  189.         font-family: 'Playfair Display', serif!important;
  190.         font-style: normal!important;
  191.         font-size: 16px;
  192.         text-align: center;
  193.         padding: 2px 7px;
  194.     }
  195.     .details-table td {
  196.         background: rgba(0,0,0,0.4);
  197.         vertical-align: top;
  198.     }
  199.     .details-table td:first-child {
  200.         text-align: center;
  201.         background: rgba(0,0,0,0.4);
  202.         color: white!important;
  203.         font-family: 'Playfair Display', serif;
  204.         font-style: normal;
  205.         font-weight: bold;
  206.         width: 33%;
  207.     }
  208.    
  209. /*  this is the part where you tweak the right side of your profile */  
  210.    
  211.     .profile .blurbs {
  212.         background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
  213.         background-size: 175%;
  214.         background-position: center;
  215.         background-repeat: no-repeat;
  216.         background-attachment: scroll;
  217.         border: none;
  218.         margin: 20px 0px;
  219.     }
  220.     .profile .friends {
  221.         background: rgba(48,107,100,0.3);
  222.     }
  223.     .profile .blurbs .heading {
  224.         font-family: 'Playfair Display', serif!important;
  225.         font-style: normal;
  226.         font-size: 16px;
  227.         background: rgb(48,107,100);
  228.         text-align: center;
  229.         color: white!important;
  230.     }
  231.     .profile .friends .heading {
  232.         font-family: 'Playfair Display', serif!important;
  233.         font-style: normal;
  234.         font-size: 16px;
  235.         background: rgb(48,107,100);
  236.         text-align: center;
  237.         color: white!important;
  238.     }
  239.     .profile .blurbs .section h4 {
  240.         font-family: 'Playfair Display', serif!important;
  241.         margin: 14px;
  242.         color:  white;
  243.         font-weight: bold;
  244.     }
  245.     .profile .friends .person p {
  246.         color: white;
  247.         font-family: 'Playfair Display', serif!important;
  248.         font-weight: bold;
  249.         width: 100%;
  250.         word-break: break-word;
  251.         font-size: 100%;
  252.         text-align: center;
  253.     }
  254.     .count {
  255.         font-family: 'Playfair Display', serif!important;
  256.         color: red;
  257.     }
  258. /*---change height of comments box here---*/
  259.     .comments-table {
  260.         display: block;
  261.         height: 310px;
  262.         overflow-y: auto;
  263.     }
  264.     .comments-table,
  265.     .music-table{
  266.         color: rgb(500,500,500);
  267.         border: inset #306b64;
  268.     }
  269.     .comments-table td,
  270.     .music-table td {
  271.         background: rgba(50,50,50,.9);
  272.         background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
  273.         background-size: 350%;
  274.         background-position: center;
  275.         background-repeat: no-repeat;
  276.         background-attachment: scroll;
  277.         vertical-align: top;
  278.         position: relative;
  279.     }
  280.     .comments-table td:first-child,
  281.     .music-table td:first-child {
  282.         background: rgb(0,0,0);
  283.         text-align: center;
  284.         font-family: 'Playfair Display', serif!important;
  285.         font-weight: bold;
  286.         width: 38%;
  287.     }
  288.    
  289.    
  290. /*  this is the part you can change how the links look */
  291.    
  292.     a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover,
  293.     a.man:link, a.man:active, a.man:visited, a.man:hover,
  294.     a, a:link, a:active, a:visited, a:hover,
  295.     a.navbar:link, a.navbar:active, a.navbar:visited, a.visited:hover,
  296.     a.text:link, a.text:active, a.text:visited, a.text:hover,
  297.     a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited,
  298.     a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited,
  299.     a.redlink:hover {
  300.         color: rgb(48,107,100);
  301.         font-weight: bold;
  302.         font-style: normal;
  303.         text-decoration: none;
  304.     }
  305.     a.navbar:hover, a.man:hover, a:hover {
  306.         color: white;
  307.         font-weight: bold;
  308.         font-style: normal;
  309.         text-decoration: underline;
  310.     }
  311.  
  312.  
  313. /*  Hope these comments helped you out!
  314. Special thanks to Cory (spacehey.com/cory) and Katie (spacehey.com/fighttheducks) */
  315.  
  316. </style>
Add Comment
Please, Sign In to add comment
Public Pastes
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!