Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

Developer Website

Grenadier

Grenadier

Grenafukindear
Loyal Member
500 Posts 1000 Posts 10 Happy Years
Joined
Feb 18, 2010
Messages
999
Reaction score
502
I was bored, so i thought i would make this. Its a website for a web developer ect ect.. Its coded. Flash video player included.

Psia5 - Developer Website - RaGEZONE Forums


I know some of you are only interested in the code, so here is the index.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Index</title>
<style type="text/css">
div#container
{
   width: 897px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
   background-color: #FFFFFF;
   background-image: url(images/body-bg-24.png);
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #C8D7EB;
   text-decoration: underline;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: underline;
}
a.style1:link
{
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}
a.style1:visited
{
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}
a.style1:active
{
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}
a.style1:hover
{
   color: #C0C0C0;
   font-weight: bold;
   text-decoration: none;
}
</style>
<link rel="stylesheet" href="./black-tie/jquery.ui.all.css" type="text/css">
<style type="text/css">
#Shape1
{
   border-width: 0;
   height: 62px;
   width: 865px;
}
#Shape2
{
   border-width: 0;
   height: 514px;
   width: 574px;
}
#Shape3
{
   border-width: 0;
   height: 260px;
   width: 287px;
}
#Line1
{
   color: #B8CFE9;
   background-color: #B8CFE9;
   border-width: 0px;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Text2 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Text3 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text4 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text4 div
{
   text-align: left;
}
#Image3
{
   border: 0px #282828 solid;
}
#Image4
{
   border: 0px #000000 solid;
}
#Image2
{
   border: 0px #000000 solid;
}
#Line2
{
   color: #B8CFE9;
   background-color: #B8CFE9;
   border-width: 0px;
}
#wb_Text5 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Text6 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_Text7 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text7 div
{
   text-align: left;
}
#wb_Text8 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text8 div
{
   text-align: left;
}
#Shape4
{
   border-width: 0;
   height: 260px;
   width: 287px;
}
#wb_Text9 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text9 div
{
   text-align: left;
}
#wb_TextMenu1
{
   color :#000000;
   font-family: Arial;
   font-weight: bold;
   font-size: 13px;
}
#wb_TextMenu1 span
{
   margin: 0px 25px 0px 0px;
}
</style>
<script type="text/javascript" src="./swfobject.js"></script>
<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./jquery.ui.progressbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   var jQueryProgressbar1Opts =
   {
      value: 90
   };
   $("#jQueryProgressbar1").progressbar(jQueryProgressbar1Opts);
   var jQueryProgressbar2Opts =
   {
      value: 29
   };
   $("#jQueryProgressbar2").progressbar(jQueryProgressbar2Opts);
   var jQueryProgressbar3Opts =
   {
      value: 100
   };
   $("#jQueryProgressbar3").progressbar(jQueryProgressbar3Opts);
});
</script>
</head>
<body>
<div id="container">
<div id="wb_Shape1" style="position:absolute;left:14px;top:116px;width:865px;height:62px;z-index:0;">
<img src="http://forum.ragezone.com/images/img0001.png" id="Shape1" alt=""></div>
<div id="wb_Shape2" style="position:absolute;left:15px;top:177px;width:574px;height:514px;z-index:1;">
<img src="http://forum.ragezone.com/images/img0002.png" id="Shape2" alt=""></div>
<div id="wb_Shape3" style="position:absolute;left:592px;top:177px;width:287px;height:260px;z-index:2;">
<img src="http://forum.ragezone.com/images/img0003.png" id="Shape3" alt=""></div>
<hr id="Line1" style="margin:0;padding:0;position:absolute;left:47px;top:230px;width:463px;height:1px;z-index:3;">
<div id="wb_Text1" style="position:absolute;left:117px;top:192px;width:250px;height:2px;z-index:4;">
 </div>
<div id="wb_Text2" style="position:absolute;left:211px;top:193px;width:116px;height:29px;z-index:5;">
<span style="color:#282828;font-family:Corbel;font-size:24px;"><strong>Main title</strong></span></div>
<div id="wb_Image1" style="position:absolute;left:46px;top:251px;width:191px;height:204px;z-index:6;">
<img src="http://forum.ragezone.com/images/img0004.png" id="Image1" alt="" border="0" style="width:191px;height:204px;"></div>
<div id="wb_Text3" style="position:absolute;left:243px;top:252px;width:286px;height:96px;z-index:7;">
<span style="color:#282828;font-family:Arial;font-size:13px;">This is a picture of you. Lol. You are a developer and in this text area you will maybe want to explain a little about your self. Eg.. What college you attended, what experiance you have, or you can brag about your extremely large penis. Whatever.. </span></div>
<div id="wb_Text4" style="position:absolute;left:243px;top:357px;width:286px;height:80px;z-index:8;">
<span style="color:#282828;font-family:Arial;font-size:13px;">This is the second paragraph. I dont know what to wirte so im going to put some crap here. How many craps do you have to take to take the final crap in the land of craps? Dont know, you tell me.</span></div>
<div id="wb_Image3" style="position:absolute;left:47px;top:477px;width:159px;height:175px;z-index:9;">
<img src="http://forum.ragezone.com/images/50.jpg" id="Image3" alt="" border="0" style="width:159px;height:175px;"></div>
<div id="wb_Image4" style="position:absolute;left:219px;top:477px;width:164px;height:175px;z-index:10;">
<img src="http://forum.ragezone.com/images/50.jpg" id="Image4" alt="" border="0" style="width:164px;height:175px;"></div>
<div id="wb_Image2" style="position:absolute;left:396px;top:477px;width:164px;height:175px;z-index:11;">
<img src="http://forum.ragezone.com/images/50.jpg" id="Image2" alt="" border="0" style="width:164px;height:175px;"></div>
<div id="jQueryProgressbar1" style="position:absolute;left:626px;top:261px;width:197px;height:21px;z-index:12;">
</div>
<hr id="Line2" style="margin:0;padding:0;position:absolute;left:623px;top:229px;width:204px;height:1px;z-index:13;">
<div id="wb_Text5" style="position:absolute;left:699px;top:192px;width:62px;height:29px;z-index:14;">
<span style="color:#282828;font-family:Corbel;font-size:24px;"><strong>Skills</strong></span></div>
<div id="wb_Text6" style="position:absolute;left:703px;top:241px;width:41px;height:16px;z-index:15;">
<span style="color:#282828;font-family:Arial;font-size:13px;"><strong>HTML</strong></span></div>
<div id="jQueryProgressbar2" style="position:absolute;left:627px;top:312px;width:197px;height:21px;z-index:16;">
</div>
<div id="wb_Text7" style="position:absolute;left:707px;top:292px;width:32px;height:16px;z-index:17;">
<span style="color:#282828;font-family:Arial;font-size:13px;"><strong>PHP</strong></span></div>
<div id="jQueryProgressbar3" style="position:absolute;left:628px;top:365px;width:197px;height:21px;z-index:18;">
</div>
<div id="wb_Text8" style="position:absolute;left:708px;top:345px;width:41px;height:16px;z-index:19;">
<span style="color:#282828;font-family:Arial;font-size:13px;"><strong>CSS</strong></span></div>
<div id="wb_Shape4" style="position:absolute;left:593px;top:431px;width:287px;height:260px;z-index:20;">
<img src="http://forum.ragezone.com/images/img0005.png" id="Shape4" alt=""></div>
<div id="wb_FlashVideoPlayer1" style="position:absolute;left:602px;top:472px;width:250px;height:191px;z-index:21;">
<div id="FlashVideoPlayer1"></div>
<script type="text/javascript">
   var flashvars = {};
   var params = {};
   flashvars.videoPath = "";
   flashvars.imagePath = "";
   flashvars.title = "";
   flashvars.description = "";
   flashvars.viewInfoButton = "true";
   flashvars.viewFullscreenButton = "false";
   flashvars.viewScaleButton = "false";
   flashvars.viewVolumeControls = "false";
   flashvars.viewTime = "false";
   flashvars.viewBigPlayButton = "true";
   flashvars.videoLoop = "false";
   flashvars.videoAutoPlay = "false";
   flashvars.videoBufferTime = "1";
   flashvars.tlInterval = "1000";
   flashvars.soundVolume = "0.80";
   flashvars.fullSizeView = "2";
   flashvars.spacing = "10";
   flashvars.controlHeight = "25";
   flashvars.volumeLengthW = "100";
   flashvars.color1 = "0xAAAAAA";
   flashvars.color2 = "0x000000";
   flashvars.borderColor = "0x000000";
   flashvars.borderAlpha = "0.5";
   flashvars.timeColor1 = "0x000000";
   flashvars.timeColor2 = "0x000000";
   flashvars.timeAlpha1 = "1.0";
   flashvars.timeAlpha2 = "1.0";
   flashvars.timeTextColor1 = "0xFFFFFF";
   flashvars.timeTextColor2 = "0xC0C0C0";
   flashvars.scrubberHeight = "3";
   flashvars.scrubberColor1 = "0xC0C0C0";
   flashvars.scrubberAlpha1 = "1.0";
   flashvars.scrubberColor2 = "0x0099FF";
   flashvars.scrubberAlpha2 = "1.0";
   flashvars.filterColor = "0x0099FF";
   flashvars.filterAlpha = "0.6";
   flashvars.buttonColor = "0xFFFFFF";
   flashvars.titleColor = "0x47D2FF";
   flashvars.descriptionColor = "0xFFFFFF";
   flashvars.infoBackgroundColor = "0xAAAAAA";
   flashvars.infoBackgroundAlpha = "0.50";
   params.quality = "Best";
   params.scale = "noscale";
   params.wmode = "opaque";
   params.play = "false";
   params.loop = "false";
   params.menu = "false";
   params.allowfullscreen = "true";
   params.salign = "tl";
   swfobject.embedSWF("wb.videoplayer.swf", "FlashVideoPlayer1", "250", "191", "9.0.0", false, flashvars, params);
</script>
</div>
<div id="wb_Text9" style="position:absolute;left:662px;top:436px;width:125px;height:29px;z-index:22;">
<span style="color:#282828;font-family:Corbel;font-size:24px;"><strong>Flash Video</strong></span></div>
<div id="wb_TextMenu1" style="position:absolute;left:156px;top:129px;width:500px;height:20px;text-align:center;z-index:23;">
<span><a href="" class="style1">Home</a></span><span><a href="" class="style1">About me</a></span><span><a href="" class="style1">Portfolio</a></span><span><a href="" class="style1">Clients</a></span><span><a href="" class="style1">Contact me</a></span></div>
</div>
</body>
</html>

Yes i know, my code is terrible.

Here is what it looks like in a browser.

Grenadier - Developer Website - RaGEZONE Forums


Thanks, plz leave feedback. :)
 

Attachments

You must be registered for see attachments list
Last edited:
The Best DDoS Protected Servers
NubPro

NubPro

Hello!
Loyal Member
1000 Posts 10 Happy Years
Joined
Dec 15, 2009
Messages
1,387
Reaction score
236
why did u separate all those css codes into different tags?
Code: 
<style type="text/css">
div#container
{
   width: 897px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
   background-color: #FFFFFF;
   background-image: url(images/body-bg-24.png);
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #C8D7EB;
   text-decoration: underline;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: underline;
}
a.style1:link
{
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}
a.style1:visited
{
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}
a.style1:active
{
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}
a.style1:hover
{
   color: #C0C0C0;
   font-weight: bold;
   text-decoration: none;
}
</style>
<link rel="stylesheet" href="./black-tie/jquery.ui.all.css" type="text/css">
<style type="text/css">
#Shape1
{
   border-width: 0;
   height: 62px;
   width: 865px;
}
#Shape2
{
   border-width: 0;
   height: 514px;
   width: 574px;
}
#Shape3
{
   border-width: 0;
   height: 260px;
   width: 287px;
}
#Line1
{
   color: #B8CFE9;
   background-color: #B8CFE9;
   border-width: 0px;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Text2 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Text3 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text4 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text4 div
{
   text-align: left;
}
#Image3
{
   border: 0px #282828 solid;
}
#Image4
{
   border: 0px #000000 solid;
}
#Image2
{
   border: 0px #000000 solid;
}
#Line2
{
   color: #B8CFE9;
   background-color: #B8CFE9;
   border-width: 0px;
}
#wb_Text5 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Text6 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_Text7 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text7 div
{
   text-align: left;
}
#wb_Text8 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text8 div
{
   text-align: left;
}
#Shape4
{
   border-width: 0;
   height: 260px;
   width: 287px;
}
#wb_Text9 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text9 div
{
   text-align: left;
}
#wb_TextMenu1
{
   color :#000000;
   font-family: Arial;
   font-weight: bold;
   font-size: 13px;
}
#wb_TextMenu1 span
{
   margin: 0px 25px 0px 0px;
}
</style>
Hint:
Place the all javascripts at the bottom of the page, before </body> ends, that can simply make your site load smoother instead of waiting for the javascript to load first
You must be registered to see links
 
Mike

Mike

Canadian
Loyal Member
Joined
Dec 4, 2007
Messages
1,936
Reaction score
96
The design itself could be much better. The shadows aren't consistent, the navigation bar is off by 1px which looks bad for those who notice it. The links on the navigation bar aren't centered, they're off by probably 50-100px (rough estimate). Margins also aren't consistent like for the portfolio image boxes, and the skill progress bars are also off.

Then there's the code itself which other people have touched upon.

Like Chris said, you should spend more time and not release rushed work. If you rush it, you make it look like you're not capable of doing better, and people won't want to use your work.
 
Doctorate

Doctorate

Skilled Illusionist
Joined
Sep 22, 2012
Messages
300
Reaction score
65
Z1ls said:
I don't really like it, because the design is so basic :O
Click to expand...

"Simplicity is the ultimate sophistication." - Steve Jobs.
Steve Jobs may have been hated as he created the Mac, but I agree with that quote.

On Topic:Love the design, Nice and simple. Not so keen on the code.
 
Z1ls

Z1ls

Selfish Bastard
Loyal Member
Discord 1000 Posts 10 Happy Years
Joined
Aug 5, 2009
Messages
1,914
Reaction score
520
Doctorate said:
"Simplicity is the ultimate sophistication." - Steve Jobs.
Steve Jobs may have been hated as he created the Mac, but I agree with that quote.

On Topic:Love the design, Nice and simple. Not so keen on the code.
Click to expand...
I didn't say that i don't like simple designs, they are usually good, because so easy to navigation and those, but i said that this is too basic, simple and basic have and huge difference
 
Papercup

Papercup

Web Developer
Loyal Member
Joined
Nov 5, 2009
Messages
1,229
Reaction score
309
The design is a little basic, but that's fine.

I would suggest aligning the navigation left.

I would also put the size down on the image for the avatar, because when you open a webpage the website owners objective is to view the logo, or the content. But I'm drawn to the avatar because of the massive drop-shadow. Not sure if anyone agrees with me.

Otherwise, Looks good.
 
Sir Kidd

Sir Kidd

SK CREATIONS
Loyal Member
Joined
Jun 26, 2007
Messages
1,053
Reaction score
619
Hotcut said:
The design is a little basic, but that's fine.

I would suggest aligning the navigation left.

I would also put the size down on the image for the avatar, because when you open a webpage the website owners objective is to view the logo, or the content. But I'm drawn to the avatar because of the massive drop-shadow. Not sure if anyone agrees with me.

Otherwise, Looks good.
Click to expand...

Incorrect,
The alignment works well due to the flow of the piece placing the text to align to the left would leave far to much open space on the right. Also if you look properly your eyes are forced towards the box containing the content due to the shadow. This shows the user made a good choice and your idea to remove it would actually negate what you said. With out the shadow your eyes would look first at the navigation then the skill sets rather than the content box.

So I would sadly disagree with you.
 
8

80085

Experienced Elementalist
Joined
Nov 13, 2011
Messages
217
Reaction score
46
Grenadier said:
Sometimes i just dont know were to start, so i start to do random poop. It's very frustrating sometimes lol.
Click to expand...

You got all time to make an website. No one force you to make one. If you do not really have an deadline.
 
Grenadier

Grenadier

Grenafukindear
Loyal Member
500 Posts 1000 Posts 10 Happy Years
Joined
Feb 18, 2010
Messages
999
Reaction score
502
80085 said:
You got all time to make an website. No one force you to make one. If you do not really have an deadline.
Click to expand...

I love making websites, and i love it even more when it works out for me :D

Sir Kidd said:
Incorrect,
The alignment works well due to the flow of the piece placing the text to align to the left would leave far to much open space on the right. Also if you look properly your eyes are forced towards the box containing the content due to the shadow. This shows the user made a good choice and your idea to remove it would actually negate what you said. With out the shadow your eyes would look first at the navigation then the skill sets rather than the content box.

So I would sadly disagree with you.
Click to expand...

Couldn't have said it better myself. :)
 
Shaheem

Shaheem

Initiate Mage
Joined
Nov 25, 2012
Messages
4
Reaction score
1
I like! Looking for someone to help out with it or anything?
 
You must log in or register to reply here.

About Us

RaGEZONE® is a website dedicated to the development of massively multiplayer online role-playing games (MMORPGs).

Online statistics

Members online
195
Guests online
12,189
Total visitors
12,384
Totals may include hidden visitors.

Forum statistics

Threads
429,156
Messages
4,590,658
Members
280,958
Latest member
.365
Most visitors online was 12429 , on 27 Apr 2024

RaGEZONE Sponsor

    HyperFilter
Back
Top