Share your HTML & CSS layout

Show your personal arts, videos or anything that you've created in this forum.

Moderators: RukiaKuchiki, tsundere

Post Reply
User avatar
Luffy
Site Admin
Site Admin
Posts: 928
Joined: 13 Jun 2008, 09:46

Share your HTML & CSS layout

Post by Luffy » 12 May 2013, 01:10

Share your layouts here so other members could use it :D


Sample Template 2
Avatar on left. Change this line to move avatar to the right

<div style="float:right;width:330px">

Code: Select all

<style>
.holder{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:300px}
.holder2{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left}
.clear{width:100%;clear:both!important;display:inline-block}
</style>
[BUTTONS]
<div style="float:left;width:330px">
<div class="holder">[AVATAR]</div>
<div class="clear"></div>
<div class="holder">[ABOUT_ME]</div>
<div class="clear"></div>
<div class="holder">[FRIEND_BOX]</div>
<div class="clear"></div>
<div class="holder">[MUSIC]</div>
</div>
<div class="holder2">[COMMENT_BOX]</div>


Sample Template 3
With Youtube video on top

Code: Select all

<style>
.holder{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:300px}
.holder2{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left}
.clear{width:100%;clear:both!important;display:inline-block}
</style>
[BUTTONS]
<div style="float:left;width:330px">
<div class="holder">
[AVATAR]
</div>
<div class="clear"></div>
<div class="holder">[FRIEND_BOX]</div>
<div class="clear"></div>

</div>

<div class="holder2">
<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

<div class="holder2">[ABOUT_ME]</div>
<div class="holder2">[COMMENT_BOX]</div>
~Monkey D. Luffy was here~

User avatar
MirrorB
Posts: 8
Joined: 03 Mar 2013, 09:04

Re: Share your HTML & CSS layout

Post by MirrorB » 12 May 2013, 11:16

"Hey darlings! I have been waiting for such a long time for Luffy Dono to introduce this feature to Anivide! Long story short I was once a little young punk like you and back in the day I would Roleplay on YouTube channels! But then the big bad YouTube design department decided to create a 'supposedly' better profile... Oh no, no, no! What a no, no!"

He danced lightly.

"So with the new feature I thought I would give you all some nostalgia! An anivide profile design based off the old youtube channel design darlins!"

Blue:

Code: Select all

<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Red:

Code: Select all

<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Yellow:

Code: Select all

<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Purple:

Code: Select all

<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Green:

Code: Select all

<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Orange:

Code: Select all

<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


"I ask you all not to remove the attribution on the template, but feel free to customize to your hearts content darlins! Oh and also I recomend that your avatar should be 300x500 for perfect fitting in this template!"
Image

User avatar
LostInTranslation
Posts: 11
Joined: 11 Jul 2012, 12:58

Re: Share your HTML & CSS layout

Post by LostInTranslation » 14 May 2013, 07:07

Can I ask (@Luffy), in the sample template 2, how do you mak ethe video play the one you chose?
In the followng line, I tried replacing each URL with the URL of the video I wanted, but that did not work.

Code: Select all

<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

Could it be that I have to use the embed code proved by YouTube? Because that doesn't seem quite right..

Sorry to be a nuicance if it is more obvious than I make it out to be..
~"If you don’t believe in yourself, then very few will believe in you. You can be whoever you want to be.”~
~Joshua Franceschi~

User avatar
Taichou
Anispace Beginner
Posts: 32
Joined: 13 Jan 2012, 15:45

Re: Share your HTML & CSS layout

Post by Taichou » 14 May 2013, 12:49

LostInTranslation wrote:Can I ask (@Luffy), in the sample template 2, how do you mak ethe video play the one you chose?
In the followng line, I tried replacing each URL with the URL of the video I wanted, but that did not work.

Code: Select all

<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

Could it be that I have to use the embed code proved by YouTube? Because that doesn't seem quite right..

Sorry to be a nuicance if it is more obvious than I make it out to be..


Make sure the youtube url doesn't go past the "?" in the embedded code. Another option is to just copy the embedded code from youtube. Then on the youtube link that's in the code, add "&autoplay=1" which in the code would be next to, "&amp;rel=0"
Image

User avatar
harusame
Anispace Pro
Anispace Pro
Posts: 1002
Joined: 31 Aug 2009, 18:47

Re: Share your HTML & CSS layout

Post by harusame » 14 May 2013, 13:04

LostInTranslation wrote:Can I ask (@Luffy), in the sample template 2, how do you mak ethe video play the one you chose?
In the followng line, I tried replacing each URL with the URL of the video I wanted, but that did not work.
<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

Could it be that I have to use the embed code proved by YouTube? Because that doesn't seem quite right..

Sorry to be a nuicance if it is more obvious than I make it out to be..

For this one, you don't use the youtube embed code, instead you use the url. The part that I highlighted is the one that you replace for the video that you want to use.

For example, let's say I want to use this youtube url: http://www.youtube.com/watch?v=9iPQP7aDe_Y. I copy the "9iPQP7aDe_Y" part of the url, and replace the highlighted area. You need to keep the "http://www.youtube.com/v/" portion for it to work.
Haru~

User avatar
LostInTranslation
Posts: 11
Joined: 11 Jul 2012, 12:58

Re: Share your HTML & CSS layout

Post by LostInTranslation » 16 May 2013, 14:05

Ahh, thank you very much!! My friend did it for me last tims! XD

Taichou wrote:
LostInTranslation wrote:Can I ask (@Luffy), in the sample template 2, how do you mak ethe video play the one you chose?
In the followng line, I tried replacing each URL with the URL of the video I wanted, but that did not work.

Code: Select all

<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

Could it be that I have to use the embed code proved by YouTube? Because that doesn't seem quite right..

Sorry to be a nuicance if it is more obvious than I make it out to be..


Make sure the youtube url doesn't go past the "?" in the embedded code. Another option is to just copy the embedded code from youtube. Then on the youtube link that's in the code, add "&autoplay=1" which in the code would be next to, "&amp;rel=0"
~"If you don’t believe in yourself, then very few will believe in you. You can be whoever you want to be.”~
~Joshua Franceschi~

User avatar
totallyweakman
Anispace Champion
Anispace Champion
Posts: 3948
Joined: 25 Sep 2009, 23:19

Re: Share your HTML & CSS layout

Post by totallyweakman » 18 May 2013, 00:35

I do not have a layout, but I have links to cursors.
http://tutorials.oohcamila.com/cursors
And assuming that you can make a cursor out of any image, I beg someone to create a profile with the following Image

User avatar
Crazeye
Anispace Pro
Anispace Pro
Posts: 2434
Joined: 18 May 2011, 01:25

Re: Share your HTML & CSS layout

Post by Crazeye » 26 Jun 2013, 10:02

I'll be stealing these conditions from you Skypiea!

By using my theme or layout, you agree to...
1. credit me. Putting my username anywhere in your profile. Ex. Credit : Crazeye.
2. follow my wishes regarding my layout. For example permission to edit and what not.
3. respect and like the layout/theme. Do not edit just because you want to.
4. not distribute in other sites without asking me. This layout/theme made for Anivide.


Image

Before Starting:
  • Paste this URL in your "Profile Background" box:

    Code: Select all

    http://gallery1.anivide.com/_full/51129_1371984732.jpg
  • Paste the following code in your "Music" boxThe box which reads "Youtube":

    Code: Select all

    <object width="250" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="gsSong3889826616" name="gsSong3889826616"><param name="movie" value="http://grooveshark.com/songWidget.swf" /><param name="wmode" value="window" /><param name="allowScriptAccess" value="always" /><param name="flashvars" value="hostname=grooveshark.com&songID=38898266&style=metal&p=1" /><object type="application/x-shockwave-flash" data="http://grooveshark.com/songWidget.swf" width="250" height="40"><param name="wmode" value="window" /><param name="allowScriptAccess" value="always" /><param name="flashvars" value="hostname=grooveshark.com&songID=38898266&style=metal&p=1" /><span><a href="http://grooveshark.com/search/song?q=Hikasa%20Yoko%20Utsukushiki%20Zankoku%20na%20Sekai" title="Utsukushiki Zankoku na Sekai by Hikasa Yoko on Grooveshark">Utsukushiki Zankoku na Sekai by Hikasa Yoko on Grooveshark</a></span></object></object>

