The Executioner - Pyramid Head

Designer's Comments

Look carefully for specific instructions

Silent Hill 2 - Pyramid Head

NOTE: Layout is good for use in Halloween! Use this layout to creep your friends out with the animated background which kicks in within 10 seconds of opening the page. THIS LAYOUT IS HEAVILY ANIMATED! People with slower internet connections may find this layout to be virtually unusable. The About Me will take a bit to show up depending on your browsers, as will your background or banner.

Everything you need to edit is in your About Me section.
1. Replace XXXXXXXX with your ID#.
2. Use [h2 with class ctitle1] to create the header text as seen here as "MEMO #058". Use [h2 with class ctitle2] to create the header text as seen here as "PROMISE". Use [h2 with class ctitle3] to create the header text as seen here as "THEME OF LAURA".
3. The Banner is animated, the background has an animated clip, and the Main Content is animated. If you do not like the fact that the Main Content is animated (due to loading times), copy this code into your ABOUT ME instead of the one given below. Click Here for Alternative "I'd Like To Meet" Code
4. The Nine Red Squares are the navigation.
5. The Title "Misty Days..." may be editted in the [div with class title] near the beginning of your About Me.
6. PLEASE do NOT remove the credits or any links associated with it.

Everything in the "I'd Like To Meet" section are CSS codes. Do Not Mess With Them.

Enjoy! Creator's Myspace: myspace.com/ancientwhisper

Using This Layout

For specific instructions read designer's comments

This is a div overlay layout, html knowledge required!
1. Log into myspace.com
2. Click on Edit Profile (Profile 1.0)
3. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Update Friend ID

Input Friend ID to automagically update code

Layout Code

Copy and paste to About Me

Help

<div class="title" style="width: 255px; height: 119px; margin-top: -375px; margin-left: 275px; position: absolute; filter:alpha(opacity=75)">
MISTY DAYS;<br />
REMAINS OF THE JUDGMENT <br />
<span style="font-size:25pt;">EXECUTIONER</span>
</div>

<div style="width: 700px; display:block;">
<div style="position: relative; left: 390px; _left: 360px;top: 0px; width: 475px; _width: 500px; height: 200px; overflow: none; overflow-x: none;">
<h2 class="title">Betrayal</h2>
<p class="intro">
Welcome to Silent Hill! To navigate this town, use the nine red squares to the left in order to <a href="http://www.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX">ADD ME</a>, <a href="http://www.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX">COMMENT ME</a>, or <a href="http://www.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX">MESSAGE ME</a> and whatnot. This is a little area for your introduction paragraph. Do not make it too short for a better effect, but don't forget to keep it simple too! Try to avoid inserting too much text and try to level it with the navigation! I hope you enjoy your stay!
</p>
</div>

<h2 class="ctitle1" style="left: 55%;"> MEMO #058</h2>
<p class="content1"> 
This layout is based on the game Silent Hill 2. In that game, Pyramid Head was essentially a villain, although one can argue who the real antagonist was, it's safe to say that Pyramid Head was not a saint. This layout of Pyramid Head features many animations so for those who have dial-up or slower computers, be aware of the disadvantages. Note that the Pyramid Head on this layout was <u>NOT</u> based on the one in the movie, Silent Hill. It was specifically extracted from Silent Hill 2.</p>

<h2 class="ctitle2" style="left:30%;"> PROMISE</h2>
<p class="content2"> 
The entire layout took a very long time to complete. I originally discovered an image of Pyramid Head standing in a foggy background filled with corpse hanging in "box-like" frames. I carefully extracted the image and animated it to make him appear as if he's breathing. If you look at him carefully, you would be able to see that on the banner. Next, I watched the entire FuKuRo video (which is a very explicit video of Pyramid Head... doing his business), and cut off a segment of it to put on the background. I wanted a scare factor to creep out viewers, so I've let a still image sit for ten seconds before animating the background which reveals Pyramid Head's entrance. I combined that footage with another of Pyramid Head skewering an offscreen character. On the banner, the "Misty Days" text could be edited. The text with "There Was a Hole Here" and "It's Gone Now" refers to an optional part of Silent Hill 2 where the message was written on the interior of a building. You can see it at imabearmeaw.com. You're probably wondering, "Why are there nine blank squares the navigation? It's annoying!" and I apologize if it is. It is also a huge reference to Silent Hill 2. Before going into battle with the twin Pyramid Heads, you will encounter nine save spots all perfectly aligned as shown on this layout.
</p>

<h2 class="ctitle3"> THEME OF LAURA</h2>
<p class="content3"> 
Silent Hill 2 is an amazing game which I basically worship for its unique and brilliant story. The scare factor is there as well, and I have grown to love Pyramid Head. Through my eyes, the individual is more of an "executioner" who obeys what "God" or his master tells him. Of course, in Silent Hill, he could be a god as well. In other words, he is neutral to me. He is neither good nor bad; only exists as a punisher. My plans were to release this layout before Halloween to boost its popularity among those who do not like Silent Hill (afterall, it IS a creepy layout!).
</p>

<blockquote>
Your Name<br /> 
Your Birth Date <br />
Your Status <br />
Your Hobbies <br />
Your Interests<br />
<s>Forms of Contact</s>
</blockquote>
</div>
</div>

Layout Code

Copy and paste to I'd Like to Meet

Help

.redlink, .orangetext15, .btext {
COLOR: FFFFFF;
FONT-SIZE: 1;
}

div div table td td font {visibility: hidden;}

b, strong, .btext {
  font: Courier New;  
  color: 000000; 
  text-align: justify;
  font-weight: bold;
  }
i, em, .itext  {
  font-family: Courier New; 
  font-size: 9pt;
  color: 000000;
  text-align: justify;
  }

u{
  font-family: Courier New; 
  font-size: 11px;
  color: 000000;
  text-align: justify;
  }

s, .stext, .sbtext, .swtext {
  font-family: Courier New; 
  font-size: 11px;
  color: 7A7415;
  text-align: justify;
  }
a, a:link
{font-family: Courier New;
COLOR:B5A78B; 
TEXT-DECORATION: none
Letter-spacing: 0px;
font-weight: bold;

}

a:active {font-family: Courier New;
COLOR:B5A78B; 
TEXT-DECORATION: none
Letter-spacing: 0px;
font-weight: bold;
text-transform: uppercase;
}

a:visited{font-family: Courier New; 
COLOR:B5A78B; 
TEXT-DECORATION: none;
Letter-spacing: 0px;
font-weight: bold;
}

a:hover {font-family: Courier New; 
COLOR: 8A7655; 
Letter-spacing: 0px;
font-weight: bold;
}

a:hover.pic img {filter:alpha(opacity=80);}
a:link img { filter: Gray; }
a:hover img {filter: none; }

img {filter: progid:DXImageTransform.Microsoft.BasicImage(color=1); border: 1;}

li, h1, .redtext, font, .navbar, .lightbluetext8, .blacktext12, .label, .whitetext12, .orangetext12, .nametext{font: 0px arial; letter-spacing: 0px; text-align: justify; display: none; }

.blacktext10 {FONT: 11px Courier New; color:000000; letter-spacing: 0px; text-align: justify; display:block;}

.header {
font-weight: normal; font-size: 9; padding-bottom: 2pt; padding-top: 0pt; COLOR: 000000; border-bottom:000000 0px solid; font-family: arial; text-decoration: none;  text-align: center; letter-spacing: 0.0em;
z-index: 3;
}

.nametext {display: none !important;}

.blurbs td td .orangetext15, td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext, text {display:none !important; color: transparent;}

.footerwarpper {display:none !important; color: transparent;}

.profileInfo { display:none; }

td div a.text{visibility:none; display: none;}
table, tr, td {background-color: transparent;}

table { margin:0 auto; text-align:left; width:800px; }
table table { width:auto; }

table, tr, td {background-color: transparent;}
.contactTable {display:none;}
table.userProfileURL{display:none;}
.extendedNetwork {display:none;}
.userProfileDetail {display:none;}
.latestBlogEntry {display: none;}
.friendsComments {display:none;}
.footwrapper (display: none; visibility: none; }
.interestsAndDetails { display: none; }

</style>

blockquote {
font: 9pt Courier New;
overflow:visible;
margin-top: 15px 106px 15px 106px;
padding: 5px 5px 5px 5px;
text-align:center;
background-color:0E0100;
border:1px dashed; 
border-color:BEA052;
color: 6A5847;
line-height: 20px;
letter-spacing: 1px;
font-style: italic;
}

.title {
 font-family: Impact; 
font-size: 15pt; 
color:715B3D; 
letter-spacing: 1px;
display:block; 
overflow:auto; 
}

