How to load background image from style.css in django framework - python

`
.testimonials {background: url('./images/s8.png'); padding:55px 0; overflow:hidden; }
`Am using django 2.1 having a problem in displaying a background image which is styled in my css folder
I have tried several ways like
.testimonials {background: url("/static/images/s8.png"); padding:55px 0; overflow:hidden; }
and having an inline customization both didn't work please help
<div class="testimonials" style="background: url({% static "images/s8.jpg" %})">


Using a background image in CSS file doesn't require a static block. Just make sure you have path correctly matched with your folders. Use ./ to go back in path mapping.
css/base.css
images/slide1Back.png
My CSS file was in CSS folder and images were in the images folder. So I used this.
background-image: url('./images/slide1Back.png');


First of all, make sure you added this line to your html file:
{% load staticfiles %}
then put this to your settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
now everythings work like what!
UPDATE
Here is my profile.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
</body>
</html>
and my style.css
#subheader.about {
background: url("../images/s8.jpg") center center no-repeat;
padding: 100px 25px;
}
#subheader.about:after {
background: rgba(34, 43, 50, .9);
bottom: 0px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
please attention, i used ../ instead of ./
and this is my tree:
tree
and this is result:
result view


Am using this template here as about.html
{% extends "base.html" %}
{% load static %}
{% block Content %}
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
<!-- DESCRIPTION -->
<div class="about-descr">
<div class="row">
<div class="col-sm-12 col-md-10 center-block">
<h3>WHAT ARE WE ALL ABOUT?</h3>
<div class="titleborder centered">
<div class="titleborder_left"></div>
<div class="titleborder_sign"></div>
<div class="titleborder_right"></div>
</div>
</div>
</div>
<div class="row spacing-25">
<div class="col-sm-12 col-md-7">
<img src="images/about-us.jpg" alt=""/>
</div>
<div class="col-sm-12 col-md-5">
<p class="topspacing">We work hard to provide Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa. </p>
<p>Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa..</p>
</div>
</div>
</div>
<!-- END OF DESCRIPTION -->
<!-- ABOUT ICONS -->
<div class="about-icons">
<div class="row">
<div class="col-sm-3"><img src="images/icon17.png" alt=""/><p>CHOOSE</p></div>
<div class="col-sm-3"><img src="images/icon18.png" alt=""/><p>SCALE</p></div>
<div class="col-sm-3"><img src="images/icon19.png" alt=""/><p>LAUNCH</p></div>
<div class="col-sm-3"><img src="images/icon20.png" alt=""/><p>USE</p></div>
</div>
</div>
<!-- END OF ABOUT ICONS -->
{% endblock Content%}
and this is my css
======================== */
#subheader.about {background: url("../images/s8.jpg") center center no-repeat; padding:100px 25px;}
#subheader.about:after { background: rgba(34,43,50,.9); bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }
Can tell where is the mistake or am missing something here
here is the path to image projects/djangoprojects/static/images/s8.jpg


{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content=" ">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>| Web | Software </title>
<link rel="shortcut icon" href="{% static "images/favicon.png" %}" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap & Styles -->
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap-theme.min.css" %}" rel="stylesheet">
<link href="{% static "css/block_grid_bootstrap.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/owl.carousel.css" %}">
<link rel="stylesheet" href="{% static "css/owl.theme.css" %}">
<link rel="stylesheet" href="{% static "css/animate-custom.css" %}">
<link rel="stylesheet" href="{% static "css/flexslider.css" %}">
<link rel="stylesheet" href="{% static "css/font-awesome.min.css" %}">
<link rel="stylesheet" href="{% static "css/slicknav.min.css" %}">
<link href="{% static "css/style.css" %}" rel="stylesheet">
</head>
<body>
<!-- TOP NAV -->
<div class="topmenu">
<div class="row">
<div class="col-sm-3">
<ul class="top left">
<li><i class="fa fa-phone"></i>+666666666 Call us</li>
</ul>
</div>
<div class="col-sm-9">
<ul class="topright">
<li><i class="fa fa-unlock-alt"></i> CLIENT AREA</li>
<li><i class="fa fa-commenting-o"></i> LIVE CHAT</li>
<li><i class="fa fa-hand-pointer-o"></i> Support</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP NAV -->
<!-- HEADER -->
<div class="header">
<div class="row">
<div class="col-sm-3">
<div class="logo">
<a href="/"><img src="{% static "images/logo.png" %}" alt="" />
</a>
</div>
</div>
<div class="col-sm-9">
<nav id="desktop-menu">
<ul class="sf-menu" id="navigation">
<li class="current">Home
<ul>
<li>Billing</li>
<li>Web Design</li>
</ul>
</li>
<li>Hosting
<ul>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
</ul>
</li>
<li>Domains</li>
<li>Pages
<ul>
<li>About</li>
<li>FAQ</li>
<li>Datacenter</li>
</ul>
</li>
<li>Blog
<ul>
<li>hosting tips</li>
<li>Facebook</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- END OF HEADER -->
{% block Content %}
{% endblock Content %}
<!-- FOOTER -->
<div class="footer">
<div class="row">
<div class="col-sm-3">
<h4>CLOUD HOSTING</h4>
<ul>
<li>cPanel Hosting</li>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
<li>WordPress Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>HOSTING FOR APPS</h4>
<ul>
<li>WordPress Hosting</li>
<li>Joomla Hosting</li>
<li>Drupal Hosting</li>
<li>Magento Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>COMPANY</h4>
<ul>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Acceptable Usage Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h4>NEWSLETTER SIGNUP</h4>
<div id="mc_embed_signup">
<form class="form-inline validate material" action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input id="mce-EMAIL" type="email" name="EMAIL" placeholder="E-mail" required>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
</div>
<input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="mtr-btn button-blue">
</form>
</div>
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- SOCIAL & COPYRIGHT -->
<div class="social">
<div class="row">
<div class="col-sm-12">
<ul class="social-links">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-pinterest-p"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-github-alt"></i></li>
</ul>
<p class="text-center">Copyright© . All rights reserved.</p>
</div>
</div>
</div>
<!-- END OF SOCIAL & COPYRIGHT -->
<!-- LOGIN MODAL -->
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="LoginModal">
<div class="modal-dialog" role="document">
<form method="post" action="#" class="material">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i>LOGIN TO YOUR ACCOUNT</h4>
</div>
<div class="modal-body">
<input type="text" name="username" placeholder="E-mail Address">
<input type="password" name="password" placeholder="Password">
<button type="submit" class="mtr-btn button-fab">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
<!-- END OF LOGIN MODAL -->
<i class="fa fa-angle-up"></i>
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.flexslider-min.js" %}"></script>
<script src="{% static "js/jquery.easing.1.3.js" %}"></script>
<script src="{% static "js/hoverIntent.js" %}"></script>
<script src="{% static "js/superfish.min.js" %}"></script>
<script src="{% static "js/owl.carousel.js" %}"></script>
<script src="{% static "js/ripple-effect.js" %}"></script>
<script src="{% static "js/wow.min.js" %}"></script>
<script src="{% static "js/jquery.form.min.js" %}"></script>
<script src="{% static "js/jquery.slicknav.min.js" %}"></script>
<script src="{% static "js/retina.min.js" %}"></script>
<script src="{% static "js/custom.js" %}"></script>
</body>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5933bc17b3d02e11ecc6824e/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</html>

Related

RecursionError at : maximum recursion depth exceeded while calling a Python object

I can't seem to find the problem in header.html which is leading to
RecursionError: maximum recursion depth exceeded while calling a Python object
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<body>
{% include 'header.html' %}
{% include 'navbar.html' %}
{% include 'dashboard.html' %}
<div class="container-fluid">
{% block content %}
{% endblock %}
</div>
{% include 'footer.html' %}
</body>
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin-2.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</html>
dashboard.html:
{% load static %}
{% extends 'base.html' %}
<head>
<title>:: Welcome to CrmNXT ::</title>
<!-- Custom fonts for this template-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-address-card"></i>
</div>
<div class="sidebar-brand-text mx-3">Welcome to NexCRM</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-home"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Companies -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-building"></i>
<span>Companies</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!--Nav Item - Modules -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-cog"></i>
<span>Modules</span>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</a>
</li>
<!--Nav Item - Pricing -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-money"></i>
<span>Pricing</span>
</a>
</li>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div id="content">
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
{% block script %} {% endblock script %}
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin-2.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Date Time Picker JS -->
<script src="{% static 'date-time-phone/jquery-ui.js' %}"></script>
<script src="{% static 'date-time-phone/jquery-ui-timepicker-addon.js' %}"></script>
<script>
$( function() {
// $( "#id_birth_date" ).datetimepicker({ dateFormat: 'yy-mm-dd', maxDate: 0, controlType: 'select'}).attr("autocomplete", "off") ;
$( "#id_birth_date" ).timepicker({ dateFormat: 'yy-mm-dd', maxDate: 0, controlType: 'select'}).attr("autocomplete", "off") ;
// $( "#id_birth_date" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr("autocomplete", "off") ;
});
</script>
<!-- Date Time Picker JS -->
<!-- Phone Mask JS -->
<script src="{% static 'date-time-phone/jquery-input-mask-phone-number.min.js' %}"></script>
<script>
//(xxx) xxx-xxxx format code
$(document).ready(function () {
$('#id_phone_number').usPhoneFormat({
format: '(xxx) xxx-xxxx',
});
});
</script>
</body>
</html>
navbar.html:
{% load static %}
{% extends 'base.html' %}
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-address-card"></i>
</div>
<div class="sidebar-brand-text mx-3">Welcome to CRMNXT</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="">
<i class="fas fa-fw fa-home"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Companies -->
<li class="nav-item">
<a class="nav-link" href="">
<i class="fas fa-fw fa-building"></i>
<span>Companies</span></a>
</li>
<!-- Nav Item - Contact -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-table"></i>
<span>Modules</span></a>
</li>
<!-- Nav Item - Deals -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-user"></i>
<span>Pricing</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
footer.html:
{% load static %}
{% extends 'base.html' %}
<!DOCTYPE html>
<html lang="en">
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © XXXX 2019</span>
</div>
</div>
</footer>
<!-- End of Footer -->
header.html:
{% extends 'base.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small"><strong>Welcome,</strong> {{user.username}}</span>
<img class="img-profile rounded-circle" src="{{user.profile.profile_image.url}}">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Change Password
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'login' %}" >
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
The error that is showing up during template rendering.
Does anyone have a workaround solution for this? Or do I need to increase the recursion limit? And if so, how?
Edit: Forgot to add header.html. Now added in the question.

Your base.html includes header.html, and your header.html extends base.html, causing an infinite loop.
You should choose one or the other. For this case you'd probably want to keep the {% include ... %}.

Static files on password_reset_confirm in django project page do not load

I am trying to load static files in a django project. I make a system of registration, login and password change. In the case when I go to the pages of my project, static files are loaded. However, if I reset my password and later go to the password change page (http://127.0.0.1:8000/password_reset_confirm/MQ-set-password/) django does not load static files.
I am using django 2.2.6, python 3.7.3.
Project structure
-project
-core
models.py
forms.py
views.py
...
-settings
settings.py
urls.py
...
-static
...
-templates
...
manage.py
...
urls.py
from django.contrib import admin
from django.urls import path, include
from django.contrib.auth.views import PasswordResetView, PasswordResetCompleteView, PasswordResetConfirmView
from django.conf.urls import url
from core import views
urlpatterns = [
path('', views.home, name='home'),
path('signup/', views.signup, name='signup'),
path('login/', views.LoginView.as_view(), name="login"),
path('password_change_form/', views.LoginView.as_view(), name='password_change_form'),
path('password_change_confirm/', views.LoginView.as_view(), name='password_change_confirm'),
path('password_reset/', PasswordResetView.as_view(), name='password_reset'),
url(r'password_reset_confirm/(?P<uidb64>[0-9A-Za-z]+)-(?P<token>.+)/$', PasswordResetConfirmView.as_view(), name='password_reset_confirm'),
path('password_reset_done/', PasswordResetCompleteView.as_view(), name='password_reset_done'),
path('secret/', views.secret_page, name='secret'),
path('admin/', admin.site.urls)
]
password_reset_confirm
{% extends 'base.html' %}
{% block content %}
<h2>Set new password</h2>
{% if validlink %}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Save</button>
</form>
{% else %}
<p style="color:red;">Invalid token.</p>
<p>
Request a new password reset token
</p>
{% endif %}
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<!-- Metas -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django Fishing</title>
<meta name="description" content="GRAPE – Multipurpose App Landing HTML Template is a modern, unique and clean design for your Business Purpose. Users will love Your site because it gives them a unique user experience.">
<!-- External CSS -->
<link rel="stylesheet" href="../static/core/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/core/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="../static/core/assets/css/et-line.css">
<link rel="stylesheet" href="../static/core/assets/css/magnific-popup.css">
<link rel="stylesheet" href="../static/core/assets/css/animate.css">
<link rel="stylesheet" href="../static/core/assets/css/owl.carousel.css">
<link rel="stylesheet" href="../static/core/assets/css/owl.transitions.css">
<link rel="stylesheet" href="../static/core/assets/css/plyr.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="../static/core/css/style.css">
<link rel="stylesheet" href="../static/core/css/responsive.css">
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400%7CUbuntu:400,700%7COpen+Sans" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="../static/core/images/favicon.png">
<link rel="apple-touch-icon" href="../static/core/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../static/core/images/icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../static/core/images/icon-114x114.png">
<!--[if lt IE 9]>
<script src="../static/core/assets/js/html5shiv.min.js"></script>
<script src="../static/core/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="loader-wrap" id="loader-wrap">
<div class="cssload-loader"></div>
</div>
<!-- Preloader End -->
<!-- Navigation -->
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="60">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}">
<img src="../static/core/images/50h/logo.png" alt="Site Logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="one-page-nav">
<li>Главная</li>
<li>Возможности</li>
<li>Почему мы</li>
<li>Форум</li>
<li>Цены</li>
<li>Поддержка</li>
<li>Скачать</li>
<li>Контакты</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="banner" class="banner">
<div class="banner-item banner-1 steller-parallax" data-stellar-background-ratio="0.5">
</div>
</div>
{% block content %}{% endblock content %}
<footer>
<!-- Footer Subscribe -->
<div class="subscription-area section-padding theme-bg">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="wow fadeInLeft" data-wow-duration="1.5s">Подпишитесь на нашу<br/>новостную ленту</h3>
</div>
<div class="col-md-6">
<form class="subscription wow fadeInRight" data-wow-duration="1.5s" action="#" method="post">
<input type="email" name="email" placeholder="Введите вашу почту здесь" required>
<button type="submit">Подтвердить</button>
<p class="newsletter-success"></p>
<p class="newsletter-error"></p>
</form>
</div>
</div>
</div>
</div>
<!-- Footer Subscribe -->
<!-- Footer logo and social media button -->
<div class="logo-social-area section-padding">
<div class="container text-center">
<a class="logo logo-footer wow fadeInDown" data-wow-duration="1.5s" href="#">
<img src="../static/core/images/50h/logo.png" alt="Site Logo">
</a>
<div class="socials wow fadeInUp" data-wow-duration="1.5s">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-vimeo"></i>
</div>
</div>
</div>
<!-- Footer logo and social media button -->
<!-- Footer copyrgiht and navigation -->
<div class="copyright-footer">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<p class="copyright"># Copyright 2019, django fishing. All Right Reserved</p>
</div>
<div class="col-md-6 col-xs-12">
<ul class="footer-nav">
<li>Правовая информация</li>
<li>Наша команда</li>
<li>Блог</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer copyrgiht and navigation -->
</footer>
<script src="../static/core/assets/js/jquery.min.js"></script>
<script src="../static/core/assets/js/bootstrap.min.js"></script>
<script src="../static/core/assets/js/jquery.nav.js"></script>
<script src="../static/core/assets/js/wow.min.js"></script>
<script src="../static/core/assets/js/jquery.localScroll.min.js"></script>
<script src="../static/core/assets/js/jquery.magnific-popup.min.js"></script>
<script src="../static/core/assets/js/owl.carousel.js"></script>
<script src="../static/core/assets/js/plyr.js"></script>
<script src="../static/core/assets/js/jquery.ajaxchimp.min.js"></script>
<script src="../static/core/assets/js/jquery.stellar.min.js"></script>
<script src="../static/core/js/map.js"></script>
<script src="../static/core/js/custom.js"></script>
</body>
</html>

Don't use explicit relative paths, use the {% static ...%} template tag. E.g. replace this:
<script src="../static/core/assets/js/jquery.min.js"></script>
with this:
<script src="{% static 'core/assets/js/jquery.min.js' %}"></script>

login_required decorator in Django doesn't work

I'm working on a Django(1.10) project in which I need to load a template only for logged in users, which is coming from profile template.I need to load generateCert.html only for logged in user, this template should display the same navbar as profile template because both of these templates have the same header.
Here's my generateCert.html template:
{% load staticfiles %}
{% load static from staticfiles %}
{% load mathfilters %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NAMI Montana | User's Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content=""/>
<meta name="author" content="http://webthemez.com"/>
<!-- css -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"/>
<link href="{% static 'css/fancybox/jquery.fancybox.css' %}" rel="stylesheet">
<link href="{% static 'css/flexslider.css' %}" rel="stylesheet"/>
<link href="{% static 'css/style.css' %}" rel="stylesheet"/>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<!--Pulling Awesome Font -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]><![endif]-->
<style>
input[type="image"] {
padding-left: 30%;
padding-top: 5%;
font-size: 1em;
color: #fff;
background: transparent;
border: 1px solid #fff;
font-weight: bold;
width: 70%;
}
</style>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="pull-left hidden-xs"><i class="fa fa-envelope"></i><span>matt#namimt.org </span></p>
<p class="pull-right"><i class="fa fa-phone"></i>Tel No. (406) 443-7871</p>
</div>
</div>
</div>
</div>
<!-- start header -->
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/logo.png' %}" alt="logo"
width="190px" height="50px;"/></a>
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
{% if not user.is_authenticated %}
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Login</li>
<li>SignUp</li>
<li>Contact</li>
{% endif %}
{% if user.is_authenticated %}
<li>Home</li>
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Logout</li>
<li>Contact</li>
{% endif %}
</ul>
</div>
</div>
</div>
</header>
<!-- end header -->
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="margin-top: 5%">
<div class="panel panel-default">
<div class="panel-heading">
<h4> You have to pay <b> $95 </b> to generate your certificate.</h4>
</div>
{% block content %}
{{ form.render }}
{% endblock %}
</div>
</div>
</div>
</div>
{% include 'footer.html' %}
Here are my views.py:
#login_required
def payment_process(request):
if request.user.is_authenticated():
minutes = int(request.user.tagging.count()) * 5
testhours = minutes / 60
hours = str(round(testhours, 3))
# pdb.set_trace()
# What you want the button to do.
invoice = generate_cid()
paypal_dict = {
"business": settings.PAYPAL_RECEIVER_EMAIL,
"item_name": "Certificate of Completion from Nami Montana",
"custom": {"name": str(request.user.first_name + ' ' + request.user.last_name),
"hours": str(hours)},
"invoice": str(invoice),
"amount": "5.00",
"notify_url": "https://8bf57d43.ngrok.io/users/paypal/",
# "return_url": "https://b906ef46.ngrok.io/users/profile/",
"cancel_return": "https://8bf57d43.ngrok.io/users/cancel/",
}
print(paypal_dict)
# Create the instance.
form = PayPalPaymentsForm(initial=paypal_dict)
context = {"form": form}
return render_to_response("users/generateCert.html", context)
else:
return HttpResponseRedirect('/users/login')
Here is my urls.py:
url('^process/$', views.payment_process, name='payment'),
generateCert.html template display the menu of Anonymous users not logged in users menu, that means this template loaded by the unauthenticated user. How can I strict this template to only logged in users as it's coming from the profile page.

No, it doesn't mean that at all. What it does mean is that you are not passing the user to the template. This is because you are using render_to_response - which apart from anything else is deprecated - rather than the render shortcut which runs context processors.
Note, your login_required decorator makes that if request.user.is_authenticated() check pointless; the user will never not be authenticated.
Also note that you really should be using template inheritance to break out things like the top nav and the HTML boilerplate into their own templates.

django static files are sometimes not serving

Dear Stackoverflow community. I have for a while now been struggling with my static files during development in my Django project. The problem is mainly that my stylesheets are sometimes working and sometimes not. Example - my base.html's stylesheet base_style.css is always loading, but when I add a stylesheet for the file home.html which I have loaded through the jinja template tags It sometimes works and sometimes not, the same goes for my other views.
Using python3 and Django 1.11.5
Here is my settings file (Static) =
STATIC_URL = '/static/'
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")
Here is my template Base.html =
{% load static %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicons/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicons/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicons/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'img/favicons/manifest.json' %}">
<link rel="mask-icon" href="{% static 'img/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>Leaf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link rel="stylesheet" href="{% static 'mainapp/base_style.css' %}" type="text/css" />
</head>
<body>
<!-- NAVBAR -->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light navbar-custom text-uppercase">
<img src="{% static 'img/logo.png' %}" width="55" height="75" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-stretch" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Hem<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link py-md-2" href="{% url 'list' %}">Blog</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Story</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
{% block content %}
{% endblock content %}
<!-- FOOTER -->
<footer class="footer-bs">
<div class="row">
<div class="col-sm-6 footer-brand animated fadeInLeft">
<h2>LEAF</h2>
<p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>
<p>© 2017, All rights reserved</p>
</div>
<div class="col-sm-3 footer-nav animated fadeInUp">
<h4>— Menu —</h4>
<ul class="list">
<li>About Us</li>
<li>Contact</li>
<li>Copyright</li>
<li>Example</li>
</ul>
</div>
<div class="col-sm-3 footer-social animated fadeInDown">
<h4>Follow Us</h4>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>RSS</li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Here is my home.html file =
{% extends 'base.html' %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/style_home.css' %}" type="text/css" />[enter image description here][1]
<div class="block text-center my-block">
<h1 class="header-1">Leaf</h1>
<h4 class="header-4">A genuinly healthy all natural energy drink</h4>
<img src="{% static 'img/slide-one.jpg' %}" class="img-fluid" >
</div>
<!-- START CAROUSEL -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item myCarousel active">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="First slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Man-face-one.jpeg' %}" >
<h3 class="review-caption">"I love how it tastes so fresh"</h3>
<p class="name-caption">Mathias</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Second slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Man-face-two.jpeg' %}" >
<h3 class="review-caption">"This is the best ive drinken"</h3>
<p class="name-caption">Eric</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Third slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Woman-face-one.jpeg' %}" >
<h3 class="review-caption">"I wish this product came out years ago!"</h3>
<p class="name-caption">Rebecca</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Fourth slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Man-face-three.jpeg' %}" >
<h3 class="review-caption">"I Which i could drink it all the time"</h3>
<p class="name-caption">Jake</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Fourth slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Woman-face-two.jpeg' %}" >
<h3 class="review-caption">"I Which i could drink it all the time"</h3>
<p class="name-caption">Anna</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END CAROUSEL -->
<div class="container">
<div class="row">
<div class="col">
<img src="{% static 'img/single-can.png' %}" alt="Leaf" class="img-fluid">
</div>
<div class="col">
<div class="myText" align="center">
<h1>Leaf</h1>
<p>"En Genuint Hälsosam, Helt Naturlig Energidryck"</p>
<button type="button" class="btn btn-outline-success">Mer info</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row align-items-center" style="margin-left: 110px;">
<div class="col">
<img src="{% static 'img/middle-section-1.jpg' %}" class="img-fluid" style="max-height: 200px; width: auto;" />
</div>
<div class="col">
<img src="{% static 'img/middle-section-3.png' %}" class="img-fluid" style="max-height: 170px; width: auto;" />
</div>
<div class="col">
<img src="{% static 'img/middle-section-2.png' %}" class="img-fluid" style="max-height: 155px; width: auto;" />
</div>
</div>
</div>
{% endblock content %}
Folder Structure!
(Tried to include a picture of my folder structure on here)
I really hope anyone would be able to help me with this, this is my first post on here and I am quite new at coding.

can't get rid of gap between header and body

I have tried everything from editing padding/margins to saving file as utf-8 without BOM in notepad suggested in other posts to get his gap to go away. Nothing is seems to work so I come to ask for help.
I am developing this webpage using python/django framework in which my base.html file looks like this
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Michael Goytia</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<!-- put three little bars in toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
<b>Michael Goytia</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'personal_info:about_me' %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
<b>About Me</b></a>
</li>
<li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
<b>Projects</b></a>
</li>
<li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
<b>Contact Information</b></a>
</li>
</ul>
</div><!--/.nav-collaspse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.navbar-custom
{
background:#013737;
border-radius:0;
}
.navbar-toggle .icon-bar
{
background-color:#6C9F9F;
}
.navbar-header .navbar-toggle
{
background-color:#0F5151;
}
footer{
background:#013737;
position:fixed;
left:0px;
bottom:0px;
height:80px;
width:100%;
}
body{
background:#438383;
padding: 0;
margin: 0;
}
.nav > li >a:hover{
background-color:#256A6A;
}
</style>
</body>
<footer>
</footer>
</html>
I believe the problem resides in my base.html file however here is a sample html of another page that use base.html
{% extends "personal_info/base.html" %}
{% block content %}
<h1><b><u>Projects</u></b><h1>
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Github Information</center></b>
</h1>
</div>
<div class="panel-body">
<div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Academic</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Personal</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<style>
.panel-custom .panel-heading{
background-color:#013737;
color:#6C9F9F;
border-radius: 50px 15px;
}
.panel-custom
{
background-color:#438383;
}
</style>
{% endblock content %}
I am new to web development so any help would me much appreciated.

Alright well after playing around with a bunch of things I realized somehow I had a border around my header. So in order to get rid of it I added the line
.container .page-header { border-bottom: 0px:} which then got rid of this border.
Not sure why the border was there in the first place.
If anyone comes along I hope this helps.

Categories