Insert the Gallery and Vote Links where Asked. (A banner URL(17th last line), Gallery URL(5th-last line) and Vote Link (7th-last line))


Finally, your code:

Code: Select all

<style>
/*#box_top,*/#box_ticker,#box_top_ads {
display: none;
}

/*top bar*/
#nav li {border:0px !important;}
#nav li:nth-child(1) a{background: #800101; margin:5px; border-top-right-radius: 20px;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}
#nav li:nth-child(2) a{background: #692929; margin:5px; border-top-right-radius: 20px;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}
#nav li:nth-child(3) a{background: #5A4444; margin:5px; border-top-right-radius: 20px;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}
#nav li:nth-child(4) a{background: #313D49; margin:5px; border-top-right-radius: 20px;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}
#nav li:nth-child(5) a{background: #4A6889; margin:5px; border-top-right-radius: 20px;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}
#nav li:nth-child(6) a{background: #2F65A0; margin:5px; border-top-right-radius: 20px;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}


#nav ul li a{
font-family:Tempus Sans ITC;
font-size: 16px;
line-height:12px;
padding:5px;
text-align:left;
font-variant:normal;
width: 120;
-webkit-border-top-right-radius: 30px;
-moz-border-top-right-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-bottom-right-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
#nav li:nth-child(2) ul a:hover,#nav ul li.this a:hover ,#nav ul li.this a{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: none repeat scroll 0 0 #692929;
color:#fff;
}
#nav li:nth-child(3) ul a:hover,#nav ul li.this a:hover ,#nav ul li.this a{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: none repeat scroll 0 0 #5A4444;
color:#fff;
}
#nav li:nth-child(4) ul a:hover,#nav ul li.this a:hover ,#nav ul li.this a{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: none repeat scroll 0 0 #313D49;
color:#fff;
}
#nav li:nth-child(5) ul a:hover,#nav ul li.this a:hover ,#nav ul li.this a{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: none repeat scroll 0 0 #4A6889;
color:#fff;
}
#nav li:nth-child(6) ul a:hover,#nav ul li.this a:hover ,#nav ul li.this a{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: none repeat scroll 0 0 #2F65A0;
color:#fff;
}

#nav li ul{
background:#000000;
color:#fff;
width:150px;
border-top-right-radius: 20px;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}

