Newbie Spellweaver
- Joined
- Mar 2, 2007
- Messages
- 70
- Reaction score
- 38
Latest Revision:
To do:
Download:
index.html
style.css
script.js
[/LEFT]
You must be registered to see links
To do:
- Source images
- Finish HTML/CSS/JS
- Stuff
Download:
index.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<section id="advertisements" class="border-1-3">
<div class="border-2">
<div class="border-1-3">
<h2 class="advertisements-header">Advertisement</h1>
<p class="advertisements-container"></p>
</div>
</div>
</section>
<section id="status">
<ul id="status-container">
<li class="status-container-list"><span class="status-container-list-box">0 People Online</span></li>
<li class="status-container-list">
<a href="javascript:box(1)" class="status-container-list-link"><span id="status-container-list-link-icon-1"></span> My Home</a>
<a href="javascript:box(2)" class="status-container-list-link"><span id="status-container-list-link-icon-2"></span> My Currency</a>
<a href="javascript:box(3)" class="status-container-list-link"><span id="status-container-list-link-icon-3"></span> My Club</a>
</li>
<li class="status-container-list"><span class="status-container-list-box red">Not Signed In</span></li>
</ul>
</section>
<div class="border-1-3">
<div class="border-2">
<div class="border-1-3">
<header id="header-container">
<h1 id="header-container-logo">Logo</h1>
<p id="header-container-description">Hangout for people</p>
<section id="header-container-information-container">
<div id="header-container-information-container-box-1" style="display:block;">
<h2 class="header-container-information-container-header" align="right">Welcome! Please sign in or register</h2>
<p class="header-container-information-container-description">
<img src="frank-1.gif" alt="Frank" align="left" id="frank" />
<a href="#">Register, it's free!<span class="arrow">></span></a><br />
<a href="#">Sign in<span class="arrow">></span></a>
</p>
</div>
<div id="header-container-information-container-box-2" style="display:none;">
<h2 class="header-container-information-container-header" align="center">Please sign in to see your balance</h2>
<p class="header-container-information-container-description">
<img src="currency-1.png" alt="Currency" width="47" height="21" align="left">
<a href="#">Buy more currency<span class="arrow">></span></a><br />
<a href="#">Redeem currency or code<span class="arrow">></span></a>
</p>
</div>
<div id="header-container-information-container-box-3" style="display:none;">
<h2 class="header-container-information-container-header" align="center">Please sign in to see your club status</h2>
<p class="header-container-information-container-description">
Our Club gives you the best benefits as a member.<br /><br />
<a href="#">Latest news on our Club<span class="arrow">></span></a>
</p>
</div>
</section>
<a href="#" id="header-container-play"></a>
<nav id="header-container-nav">
<ul id="header-container-nav-container">
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link" id="active"><span id="header-container-nav-container-list-link-icon-1"></span> Home</a></li>
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link"><span id="header-container-nav-container-list-link-icon-2"></span> Community</a></li>
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link"><span id="header-container-nav-container-list-link-icon-3"></span> Currency</a></li>
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link"><span id="header-container-nav-container-list-link-icon-4"></span> Help</a></li>
<span id="header-container-nav-container-list-right"></span>
</ul>
</nav>
</header>
<section id="navigation-container-1">
<nav id="navigation-container-2">
<ul id="navigation-container-3">
<li class="navigation-container-3-list">Webpage 1 | </li>
<li class="navigation-container-3-list"><a href="#" class="navigation-container-3-list-link">Webpage 2</a> | </li>
<li class="navigation-container-3-list"><a href="#" class="navigation-container-3-list-link">Webpage 3</a></li>
</ul>
</nav>
</section>
<main id="content">
<h2 id="content-header">Homepage</h2>
<section id="content-row">
<div class="content-row-column left">
<div class="border-1-3" id="content-row-column-news-left">
<div class="border-2">
<div class="border-1-3">
<h2 class="content-row-column-news-header">Top Story</h2>
<img src="content-row-column-news-header-1.gif" alt="Top Story" />
<p class="content-row-column-news-description">
The Battle Ball Challenge is back with big prizes up for grabs. Can you bounce to victory?
</p>
</div>
</div>
</div>
<div class="content-row-column-content left">
<h2 class="content-row-column-content-header orange">Header</h2>
<p class="content-row-column-content-container">
Text
</p>
</div>
</div>
<div class="content-row-column middle" id="news">
<div class="border-1-3" id="content-row-column-news-right">
<div class="border-2">
<div class="border-1-3">
<h2 class="content-row-column-news-header">What's New</h2>
<p class="content-row-column-news-description limit">
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 1</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 2</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 3</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 4</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 5</a><br />Description here
</p>
</div>
</div>
</div>
<div class="content-row-column-content middle">
<h2 class="content-row-column-content-header blue">Header</h2>
<p class="content-row-column-content-container">
Text
</p>
</div>
<div class="content-row-column-content middle">
<h2 class="content-row-column-content-header green">Header</h2>
<p class="content-row-column-content-container">
Text
</p>
</div>
</div>
<div class="content-row-column right">
<div class="border-1-3">
<div class="border-2">
<div class="border-1-3">
<h2 class="advertisements-header">Advertisement</h1>
<p class="advertisements-container"></p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer id="footer-container">
<section>
<p>All Rights Reserved</p>
</section>
</footer>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
Code:
[LEFT][COLOR=#222222]body{background-color:#525d63;font:10px Verdana,Arial,Helvetica,sans-serif;}
#container{width:1024px;margin:100px auto;}
#advertisements{width:768px;margin:0 auto 50px;}
.advertisements-header, .advertisement-container{display:block !important;}
.advertisements-header{background-color:#000000;font-size:inherit;font-weight:bold;color:#555555;text-align:center;margin:0;padding:5px;}
.advertisements-container{background-color:green;min-height:90px;margin:0;}
#status{background-color:#555555;border:solid #000000;border-width:1px 1px 0;}
#status-container{margin:0;padding:0;color:#ffffff;}
.status-container-list{width:338px;height:30px;line-height:30px;list-style:none;display:inline-block;word-break:break-all;text-align:left;vertical-align:text-top;}
.status-container-list-box{width:328px;height:20px;line-height:20px;margin:5px auto 0;background-color:#444444;display:block;text-align:center;border:1px solid #000000;}
.status-container-list-box.red{color:red;}
.status-container-list-box.green{color:green;}
.status-container-list-link{padding:4px 10px 9px;background-color:#666666;color:#ffffff;text-decoration:none;border:solid #000000;border-width:1px 1px 0;}
.status-container-list-link.active, .status-container-list-link:focus{padding:4px 10px 13px;}
#status-container-list-link-icon-1, #status-container-list-link-icon-2, #status-container-list-link-icon-3{background-image:url("status-container-list-link-icon.png");height:23px;display:inline-block;vertical-align:middle;}
#status-container-list-link-icon-1{background-position:0;width:25px;}
#status-container-list-link-icon-2{background-position:-25px 0;width:27px;}
#status-container-list-link-icon-3{background-position:-52px 0;width:22px;}
.border-1-3{background-color:#47839d;border:1px solid #000000;}
.border-2{border:3px solid #ffffff;}
#header-container{background:url("header-container.png") round;width:inherit;height:150px;position:relative;border-bottom:1px solid #000000;}
#header-container-logo{position:absolute;top:35px;left:40px;margin:0;}
#header-container-description{position:absolute;top:60px;left:40px;margin:0;}
#header-container-information-container{background:rgba(242,242,242,0.5);width:326px;max-height:122px;margin:0 auto;padding:5px;border:solid #000000;border-width:0 1px 1px;overflow:hidden;font-weight:bold;}
.header-container-information-container-header{background-color:#ffffff;margin:0;padding:5px;font-size:inherit;display:block;}
.header-container-information-container-description{border-top:1px dashed black;margin:5px 0;padding:5px 0;text-align:right;}
.header-container-information-container-description img#frank{margin:-26px 10px 0;}
.header-container-information-container-description a{background-color:#d7d7d7;margin-bottom:5px;padding:2.5px 0 2.5px 10px;display:inline-block;border:1px solid #000000;color:#000000;text-decoration:none;}
.header-container-information-container-description a .arrow{background-color:#ff8015;margin-left:10px;padding:2.5px 5px;color:#ffffff;border-left:1px solid #000000;}
#header-container-play{background-image:url("header-container-play.gif");width:105px;height:106px;position:absolute;top:15px;right:165px;text-align:center;}
#header-container-nav{position:absolute;bottom:3px;left:5px;}
#header-container-nav-container{margin:0;padding:0;list-style:none;vertical-align:text-top;}
.header-container-nav-container-list{display:inline;}
.header-container-nav-container-list-link{background-color:#d75c03;display:inline;padding:8px 12px 8px 8px;margin-right:-4px;border:solid #000000;border-width:1px 0 1px 1px;color:#ffffff;text-decoration:none;text-shadow:2px 2px 2px #000000;text-transform:uppercase;font-weight:bold;}
.header-container-nav-container-list-link#active{background-color:#ffce00;text-shadow:none;color:#000000;padding:12px 12px 12px 8px;border-width:1px;}
#header-container-nav-container-list-link-icon-1, #header-container-nav-container-list-link-icon-2, #header-container-nav-container-list-link-icon-3, #header-container-nav-container-list-link-icon-4{background-image:url("header-container-nav-container-list-link-icon.png");margin-right:1px;height:19px;display:inline-block;vertical-align:middle;}
#header-container-nav-container-list-link-icon-1{background-position:0;width:20px;}
#header-container-nav-container-list-link-icon-2{background-position:-20px 0;width:19px;}
#header-container-nav-container-list-link-icon-3{background-position:-39px 0;width:17px;}
#header-container-nav-container-list-link-icon-4{background-position:-56px 0;width:15px;}
#header-container-nav-container-list-right{background-image:url("header-container-nav-container-list-right.gif");width:8px;height:29px;display:inline-block;margin-bottom:-10px;}
#navigation-container-1{width:1016px;height:23px;position:relative;}
#navigation-container-2{background-color:#ffce00;position:absolute;left:-2px;width:inherit;height:inherit;line-height:22px;border:solid #000000;border-width:0px 1px 1px;}
#navigation-container-3{margin:0;padding:0;list-style:none;text-indent:8px;}
.navigation-container-3-list{display:inline;color:#930930;}
.navigation-container-3-list-link{color:#000000;font-weight:bold;}
#content{margin-bottom:25px;padding:5px 0 5px 5px;}
#content-header{background-color:#083d55;width:inherit;height:20px;margin:0 0 5px;padding:8px;display:block;color:#ffffff;font-size:16px;font-weight:bold;text-transform:uppercase;}
#content-row:after{content:"";display:table;clear:both;}
.content-row-column{float:left;margin-right:5px}
.content-row-column.middle#news{margin-left:-8px;}
.content-row-column.left{width:525px;}
.content-row-column.middle{width:304px;}
.content-row-column.right{width:173px;}
#content-row-column-news-left{border-right-width:0;}
#content-row-column-news-left img{width:516px;height:190px;}
#content-row-column-news-right{border-left-width:0;}
.content-row-column-news-header{background-color:#222222;width:inherit;color:#ffffff;font-size:inherit;font-weight:bold;text-transform:uppercase;margin:0;padding:6.5px 5px;}
.content-row-column-news-description{background-color:#004979;color:#ffffff;margin:0;padding:7px 6px;}
.content-row-column-news-description.limit{height:205px;}
.content-row-column-news-description-right-link{color:#f16100;font-weight:bold;}
.content-row-column-content{background-color:#f3f3f3;padding:3px;margin-top:5px;}
.content-row-column-content.left{margin-right:4px;}
.content-row-column-content.middle{margin-left:4px;}
.content-row-column-content-header{width:inherit;color:#ffffff;font-size:inherit;font-weight:bold;margin:0;padding:6.5px 5px;}
.content-row-column-content-header.orange{background-color:#d75c03;}
.content-row-column-content-header.green{background-color:#508f54;}
.content-row-column-content-header.blue{background-color:#47839d;}
.content-row-column-content.left, .content-row-column-content.middle, .content-row-column-content-container{padding-top:5px;}
.content-row-column-content-container{margin:0;word-wrap:break-word;}
#footer-container{background-color:#0a4362;color:#7295aa;font-size:9px;text-align:center;font-weight:bold;margin:0 5px 5px;padding:5px;}
#footer-container a{color:inherit;}
[/COLOR][/LEFT]
[LEFT]
script.js
Code:
function box(id)
{
var box1 = document.getElementById("header-container-information-container-box-1");
var box2 = document.getElementById("header-container-information-container-box-2");
var box3 = document.getElementById("header-container-information-container-box-3");
if (id === 1)
{
if (box1.style.display === "none")
{
box1.style.display = "block";
box2.style.display = "none";
box3.style.display = "none";
}
}
else if(id === 2)
{
if (box2.style.display === "none")
{
box1.style.display = "none";
box2.style.display = "block";
box3.style.display = "none";
}
}
else if(id === 3)
{
if (box3.style.display === "none")
{
box1.style.display = "none";
box2.style.display = "none";
box3.style.display = "block";
}
}
}
Attachments
You must be registered for see attachments list
Last edited: