Refused to apply style from ‘http://127.0.0.1:8000/#’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The most likely cause of this problem is an error in your template for identifying the file name for the stylesheet.
Please post the template (and any base templates being extended) containing the static entries that are supposed to be referenced.
When you post a template (or code), enclose the template between lines of three backtick - ` characters. This means you’ll have a line of ```, then the template, then another line of ```. (Do not post images or screenshots of templates.)
Also post all settings containing the word STATIC as part of the variable name.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- SITE TITTLE -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CL Experience</title>
<!-- GOOGLE FONT -->
<link href="https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&family=Montserrat:wght@400;700&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- PLUGINS CSS STYLE -->
<link href="{% static 'plugins/bootstrap/css/bootstrap.min.css'%}" rel="stylesheet">
<link href="#" rel="stylesheet" id="bootstrap-rtl">
<link href="{% static 'plugins/font-awesome/css/font-awesome.min.css'%}" rel="stylesheet">
<link href="{% static 'plugins/animate/animate.css'%}" rel="stylesheet">
<link href="{% static 'plugins/selectbox/select_option1.css'%}" rel="stylesheet">
<link href="{% static 'plugins/owl-carousel/owl.carousel.min.css'%}" rel="stylesheet" media="screen">
<link href="{% static 'plugins/fancybox/jquery.fancybox.min.css'%}" rel="stylesheet">
<link href="{% static 'plugins/isotope/isotope.min.css' %}" rel="stylesheet">
<link href="{% static 'plugins/datepicker/datepicker.min.css'%}" rel="stylesheet">
<!-- CUSTOM CSS -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/rtl.css' %}" rel="stylesheet" id="rtl_css">
<link href="{% static 'css/default.css'%}" rel="stylesheet" id="option_color">
<link href="{% static 'css/style.rtl.css'%}" rel="stylesheet">
<link href="{% static 'css/color-option2.css'%}" rel="stylesheet">
<link href="{% static 'css/color-option3.css' %}" rel="stylesheet">
<link href="{% static 'css/color-option4.css' %}" rel="stylesheet">
<!-- FAVICON -->
<link href="{% static 'img/favicon.png' %}" rel="shortcut icon">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 100px; top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/static/plugins/simple-pre-loader/images/loader-64x/Preloader_2.gif') center no-repeat #fff;
}
</style>
<!--Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).on("load", function() {
$(".se-pre-con").fadeOut("slow");
});
</script>
</head>
<!--
<script>
//paste this code under head tag or in a seperate js file.
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
</script>
-->
<body id="body" class="body-wrapper static">
<div class="se-pre-con"></div>
<div class="main-wrapper">
<!-- HEADER -->
<header id="pageTop" class="header">
<!-- TOP INFO BAR -->
<div class="top-info-bar">
<div class="container">
<div class="top-bar-right">
<ul class="list-inline">
<li><a href=""><i class="fa fa-envelope" aria-hidden="true"></i> info@cl.com</a></li>
<li><span><i class="fa fa-phone" aria-hidden="true"></i>+1 234 567 8900</span></li>
</ul>
</div>
</div>
</div>
<!-- NAVBAR-->
<nav class="navbar navbar-expand-md main-nav navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img class="lazyestload" data-src="{% static 'img/logo.png'%}" src="{% static 'img/logo.png'%}" alt="logo"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home'%}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Services</a>
<ul class="dropdown-menu">
<li><a href="{% url 'services'%}">Services</a></li>
<!--<li><a href="single-service.html">Service Details</a></li> -->
</ul>
</li>
<li class=" dropdown megaDropMenu nav-item " >
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Store</a>
<ul class="row dropdown-menu justify-content-md-between">
<li class="">
<ul class="list-unstyled">
<li><a href="product-right-sidebar.html">Product Right Sidebar</a></li>
<li><a href="product-left-sidebar.html">Product Left Sidebar</a></li>
<li><a href="product-3col.html">Product 3 Col</a></li>
<li><a href="product-4col.html">Product 4 Col</a></li>
<li><a href="single-product.html">Single product</a></li>
</ul>
</li>
<!--
<li class="">
<ul class="list-unstyled">
<li><a href="user-dashboard.html">User Dashboard</a></li>
<li><a href="user-profile.html">User Profile</a></li>
<li><a href="address.html">Address</a></li>
<li><a href="all-order.html">All Order</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</li>
-->
<li class="">
<ul class="list-unstyled">
<li><a href="cart.html">Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="success.html">Confirmation</a></li>
<li><a href="pricing.html">Price table</a></li>
</ul>
</li>
<li class="">
<ul class="list-unstyled">
<li><a href="javascript:void(0)" class="px-md-0"><img class="img-responsive lazyestload" data-src="{% static 'img/home/pricing-1.jpg' %}" src="{% static 'img/home/pricing-1.jpg' %}" alt="logo"></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Pages</a>
<ul class="dropdown-menu">
<li><a href="{% url 'about' %}">About Us</a></li>
<!-- <li><a href="contact.html">Contact Us</a></li>
<li><a href="appointment.html">Appointment</a></li> -->
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aoria-haspopup="true" aria-expanded="false">Team</a>
<ul class="dropdown-menu submenu">
<li><a href="member.html">Our Team</a></li>
<!--<li><a href="single-member-profile.html">Single Member</a></li>-->
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gallery</a>
<ul class="dropdown-menu submenu">
<li><a href="gallery-v1.html">Gallery 3 Col</a></li>
<li><a href="gallery-v2.html">Gallery 4 Col</a></li>
</ul>
</li>
<!--
<li><a href="login-signup.html">Login SignUp</a></li>
<li><a href="404.html">404 Not Found</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
-->
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Blog</a>
<ul class="dropdown-menu menu-xl-right">
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aro9ia-haspopup="true" aria-expanded="false">Blog</a>
<ul class="dropdown-menu submenu">
<li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
<li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
<li><a href="blog-fullwidth.html">Fullwidth</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Single Blog</a>
<ul class="dropdown-menu submenu">
<li><a href="blog-single-right-sidebar.html">Right Sidebar</a></li>
<li><a href="blog-single-left-sidebar.html">Left Sidebar</a></li>
<li><a href="blog-single-fullwidth.html">Fullwidth</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Components</a>
<ul class="dropdown-menu menu-right">
<li><a href="tabs-pagination.html">Tab & Pagination</a></li>
<li><a href="accrodion.html">Accrodions</a></li>
<li><a href="buttons-alerts.html">Buttons & Alerts</a></li>
</ul>
</li>
</ul>
</div>
<div class="cart_btn">
<a href="cart.html"><i class="fa fa-shopping-basket" aria-hidden="true"></i><span class="badge">0</span></a>
</div>
<!-- header search ends-->
</div>
</nav>
</header>
<!-- MAIN SLIDER -->
<section class="main-slider" data-loop="true" data-autoplay="true" data-interval="7000">
<div class="inner">
<!-- Slide One -->
<div class="slide slideResize slide1" style="background-image: url('/static/img/home/home-slider-1.jpg');">
<div class="container">
<div class="slide-inner1 common-inner">
<span class="h1 from-bottom">Welcome to Thee CL EXPERIENCE</span><br>
<span class="h4 from-bottom">The best place of Mindfullness & Healthy body</span><br>
<a href="javascript:void(0)" class="btn btn-primary first-btn waves-effect waves-light scale-up">More Details</a>
</div>
</div>
</div>
<!-- Slide Two -->
<div class="slide slideResize slide2" style="background-image: url('/static/img/home/home-slider-2.jpg');">
<div class="container">
<div class="slide-inner2 common-inner">
<span class="h1 from-bottom">Skin Care Solution</span><br>
<span class="h4 from-bottom">We provide best screen care & aging solution </span><br>
<a href="javascript:void(0)" class="btn btn-primary first-btn waves-effect waves-light scale-up">More Details</a>
</div>
</div>
</div>
<!-- Slide Three -->
<div class="slide slideResize slide3" style="background-image: url('/static/img/home/home-slider-3.jpg');">
<div class="container">
<div class="common-inner slide-inner3">
<img src="{% static 'img/favicon.png' %}" alt="Logo Icon" class="img-responsive">
<span class="h1 from-bottom">luxury spa resort</span><br>
<span class="h4 from-bottom">The real place of Mindfullness & Healthy body</span><br>
<a href="cart.html" class="btn btn-primary first-btn waves-effect waves-light scale-up">Buy Now</a>
</div>
</div>
</div>
<!-- Slide Four -->
<div class="slide slideResize slide4" style="background-image: url('/static/img/home/home-slider-4.jpg');">
<div class="container">
<div class="common-inner slide-inner4">
<span class="h1 from-bottom">Most Beautiful Theme</span><br>
<span class="h4 from-bottom">Angel is a beautiful theme and easy to customize</span><br>
<a href="javascript:void(0)" class="btn btn-primary first-btn waves-effect waves-light scale-up">More Details</a>
</div>
</div>
</div>
</div>
</section>
That line is in error.
can you explain a bit more on that, and how I would resolve it
Fix the href in that line to be a valid url for whatever stylesheet you’re trying to load there. It should look similar to your other stylesheet links.
thank you so much, the error is no more.