...

View Full Version : Webpage I've been building for fun :)



samxdesigns
12-10-2011, 01:15 AM
This is a webpage I've just been generally working at for a little each day trying to make an improvement and just testing out my knowledge with both html and css. :)

I have a couple links which have person links to my facebook and such which have been taken out and replaced with google.ca :thumbsup:

There is a javascript with lighting up words and I did not make that so I take no credit, I also got the black theme for my navbar from a website so I take no credit for that. :)

I haven't placed a sidebar or any really website worthy box behind all the text in the middle of the screen since it's just for fun and I don't know how to do that.

If your willing to help out a guy and you know how to make a nice sidebar or box in the middle of the screen add my skype - sam.herron3 :D

If you have any kind/constructive criticism feel free to post it. :)


<!DOCTYPE html>
<html>
<head>
<title>Sam's Nav Bar! :)</title>
<style type="text/css">
<!--

.navbar ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center;
}

.navbar li{
display: inline;
margin: 0;
}

.navbar li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.navbar li a:hover{
color: lightyellow;
text-decoration:blink;
}

.blacktheme li a{
font-size:44px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}


-->
#fw-container {
background: none repeat scroll 0 0 transparent;
margin: 0px auto 0;
padding: 0 10px 10px;
text-align: left;
width: 850px;
}

li {text-align:center;}

h3 {text-align:center;}

h4 {text-align:center;}

body {background-color:#00aaff;
font-family: Tahoma,Verdana,Arial,Helvetica,Sans-serif;}

hr {color:#00aabb;}


a:link{color:#000;text-align:center;}
a:visited{color:#000;}
a:hover{color:#333333;text-decoration:blink;}
a:active{color:#ff0000;}

a.two:link {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:485px;
text-align:center;
padding:4px;
text-decoration:none;
}

a.two:visited {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}


a.two:hover {background-color:#000;text-decoration:blink;}


a.three:link {color:#fff;}
a.three:visited {color:#fff;}
a.three:hover {color:#CC0099;text-decoration:underline;}

a.four:link {color:#fff;}
a.four:visited {color:#fff;}
a.four:hover {color:#CC0099;text-decoration:underline;}

a.six:link {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:8px;
text-decoration:none;
}
a.six:visited {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:8px;
text-decoration:none;
}
a.six:hover {background-color:#000;text-decoration:underline;}

a.seven:link {color:#fff;font-size:20px;}
a.seven:visited {color:#fff;}
a.seven:hover {color:#aaa;}


</style>
</head>
<body>
<a name="top"></a>
<div class="navbar blacktheme">
<ul>
<li target="_blank" class="first"><a href="http://www.javascriptkit.com">Scripts</a></li>
<li><a target="_blank" href="http://www.youtube.com">Youtube</a></li>
<li><a target="_blank" href="http://www.google.ca">Google</a></li>
<li><a target="_blank" href="http://www.facebook.com">Facebook</a></li>
<li><a target="_blank" href="http://www.soundcloud.com">Soundcloud</a></li>
</ul>
</div>
<h2>

<p>Beta!</p>


<script language="JavaScript1.2">

/*
Neon Lights Text
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

var message="Made by Sam!"
var neonbasecolor="black"
var neontextcolor="cyan"
var flashspeed=50 //in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()


</script>
</h2>
<h3>Vote for <a target="_blank" class="three" href="http://www.google.ca">Sam</a> or <a target="_blank" class="four" href="http://www.google.ca">Mike</a></h3>
<menu>
<li><input type="checkbox"
/>Sam's Better!</li>
<li><input type="checkbox"
/>Mike's Better!</li>
</menu>

<h4> Would you like to take some time to visit my youtube channel?</h4>
<script type="text/javascript">
function Yes() {
var answer = confirm("Thanks (:")
if (answer){
window.location = ("http://www.youtube.com/user/deathmetal569");
}
}
function No() {
alert("Thanks Anyway (:");
}
</script>
<form style="text-align:center">
<input type="button" onclick="Yes()" value="Yes I would like to visit Sam's Youtube Channel">
<input type="button" onclick="No()" value="No I would not like to visit Sam's Youtube Channel">
</form>

<center><p><b>Ever wondered where to learn HTML, CSS or Javscript which is used to make this page? W3schools has you covered!</b></p></center>
<iframe src="http://www.w3schools.com" width="1240" height="400"></iframe>

<br />
<hr />
<center>
<p><u>If you'd like to listen to some music while viewing this page, simply click the play button, if you'd like to switch between the songs,<br />
click the next button or click the tv screen beside the 480p and switch between the songs!</u></p>
<iframe width="600" height="480"
src="http://www.youtube.com/embed/videoseries?list=PL274EE76472699726&amp;hl=en_US" frameborder="0" allowfullscreen></iframe>
</center>
<br />

<center>
<a class="six" target="_blank" href="http://xat.com/chat/room/154173075/">If you would like to use the chat, click here! :)</a>
</center>
<br />
<hr style="color:#ff0000;">


<center><a target="_blank" class="seven" href="http://www.google.ca">Page designed by sam!<br />
Give the creator some credit!<br /></center>
<hr style="color:#00E6FF;">

<center><a class="two" href="#top" title="RETURN TO TOP">Back to the top of the page!</a></center>


</body>
</html>

Nightfire
12-11-2011, 12:32 AM
Can you post a link to it?

embeebutterly
12-12-2011, 05:52 PM
I admire anyone who takes time to make something themselves. Its clear that this is a beginners website, but there is nothing wrong with that! I would try to bring the size if some things down ie your nav bar.

Overall, a good little start, and i would like to see how you develop.

Keep at it!

krome
01-04-2012, 08:11 PM
Whooaaa

Thats a cool looking potential website.

I would make the words a little smaller at the top (Scripts Youtube Google Facebook Soundcloud) I would also make the blue area at top a little smaller.

Man this site has such great possibilities.

Keep up the great work.

teedoff
01-04-2012, 08:39 PM
Did I miss something? I see no link to a website either.

AND, its odd you're using HTML5 doctype, which is still experimental but use a tag(<center>) that has been outdated for quite some time.

Anyway, I'm not going to recreate your site locally to critique it any further. lol

krome
01-06-2012, 02:56 PM
Did I miss something? I see no link to a website either.

AND, its odd you're using HTML5 doctype, which is still experimental but use a tag(<center>) that has been outdated for quite some time.

Anyway, I'm not going to recreate your site locally to critique it any further. lol

I don't think the site is up yet but I was curious to view it anyway.

I just took his script and copy pasted it on notepad. I then saved it with .html

If you are willing to go through the trouble, you can view it this same way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum