I'm doing a web development project using flask and I'm using CSS and JS template for the frontend of my homepage. I need help because, the stylesheets are not loading. This is the file structure:
.
├── __pycache__
│ └── app.cpython-310.pyc
├── app.py
├── README.md
├── requirements.txt
└── website
├── __init__.py
├── __pycache__
│ ├── __init__.cpython-310.pyc
│ ├── auth.cpython-310.pyc
│ ├── models.cpython-310.pyc
│ ├── types.cpython-310.pyc
│ ├── validator.cpython-310.pyc
│ └── views.cpython-310.pyc
├── models.py
├── templates
│ ├── assets
│ ├── base.html
│ ├── home.html
│ ├── index.html
│ ├── Readme.txt
│ ├── sign-up.html
│ └── test.html
└── views.py
The code below is from a base template called base.html and I used jinja to import the contents in the base template to my home.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% block title %}Home{% endblock %}</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Jost:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- font awesome icons -->
<script src="https://kit.fontawesome.com/11bd288d00.js" crossorigin="anonymous"></script>
<!-- Vendor JS Files -->
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</head>
<body>
<p>{% block navbar %} nav bar will be here {% endblock %}</p>
<p>{% block content %}Stuff here ...{% endblock %}</p>
</body>
</html>
I tried checking the link of the stylesheets and they are all fine but still couldn't load the css and js files.
