Untitled

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Font Awesome ikonice jbg ovo koristim -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<body style="background-image:url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg');">
	<nav class="navbar navbar-default navbar-static-top">
	  <div class="container-fluid">
		<ul class="nav navbar-nav">
		  <li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li>
		  <li><a href="#"><i class="fa fa-tree"></i> New</a></li>
		  <li><a href="#"><i class="fa fa-sort"></i> Popular</a></li>
		  <li><a href="#"><i class="fa fa-info-circle"></i> About us</a></li>
		</ul>
		<ul class="nav navbar-nav navbar-right">
		  <li><a href="#myModal" data-toggle="modal"><i class="fa fa-sign-in"></i> Login</a></li>
		</ul>
	  </div>
	</nav>

	<div class="container">
		<div class="row">
			<div class="col-sm-6" style="color:white;">
				<h2>Welcome to MyBlog</h2>
				<p>Here you can see blogs created by other users or you can create your own!</p>
				<p>To gain full access to MyBlog you have to register.</p>
				<p>If you already have an account, log in!</p>
			</div>
			<div class="col-sm-6">
				<p style="color:white;">You can fill the data below to register:</p>
				<form>
					<div class="form-group">
					  <input type="text" class="form-control" id="username" placeholder="Username">
					</div>
					<div class="form-group">
					  <input type="email" class="form-control" id="email" placeholder="E-mail">
					</div>
					<div class="form-group">
					  <input type="password" class="form-control" id="pwd" placeholder="Password">
					</div>
					<div class="form-group">
					  <input type="password" class="form-control" id="pwd" placeholder="Repeat Password">
					</div>
					<button type="submit" class="btn btn-primary">Register</button>
				</form>
			</div>
		</div>
	</div>


<!-- modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Login</h4>
        </div>
        <div class="modal-body">
          <form>
					<div class="form-group">
					  <input type="text" class="form-control" id="username" placeholder="Username">
					</div>
					<div class="form-group">
					  <input type="password" class="form-control" id="pwd" placeholder="Password">
					</div>
					<div class="checkbox">
						<label><input type="checkbox"> Remember me</label>
					</div>
					<button type="submit" class="btn btn-primary">Register</button>
				</form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>