I am new at html/css. My code runs fine locally. However, the css breaks when run on web.I have used the zurb foundation. Please let me know the error.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
</title>
</head>
<body>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parkify</title>
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/foundation.min.css" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css"/>
<link type="text/css" rel="stylesheet" href="css/global.css" />
<script type="text/javascript" src="js/vendor/modernizr.js"></script>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<style>
.top-bar{
background-color: #3399FF;
height: 60px;
position: relative;
}
#logo{
position: relative;
margin-top: 5px;
max-width: 100%;
max-height:100%;
}
</style>
</head>
<body class="welcome">
<nav class="top-bar">
<!--<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>-->
<section class="left tab-bar-section">
<img id="logo" src="img/parkify.png"></img>
</section>
</nav>
<div class="row collapse full-height">
<div class="small-12 columns">
<div class="row login">
<div class="small-12 columns">
<div class="row">
<div class="small-12 columns">
<a href="home.html" class="button">
<img class="fb" src="img/fb.png" alt="Login with facebook"/> | Login with facebook
</a>
</div>
</div>
<div class="row">
<div class="small-12 columns sep or">
<div class="row collapse">
<div class="small-5 columns">
<hr />
</div>
<div class="small-2 columns">
<span>or</span>
</div>
<div class="small-5 columns">
<hr />
</div>
</div>
</div>
</div>
<div class="row register">
<div class="small-12 columns">
<form method="post" action=".">
<input type='hidden' name='csrfmiddlewaretoken' value='yc0FxDJY2dJRm26iW4gtL0XLnEXHwmzs' />
<div class="row collapse">
<div class="small-12 columns">
<div class="row collapse">
<div class="small-3 columns">
<label for="id_mobile_no" class="inline">Mobile No.</label>
</div>
<div class="small-9 columns">
<input type="text" name="mobile_no" id="right-label">
</div>
</div>
</div>
<div class="row collapse">
<div class="small-12 columns">
<div class="row collapse">
<div class="small-3 columns">
<label for="id_password" class="inline">Password</label>
</div>
<div class="small-9 columns">
<input type="password" name="password" id="right-label">
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns submit">
<button type="submit">Login <i class="fa fa-angle-double-right"></i></button>
<input type="hidden" name="next" value="/home" />
</div>
</div>
</div>
<a href="/register">Register</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</body>
</html>