PDA

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



samxdesigns
12-10-2011, 12: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-10-2011, 11:32 PM
Can you post a link to it?

embeebutterly
12-12-2011, 04: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, 07: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, 07: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, 01: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.