Advertisement
heytony

Red Goth Vamp SpaceHey Layout w/ Red Crosshair Cursor

Feb 1st, 2021
495
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.77 KB | None | 0 0
  1. <style type="text/css">* {cursor: url(https://cur.cursors-4u.net/cursors/cur-1/cur5.cur), auto !important;}</style>
  2. <a href="https://www.cursors-4u.com/cursor/2005/05/07/cur5-11.html" target="_blank" title="Red Crosshair">
  3.     <img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Red Crosshair" style="position:absolute; top: 0px; right: 0px;" /></a>
  4. <style>
  5.  
  6. /* Red Goth Vamp layout w/Red Crosshair Cursor
  7.             by TonyTheTiger (spacehey.com/heytony) */
  8.  
  9. /*  to start off, this part bellow will control the base of your profile.
  10. P.S. backround attachment is the one that makes your background either stay put
  11. or scroll with you. use "fixed" or "scroll" for that part. */
  12.  
  13.  
  14.     body {
  15.         background-color: black;
  16.         background-image: url('https://i.pinimg.com/originals/31/21/38/3121380f4e144d83749b218d370e1a09.gif');
  17.         background-size: cover;
  18.         background-position: center;
  19.         background-repeat: no-repeat;
  20.         background-attachment: fixed;
  21.     }
  22.     Main {
  23.         Background-color: rgba(36,36,36,.5);
  24.         background-image: url('');
  25.         background-size: 50%;
  26.         background-position: right;
  27.         background-repeat: no-repeat;
  28.         background-attachment: scroll;
  29.         border: ;
  30.         border-color: ;
  31.      }
  32.     main:before {
  33.         width: 100%;
  34.         height: 300px;
  35.         display: block;
  36.         content: "";
  37.         background-image: url('https://www.jing.fm/clipimg/full/110-1107359_kawaii-cute-black-manga-anime-girl-goth-png.png');
  38.         background-position: center bottom;
  39.         background-size: cover;
  40.         background-repeat: no-repeat;
  41. }
  42.         @media only screen and (max-width: 600px) {
  43.             main:before{
  44.             height: 200px;
  45.         }
  46.     }
  47.     nav {
  48.         color: ;
  49.     }
  50.     nav .top {
  51.         background-color: #242424;
  52.         background-image: url('');
  53.         background-size: contain;
  54.         background-repeat: repeat;
  55.         background-position: center;
  56.         background-attachment: scroll;
  57.     }
  58.         nav .links {
  59.         background: maroon;
  60.         padding: 3.5px 16px 5.5px 16px;
  61.         }
  62.         nav .links a {
  63.             color: #242424;
  64.             text-decoration: none;
  65.             font-size: 12px;
  66.         }
  67.         nav .links a:hover {
  68.             color: grey;
  69.             text-decoration: line-through;
  70.         }
  71.     footer {
  72.         background-color: #242424;
  73.         background-image: url('https://31.media.tumblr.com/e23aecdd8c75479d8efd3ef2d386737f/tumblr_mroij1u7NK1sfk0ybo1_500.gif');
  74.         background-size: contain;
  75.         background-repeat: no-repeat;
  76.         background-position: left;
  77.         background-attachment: scroll;
  78.     }
  79.     body, div {
  80.         font-family: courier;
  81.         font-size: ;
  82.         color: maroon;
  83.         font-weight: bold;
  84.         font-style: ;
  85.         text-decoration: none;
  86.     }
  87.    
  88.  
  89. /*  bellow this you can change the left side of your profile,
  90. including the intrerests details' table, but only the heading! */  
  91.    
  92.     .profile h1 {
  93.         background-image: url('https://data.whicdn.com/images/76994599/original.gif');
  94.         background-position: center top;
  95.         color: grey;
  96.     }
  97.     .online {
  98.         color:red!important;
  99.     }
  100.     .online img,
  101.     .offline img {
  102.         display: none;
  103.     }
  104.     .online:before {
  105.         content: "🔴"!important;
  106.         animation-name: blink;
  107.         animation-iteration-count: infinite;
  108.         animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  109.         animation-duration: 2s;
  110.     }
  111.     .blog-preview {
  112.         background: rgba(36,36,36,.45);
  113.     }
  114.     .profile-pic img {
  115.             border-radius: 5%;
  116.         }
  117.     .friends img {
  118.         border-radius: 5%;
  119.     }
  120.     .profile .contact,
  121.     .profile .url-info,
  122.     .profile .table-section,
  123.     .home-actions {
  124.         background: rgba(36,36,36,.45);
  125.         width: 100%;
  126.         border: none;
  127.         border-radius: ;
  128.         margin: 10px 0;
  129.     }
  130.     .profile .contact {
  131.         background-image: url('https://media0.giphy.com/media/mEtjDFSKYbYdav9WG2/giphy.gif');
  132.         background-size: contain;
  133.         background-position: center center;
  134.         background-repeat: no-repeat;
  135.         background-attachment: scroll;
  136.     }
  137.     .profile .contact .heading,
  138.     .profile .table-section .heading,
  139.     .home-actions .heading {
  140.         background-image: url('https://media2.giphy.com/media/TK4aDaZrcPvFKnn7cE/giphy.gif');
  141.         background-position: center;
  142.         color: grey;
  143.         padding: 2px 7px;
  144.     }
  145.    
  146.    
  147. /*  this is the part where you tweak the right side of your profile */  
  148.    
  149.     .profile .blurbs {
  150.         background: rgba(36,36,36,.45);
  151.         margin: 20px 0px;
  152.         border: ;
  153.         border-radius: ;
  154.     }
  155.     .profile .friends {
  156.         background: rgba(36, 36, 36,.45);
  157.         border: ;
  158.         border-color: maroon;
  159.         border-radius: 5px;
  160.     }
  161.     .profile .blurbs .heading {
  162.         background-image: url('https://media2.giphy.com/media/TK4aDaZrcPvFKnn7cE/giphy.gif');
  163.         background-position: center;
  164.         color: grey;
  165.     }
  166.     .profile .friends .heading {
  167.         background-image: url('https://media2.giphy.com/media/TK4aDaZrcPvFKnn7cE/giphy.gif');
  168.         background-position: center;
  169.         color: grey;
  170.     }
  171.     .profile .blurbs .section h4 {
  172.         margin: 14px;
  173.         color:  grey;
  174.         font-weight: bold;
  175.     }
  176.     .profile .friends .person p {
  177.         color: ;
  178.         font-weight: bold;
  179.         width: 100%;
  180.         word-break: break-word;
  181.         font-size: 100%;
  182.         text-align: center;
  183.     }
  184.     .count {
  185.         color:  grey;
  186.     }
  187.    
  188.    
  189. /*  this is the part you change your comments table,
  190. and your intrests table.
  191. P.S.: the ones with ":first-child" variables, will control the left side of the tables. */
  192.    
  193.     .comments-table {
  194.         display: block;
  195.         height: 200px;
  196.         overflow-y: scroll;
  197.     }
  198.     .comments-table td,
  199.     .music-table td {
  200.         background: transparent;
  201.         background-image: url('https://img1.picmix.com/output/stamp/normal/9/0/1/8/1558109_c0058.gif');
  202.         background-size: contain;
  203.         background-repeat: no-repeat;
  204.         background-position: right;
  205.         vertical-align: top;
  206.         position: relative;
  207.     }
  208.     .comments-table td:first-child,
  209.     .music-table td:first-child {
  210.         background: rgba(36, 36, 36,.9);
  211.         text-align: center;
  212.         font-weight: bold;
  213.         width: 38%;
  214.     }
  215.     .details-table td {
  216.         background: rgba(36,36,36,.45);
  217.         vertical-align: top;
  218.     }
  219.     .details-table td:first-child {
  220.         background: rgba(36,36,36,.9);
  221.         color: grey;
  222.         font-weight: bold;
  223.         width: 33%;
  224.     }
  225.    
  226.    
  227. /*  this is the part you can change how the links look */
  228.    
  229.     a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover,
  230.     a.man:link, a.man:active, a.man:visited, a.man:hover,
  231.     a, a:link, a:active, a:visited, a:hover,
  232.     a.navbar:link, a.navbar:active, a.navbar:visited, a.visited:hover,
  233.     a.text:link, a.text:active, a.text:visited, a.text:hover,
  234.     a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited,
  235.     a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited,
  236.     a.redlink:hover {
  237.         color: grey;
  238.         font-weight: bold;
  239.         font-style: normal;
  240.         text-decoration: none;
  241.     }
  242.     a.navbar:hover, a.man:hover, a:hover {
  243.         color: red;
  244.         font-weight: bold;
  245.         font-style: normal;
  246.         text-decoration: line-through;
  247.     }
  248.  
  249.  
  250. /*  Hope these coments helped you out!
  251. and i suggest you YouTube Noah's SpaceHey CSS tutorials, if you're completely lost.
  252. Special thanks to Cory (spacehey.com/cory) and Katie (spacehey.com/fighttheducks) */
  253.  
  254. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement