Hello i have this problem when i open the html i have a black screen only and no content this is only the html code <!DOCTYPE html> <html lang="en-US"> <head> <!--=== Meta ===--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" /> <title>TA3Design | Creativity Home</title> <!--=== Stylesheets ===--> <link rel="stylesheet" type="text/css" media="all" href="css/style.css"> <link rel="stylesheet" type="text/css" media="all" href="css/responsive.css"> <link rel="stylesheet" type="text/css" media="all" href="css/prettyPhoto.css"> <!--=== Body Fonts ===--> <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,600,700,800" rel="stylesheet" type="text/css" /> <!--=== Heading Fonts ===--> <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" /> <!--=== Heading Fonts ===--> <noscript> <style type="text/css"> body { display: block !important; opacity: 1 !important; } </style> </noscript> <script type="text/javascript" src="../../ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="../../ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.masonry.min.js"></script> <script type="text/javascript" src="js/jquery.backstretch.min.js"></script> <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="js/modernizr-transitions.js"></script> <script type="text/javascript" src="js/validate.form.js"></script> </head> <body> <!--// BEGIN #control //--> <header id="control"> <div id="side"> <!-- BEGIN #logo--> <div id="logo"> <h1><a href="#profile"><img src="images/logo.png" alt="TA3Design" /></a></h1> <h4 class="sub">Taha Ali | TA3Design</h4> </div> <!-- END #logo --> <!-- BEGIN #nav --> <nav id="nav"> <!-- Screen Size > 880px --> <ul class="regular"> <li class="nav_1"><a href="#profile">Profile<span></span></a></li> <li class="nav_2"><a href="#skills">Skills<span></span></a></li> <li class="nav_3"><a href="#works">Works<span></span></a></li> <li class="nav_4"><a href="#pricing">Pricing<span></span></a></li> <li class="nav_5"><a href="#contact">Contact<span></span></a></li> </ul> </nav> <!-- END #nav --> </div> </header> <!--// END #control //--> <!--// BEGIN #main //--> <section id="main"> <div id="content"> <!-- BEGIN #profile (panel 1) --> <div id="profile" class="panel"> <br><br><br><br><br><br><br><br><br><br><br> <div class="box"> <div class="in"> <div class="one-half"> <h5>Who am I?</h5> <p>I am Taha, I'm 17 years old i've been Designing for More Than 4 Years. Browse my <a href="#works">portoflio</a> and discover the creative side of me. Enough said for now, start scrolling.</p> </div> </div> </div> <div id="vcard" class="box"> <div class="in"> <div class="three-fourths"> <h4>Want to Chat with me?, Add me on skype </h4> </div> <div class="one-fourth column-last"> <a href="http://myskype.info/tahaali333" class="btn" target="_blank">Add Me</a> </div> </div> </div> </div> <!-- END #profile (panel 1) --> <!-- BEGIN #skills (panel 2) --> <div id="skills" class="panel box"> <br><br><br><br> <div class="in"> <h2>Skills</h2> <div class="skill level_10"><h5>Photoshop</h5><div class="bar"><div><span>100%</span></div></div></div> <div class="skill level_9"><h5>Cinema 4D</h5><div class="bar"><div><span>90%</span></div></div></div> <div class="skill level_9"><h5>Web Design</h5><div class="bar"><div><span>90%</span></div></div></div> <div class="skill level_7"><h5>Illustrator</h5><div class="bar"><div><span>70%</span></div></div></div> <div class="skill level_10"><h5>Laziness</h5><div class="bar"><div><span>100%</span></div></div></div> </div> </div> <!-- END #skills (panel 2) --> <!-- BEGIN #works (panel 3) --> <div id="works" class="panel box"> <div class="in"> <h2>Works</h2> <div class="toggle"> <h3>Youtube</h3> <div> <ul class="work_items"> <li><a href="demo/bg1.png" class="pretty" rel="prettyPhoto[photos]"><img src="demo/bg1.png" alt="BG 1" /></a></li> <li><a href="demo/bg2.jpg" class="pretty" rel="prettyPhoto[photos]"><img src="demo/bg2.jpg" alt="BG 2" /></a></li> <li><a href="demo/bg3.png" class="pretty" rel="prettyPhoto[photos]"><img src="demo/bg3.png" alt="BG 3" /></a></li> <li><a href="demo/bg4.png" class="pretty" rel="prettyPhoto[photos]"><img src="demo/bg4.png" alt="BG 4" /></a></li> <li><a href="demo/bg5.png" class="pretty" rel="prettyPhoto[photos]"><img src="demo/bg5.png" alt="BG 5" /></a></li> </ul> </div> <h3>Branding</h3> <div> <ul class="work_items"> <li><a href="demo/logo1.png" class="pretty" rel="prettyPhoto[branding]"><img src="demo/logo1.png" alt="Logo 1" /></a></li> <li><a href="demo/logo2.png" class="pretty" rel="prettyPhoto[branding]"><img src="demo/logo2.png" alt="Logo 2" /></a></li> <li><a href="demo/logo3.png" class="pretty" rel="prettyPhoto[branding]"><img src="demo/logo3.png" alt="Logo 3" /></a></li> <li><a href="demo/logo4.png" class="pretty" rel="prettyPhoto[branding]"><img src="demo/logo4.png" alt="Logo 4" /></a></li> </ul> </div> <h3>Web Design</h3> <div> <ul class="work_items"> <li> <a href="demo/web1.png" class="pretty" rel="prettyPhoto[photos]"><img src="demo/web1.png" alt="Website 1" /></a> </li> <li> <a href="demo/web2.png" class="pretty" rel="prettyPhoto[photos]"><img src="demo/web2.png" alt="Website 2" /></a> </li> <li> <a href="demo/web3.png" class="pretty" rel="prettyPhoto[photos]"><img src="demo/web3.png" alt="Website 3" /></a> </li> <li> <a href="demo/web4.jpg" class="pretty" rel="prettyPhoto[photos]"><img src="demo/web4.jpg" alt="Website 4" /></a> </li> </ul> </div> </div> </div> </div> <!-- END #works (panel 3) --> <!-- BEGIN #pricing (panel 4) --> <div id="pricing" class="panel box"> <br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="in"> <h2>Pricing</h2> <div class="one-half"> <h5>Please Contact Me On Skype Or Email For More Information about Prices</h5> </div> <a href="http://myskype.info/tahaali333" target="_blank" class="btn">Skype Me</a> <a href="#contact" class="btn">Email</a> </div> </div> <!-- END #pricing (panel 4) --> <!-- BEGIN #contact (panel 5) --> <div id="contact" class="panel box"> <br><br><br><br><br><br><br><br> <div class="in"> <h2>Contact</h2> <div class="two-fifths"> <p>Please don't hesitate to contact me for Anything you might want.</p> <address> <strong>Email: </strong><a href="mailto:taha@TA3Design.com?subject=Contact Form Email Link">taha@TA3Design.com</a> </address> <address> <strong>Skype: </strong><a href="http://myskype.info/tahaali333" target="_blank">tahaali333</a> </address> </div> <div class="three-fifths column-last"> <!-- BEGIN #contact_form --> <form id="contact_form" onsubmit="return validate_form()" method="post"> <p> <label>Name</label> <input onfocus="jQuery('#name_error').fadeOut('fast');" onclick="jQuery('#name_error').fadeOut('fast');" type ="text" name="first_name" id="name" /> </p> <p> <label>Email</label> <input onfocus="jQuery('#email_error').fadeOut('fast');" onclick="jQuery('#email_error').fadeOut('fast');" type="text" name="email" id="email" /> </p> <p> <label>Message</label> <textarea onfocus="jQuery('#message_error').fadeOut('fast');" onclick="jQuery('#message_error').fadeOut('fast');" id="message" name="comments" rows="8" cols ="20"></textarea> </p> <button type="submit" name="submit" value="Submit" id="submit_button" <a href="email_form.php" class="btn"><span>Send Message</span></button> </form> <!-- END #contact_form --> </div> </div> </div> <!-- END #contact (panel 5) --> <!-- BEGIN #nomore (panel 6) --> <div id="nomore" class="panel box"> <div class="in center"> <h2>No more, where are you going?</h2> <h5><a href="#profile">Go back to top</a> or use the menu to your left to navigate.</h5> </div> </div> <!-- END #nomore (panel 6) --> </div> </section> <!--// BEGIN #main //--> <!--// BEGIN #footer //--> <footer id="footer"> <p class="copy">© Taha Ali. All Rights Reserved.</p> </footer> <!--// END #footer //--> <!--// BEGIN jQuery Settings //--> <script type="text/javascript" src="js/settings.js"></script> <!--// END jQuery Settings //--> <!--// BEGIN .jump //--> <a href="#main" class='jump'>Top</a> <!--// END .jump //--> </body> </html> HTML: so any help Thanks Alot
Without seeing the CSS files that are being applied to it... well, kinda hard to weigh in, though the HTML 5 bloat, endless pointless comments for no reason, jQuery for nothing, line breaks doing padding's job, double-breaks doing paragraphs job, completely nonsensical gibberish willy-nilly use of numbered heading tags, invalid/incomplete/improper form structures, presentation inlined in the markup, some oddball goofy trick being pulled on BODY with NOSCRIPT for christmas only knows what, endless pointless DIV, classes and ID's adding to the existing HTML 5 'tags for nothing'... Well, it's a laundry list of how not to build a website that should be started over and rebuilt clean using far, far, FAR less code with proper semantics. If you have a copy live, or at least a pic of what it's supposed to look like I could probably give you a quick rewrite to show you what I mean.