Share your HTML & CSS layout

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

Moderators: RukiaKuchiki, tsundere

User avatar
Sports
Anispace Beginner
Posts: 36
Joined: 16 Apr 2015, 23:32

Re: Share your HTML & CSS layout

Post by Sports » 29 Dec 2015, 16:25

Melli wrote:
IN THE BLOSSOMS

Image

Code: Select all

[DISABLE_NAV_MENU]
<style>
#box_left_ads,#box_top_ads,#box_ticker {display: none;}

#melli{position:fixed; float:right; top:3px; right:0px; width:150px;}

body {font-family:cambria;}

a:link {
   font-family:cambria;
}

a:hover {
    font-family:cambria;
    color: #FFC3BE;
}

.holder{margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:center;float:left;width:275px;padding:5px;}
.holder img{max-width:150px;}

.holder2{margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;width:500px;padding:5px;float:right;margin-right:50px;}
.holder2 img{max-width:100%;}

</style>
<div style=display:none>[BUTTONS]</div>

<div style=margin-top:50px;>
<div class="holder">
<h2><u>TITILE HERE</u></h2>
<img src="ICON/IMAGE/GIF LINK HERE" align="left;">
<br><br>
<i>DESCRIPTION HERE</i>
<br><br>
<a href="VOTE LINK">VOTE</a> || <a href="MESSAGE LINK">MESSAGE</a> || <a href="http://www.anispace.net/forums/">FORUMS</a> || <a href="http://www.anispace.net/myaccount.php">ACCOUNT</a>
</div>

<div class="holder2">[MY_STATS]</div>
<div class="holder2">[ABOUT_ME]</div>
<div class="holder2">[COMMENT_BOX]</div>

