Q:

Convert the html template into Django

I am currently learning django, and at the moment I want to convert this page https://colorlib.com/etc/lf/Login_v6/index.html into django. I have tried heaps of times, still can't make everything right. The Button textures, label animations and fonts are completely not working. Let me show you my work structure below.
My problem is about using css and js under static/vendor fold. Seems the way I used got a bit problem, I have also attached my code for invoking the css and js under vendor.
Thanks for any help.
MyFirstDjangoWeb
--project
        --setting.py
        --urls.py
        --wsgi.py
        --_init_.py
    --project_app
        --template
            --myHtml.html
        --migration
            --0001_initial.py
            --_init_.py
        --__init_.py
        --admin.py
        --apps.py
        --models.py
        --test.py
        --urls.py
        --views.py
    --static
        --css
        --images
        --js
        --vendor
    manage.py

<!DOCTYPE html>
<html lang="en">
<head>
 <title>QC-Tool</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %} 
<!--===============================================================================================--> 
 <link rel="icon" type="image/png" href="static/images/favicon.ico"/>
<!--===============================================================================================-->
 <link rel="stylesheet" type="text/css" href="static/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
 <link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
 <link rel="stylesheet" type="text/css" href="static/fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
 <link rel="stylesheet" type="text/css" href="static/vendor/animate/animate.css">
<!--===============================================================================================--> 
 <link rel="stylesheet" type="text/css" href="static/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
 <link rel="stylesheet" type="text/css" href="static/vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
 <link rel="stylesheet" type="text/css" href="static/vendor/select2/select2.min.css">
<!--===============================================================================================--> 
 <link rel="stylesheet" type="text/css" href="static/vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
 <link rel="stylesheet" type="text/css" href="static/css/util.css">
 <link rel="stylesheet" type="text/css" href="static/css/main.css">
<!--===============================================================================================-->
</head>
<body>
 <center>
 <div class="limiter">
  <div class="container-login100">
   <div class="wrap-login100 p-t-85 p-b-20">
    <form class="login100-form validate-form">
     
     <span class="login100-form-avatar">
      <img src="static/images/my_Logo.png" alt="AVATAR">
     </span>
     
     <span class="login100-form-title p-b-0">
      QC Tool
     </span>
     
     <form action="/msggate/" method="post">
      <div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter username">
      <input class="input100" type="text" name="username">
      <span class="focus-input100" data-placeholder="Username"></span>
      </div>

     <div class="wrap-input100 validate-input m-b-50" data-validate="Enter password">
      <input class="input100" type="password" name="pass">
      <span class="focus-input100" data-placeholder="Password"></span>
     </div>
     <div class="container-login100-form-btn">
      <form action='actionUrl' method='GET'>
        <button class="login100-form-btn">
       Login
      </button>
      </form>
     </div>
     </form>
     
     
     <ul class="login-more p-t-190">
      <li class="m-b-8">
       <span class="txt1">
        Forgot
       </span>

       <a href="#" class="txt2">
        Username / Password?
       </a>
      </li>

      <li>
       <span class="txt1">
        More options?
       </span>

       <a href="#" class="txt2">
        Click here
       </a>
      </li>
     </ul>
    </form>
   </div>
  </div>
 </div>
 
</center>
 {% load static %} 
 <div id="dropDownSelect1"></div>
<!--===============================================================================================-->
 <script src="static/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
 <script src="static/vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
 <script src="static/vendor/bootstrap/js/popper.js"></script>
 <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
 <script src="static/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
 <script src="static/vendor/daterangepicker/moment.min.js"></script>
 <script src="static/vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
 <script src="static/vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
 <script src="static/js/main.js"></script>
</body>
</html>

A:

Have you defined static STATIC_URL in your setting.py? If not then do this in
setting.py
STATIC_URL = '/static/'

And store your static file in folder name static inside your app directory i.e. project/project_app/static 
In your template myHtml.html , use the static template tag to build the URL like this:
<link rel="stylesheet" type="text/css" href="{% static '/vendor/bootstrap/css/bootstrap.min.css' %}">

<script src="{% static '/js/main.js' %}"></script>

Do this in every link and script.

