Convert the html template into Django

by FrankW   Last Updated July 12, 2019 05:26 AM

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>



Related Questions


Updated January 15, 2019 22:26 PM

Updated June 13, 2017 19:26 PM

Updated September 04, 2017 09:26 AM

Updated January 02, 2019 01:26 AM