final fantasy vii / aerith layout

Tags: ffvi, ff7, final fantasy 7, final fantasy, final fantasy vii, aerith

Description:

aerith themed layout from final fantasy vii remake

Preview:

click on the image for a larger preview

Code:

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

<style>
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-size: 200%; 
}
  body {
   background-image: url(https://media.discordapp.net/attachments/740060509524590604/1223296706896986252/IMG_9875.jpg?ex=661956d6&is=6606e1d6&hm=f2c5a104a8d59c0dfcb512009876211a5a514e8ad2fe2aa9476528936cadcc72&=&format=webp&width=1055&height=593);

}
.profile {
   background-color: rgb(0,102,102); 
}
/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: rgb(30,57,64);
   color: grey;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: grey;
   color: rgb(30,57,64);
}

main:before {
    width: auto;
    margin-bottom: 5px;
    border: 1px solid black;
    height: 120px;
    display: block;
    content: "";
    background-image: url(https://media.discordapp.net/attachments/740060509524590604/1223303185364549632/IMG_9885.jpg?ex=66195cdf&is=6606e7df&hm=190f5d08c2b30f547e5ba84d5b9b57aa76d24de19297fec0fe618b530a4f051a&=&format=webp&width=1440&height=477);
    background-position: center center;
    background-size: cover;
}

footer {
    border-radius: 15px;
    background-image: url(https://media.discordapp.net/attachments/740060509524590604/1223300865297879061/IMG_9878.jpg?ex=66195ab6&is=6606e5b6&hm=e7d76f1ccfca5b73ac1dd89b01110b98e01d9ae7a647f4f02aaa9182ebb99db0&=&format=webp&width=917&height=311);
    color: white;
}

table.comments-table td {
    color: rgb(30,57,64);
}

:root {
    --logo-blue:black;
    --darker-blue: grey;
    --lighter-blue: black;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: black;
    --light-orange: black;
    --even-lighter-orange: grey;
    --green: pink;
}
</style>

<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: URL("https://media1.tenor.com/images/e08d16200d951e67315eceef140b305f/tenor.gif?itemid=17836483"); display: inline-block; content:"" }

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 

</style>    

<style>

html:after {
  background-image: url(http://i.imgur.com/rcaf5Tj.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.5;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
nav .links a:hover{
    color: darkred;
  animation: fadeIn .5s;
  text-shadow: 0px 0px 5px white;
}
nav .links a{
    text-shadow: 0px 0px 0px ;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.container{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}</style>

<img src="https://images-ext-1.discordapp.net/external/RfIGRpBdGQ_uSaxmkIWZ-HBpq1B3UE3yRM17g6P8Vv4/https/i.pinimg.com/originals/9e/b7/69/9eb769cee33633750e2c6c0ef35c94a5.gif?width=622&height=347"/>

<style>
.online{content:url(https://i.ibb.co/n84Lsc3/onnn.gif) }
    </style>

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 0 of 0 comments ( View all | Add Comment )