.link1{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851ac.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link1:hover{background-position: bottom left; }

.link2{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851ad.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link2:hover{background-position: bottom left; }

.link3{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851ae.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link3:hover{background-position: bottom left; }

.link4{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851af.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link4:hover{background-position: bottom left; }

.link5{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851ag.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link5:hover{background-position: bottom left; }

.link6{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851ah.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link6:hover{background-position: bottom left; }

.link7{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851ai.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link7:hover{background-position: bottom left; }

.link8{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851aj.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link8:hover{background-position: bottom left; }

.link9{height: 58px; width: 58px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851ak.jpg) no-repeat; display: table-cell; border: 3px solid; border-color: 000000;}
.link9:hover{background-position: bottom left; }

a.elink{height: 169px; width: 178px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/10/35851al.jpg) no-repeat; display: table-cell;}
a.elink:hover{background-position: bottom left; }

h2.title
{
font-family: Impact, Arial;
color: A88A02;
position: relative;
font-weight: normal;
text-transform: Uppercase;
line-height: 18px;
width: 100%;
letter-spacing: 10px;
text-align: left;
}

h2.ctitle1, .ctitle2, .ctitle3
{
font-family: Impact, Arial;
color: 0000000;
position: relative;
font-weight: normal;
text-transform: Uppercase;
line-height: 18px;
width: 40%;
letter-spacing: 10px;
text-align: right;
align; right;
padding: 10px;
}

h2.ctitle1
{
background: 
url(http://cbimg6.com/layouts/09/10/35851am.gif);
}

h2.ctitle2
{
background: 
url(http://cbimg6.com/layouts/09/10/35851an.gif);
}

h2.ctitle3
{
background: 
url(http://cbimg6.com/layouts/09/10/35851ao.gif);
}

p.content1, .content2, .content3 {
border: 0px;
FONT: 9pt Courier New; 
font-weight: bold;
COLOR: 000000; 
LETTER-SPACING: 0px; 
TEXT-ALIGN: justify;
padding: 5px;
}

p.content1 {
background: 
url(http://cbimg6.com/layouts/09/10/35851am.gif);
}

p.content2 {
background: 
url(http://cbimg6.com/layouts/09/10/35851an.gif);
}

p.content3 {
background: 
url(http://cbimg6.com/layouts/09/10/35851ao.gif);
}

p.content1:first-line, .content2:first-line, .content3:first-line
{
font: 14pt Courier New; 
color: 000000; 
font-style: italic;
font-weight: bold;}

p.intro:first-letter
{font: 18pt Courier New; 
color: 730902; 
text-transform: uppercase; 
font-style: italic;}

p.intro:first-line
{
font: 10pt Courier New; 
color: 6A5847; 
text-transform: uppercase;
font-style: italic;
font-weight: bold;}

p.intro{
border: 0px;
FONT: 9pt Courier New; 
COLOR: 6A5847; 
LETTER-SPACING: 0px; 
TEXT-ALIGN: justify;
font-style: italic;
}

p, table, tr, td, th, div{
border: 0px;
font-family: 9pt Courier New; 
color:000000;  
LETTER-SPACING: 0px; 
TEXT-ALIGN: justify;
}

table,td,tr,{padding:0px; width:; background-color:transparent; color: transparent;}

</style>

Layout Comments

Showing latest 10 of 13 comments

FAVORED! The animation was very good but the Pyramid-Head moved awkwardly. Other than that this was great and a super idea. I LOVE Pyramid! He scares me so:]

By Butterface89 on Sep 3, 2010 12:36 pm

and btw it looks so good that even my friend who hates silent hill liked it

By brokenbeatbeauty on Feb 8, 2010 11:42 pm

I LOVE IT!
I LAM SO HAPPY WITH THIS LAYOUT!!!

By brokenbeatbeauty on Feb 8, 2010 10:55 pm

freakin' ......Awesome!

By xinergy on Jan 6, 2010 5:29 pm

silent hill

By beautifulxtragedy on Dec 27, 2009 10:59 pm

I like it.. but it could be less.. I'm not trying to seem jerk-ish, but I think that the links could have located better and put as horizontal below the amazing gif that you have above, by the way. but If you wanted it that way, which looks okay, then I guess I'll just be entitled to my own opinion, even though I'm pretty sure the people below ALL disagree, but yeah all and all I like the concept and the layout,

By Breon on Dec 16, 2009 1:42 pm