<style>
textarea {color: #bababa;border:1px solid#bababa;opacity:100;filter:alpha(opacity=100);font-size: 18px;white-space:pre-wrap;word-wrap: break-word;max-height:120px;max-width:490px;background:transparent;min-width:490px;min-height:120px;font-family:cambria;}
</style>

<style>
.button {
background:#FFE0DE;
color:#FFF;
.button:hover {
background:#FFE0DE;
color:#FFF;
}
</style>

<div id="melli">
<a href="/user/Melli"><img src="http://i.imgur.com/saLvrIo.gif" title="DESIGNED BY MELLI ♥"></a>
</div>
RULES
- You are allowed to make changes to it, as long as its kept credited and not re-posted.
- You're not allowed to take the background design either
- Please do not take the credit off. But placing the credit to other areas is an exception

Enjoy!
Beautiful code, I shall use it. c:
Image

User avatar
Chie
Anispace Beginner
Posts: 63
Joined: 01 Sep 2015, 13:45

Re: Share your HTML & CSS layout

Post by Chie » 29 Dec 2015, 16:51

Melli wrote:
IN THE BLOSSOMS

Image

Code: Select all

[DISABLE_NAV_MENU]
<style>
#box_left_ads,#box_top_ads,#box_ticker {display: none;}

#melli{position:fixed; float:right; top:3px; right:0px; width:150px;}

body {font-family:cambria;}

a:link {
   font-family:cambria;
}

a:hover {
    font-family:cambria;
    color: #FFC3BE;
}

.holder{margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:center;float:left;width:275px;padding:5px;}
.holder img{max-width:150px;}

.holder2{margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;width:500px;padding:5px;float:right;margin-right:50px;}
.holder2 img{max-width:100%;}

</style>
<div style=display:none>[BUTTONS]</div>

<div style=margin-top:50px;>
<div class="holder">
<h2><u>TITILE HERE</u></h2>
<img src="ICON/IMAGE/GIF LINK HERE" align="left;">
<br><br>
<i>DESCRIPTION HERE</i>
<br><br>
<a href="VOTE LINK">VOTE</a> || <a href="MESSAGE LINK">MESSAGE</a> || <a href="http://www.anispace.net/forums/">FORUMS</a> || <a href="http://www.anispace.net/myaccount.php">ACCOUNT</a>
</div>

<div class="holder2">[MY_STATS]</div>
<div class="holder2">[ABOUT_ME]</div>
<div class="holder2">[COMMENT_BOX]</div>

<style>
textarea {color: #bababa;border:1px solid#bababa;opacity:100;filter:alpha(opacity=100);font-size: 18px;white-space:pre-wrap;word-wrap: break-word;max-height:120px;max-width:490px;background:transparent;min-width:490px;min-height:120px;font-family:cambria;}
</style>

<style>
.button {
background:#FFE0DE;
color:#FFF;
.button:hover {
background:#FFE0DE;
color:#FFF;
}
</style>

<div id="melli">
<a href="/user/Melli"><img src="http://i.imgur.com/saLvrIo.gif" title="DESIGNED BY MELLI ♥"></a>
</div>
RULES
- You are allowed to make changes to it, as long as its kept credited and not re-posted.
- You're not allowed to take the background design either
- Please do not take the credit off. But placing the credit to other areas is an exception

Enjoy!
Another stunning code. I love your work. ❤
Image

Image

Rendering ? Request here

User avatar
Melli
Anispace Apprentice
Anispace Apprentice
Posts: 949
Joined: 11 Sep 2014, 01:44

Re: Share your HTML & CSS layout

Post by Melli » 02 Jan 2016, 09:05

NAMELESS
Just played around with the "In The Blossoms" code.

Image

Code: Select all

[DISABLE_NAV_MENU]
<style>
#box_top,#box_ticker,#box_bottom,#box_top_ads,#box_before,#box_back,#box_left,#box_right,#box_top,#box_bottom{display: none;}

#melli{position:fixed; float:right; top:3px; right:0px; width:150px;}

body {font-family:cambria;}

a:link {
   font-family:cambria;
}

a:hover {
    font-family:cambria;
    color: #FFC3BE;
}

.holder{margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:center;float:left;width:275px;padding:5px;background:#FFF;margin-left:75px;box-shadow:2px 2px 5px #E0E0E0;}
.holder img{max-width:150px;}

.holder2{margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;width:500px;padding:5px;float:right;margin-right:50px;background:#FFF;box-shadow:2px 2px 5px #E0E0E0;}
.holder2 img{max-width:100%;}

</style>
<div style=display:none>[BUTTONS]</div>


<div class="holder">
<h2><u>TITILE TEXT</u></h2>
<img src="IMG LINK" align="left;" img style="border:3px double #ccc;">
<br><br>
<i>DESC
<br><br>
DESC</i>
<br><br>
<a href="VOTE LINK">VOTE</a> || <a href="MESAGE LINK">MESSAGE</a> || <a href="LINK">LINK</a> || <a href="LINK">LINK</a>
<br><br>
<hr>
[MY_STATS]
</div>

<div class="holder2">
<p>ABOUT ME</p>
<hr>
<br>
[ABOUT_ME]
</div>

<div class="holder2">
<p>SEND A COMMENT</p>
<hr>
<br>
[COMMENT_BOX]
</div>

<style>
textarea {color: #bababa;border:1px solid#bababa;opacity:100;filter:alpha(opacity=100);font-size: 18px;white-space:pre-wrap;word-wrap: break-word;max-height:120px;max-width:490px;background:transparent;min-width:490px;min-height:120px;font-family:cambria;}
</style>

<style>
.button {
background:#FFE0DE;
color:#FFF;
.button:hover {
background:#FFE0DE;
color:#FFF;
}
</style>

<div id="melli">
<a href="/user/Melli"><img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minicoisinhasni6.gif" title="DESIGNED BY MELLI ♥"></a>
</div>
RULES
- You are allowed to make changes to it, as long as its kept credited and not re-posted.
- If you modify it and share it with others, doesn't actually mean you created it.
- Please do not take the credit off. But placing the credit to other areas is an exception

Enjoy!

User avatar
Royalene
Anispace Pro
Anispace Pro
Posts: 1039
Joined: 22 May 2013, 14:52

Re: Share your HTML & CSS layout

Post by Royalene » 16 Jan 2016, 17:22

"CUSTOM DEFAULT"

Motivated by Melli and Kuuro~
This is the first code I made. Its kinda simple but I will progress as time goes.

Image

Rules:
-Do not redistribute this code.
-Adjustments are fine as long as you credit me..
-Removing the credit means claiming the work. Do not remove the credit. (You may put it anywhere in your about me. I don't care where as long as its there.
-Any questions ask me please! I'd love to help you

[spoiler][DISABLE_NAV_MENU]
<html>
<style>


#box_top,#box_ticker,#box_top_ads,{ display: none;}
.header { margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:center;float:left;width:950px;height:200px;padding:5px; background: none;border: 1px solid #C7C7C7; }

.holder img{max-width:100px;}

.holder { margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:center;float:left;width:350px;padding:5px;background: #0B0000;border: 1px solid white;font-family: century gothic; }

.holder img{max-width:300px;}

.holder2 { margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:center;float:CENTER;padding:5px;width:550px; border: 1px solid white;font-family: century gothic;background: #0B0000;}

textarea {
background: #fff url(LINK) center repeat;
border: 1px solid #ffffff !important;
font-family: Onyx;
font-size: 18px;
height: 200px !important;
width: 500px !important;
color: #fff;
text-shadow: 0 0 2px #000000, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #FFFFFF, 0 0 10px #000000, 0 0 12px #9862D7, 0 0 14px #000000, 0 0 16px #000000;}

textarea, input { outline: none;}
img{
-webkit-transition: opacity 0.8s linear;
opacity: 0.60;
}
img:hover{
-webkit-transition: opacity 0.8s linear;
opacity: 1;
}

body {
margin:0px;

background-attachment: scroll;
background-color: #0B0000;/* CHANGE THE BG COLOR */
background-repeat:no-repeat;</style>

<br>
<div class=holder><b> </b></font><br><img src="SIDEBAR IMAGE"><br><b>

☀<a href="/"> Home</a> ☀ <a href="http://www.anispace.net/forums">Forums</a>
☀ <a href="VOTE LINK">❤</a>☀ <a href="MESSAGE LINK">Message</a>☀ <a href="http://www.anispace.net/user/LucidCatha ... redit</a>☀
<br><br>
DESCRIPTION
<br>Have a good day!</b>

QUOTE:
<br><font face="vivaldi" color="gray" size="5px">~Because loving you is my madness</font>



<hr style="border-top: 1px solid #ccc"/>

YOUTUBE SECTION
<br><object width="350" height="250"><param name="movie" value="//www.youtube.com/v/Am7x6n7abd0&autoplay= ... ram><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/Am7x6n7abd0&autoplay= ... n_US&rel=0" type="application/x-shockwave-flash" width="300" height="250" allowscriptaccess="always" allowfullscreen="true"></embed></object>
<br><br></div>

<div class=holder2>[MY_STATS]<br><br><hr style="border-top: 1px solid #ccc"/><br>[BUTTONS] <hr style="border-top: 1px solid #ccc"/><br> [ABOUT_ME]<br> <hr style="border-top: 1px solid #ccc"/>[COMMENT_BOX]</div>
<div style=display:none>[BUTTONS]</div>[/spoiler]

"The more time passes, the more unfocused my eyes get
Suddenly, your voice is in my ears
I’m getting lost because I see someone who looks like you

"

User avatar
Royalene
Anispace Pro
Anispace Pro
Posts: 1039
Joined: 22 May 2013, 14:52

Re: Share your HTML & CSS layout

Post by Royalene » 19 Jan 2016, 11:33

Custom Default Code I made called "Selena"
It has a YT in the middle.

Image

Rules:
-Not to re-distribute other than here.
-Adjust it, its fine but keep the credit.
-You may not remove the crown link. Its my credit link.
-I Uppercased all the changes areas for this code for your convenience.
-Questions Comment me.
-Upper left icon image has a link to gallery set up~
-Real life preview on my profile~
-Enjoy!

[spoiler]<HTML>
[DISABLE_NAV_MENU]
<style>
@font-face {font-family: 'Century gothic';}
.holder{background: BLACK; border:2px solid WHITE;BACKGROUND:BLACK;box-shadow:2px 2px 5px NONE;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:350px;font-family: 'Century gothic';}
.holder2{BACKGROUND:BLACK; border:2px solid WHITE ;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left; font-family: 'Century gothic';Width: 550px;}
.clear{width:100%;clear:both!important;display:inline-block}
.Info {Padding-Left: 2px; Float: left; Width: 350px; Height: auto; Margin: 2px;text-align:center; font-family: "Playbill", font-size: 3PX; text-color:RED;border: 2px solid WHITE; background: BLACK; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK;
}

li {
float: left;
}

li a {
display: block;
color: purple;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

a:hover:not(.active) {
background-color: WHITE;
}

.active {
background-color:black;
}
a.links {text-shadow: -1px 0px #e42c8b, -2px -1px #e42c8b, 1px 0px #a9e42c, 2px 1px #a9e42c; color: #000;}

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

textarea {
background: #000 url(URL) center no-repeat;
border: 1px solid #ffffff !important;
font-family: VIVALDI;
font-size: 18px;
font-styke: normal;
height: 150px !important;
width: 320px !important;
color: #fff;
text-shadow: 0 0 2px WHITE, 0 0 4px PURPLE, 0 0 6px PURPLE, 0 0 8px #FFFFFF, 0 0 10px WHITE, 0 0 12px #9862D7, 0 0 14px WHITE, 0 0 16px WHITE;}

textarea, input { outline: none;}
body {
margin:0px;

background-color: BLACK;/* CHANGING BG COLOR */

}
</style>

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

<div class="Info"><font face="playbill" color="gray" size="8px">LucidCatharsis</font> {ICON LINKS YOU CAN REPLACE THEM WITH ONE LARGER IMAGE}
<hr style="border-top: 1px solid #5D157F"/><br><a href="http://www.anispace.net/gallery.html"><img src="http://static.tumblr.com/e04f66584c5aff ... tic_64.png" width="45%" pagespeed_url_hash="2895149534" class=”border”/></a><img src="http://media.tumblr.com/40948c50c8198b3 ... qz4rgp.gif" width="45%" pagespeed_url_hash="2895149534" class=”border”/> <img src="http://31.media.tumblr.com/2c785f03ac69 ... r25xgk.gif" width="45%" pagespeed_url_hash="2895149534" class=”border”/><img src="http://images6.fanpop.com/image/photos/ ... 40-240.png" width="45%" pagespeed_url_hash="2895149534" class=”border”/><hr style="border-top: 1px solid #5D157F"/>

<br><font face="playbill" color="gray" size="5px">~Because loving you is my madness {QUOTE} </font>
<hr style="border-top: 1px solid #5D157F"/>
<br><font face="century gothic" color="PURPLE" size="1.5px">INFORMATION EXTENDED
<br>-INFO {SHORT INFO, IE: NAME, AGE SO ON}
<br>INFO
<br>INFO
<br>INFO
<br>-INFO</font></div>

<div class="holder"><br>

<ul>
<li><a class="active" href="/">Home</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="http://www.anispace.net/myaccount.php">MY ACCOUNT</a></li>
<li><a href="active"http://www.anispace.net/rpg.php="#ABOUT">RPG</a></li>
<li><a href="VOTE LINK">❤</a></li> <li><a href="ADD LINK">ADD ME</a></li> <li><a href="MESSAGE LINK">MESSAGE</a></li></ul></div>
<div class="clear"></div>
<div class="holder">[COMMENT_BOX]</div>
</div>


<div class="holder2">[MY_STATS]</div>
<div class="holder2"><object width="550" height="350"><param name="movie" value="//www.youtube.com/v/rJYcmq__nDM?version=3 ... ram><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/rJYcmq__nDM?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="550" height="338" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>
<div class="holder2">[ABOUT_ME]</div>

<div style=display:none>[BUTTONS]</div></HTML>[/spoiler]

"The more time passes, the more unfocused my eyes get
Suddenly, your voice is in my ears
I’m getting lost because I see someone who looks like you

"

User avatar
Melli
Anispace Apprentice
Anispace Apprentice
Posts: 949
Joined: 11 Sep 2014, 01:44

Re: Share your HTML & CSS layout

Post by Melli » 19 Jan 2016, 12:52

REMIX
I didn't know what else to call it, lol.

PREVIEW
Image
CODE

Code: Select all

[DISABLE_NAV_MENU]
<style>
#box_top,#box_ticker,#box_bottom,#box_top_ads,#box_before,#box_back,#box_left,#box_right,#box_top,#box_bottom{display: none;}

#melli{position:fixed; float:right; top:3px; right:0px; width:150px;}

body {
color: #000;
}
a:link {
color: #ccc;
}
a:hover {
color: #fff;
}
A:visited {
color: #ccc ;
text-decoration: none;
}

#header {
background-color:;
color:#ccc;
text-align:center;
padding:5px;
font-family:century;
}
#header a:link {
font-weight: bold;
background-color: #eee;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
border:1px solid #ddd;
display: inline-block;
border-radius:3px;
}

#header a:hover{
background-color: #ccc;
border:1px solid #ccc;
border-radius:2px;
}

#header a:visited {
font-family: Verdana;
color: #fff;
text-decoration: none;
border-radius:2px;
border:1px solid #ddd;
}

.left{border:1px solid #ccc;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:500px;padding:7px;margin-left:50px;font-family:century;background:#F9F9F9;}

.right{border:1px solid #ccc;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;width:300px;float:right;margin-right:50px;background:#F9F9F9;padding:7px;font-family:century;}
.right img{max-width:100%;}

.notices{border:3px double#ccc;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;width:300px;padding:7px;float:right;font-family:century;}
.notices img{max-width:100%;}

textarea {color: #bababa;border:1px solid#bababa;border-radius:2px;opacity:100;filter:alpha(opacity=100);font-size: 18px;white-space:pre-wrap;word-wrap: break-word;max-height:120px;max-width:490px;background:transparent;min-width:490px;min-height:120px;font-family:cambria;}

.button {
background:#bbb;
color:#fff;
border:1px solid #ccc;
border-radius:2px;}

.button:hover {
background:#fff;
color:#bbb;
border:1px solid #ccc;
border-radius:2px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
</style>

<div style=display:none>[BUTTONS]</div>

<div id="header">
<h1>TITLE TEXT HERE</h1>
<br>
<center><a href="/" target="_blank">HOME</a> <a href="http://www.anispace.net/anime" target="_blank">ANIME</a> <a href="http://www.anispace.net/forums" target="_blank">FORUMS</a> <a href="http://www.anispace.net/myaccount.php" target="_blank">ACCOUNT</a> <a href="VOTE LINK HERE" target="_blank">VOTE</a>
</center>
<br>
</div>

<div style=margin-top:20px;>

<div class="right"><img src="IMG LINK"></div>

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

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

<div class="right">[MY_STATS]</div>

<div class="right"><center><u><h3>TITILE HERE</h3></u>
<i><p>Desc.</p></i></center></div>

<div id="melli">
<a href="/user/Melli"><img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minicoisinhasni6.gif" title="DESIGNED BY MELLI ♥"></a>
</div>
RULES
- You are allowed to make changes to it, as long as its kept credited and not re-posted.
- If you modify it and share it with others, doesn't actually mean you created it.
- Please do not take the credit off. But placing the credit to other areas is an exception

Enjoy!

User avatar
Rider
Anispace Pro
Anispace Pro
Posts: 1228
Joined: 20 Apr 2013, 05:16

Re: Share your HTML & CSS layout

Post by Rider » 19 Jan 2016, 12:56

Melli wrote:
REMIX
I didn't know what else to call it, lol.

PREVIEW
Image
CODE

Code: Select all

[DISABLE_NAV_MENU]
<style>
#box_top,#box_ticker,#box_bottom,#box_top_ads,#box_before,#box_back,#box_left,#box_right,#box_top,#box_bottom{display: none;}

#melli{position:fixed; float:right; top:3px; right:0px; width:150px;}

body {
color: #000;
}
a:link {
color: #ccc;
}
a:hover {
color: #fff;
}
A:visited {
color: #ccc ;
text-decoration: none;
}

#header {
background-color:;
color:#ccc;
text-align:center;
padding:5px;
font-family:century;
}
#header a:link {
font-weight: bold;
background-color: #eee;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
border:1px solid #ddd;
display: inline-block;
border-radius:3px;
}

#header a:hover{
background-color: #ccc;
border:1px solid #ccc;
border-radius:2px;
}

#header a:visited {
font-family: Verdana;
color: #fff;
text-decoration: none;
border-radius:2px;
border:1px solid #ddd;
}

.left{border:1px solid #ccc;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:500px;padding:7px;margin-left:50px;font-family:century;background:#F9F9F9;}

.right{border:1px solid #ccc;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;width:300px;float:right;margin-right:50px;background:#F9F9F9;padding:7px;font-family:century;}
.right img{max-width:100%;}

.notices{border:3px double#ccc;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;width:300px;padding:7px;float:right;font-family:century;}
.notices img{max-width:100%;}

textarea {color: #bababa;border:1px solid#bababa;border-radius:2px;opacity:100;filter:alpha(opacity=100);font-size: 18px;white-space:pre-wrap;word-wrap: break-word;max-height:120px;max-width:490px;background:transparent;min-width:490px;min-height:120px;font-family:cambria;}

.button {
background:#bbb;
color:#fff;
border:1px solid #ccc;
border-radius:2px;}

.button:hover {
background:#fff;
color:#bbb;
border:1px solid #ccc;
border-radius:2px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
</style>

<div style=display:none>[BUTTONS]</div>

<div id="header">
<h1>TITLE TEXT HERE</h1>
<br>
<center><a href="/" target="_blank">HOME</a> <a href="http://www.anispace.net/anime" target="_blank">ANIME</a> <a href="http://www.anispace.net/forums" target="_blank">FORUMS</a> <a href="http://www.anispace.net/myaccount.php" target="_blank">ACCOUNT</a> <a href="VOTE LINK HERE" target="_blank">VOTE</a>
</center>
<br>
</div>

<div style=margin-top:20px;>

<div class="right"><img src="IMG LINK"></div>

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

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

<div class="right">[MY_STATS]</div>

<div class="right"><center><u><h3>TITILE HERE</h3></u>
<i><p>Desc.</p></i></center></div>

<div id="melli">
<a href="/user/Melli"><img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minicoisinhasni6.gif" title="DESIGNED BY MELLI ♥"></a>
</div>
RULES
- You are allowed to make changes to it, as long as its kept credited and not re-posted.
- If you modify it and share it with others, doesn't actually mean you created it.
- Please do not take the credit off. But placing the credit to other areas is an exception

Enjoy!
Nice layout sis.

User avatar
Royalene
Anispace Pro
Anispace Pro
Posts: 1039
Joined: 22 May 2013, 14:52

Re: Share your HTML & CSS layout

Post by Royalene » 19 Jan 2016, 16:23

Another version of "Selena" code.
I played with it and it turned out to this.

"Personal"
Preview
[spoiler]Image[/spoiler]

Same drill:
-No Reposting other than anispace.
-Do not remove the crown link (if you put code credit somewhere on your page, then take it off)
-Adjust it if you like, but credit me.
-Questions Ask!
Image issue is now fixed

[spoiler][DISABLE_NAV_MENU]
<style>
@font-face {font-family: 'Century gothic';}
.navibar{background: gray; border:1px solid WHITE;BACKGROUND:#333333;box-shadow:2px 2px 5px NONE;overflow:hidden;transition:all 0.5s Ease;text-align:center;float:left;width:935px;font-family: 'Century gothic';background: url(http://www.abeautifulsite.net/wp-conten ... 50x233.png) center repeat;}
.holder{background:gray; border:1px solid WHITE;background: url(http://www.abeautifulsite.net/wp-conten ... 50x233.png) center repeat;;box-shadow:2px 2px 5px NONE;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:350px;font-family: 'Century gothic';}
.holder2{background: url(http://www.abeautifulsite.net/wp-conten ... 50x233.png); border:1px solid WHITE ;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left; font-family: 'Century gothic';Width: 550px;float:right;}
.holder4{BACKGROUND:#333333; border:1px solid WHITE ;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left; font-family: 'Century gothic';Width: 550px;float:right;}
.clear{width:100%;clear:both!important;display:inline-block}
.Info {Padding-Left: 2px; Float: left; Width: 350px; Height: auto; Margin: 2px;text-align:center; font-family: "Playbill", font-size: 3PX; text-color:RED;border: 1px solid WHITE; background: url(http://www.abeautifulsite.net/wp-conten ... 50x233.png) center repeat; }
.Header {Padding-Left: 2px; Float: left; Width: 350px; Height: auto; Margin: 2px;text-align:center; font-family: "Playbill", font-size: 3PX; text-color:RED;border: 2px solid WHITE; background:Gray; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:#333333;
}

li {
float:left;
}

li a {
display: block;
color: purple;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

a:hover:not(.active) {
background-color: gray;
}

.active {
background-color:#333333;
}
a.links {text-shadow: -1px 0px #e42c8b, -2px -1px #e42c8b, 1px 0px #a9e42c, 2px 1px #a9e42c; color: #000;}

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

textarea {
background: #333333 url(URL) center no-repeat;
border: 1px solid #ffffff !important;
font-family: VIVALDI;
font-size: 18px;
font-styke: normal;
height: 150px !important;
width: 320px !important;
text-float: center;
color: #fff;
text-shadow: 0 0 2px WHITE, 0 0 4px PURPLE, 0 0 6px PURPLE, 0 0 8px #FFFFFF, 0 0 10px WHITE, 0 0 12px #9862D7, 0 0 14px WHITE, 0 0 16px WHITE;}

textarea, input { outline: none;}
body {
margin:0px;

background-color: #333333;/* CHANGING BG COLOR */

}
</style>

<div style="float:left;width:330px">
<div class="navibar"><br>
<ul>
<li><a href="/">HOME</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="http://www.anispace.net/myaccount.php">MY ACCOUNT</a></li>
<li><a href="http://www.anispace.net/rpg.php="#ABOUT">RPG</a></li>
<li><a href="ADD TO FAVORITE URL ">FAVORITE ME</a></li>
<li><a href="VOTE ME URL">❤</a></li> <li><a href="ADD ME URL">ADD ME</a></li> <li><a href="MESSAGE URL">MESSAGE</a></li> <li><a href="http://www.anispace.net/user/LucidCatharsis">♛</a></li> </ul></div>
<div class="Header"><font face="playbill" color="white" size="8px">LucidCatharsis</font></div>

<div class="Info">
<hr style="border-top: 1px solid #5D157F"/><br><img src="https://31.media.tumblr.com/195b5fbaa77 ... s6avhq.png" width="50%"/>
<br><font face="playbill" color="gray" size="5px">~QUOTE</font>
<hr style="border-top: 1px solid #5D157F"/>
<br><font face="century gothic" color="#fff" size="1.5px"> SHORT DESCRIPTION HERE
<br>INFO
<br>INFO
<br>INFO
<br>INFO
<br>-Have a great stay!</font></div>
<br><br>
<div class="clear"></div>
<div class="holder">[COMMENT_BOX]</div>
</div>

<br><br><br><br>
<div class="holder4">[MY_STATS]</div>
<div class="holder2"><object width="550" height="350"><param name="movie" value="//www.youtube.com/v/rJYcmq__nDM?version=3 ... ram><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/rJYcmq__nDM?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="550" height="338" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>

<div class="holder2">[ABOUT_ME]</div>

<div style=display:none>[BUTTONS]</div>[/spoiler]

"The more time passes, the more unfocused my eyes get
Suddenly, your voice is in my ears
I’m getting lost because I see someone who looks like you

"

User avatar
Van
Posts: 7
Joined: 07 Feb 2016, 20:51

Re: Share your HTML & CSS layout

Post by Van » 12 Feb 2016, 18:12

SKYPIEA DEFAULT CODE VER. 2
from my other account Sav I recoded this theme but I wanted to make a few changes, and I wanted to share it with everyone.

what comes with the recode.

1. use a gif as a avi.
2. title above the avi.
3. put a title for your flash / music player.

make sure to keep credit; and have fun using it.

PREVIEW:

[spoiler]Image[/spoiler]

CODE:

[spoiler][DISABLE_NAV_MENU]

<style>
/*Coding by skypiea, (Sample HTML code 2) by Luffy, Credit to [email protected] Requested by Demonwolf. Minor edits or the base are allowed and encouraged, so long as you do not remove the credit! Created on 2 November 2013 Please keep ALL of the credits. Thank you. Enjoy*/

#box_left_ads,#box_top_ads {display: none;}

*, body, a, a:hover {cursor: url(http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto;}

::-webkit-scrollbar
{background-color:#000; height:5px; width:4px}
::-webkit-scrollbar-thumb:vertical {background-color:#AD8CC4; height:40px;}
::-webkit-scrollbar-thumb:horizontal {background-color:#000; height:5px!important}

iframe#tumblr_controls {white-space:nowrap;-webkit-filter:invert(100%);-moz-filter:invert(100%);-o-filter:invert(100%);-ms-filter: invert(100%);filter:invert(100%);opacity:.4;padding:4px;}


textarea {
background: #000000 url() center repeat;
border: 3px double #202020; !important;
font-family: ms ui gothic;
font-size: 15px;
color: #AD8CC4;
text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #824a4a, 0 0 10px #824a4a, 0 0 12px #824a4a, 0 0 14px #824a4a, 0 0 16px #824a4a;}

#buttons img {display: none;}

#buttons td a font b {
color: #AD8CC4;
font-family:ms ui gothic;
font-size: 10px;
text-transform: uppercase;
font-weight: normal;
font-style: normal;}

#buttons td a font b:hover {color: #333333;}

img {max-width: 100%;}

.holder{width: 330px;font-family: ms ui gothic;background-color: transparent;padding:5px;border:3px double #101010;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:300px}

.holder2{width: 590px;font-family: ms ui gothic;background-color: #000;padding:5px;border:3px double #101010;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left}

.clear{width:100%;clear:both!important;display:inline-block}
</style>
<div style="float:left;width:330px">
<div class="holder"><font size=4><center>MAIN TITLE</center></font></div>
<div class="holder">
<center><img src='GIF AS A AVI GOES HERE'></center></div>
<br>
<br>
<div class="holder"><br><center><font size=1>MUSIC TITLE</font>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="mp3=http://a.tumblr.com/tumblr_lvzggtqXXp1q ... lor=cccccc" />
</object></center><br></div>
<br>
<div class="clear"></div>
<div class="holder">
<center><br>BEST FRIEND BOX TITLE.
<br>
<br>
[BEST_FRIEND_BOX]</center></div>
<br>
</div>
<div id="buttons" class="holder2">[BUTTONS]</div>
<br>
<div class="holder2">
<div style='padding:3px;color: #AD8CC4;border-bottom:1px #000 dashed'><font size="3"><b>Van</b></font></div>
[MY_STATS]</div>
<br>

<div class="holder2"><div style='padding:3px;color:#000;border-bottom:1px #000 dashed'><font size="3"><b>Text Here</b></font></div>
[ABOUT_ME]<center>[COMMENT_BOX]</center><br><br>
<font size=1>© 2013 Coding by skypiea & Recode by Van</font><br></div>[/spoiler]
[/size]
Last edited by Van on 12 Feb 2016, 18:32, edited 1 time in total.

User avatar
Killua
Anispace Champion
Anispace Champion
Posts: 3162
Joined: 15 Apr 2014, 19:25

Re: Share your HTML & CSS layout

Post by Killua » 12 Feb 2016, 18:16

Van wrote:
SKYPIEA DEFAULT CODE VER. 2
from my other account Sav I recoded this theme but I wanted to make a few changes, and I wanted to share it with everyone.

what comes with the recode.

1. use a gif as a avi.
2. title above the avi.
3. put a title for your flash / music player.

make sure to keep credit; and have fun using it.

PREVIEW:

[spoiler]Image[/spoiler]

CODE:

[spoiler][DISABLE_NAV_MENU]

<style>
/*Coding by skypiea, (Sample HTML code 2) by Luffy, Credit to [email protected] Requested by Demonwolf. Minor edits or the base are allowed and encouraged, so long as you do not remove the credit! Created on 2 November 2013 Please keep ALL of the credits. Thank you. Enjoy*/

#box_left_ads,#box_top_ads {display: none;}

*, body, a, a:hover {cursor: url(http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto;}

::-webkit-scrollbar
{background-color:#000; height:5px; width:4px}
::-webkit-scrollbar-thumb:vertical {background-color:#AD8CC4; height:40px;}
::-webkit-scrollbar-thumb:horizontal {background-color:#000; height:5px!important}

iframe#tumblr_controls {white-space:nowrap;-webkit-filter:invert(100%);-moz-filter:invert(100%);-o-filter:invert(100%);-ms-filter: invert(100%);filter:invert(100%);opacity:.4;padding:4px;}


textarea {
background: #000000 url() center repeat;
border: 3px double #202020; !important;
font-family: ms ui gothic;
font-size: 15px;
color: #AD8CC4;
text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #824a4a, 0 0 10px #824a4a, 0 0 12px #824a4a, 0 0 14px #824a4a, 0 0 16px #824a4a;}

#buttons img {display: none;}

#buttons td a font b {
color: #AD8CC4;
font-family:ms ui gothic;
font-size: 10px;
text-transform: uppercase;
font-weight: normal;
font-style: normal;}

#buttons td a font b:hover {color: #333333;}

img {max-width: 100%;}

.holder{width: 330px;font-family: ms ui gothic;background-color: transparent;padding:5px;border:3px double #101010;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:300px}

.holder2{width: 590px;font-family: ms ui gothic;background-color: #000;padding:5px;border:3px double #101010;margin:5px;overflow:hidden;transition:all 0.5s Ease;text-align:left}

.clear{width:100%;clear:both!important;display:inline-block}
</style>
<div style="float:left;width:330px">
<div class="holder"><font size=4><center>MAIN TITLE</center></font></div>
<div class="holder">
<center><img src='GIF AS A AVI GOES HERE'></center></div>
<br>
<br>
<div class="holder"><br><center><font size=1>MUSIC TITLE</font>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="mp3=http://a.tumblr.com/tumblr_lvzggtqXXp1q ... lor=cccccc" />
</object></center><br></div>
<br>
<div class="clear"></div>
<div class="holder">
<center><br>BEST FRIEND BOX TITLE.
<br>
<br>
[BEST_FRIEND_BOX]</center></div>
<br>
</div>
<div id="buttons" class="holder2">[BUTTONS]</div>
<br>
<div class="holder2">
<div style='padding:3px;color: #AD8CC4;border-bottom:1px #000 dashed'><font size="3"><b>Van</b></font></div>
[MY_STATS]</div>
<br>

<div class="holder2"><div style='padding:3px;color:#000;border-bottom:1px #000 dashed'><font size="3"><b>Text Here</b></font></div>
[ABOUT_ME]<center>[COMMENT_BOX]</center><br><br>
<font size=1>© 2013 Coding by skypiea & Recode by Van</font><br></div>[/spoiler]
[/size]
i'm definately using this one.<3 great edit Savannah-chan.
Image
FINAL FANTASY VII REMAKE | KINGDOM HEARTS III
Image

Image
ㅤㅤImage ㅤㅤㅤ

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests