I finally did it! Using the Big Hero 6 corner imágenes at link's childrens website, I was able to replicate the way the way the characters often looked in trailers, looking down together. Now, I made the code so tu can put it on your own website o tumblr blog. It's pretty simple, here's how tu do it!
----------------------------------------------------------Step one!----------------------------------------------------------
First off, go get the imágenes link, and download them to your website o blogs files, if tu can. If you're using Tumblr, tumblr lets tu subir blog assets link (don't subir files you're not using, though). If tu don't have the option to download them to whatever site you're using them on, subir them to a photobucket o imgur, o just use the link on the ones I already have there.
There should be six files of course, one of each character. The files should stay named as they are like "bh6_[characternamehere]", unless tu know how to change the code to account for it.
----------------------------------------------------------Step two!------------------------------------------------------------
Next, go to your <style> tags:
Paste the following code in between them:
p.baymax {
position: fixed;
top: 50px;
left: 0px;
}
p.hiro {
position: fixed;
top: -20px;
left: 0px;
}
p.honey {
position: fixed;
top: 200px;
right: 0px;
}
p.gogo {
position: fixed;
bottom: -20px;
right: 0px;
}
p.fred {
position: fixed;
bottom: -20px;
left: 0px;
}
p.wasabi {
position: fixed;
top: -20px;
right: 0px;
}
-----------------------------------------------------------Step three!------------------------------------------------------------
Now, go to your <body> tags:
And paste this code:
<p class="baymax"><img src="bh6_baymax.png"></p>
<p class="hiro"><img src="bh6_hiro.png"></p>
<p class="honey"><img src="bh6_honey.png"></p>
<p class="gogo"><img src="bh6_gogo.png"></p>
<p class="wasabi"><img src="bh6_wasabi.png"></p>
<p class="fred"><img src="bh6_fred.png"></p>
Important: If you're using them on tumblr o any other site that doesn't use your own server, then replace each "bh6_[characternamehere].png" with the link that goes with each one.
So you'd change this:
To this:
------------------------------------------------------------Are we done?!----------------------------------------------------------
After all that mess, your site/blog should eventually look like this!
If tu don't like how one is in the way, use the "bottom/left/right/top" codes, and tweak the numbers. You'll figure out how they move. If tu don't want someone there, simple borrar their code in the <style> and <body> etiquetas and they won't be there. But it's no fun without the whole team :)
I've never written a guide before, and quite frankly I'm just not good at explaining things in general. So if tu have questions, please ask here! I prefer tu ask here instead of message, so that way people with the same pregunta can get the answer without asking me again.
I also should have different ones up soon (with different characters and images), and I'll be revising this often until it works.
Thanks for listening!
----------------------------------------------------------Step one!----------------------------------------------------------
First off, go get the imágenes link, and download them to your website o blogs files, if tu can. If you're using Tumblr, tumblr lets tu subir blog assets link (don't subir files you're not using, though). If tu don't have the option to download them to whatever site you're using them on, subir them to a photobucket o imgur, o just use the link on the ones I already have there.
There should be six files of course, one of each character. The files should stay named as they are like "bh6_[characternamehere]", unless tu know how to change the code to account for it.
----------------------------------------------------------Step two!------------------------------------------------------------
Next, go to your <style> tags:
Paste the following code in between them:
p.baymax {
position: fixed;
top: 50px;
left: 0px;
}
p.hiro {
position: fixed;
top: -20px;
left: 0px;
}
p.honey {
position: fixed;
top: 200px;
right: 0px;
}
p.gogo {
position: fixed;
bottom: -20px;
right: 0px;
}
p.fred {
position: fixed;
bottom: -20px;
left: 0px;
}
p.wasabi {
position: fixed;
top: -20px;
right: 0px;
}
-----------------------------------------------------------Step three!------------------------------------------------------------
Now, go to your <body> tags:
And paste this code:
<p class="baymax"><img src="bh6_baymax.png"></p>
<p class="hiro"><img src="bh6_hiro.png"></p>
<p class="honey"><img src="bh6_honey.png"></p>
<p class="gogo"><img src="bh6_gogo.png"></p>
<p class="wasabi"><img src="bh6_wasabi.png"></p>
<p class="fred"><img src="bh6_fred.png"></p>
Important: If you're using them on tumblr o any other site that doesn't use your own server, then replace each "bh6_[characternamehere].png" with the link that goes with each one.
So you'd change this:
To this:
------------------------------------------------------------Are we done?!----------------------------------------------------------
After all that mess, your site/blog should eventually look like this!
If tu don't like how one is in the way, use the "bottom/left/right/top" codes, and tweak the numbers. You'll figure out how they move. If tu don't want someone there, simple borrar their code in the <style> and <body> etiquetas and they won't be there. But it's no fun without the whole team :)
I've never written a guide before, and quite frankly I'm just not good at explaining things in general. So if tu have questions, please ask here! I prefer tu ask here instead of message, so that way people with the same pregunta can get the answer without asking me again.
I also should have different ones up soon (with different characters and images), and I'll be revising this often until it works.
Thanks for listening!