Hello!
I’m creating a web site and I am seeing a whitespace at the bottom of the web page. Please give my some help on getting rid of this whitespace. Below is the html code.
<!DOCTYPE HTML>
<!--<html lang="en">-->
<head>
<meta charset="utf-8">
<!--<meta http-equiv="content-type" content="text/html; charset="utf-8">-->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Home</title>
<!--[if lt IE 9]>
<script src="../documentation/assets/js/html5.js"></script>
<![endif]-->
<!-- LayerSlider stylesheet -->
<link rel="stylesheet" href="../css/layerslider.css" type="text/css">
<link rel="stylesheet" type="text/css" href="../css/screen_styles.css" />
<link rel="stylesheet" type="text/css" href="../css/screen_layout_large.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="../css/screen_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="../css/screen_layout_medium.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- External libraries: jQuery & GreenSock -->
<script src="../layerslider/js/jquery.js" type="text/javascript"></script>
<script src="../layerslider/js/greensock.js" type="text/javascript"></script>
<!-- LayerSlider script files -->
<script src="../layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="../layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script src="js/slider1.js" type="application/javascript"></script>
<!-- Meganizr Menu Styles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Play" rel="stylesheet" type="text/css">
<link href="../css/mega_menu1.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><link href="css/meganizr-ie.css" rel="stylesheet" type="text/css"><![endif]-->
<!-- end Meganizr Menu Styles -->
</head>
<body>
<div class="modernizr">
<!-- LayerSlider start -->
<div id="layerslider" style=" height: 223px; max-width: 1024px;" >
<div class="top_bkgd">
<header> <a class="logo" href="#"></a> </header>
</div>
<!-- The contents on your slider will be here -->
<!--first slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;">
<!-- slide background image -->
<img src="sliderImages/pr_img01.jpg" class="ls-bg" alt="Slide background"> </div>
<!-- slide one end -->
<!--second slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;">
<!-- slide background image -->
<img src="sliderImages/pr_img02.jpg" class="ls-bg" alt="Slide background"> </div>
<!--third slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;">
<img src="sliderImages/pr_img03.jpg" class="ls-bg" alt="Slide background"> </div>
<!--fourth slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all; transition2d: all;">
<img src="sliderImages/pr_img04.jpg" class="ls-bg" alt="Slide background"> </div>
</div>
<!-- Meganizr Menu HTML -->
<ul class="meganizr mzr-prone mzr-slide mzr-responsive">
<!-- Home -->
<li><a href="#">HOME</a></li>
<!-- end Home -->
<!-- No Dropdown Link -->
<li><a href="#">WHO WE ARE</a></li>
<!-- end No Dropdown Link -->
<!-- No Dropdown Link -->
<li><a href="#">PROJECTS</a></li>
<!-- end No Dropdown Link -->
<!-- DropDown -->
<!-- For more drop levels follow the structure bellow. -->
<!-- You can also use the class .mzr-align-right to show the dropdown on the right. -->
<li class="mzr-drop mzr-levels"> <a href="#">SERVICES</a>
<ul>
<li><a href="#">Web Development</a></li>
<li class="mzr-drop"> <a href="#">Customized E-Learning</a>
<!-- <ul>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li class="mzr-drop">
<a href="#">Second Level</a>
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li><a href="#">Second Level</a></li>
</ul>-->
</li>
<li><a href="#">Web Applications</a></li>
<li><a href="#">Technical Support</a></li>
</ul>
</li>
<!-- end DropDown -->
<!-- Contact Form -->
<li class="mzr-drop mzr-contact mzr-align-right"> <a href="#">CONTACT US</a>
<div class="mzr-content drop-two-columns">
<div class="two-col">
<form action="#" method="#" id="mzr-contact-form">
<input type="text" name="name" id="name" placeholder="Name">
<input type="email" name="email" id="email" placeholder="email@email.com">
<textarea name="message" id="message" placeholder="Message"></textarea>
<input type="submit" value="Send Message">
</form>
</div>
</div>
</li>
<!-- end Contact Form -->
</ul>
<!-- end Meganizr Menu HTML -->
<div class="content_bkgd">
<article>
<p>We specialize in web development, customizing e-learning courses, brand management, graphic design, user interface design and mobile web development. Our team will work diligently to ensure your satisfaction. The goal is to provide our client’s with the most satisfying, stress-free and rewarding experience, because we value your business and want to develop a great partnership. We will collaborate and communicate with your team on every phase of the project. Allow us to be your guide in developing your next project and bringing your vision to fruition.</p>
</article>
<hr>
<div class="promo_container">
<div class="promo one"></div>
<div class="promo two"></div>
<div class="promo three"></div>
</div>
<div class="clear-fix"></div>
</div>
<div class="footer_bkgd">
<footer>2014 © Prone Interactive Media, LLC</footer>
</div>
</div>
</body>
</html>
Thanks!