#nav li ul a:link, #nav li ul a:visited { /*drop down*/
color: #FFFFFF;
background: #000000;
}
/*Comment Button*/
a.button, input.button {
margin:7px;
height: 30px;
border:1px solid #fff;
font:10px verdana;
border:1px solid #cecece;
background:#FF4000 !important;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
a.button:hover, input.button:hover{
margin:7px;
color: #000000 !important;
height: 30px;
background:#8080FF !important;
border:1px solid #575757;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
box-shadow:2px 2px 2px 2px#666666;transform:scale(1.03,1.03)
}

.holder{border:2px solid#FF4000;border-top-right-radius: 50px;
border-top-left-radius: 50px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;margin:2px;width:1000px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:left}

.holder1{border:2px solid#FF4000;margin:2px;width:1000px;box-shadow:0px 0px 0px#000;overflow:hidden;transition:all 0.5s Ease;text-align:left}

.holder_music{border:2px solid#718A9A;border-top-right-radius: 30px;
border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;margin:2px;width:375px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:center;float: center}

.holder_buttons{border:2px solid#718A9A;border-top-right-radius: 30px;
border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;margin:2px;width:385px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:right;float: right}

.holder_comment{border:2px solid#0080FF;border-top-right-radius: 0px;
border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 0px;background:url(http://gallery1.anivide.com/_full/51129_1372141428.jpg);opacity:0.9;filter:alpha(opacity=50);margin:2px;width:690px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:center;float: right}

.holder3{border2px solidA#BF0000;margin:5px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:right;width:300px}

.come-out:hover{box-shadow:5px 5px 5px 5px#666666;transform:scale(1.03,1.03)}

.clear{width:100%;clear:both!important;display:inline-block}

.clean{width:100%;clear:both!important;display:inline-block}

.left{border:2px solid#FF4000;border-top-right-radius: 30px;
border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 30px;margin:2px;width:300px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float: left}

.left_2{border:2px solid#FF4000;border-top-right-radius: 30px;
border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 30px;margin:2px;width:395px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float: left}

.right{border:2px solid#0080FF;border-top-right-radius: 0px;
border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 0px;margin:2px;width:300px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:right;float: right}

.Drawing_box{border:2px solid#FF4000;border-top-right-radius: 30px;
border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 30px;margin:2px;width:320px;box-shadow:2px 2px 5px#000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left}

.middle{border:2px solid#718A9A;border-top-right-radius: 30px;
border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 30px;margin:2px;width:250px;box-shadow:3px 3px 3px#000;overflow:hidden;transition:all 0.5s Ease;text-align:center}

textarea {
background: #eee url(http://gallery1.anivide.com/_full/51129_1372154438.jpg) no-repeat;
opacity:0.9;filter:alpha(opacity=50);
border: 1px solid #0080FF !important;
font-family: Tempus Sans ITC;
border-top-right-radius: 0px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 0px;
width: 630px;
height:200px;
text-align:left;
font-size: 13px;
color: #FFFFFF;
border: 1px solid;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-flex-direction: column;
padding: 3px;
white-space: pre-wrap;
word-wrap: break-word;}

body
{
background-color: #fff; font-family: Tempus Sans ITC; color: #FFFFFF; text-align: center; font-size: 15px;
}

A:link {font-family: Tempus Sans ITC; color: #FFFFFF; text-decoration:none}
</style>


<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/02/11/chrome-pointer.html" target="_blank" title="Chrome Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Chrome Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>


<div class = "holder"><img src="INSERT_BANNER_URL_HERE"width="100%"/></div>
<div style="float:left;width:300px">
<div class="left come-out"><img src="http://gallery1.anivide.com/_full/51129_1371916102.png"></img></div>
<div class= "left">[DRAWING]</div>
<div class="clear"></div>
</div>
<div class="right come-out"><img src="http://gallery1.anivide.com/_full/51129_1371915961.png"></img></div>
<div class="holder_buttons come-out">
<br>[BUTTONS]
<div class="holder_music"><br>[MUSIC]</div></div>
<a href="INSERT_GALLERY_LINK_HERE">
<img src="http://gallery1.anivide.com/_full/51129_1372269303.png"></a>
<a href="INSERT_VOTE_LINK_HERE">
<img src="http://gallery1.anivide.com/_full/51129_1368381779.png"></a>
<div class="holder_comment textarea">[COMMENT_BOX]</div>
<div class="Info"><br><br><font size=1><i>Theme: Fire and Water</i></font></div>
<div class="Info"><br><br><font size=1>©2013 Crazeye All Rights Reserved</font></div>
"When you don't fit in anywhere in the world, what should you do?
Carve yourself to fit the world...? ...Or carve the world to fit
you?!"


C.C.C (Crazeye's Creative Corner)
◕‿◕

My enter key & spell-checker are morons!

User avatar
Seraph
Global moderators
Global moderators
Posts: 2726
Joined: 11 Jul 2013, 05:14

Re: Share your HTML & CSS layout

Post by Seraph » 02 Aug 2013, 18:24

Image

Okay, since people are already using this code, I'll just post it here.
I got this code from tumblr, and fiddled around with it so it works here.
Feel free to use it, just don't take credit.

Here's the code:
<style type="text/css">

.button {
background: #e70d17;
color: #000;
font-weight: bold;
font-family:t
margin: 10px;
border: 2px solid #111111;
padding: 3px;-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;
}


.button:hover {
background: #000;
color: #e70d17;
font-weight: bold;
font-family:t
margin: 10px;
border: 2px solid #111111;
padding: 3px;-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;
}



::-webkit-scrollbar {width: 8px; height:8px; background:#fafafa}
::-webkit-scrollbar-button {width: 8px; height:8px; background:#e70d17}
::-webkit-scrollbar-corner {padding:2px;background:#fafafa}
::-webkit-scrollbar-thumb {background: #e70d17;}

#box_top_ads{ display: none;}

a img { filter: grayscale(100%); -webkit-filter: grayscale(100%);

/* For Webkit browsers */ filter: gray;
/* For IE 6 - 9 */ -webkit-transition: all .6s ease;
/* Transition for Webkit browsers */}


a img:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: none; b, strong {color:#BF0311;}

body {font-variant:small-caps;f;}font-family: arial-narrow;color: #ffffff;font-size: 1px;}
body { font-family: Times New Roman }

.receipt { font-family: Courier, "Lucida Console", monospace }

a {font-size:11px;text-align: center;-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;}

a:hover {text-decoration:none;color:#e70d17;}

textarea {color: #e70d17;font-variant:small-caps;f;}

.Buttons{display: none;}

body, a, a:hover { cursor:url(http://gallery1.anivide.com/_full/57046_1374343004.png), auto }

#box_top,#box_ticker,#box_top_ads,#nav{ display: none;}

/* BODY */
body {
background-image: url('http://gallery1.anivide.com/_full/57046_1375367908.png');
margin:0;
background-attachment: fixed;
background-color: #ffffff;
}


@font-face {
font-family: "heather";
src: url('http://static.tumblr.com/7fjp0ap/yh5mcyonf/heather_.ttf');}


::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #171717;
}

::-webkit-scrollbar {
height: 30px;
width: 3px;
background-color: ;
}


.holder{
top:50%;
margin-top:50px;
margin-left:-30px;
bottom:0px;
height:auto;
width:100%;
background: #000, url(http://static.tumblr.com/95njt7t/Lq4m4ycid/pattern3.gif)
}



#divv{
height: auto;
margin: auto;
padding:2px;
width: 820px;
height: 425px;
text-align: center;
box-shadow: 0px 0px 9px 0px #000000;
background-color: #c7c7c7;
background-image: url('http://static.tumblr.com/95njt7t/Lq4m4ycid/pattern3.gif');
}





.divvx{
width: 250px;
max-height: 400px;
margin:10px;
float:left;
border: 3px dashed #3e3e3e;
margin-right:10px;
overflow:hidden;
}



#info{
margin-top:10px;
display: block;
float:left;
width: 400px;
height: 374px;
overflow-y:auto;
padding: 10px;
padding-top:20px;
border: 1px dashed #3e3e3e;
text-align: justify;
color: #171717;
background: #000 url('http://static.tumblr.com/95njt7t/Lq4m4ycid/pattern3.gif')
margin-bottom: 10px;
font-family: Calibri, sans-serif;
font-size: 12px;
margin-bottom: 10px;

}


#info a{
color: #686666;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}


#info a:hover{
color: #9b9999;
}


#info b,strong{
color: #3c3333;
}


#title{
width: 810px;
padding:5px;
text-align: left;
color: #3e3e3e;
font-size: 30px;
font-family: heather;
line-height:20px;
margin-top:-30px;
}



#other{
display:block;
float:right;
margin-right:70px;
width: 90px;
margin-top:10px;
border: 1px dashed #3e3e3e;
background-color:#171717;
color: #FFF;
padding:5px;
height: 394px;
text-align:center;
font-family: calibri;
font-size: 10px;
}



#other img {
margin-top:20px;
width: 50px;
height:50px;
border: 1px solid #3e3e3e;
}


#other b,strong{
color: #000000;
}


#linksbox{
display: inline-block;
width: 90px;
margin-top: 30px;
padding-top:20px;
border-top: 1px solid #3e3e3e;
text-align: center;
}


#linksbox a{
text-decoration: none;
display: block;
float: left;
width: 80px;
height: 20px;
font-size: 9px;
margin-bottom: 10px;
line-height: 20px;
padding-right: 5px;
padding-left: 5px;
text-align: center;
font-family: calibri;
color: #f1f1f1; /* CHANGE LINK TEXT COLOR */
background-color:#3e3e3e; /* CHANGE LINK BACKGROUND COLOR */
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out; }


#linksbox a:hover{
box-shadow: 2px 3px 10px 0px #000000; /* CHANGE LINK HOVER SHADOW COLOR */
}



ul{
list-style-type:upper-roman;
}


li{
list-style-type:circle;
text-align:left;
}


#credit{
position:fixed;
right:0px;
bottom:0px;
padding:20px;
padding-bottom:10px;
text-align:right;
z-index:999;
}

#credit a{
color: #3e3e3e;
font-family:calibri;
font-size:11px;
text-decoration:none;
}

#playertab
{position:fixed;z-index:999;
bottom:0px;
left:-170px;
height:10px;
padding:1px 8px 3px 1px;
letter-spacing:2px;
background-color:#000;
-moz-border-radius:0px 10px 0px 0px;
border-radius:0px 10px 0px 0px;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

#mus
{float:left;
color:#fff;
padding-left:100px;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

#playertab:hover #mus
{padding-left:0px;
opacity:0;}

#playertab:hover
{left:0px;}

</style>

<div id="credit"><a href="http://www.anivide.com/user/BringMeTheHorizon">Bmth</a></div>


<div class="holder">
<div id="other">

<center><img src="http://25.media.tumblr.com/avatar_60e261195977_128.png"></center>
<br>

<div id="linksbox">

<a href="/">Home</a>
<a href="/forums/ucp.php?i=pm&mode=compose&u=83795">Message</a>
<a href="/friends.html?action=add&id=83795&uname=BringMeTheHorizon">Add</a>
<a href="/friends.html?action=add_favorite&uname=BringMeTheHorizon&uid=83795">Favourite</a>
<a href="/top.html?view=profile_vote&user=83795&name=BringMeTheHorizon">Vote</a>

</div>
</div>
<div id="divv">

<div id="title">Let's Kill Tonight!</div>


<div class="divvx">[AVATAR]</div>
<div id="info">
[ABOUT_ME]<br>[COMMENT_BOX]</div>
</div>



</div>
</div>
<div class="Buttons">[BUTTONS]</div>

<div id='playertab'>
<div style='float:left;width:120px'>MUSIC PLAYER CODE GOES HERE</div>
<div id='mus'><img src='http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif' style='margin-right:8px;'/> musique</div>
</div><!--playertab-->


Don't forget to change the links (what I've coloured in red) otherwise, all your adds, messages and votes will end up going to me 8I

User avatar
Eun
Anispace Champion
Anispace Champion
Posts: 4768
Joined: 14 Apr 2012, 12:03

Re: Share your HTML & CSS layout

Post by Eun » 14 Aug 2013, 06:39

Some were a bit curious about the design on my profile. I might as well post my code here. Anyone can use this, Its free of use To Any Member. All credit goes to "tawagotoo"


Code: Select all

<style>
.holder{border: ##000000 ;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:300px}
.holder2{border: #000000;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left}
.clear{width:100%;clear:both!important;display:inline-block}
</style>





[BUTTONS]
<div style="float:left;width:330px">
<div class="holder">[AVATAR]</div>
<div class="clear"></div>
<div class="holder">[MY_STATS]</div>
<div class="clear"></div>
<div class="holder">[BEST_FRIEND_BOX]</div>
</div>

<div class="holder2">
<object width="620" height="315"><param name="movie" value=http://www.youtube.com/watch?v=AoaXny3Sink&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Lcpd0lhYMQI?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<div class="holder2">[ABOUT_ME]</div>
<div class="holder2">[COMMENT_BOX]</div>
Welcome to Hell.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest