miles morales spiderman layout

Tags: miles morales, miles, spiderman, blue, red, animation, layout, simple

Description:

contains: gifs, cursor, floating profile, etc.‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎if you use this PLEASE comment! credit is appreciated too‎

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by  (https://layouts.spacehey.com/layout?id=34885) -->

<style>
body{background:url("https://i.pinimg.com/564x/45/5b/ab/455bab99b7a0f599fa5e49f8965803c4.jpg") no-repeat fixed; background-size:cover;}
}
nav img.logo {
  filter: brightness(0) saturate(100%) invert(0%) sepia(94%) saturate(0%) hue-rotate(167deg) brightness(95%) contrast(105%) !important;
}
.comments-table td {
  background:url(https://assets-prd.ignimgs.com/2023/05/26/spider-man-1685135023175.gif);
  background-position: center;
  background-size: fit;
  border: 3px none;
}
.profile .blurbs .heading, .profile .friends .heading {
    background: transparent;
    color: #ffffff;
    text-shadow: 0 0 5px #cc1641, 0 0 10px #cc1641, 0 0 10px #cc1641, 0 0 20px #cc1641, 0 0 25px #cc1641;
    padding: 2px 7px;
    text-align: center;
}
.profile .blurbs .section h4 {
    margin: 0;
    color: #ffe192;
    text-shadow: 0 0 5px #cc1641, 0 0 10px #cc1641, 0 0 10px #cc1641, 0 0 20px #cc1641, 0 0 25px #cc1641;
}
.online{
  content: url(https://media.discordapp.net/attachments/990004155844296816/1126945275160830042/104487-miles-morales-free-transparent-image-hq.png);
  padding: 5px 0px;
}
.friends-grid{
  text-align:center;
  padding:0px!important;
}
.friends .person{
    background-color: #e3e3e3;
    width:80px!important;
    display: inline-flex!important;
    flex-direction: column-reverse;
    margin:10px;
    vertical-align: top;
    padding-left:5px!important;
    padding-top:5px!important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
.friends .person p{
    text-align: center;
    word-wrap: break-word;
}
.profile .friends .person img:not(.icon){
  max-width:70px!important;
}
.profile .friends .person:nth-of-type(1){
    transform: rotate(-4deg);
}
.profile .friends .person:nth-of-type(2){
    transform: rotate(5deg);
}
.profile .friends .person:nth-of-type(3){
    transform: rotate(-2deg);
}
.profile .friends .person:nth-of-type(4){
    transform: rotate(6deg);
}
.profile .friends .person:nth-of-type(5){
    transform: rotate(6deg);
}
.profile .friends .person:nth-of-type(6){
    transform: rotate(-1deg);
}
.profile .friends .person:nth-of-type(7){
    transform: rotate(3deg);
}
.profile .friends .person:nth-of-type(8){
    transform: rotate(-3deg);
}
a, .profile .friends .person p, p, h2, h3, h4, .count, nav .links a{
  color: white!important;
}
main:before {
    width: 100%;
    height: 200px;
    display: block;
    content: "";
    background-image: url(https://blog.lootcrate.com/wp-content/uploads/2021/01/ezgif.com-gif-maker.gif);
    background-size: fit;
    background-position: center;
}
h1{
   border: 5px solid black;
   background: url(https://i.pinimg.com/564x/60/2f/d1/602fd1f0e546abab6d2c8c1c52b2ca8f.jpg);
   padding:5px;
}
h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

  }



@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}



@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}



</style>

<style>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}



@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

}
button {
  background-color: transparent!important;
  border: none;
  color: black;
  font-weight: bold;
}
.general-about .details {
  border: 5px none;
  padding-bottom: 70px;
}
.mood {
  background-color: transparent;
  border: 5px none;
  padding: 3px;
  margin-bottom: 10px;
}
.contact, .url-info, .table-section, .blurbs, .friends, .profile-info {
  background: url(https://i.pinimg.com/564x/60/2f/d1/602fd1f0e546abab6d2c8c1c52b2ca8f.jpg);
  border: 5px solid black!important;
}
.url-info {
    background: url(https://giffiles.alphacoders.com/213/213013.gif);
    background-position: bottom;
    border: 1px black!important;
    background-size: fit;
    font-size: 0px;
    height: 275px;
}
.blog-preview{
  background:url(https://i.redd.it/xegabqbtxaw51.gif);
  background-position: center;
  border: 5px solid black;
}
.comments-table td {
  border: 3px none;
}
.table-section td {
  border: 3px solid #8f0909;
}
.comment-reply:not(:first-child) {
    border-top: 2px solid #8f0909;
}
.comment-replies {
    border: 3px solid #8f0909;
}
nav .top, nav .links {
  background-color: transparent;
  color: black;
  font-weight: bold;
}
.contact .inner a img{
  font-size: 0;
}
.contact .inner a img:before{
  font-size: 1em;
  display: block
}
/*ADD TO FRIENDS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before{
  content: "🕷️"
}
/*ADD TO FAVS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before{
  content: "🕷️"
}
/*SEND MESSAGE*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
  content: "🕷️"
}
/*FORWARD TO FRIEND*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
  content: "🕷️"
}
/*INSTANT MESSAGE*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
  content: "🕷️"
}
/*BLOCK USER*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before{
  content: "🕷️"
}
/*ADD TO GROUP*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{
  content: "🕷️"
}
/*REPORT USER*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{
  content: "🕷️"
}

.contact {
  background-image: url(https://i.pinimg.com/originals/df/13/2a/df132ad95c07417e5d08f2f35768f8b4.gif);
  background-position:center;
  background-repeat: repeat;
background-attachment: scroll;
Width: 300px;
Height:180px;

color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px Blue, 0 0 3px Darkblue; }

main, footer {
  background-color: transparent;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
.comments-table {
  border: none;
  border-spacing: 5px;
}
.profile-pic {
  padding: 15px;
}
.heading {
  background-color: transparent!important;
}
td {
  background-color: transparent!important;
}
</style>

<style>
:root {
--polaroid-name: ""; /* name displayed on polaroid */
--name-size: 1.6em; /* font size of name */
--toggle-displayname: inital; /* change this to "initial" to restore display name */
}
@font-face {
font-family: 'teabeer';
src: url('https://fluorescent-lights.neocities.org/teabeer.ttf') format('truetype');
}
.profile h1 {
display: var(--toggle-displayname);
}
.general-about .profile-pic {
position: relative;
filter: drop-shadow(0 0 0.25rem gray);
transform: rotate(4deg);
margin: 0 20px 8px -5px;
transition: transform .5s;
}
.general-about .profile-pic:hover {
transform: scale(1.2) rotate(-3deg);
}
.general-about .profile-pic:before {
content: var(--polaroid-name);
font-family: 'teabeer';
font-size: var(--name-size);
position: absolute;
z-index: 2;
bottom: -30px;
left: 0px;
width: 100%;
text-align: center;
}
.general-about .profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/polaroid.png');
position: absolute;
background-size: contain;
background-repeat: no-repeat;
top: 8px;
left: 12px;
width: 170px;
height: 210px;
}
.mood {
margin-top: 50px;
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-7/oth669.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/24/tiny-spiderman-web-shot.html" target="_blank" title="Tiny Spiderman Web Shot"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Spiderman Web Shot" style="position:absolute; top: 0px; right: 0px;"/></a>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 43 comments ( View all | Add Comment )

junoo	1714057705 (maybe) using !! Report Comment
moxxie	1709927098 USING, SO COOL!! Report Comment
dylfpickles	1708483164 using!!! Report Comment
💫	1707927094 Using!!! Report Comment
Cloverrr	1707436269 prob using Report Comment
Bugboy:p	1704492310 this is cool!prob using! Report Comment
Bugboy:p	1704492299 this is cool!prob using! Report Comment
KaleyBabezzz	1704148076 using!!! Report Comment
LIBRA!!	1703911074 Using Report Comment
nina	1703871644 using x Report Comment
Rayy	1702700359 Using!! Report Comment
zero	1701911557 using (its so fkg cute) Report Comment
dani	1701836267 using rn! Report Comment
grace !!	1700944322 usinggg Report Comment
XxMoonxX	1698925701 using :D Report Comment
Azure	1698244396 using this, thank u for the great layout :D Report Comment
D¡PAOLO / MACE ★	1697641343 USING!! :D Report Comment
Roboto	1697600329 using! Report Comment
th4t.em0g1rl	1696722949 using!!! Report Comment
Kodie / Miles !!	1696029312 Using!! >.< Report Comment