« Web, HTML, Tech Forum

Minecraft HTML

So I had this idea to add my username to the corner of my profile pic, but the key is... I want it in Minecraft style. You know on the home page of Minecraft where it has the yellow text with random sayings? That's the vision.

The part I need help with is how to make it bounce/zoom in and out, like it does on the Minecraft homepage.

I'm not a coder so I messed with code written by snoodle.doodleonthaspacehey. Their code was originally intended to add a pink bow to the corner of your profile picture. Below is as far as I was able to get... please help <3


<style>

.general-about{

  position: relative;

 margin-top: 30px;

}

.general-about .profile-pic::before{

  content: '';

  background: url('https://i.ibb.co/cXs14fRd/pixil-frame-0-5.png') no-repeat;

  background-size: cover;

  display: inline-block;

 -webkit-transform: rotate(-17deg); /* Chrome, Safari, Opera */

      -moz-transform: rotate(-17deg);    /* Firefox */

      -ms-transform: rotate(-17deg);     /* IE 9 */

      -o-transform: rotate(-17deg);      /* Old Opera */

      transform: rotate(-17deg);         /* Standard syntax */


  width: 200px;

  height: 70px;

  z-index: 999;

  position: absolute;

  top: -30px;

  left: -65px;

</style>


Report Topic

1 Reply

Reply by Aidan

posted

Not sure myself but wanted to leave a comment and come back to this, hope you'll be able to figure out a way! Sounds like a cool idea, the Minecraft splash screen w/ the txt is very nostalgic.


Permalink Report Reply