2NE1

Designer's Comments

Look carefully for specific instructions

Link to my templates archives

My first premade website template (;

You may remove the Valid XHTML button if you wish. I've run the template through the W3 validator and it is 100% error free.

Tested in Firefox, Explorer, and Safari;
Created on a Mac, Firefox/Safari, 1280x800 resolution;
Banner created in Photoshop CS4;
Please do not remove credits;
Enjoy (:

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Site Name</title>
<meta http-equiv="Content-Type" content="text/javascript; charset=iso-8859-1" />
<meta name="description" content="Myspace layouts, website templates, codes, graphics, and more." />
<meta name="keywords" content="myspace layouts, myspace divs, codes, website templates, templates, graphics, wallpapers" />

/* background */
body {
  background-color:#dbdae7;
  background-image:url("http://cbimg6.com/layouts/09/07/35283aa.png");
  background-repeat:repeat-y;
  background-position:center top;
  background-attachment:fixed;
}

/* banner */
#banner {
  margin-top:-8px;
  width:780px;height:400px;
  background-image:url("http://cbimg6.com/layouts/09/07/35283ab.png");
}

#bannertext {
  position:relative;
  margin-left:226px;top:91px;
  width:400px;height:54px;
}

#bannertext h1 {
  margin-top:0px;margin-right:-5px;
  padding:0px;
  font-size:34px;
  letter-spacing:8px;
  text-align:right;
  border:none;
}

#bannertext h3 {
  margin-top:-8px;
  padding:0px;
  font-size:18px;
  color:#4d4889;
  text-align:right;
}

/* content sections */
#container {
  margin-top:0px;margin-bottom:0px;
  margin-left:auto;margin-right:auto;
  width:780px;
}

#leftmenu {
  float:left;
  margin-top:15px;
  width:140px;height:100%;
}

#rightmenu {
  float:right;
  margin-top:15px;
  width:140px;height:100%;
}

#updates {
  width:130px;height:75px;
  overflow:auto;
  background-color:transparent;
  padding:5px;
}

#content {
  float:left;
  margin-top:15px;margin-left:20px;
  width:460px;height:100%;
  background-image:url("http://cbimg6.com/layouts/09/07/35283ac.png");
}

.contentarea {
  text-align:justify;
  margin-top:-5px;
  margin-bottom:5px;
  padding:5px;
}

#copyright {
  position:relative;
  width:460px;height:30px;
  margin-top:20px;
  text-align:center;
}

/* boxes, textareas, inputs */
textarea, input {
  border:0px;
  background-color:transparent;
  background-image:url("http://cbimg6.com/layouts/09/07/35283ac.png");
}

/* lists */
#leftmenu ul {
  margin:0px;
  margin-left:-20px;
  .margin:auto;
  .margin-left:20px;
}
#leftmenu li {
  color:#791e6a;
  list-style-position:outside;
  list-style-type:circle;
}
#leftmenu li:hover { color:#4d4889; }

#rightmenu ul {
  margin:0px;
  margin-right:-20px;
  .margin:auto;
  .margin-right:20px;
  direction:rtl;
}
#rightmenu li {
  color:#4d4889;
  list-style-position:outside;
  list-style-type:circle;
}
#rightmenu li:hover { color:#791e6a; }

#updates ul {
  margin:0px;
  margin-left:-20px;
  .margin:auto;
  .margin-left:20px;
  direction:ltr;
}
#updates ul li, #updates ul li:hover, .white li { color:#453142!important; }

#contentarea li { list-style-type:circle; }

/* text */
div, table, td, p, .text, font, textarea, input {
  font-family:Helvetica, Arial, sans-serif;
  font-size:11px;
  color:#453142;
  letter-spacing:1px;
  word-spacing:-1px;
  text-decoration:none!important;
}

/* links */
a {
  font-family:Helvetica, Arial, sans-serif;
  font-size:11px;
  color:#791e6a;
  letter-spacing:1px;
  word-spacing:-1px;
  text-decoration:none;
}
a:hover { color:#4d4889; }

#leftmenu a {
  display:block;
  color:#9e3d8e;
  margin-bottom:2px;
}
#leftmenu a:hover { color:#7772ad; }

#rightmenu a {
  display:block;
  padding-left:5px;
  color:#7772ad;
  text-align:right;
  margin-bottom:2px;
}
#rightmenu a:hover { color:#9e3d8e; }

a img { border:0px; }

/* headers */
h1 {
  margin-top:0px;margin-bottom:5px;
  padding-top:2px;
  font-family:Helvetica, Arial, sans-serif;
  font-size:24px;
  font-weight:lighter;
  font-style:none;
  color:#6b378a;
  letter-spacing:6px;
  text-transform:uppercase;
  text-align:center;
  border-bottom:1px solid;
  border-color:#791e6a;
}

h2 {
  margin:0px;
  display:block;
  font-family:georgia;
  font-size:13px;
  font-weight:lighter;
  font-style:italic;
  color:#44063a;
  letter-spacing:2px;
  text-align:center;
  line-height:13px;
}

h3 {
  margin-top:0px;margin-bottom:5px;
  padding:0px;padding-top:2px;
  font-family:Helvetica, Arial, sans-serif;
  font-size:14px;
  color:#fff;
  font-weight:lighter;
  letter-spacing:4px;
  text-transform:uppercase;
  text-align:center;
}

#leftmenu h3 { background-image:url("http://cbimg6.com/layouts/09/07/35283ad.png"); }
#rightmenu h3 { background-image:url("http://cbimg6.com/layouts/09/07/35283ae.png"); }

</style>
</head>

<body>
<div id="container">
<div id="banner">
<div id="bannertext">
<h1>Your Site Name</h1>
<h3>Your Headline Goes Here</h3>
</div>
</div>

<br />
<h3>Content</h3>
<ul>
<li><a href="link">Link</a></li>
<li><a href="link">Link</a></li>
<li><a href="link">Link</a></li>

<br />
<h3>Header</h3>
<ul class="white"><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li></ul>

<br />
<h3>Header</h3>
<ul>
<li><a href="link">Link</a></li>

</div>

<div id="rightmenu">
<h3>Updates</h3>
<div id="updates">
<ul>
<li>You can put updates here. This box will scroll (:</li>
<li>You can put updates here. This box will scroll (:</li>

<li>You can put updates here. This box will scroll (:</li>
</ul>
</div>

<br />
<h3>Affiliates</h3>
<ul>
<li><a href="link">Affiliate</a></li>
<li><a href="link">Affiliate</a></li>
<li><a href="link">Affiliate</a></li>
<li><a href="link">Affiliate</a></li>

<li><a href="link">Affiliate</a></li>
</ul>

<br />
<h3>Header</h3>
<ul>
<li><a href="link">Link</a></li>
<li><a href="link">Link</a></li>
<li><a href="link">Link</a></li>
</ul>

<br />
<h3>Header</h3>
<ul class="white"><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li></ul>

</div>
<div id="content">
<h1>Header</h1>
<div class="contentarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam augue arcu, vulputate eu rutrum a, facilisis posuere erat. Nam sed est et nisl volutpat ornare eu non urna. Nullam vel nulla eros. Sed congue ultricies augue, nec dignissim velit lacinia eu. Maecenas vestibulum lobortis nulla, ut sodales tellus dignissim et. Aliquam erat volutpat. In non odio et diam accumsan accumsan. Phasellus ligula dui, blandit vel convallis consequat, iaculis id est. Donec iaculis feugiat urna, vel porttitor neque auctor quis. Integer dictum mi at ligula molestie vitae placerat ipsum consequat. Fusce sagittis, enim ut dapibus vestibulum, lacus arcu consequat mi, nec sagittis ante libero eu massa.
</div>

<h1>Header</h1>
<div class="contentarea">
Sed felis dui, faucibus a suscipit ac, consequat sed ante. Suspendisse fermentum sodales neque cursus lacinia. Integer et tortor id metus volutpat varius at at augue. Donec vel sem vitae magna scelerisque dapibus. Integer vitae ultricies urna. Praesent nunc orci, viverra at aliquam nec, semper eu arcu. Vestibulum pretium nulla sit amet nisi semper eleifend. Pellentesque non lacus lacus, ultricies sagittis sem. Mauris consectetur, libero quis facilisis tempus, libero urna mollis massa, vulputate pretium mi libero et diam. Nullam placerat, tortor ac accumsan gravida, nulla nisl vulputate libero, et interdum risus nisi vitae est. Phasellus dignissim, libero vitae volutpat hendrerit, magna nulla dapibus nunc, rhoncus tristique sapien ante id ipsum. Aliquam ullamcorper, metus eu dignissim tincidunt, neque libero porta tortor, ut mollis justo magna sit amet velit. Praesent laoreet fringilla vestibulum. Aenean dui justo, consequat at pulvinar ut, semper eu dui.

</div>

<h1>Header</h1>
<div class="contentarea">
Duis vitae ullamcorper velit. Proin eros orci, rhoncus ac imperdiet a, luctus eu justo. Nunc augue ligula, feugiat nec dignissim eu, hendrerit quis lacus. Donec in augue et leo ornare sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut quis urna eu risus fringilla dapibus. Donec sit amet ligula et tortor elementum luctus. Phasellus malesuada arcu vitae felis aliquam sit amet suscipit augue commodo. Phasellus ligula mi, pharetra in interdum euismod, luctus condimentum lorem. Pellentesque in est vitae tortor dapibus congue sed at sem. Vivamus suscipit vehicula rutrum. Sed eu leo vel augue facilisis tincidunt a hendrerit lectus. Ut diam turpis, aliquam a tincidunt eu, malesuada et nisl. Mauris fermentum, nunc a tincidunt porta, leo dui convallis leo, vitae commodo urna arcu in mauris.
</div>

</div>

</div>
</body>
</html>

Layout Comments

Showing latest 10 of 16 comments

hey can u help me make one ?????????

By sunflower19 on Nov 8, 2010 9:05 pm

Nice job...love it

By Scarlet-Miles on Nov 17, 2009 9:59 pm

Really nice :)

By missus09 on Oct 13, 2009 9:31 am

Pretty colors and banner. :)

By tokyo-rose on Aug 25, 2009 6:35 pm

This is so cool! I love 2NE1!

By WinstonIsMyName on Aug 24, 2009 7:38 pm

i think this is really kewl. awesome. i'd love to use it. :)

By msbig1 on Aug 22, 2009 10:49 pm

ooh, great picture used :]

By lostinLDN on Jul 26, 2009 10:18 am

2NE1!!! CL/BOM/DARA AND MINZYYY! omg I loooove this website template *.*

By SuperYuffie on Jul 26, 2009 8:39 am

This layout is very nice. Nice color choices. Great job! :D

By CandyPop on Jul 26, 2009 7:45 am

Gah, this kinda makes me want to start making website templates.

Anyway, it looks great. I think the rollovers look fine. I can't stand rollovers that change size, font, or style. They can get all jumpy. D:

By schizo on Jul 26, 2009 12:14 am

View all »

Layout Details

Designer	jiyong
Submitted on	Jul 25, 2009
Page views	11,229
Favorites	34
Comments	16
Reviewer	schizo
Approved on	Jul 25, 2009

2NE1

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates