Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Canada
    Posts
    60
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Smile Webpage I've been building for fun :)

    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

    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

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

    Code:
    <!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>
    Check out my new forums: http://www.moderncoding.co.nr (:

    Strengths: HTML & CSS.


    Code:
    EpicFriends x = 
    players.getNearest(BestFriend);
    if (x != null) {
    x.interact("High Five" + x.getName());

  • #2
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Can you post a link to it?

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    76
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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!

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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
    Teed

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •