I have been trying to apply css in the main.css on the class of (custom-card) but its not working. Anyone can find what's the mistake i'm doing. custom-card class is in home.html
Below is the base.html in Django\mysite\blogapp\templates\blog\base.html .
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS link -->
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- ================
HEADER NAVIGATION
========================= -->
<section class="header">
<div class="container">
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#"><span>e-</span>Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto text-center"> <!--ml auto used to have nav on right side,text-center used to make text in center when using mobile view-->
<li class="nav-item">
<a class="nav-link active-home" href="{% url 'blog-homepage' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'blog-aboutpage' %}">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<!-- ================
HEADER NAVIGATION/ENDED
========================= -->
<div class="container">
{%block homecontent%} {%endblock%}
{%block aboutcontent%} {%endblock%}
</div>
<!-- footer -->
<!-- <h6>This is footer</h6> -->
</body>
</html>Below is the home.html in Django\mysite\blogapp\templates\blog\home.html .
{%extends "blog/base.html"%}
{% block homecontent %}
<div class="custom-card">
{% for post in posts %}
<h1>{{post.title}}</h1>
<h3>By {{post.name}} on {{post.date}}</h3>
<p>{{post.content}}</p>
{% endfor %}
</div>
{% endblock homecontent %}Below is the main.css in Django\mysite\blogapp\static\blog\main.css. At the end, i'm trying to apply css on custom-card class. but its not working.
.selector-for-some-widget {
box-sizing: border-box;
}
/*
================
NAVIGATION
================
*/
.header{
background-color: #fff;
}
.navbar-brand{
color: black !important;
font-weight: 700;
}
.header .navbar-brand span{
color: #FEAA01;
font-weight: 700;
}
.navbar{
padding-top: 20px ;
}
.fixed-top{
background-color: #14111C;
}
.nav-item{
/*padding: 5px;*/
margin:8px 0px 10px 40px;
/*border: 1px solid red;*/
}
.nav-link{
color: black !important;
font-size: 14px;
padding: 0px 0px 5px 0px !important;
display: unset;
transition: 0.5s all ease;
}
.fa-bars{
color: yellow;
font-size: 30px !important;
}
.navbar-toggler{
border: 0;
padding: initial;
outline: none;
}
.nav-link:hover{
border-bottom: 1px solid #FEAA01;
color: #FEAA01 !important;
}
.active-home{
border-bottom: 1px solid #fff;
}
/*=============
Navigation ended
===============*/
.custom-card{
border: 1px solid red;
}