blairVVitch's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Standing on the Shoulders of Giants: A HTML/CSS Harvest Session

First things first, I just want to add this information here before my bulletin about it inevitably expires:

I think it was my second day on here or so, I couldn't read or access any new comments. Once I got the notification, and I clicked to read them, it reverted right back to the home page! I thought that maybe the code to hide them from my profile had something to do with it. I removed it, but was still showing up that I had 10 (or so) comments with only 7 that are posted for viewing. 

I contacted support (by emailing support@spacehey.com) about this, and I received a quick response that this was caused by a bug. They were able to fix it, and everything has been fine ever since. So if this ever happens to you (or someone you know), just hit up the Support Team, and they'll be able to knock it out. 



All last weekend, I labored on relearning two things that I hadn't really used that often since 2010: HTML/CSS. As you can imagine, MySpace was the catalyst that ignited that particular flame, and sadly, I was grossly out of practice. 

I think I'm finally at peace with my page for the time being, but I do intent to deck it out even further once we hit October for additional All Hallow's Eve/Dark Forest theme like this:

124-1244126-darkness-protection-quotes


In adapting what I remembered from MySpace and adjusting to SpaceHey, I found several great blog posts/layouts that served as helplines, guidelines, and even inspiration. I'm compiling them all here, in case anyone else is interested due to my profile, and so that I don't have to dig around to find them all over again.  ¯\_(ツ)_/¯
An eventual goal would be to have at least one image on my SpaceHey profile from my old MySpace profile; however, Photobucket has drastically changed since 2014. It now wants me to pay a subscription fee for being MASSIVELY over an allocated storage amount, and I can't access the HTML codes unless I pay up. Thus, I'm going to try to pull my images from there...or suck it up and pay up (at least for long enough to move everything out).

UPDATE—10/2:

Here's the Snowflakes Code I borrowed from K̴̡͕̦̱̆̌͛͆͗à̶̮̬̺̥͔͙̺͖̓̕ĩ̴̱̥̥̠̳̝̞̌̀̂ :D.


I included the Halloween emojis I picked out for my profile, but you can swap them out for whatever you want to use. 

<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes">
  <div class="snowflake">
  💀
  </div>
  <div class="snowflake">
  🖤
  </div>
  <div class="snowflake">
  ⚰️
  </div>
  <div class="snowflake">
  🦇
  </div>
  <div class="snowflake">
  🥀
  </div>
  <div class="snowflake">
   🕷️
  </div>
  <div class="snowflake">
   🎃
  </div>
  <div class="snowflake">
    🍬
  </div>
  <div class="snowflake">
    🔮
  </div>
  <div class="snowflake">
    🕯️
  <div class="snowflake">
    🗡️
  </div>
  <div class="snowflake">
    🌕
  </div>
</div></div>

UPDATE—10/10:

Big shoutout to Bela for two things: 1) This Blog CSS code! 2) This excellent post on hiding certain sections! I've been looking for a code to hide the links section, and this post has that, along with hiding other things like the Blog Title.

UPDATE—12/7: Centered Image for Background

<style>
body{
  background: url('https://source.unsplash.com/FN-cedy6NHA/1000') no-repeat center center fixed;
  background-size: cover;
}
</style>

NOTE: BIG SHOUTOUT TO THE HTML GROUP FOR ALL OF THE FOLLOWING 5/12 UPDATES! 

UPDATE—5/12/22: Hide "XXX is your Friend" Box 

</style>
.profile-info{display:none !important;} 
</style>

UPDATE—5/12/22: Center Blurbs Text [Paste in "About Me" section]

 <style>
.blurbs .inner{
        text-align: center !important;
</style>

UPDATE—5/12/22: Center Interests Text [Paste in "General" section]

<style>
.table-section .inner{
        text-align: center !important;
</style>


UPDATE—9/18/24: Center Navigation Links 

Thank you to Laura.jpeg for sending me this one!!!

<style>
nav {
text-align: center;}
</style>

UPDATE—9/20/24: Mini Music Player 

Thanks to vomitgirl for creating this, and thanks to Mallory for commenting the link to vomitgirl's post on my Bulletin. I love this Music Player so much, because it's the closest thing to the music player that was on MySpace that I've found so far. 🖤


If you liked my profile, and you're interested in a specific image or code, just comment below! I'll be more than willing to share, just keep in mind that I'm not a Code Master by any means. 


15 Kudos

Comments

Displaying 4 of 4 comments ( View all | Add Comment )

Relish Ubiquitous

Relish Ubiquitous's profile picture

Awesome thanks for putting this together!


Report Comment



I do what I can for my community! 🖤

by blairVVitch; ; Report

sarah ♡

sarah ♡'s profile picture

thank u so much for linking me !!!!~


Report Comment



You are very welcome. Honestly, your blog post was so INCREDIBLY helpful when I was first starting out on here. While we're at it, imma go ahead and thank you too! 🖤

by blairVVitch; ; Report

blairVVitch

blairVVitch's profile picture

Big shoutout to K̴̡͕̦̱̆̌͛͆͗à̶̮̬̺̥͔͙̺͖̓̕ĩ̴̱̥̥̠̳̝̞̌̀̂ :D on this blog entry, this was the only one that worked for me: https://blog.spacehey.com/entry?id=39574


For anyone that's interested (or mainly for me to reuse/remix for next year), I've added the Snowflakes code to the blog post, along with the Halloween emojis I chose.


Report Comment

Mr.Timer

Mr.Timer's profile picture

just commenting to save this lol


Report Comment



👍🏻

by blairVVitch; ; Report