<head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   
</head>

<body>
<div class="w3-top">
    <div class="w3-bar w3-red w3-card w3-left-align w3-large" id="topbar">
        <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">CLOUD 9</a>
        <a href="{% url 'upload_file' %}" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Upload</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Linux Client</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Settings</a>
        <button class="w3-bar-item w3-button w3-padding-large w3-hover-white" onclick="login()" style="float: right">Login</button>
    </div>

    <!-- Navbar on small screens -->
    <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
        <a href="{% url 'upload_file' %}" class="w3-bar-item w3-button w3-padding-large">Upload</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Settings</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Linux Client</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">About</a>
        <button class="w3-bar-item w3-button w3-padding-large" onclick="login()">Login</button>
    </div>
</div>
<div style="position: absolute; left:600px; top: 100px">

<h2>Sign up</h2>
{% load crispy_forms_tags %}
  <form method="post">
    {% csrf_token %}
    {{ form | crispy }}
    <button type="submit">Sign up</button>
  </form>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity" style="position: absolute; bottom: 0px; text-align: center; width: 100%; background-color: #ccc; height: 250px">  
    <div class="w3-xlarge w3-padding-32">
      <i class="fa fa-facebook-official w3-hover-opacity"></i>
      <i class="fa fa-instagram w3-hover-opacity"></i>
      <i class="fa fa-snapchat w3-hover-opacity"></i>
      <i class="fa fa-pinterest-p w3-hover-opacity"></i>
      <i class="fa fa-twitter w3-hover-opacity"></i>
      <i class="fa fa-linkedin w3-hover-opacity"></i>
   </div>
   <p>Powered by <a href="#" target="_blank">Cloudy Sky Agencies</a></p>
  </footer>
  </div>
  </body>
  </body>