I am trying to create navbar but @media is not working. What is wrong with that i saw mistake like not using <meta name=”view….” or <script type="text/javascript" src="css3-mediaqueries.js"></script> what’s wrong in my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebsitesiDeneme</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/WebsitesiDeneme.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<style>
body {
font-family: "Inter", sans-serif;
background-color: #F4F4F4;
}
.navbar {
background-color: white;
height: 80px;
margin: 20px;
border-radius: 16px;
padding: 0.5rem;
}
.navbar-brand {
font-weight: 500;
color: green;
font-size: 24px;
transition: 0.3s color;
}
.login-button {
background-color: #009970;
color: white;
font-size: 14px;
border-radius: 50px;
padding: 8px 20px;
text-decoration: none;
transition: 0.3s background-color;
}
.login-button:hover {
background-color: black;
}
.navbar-toggler {
border: none;
font-size: 1.25rem;
}
.navbar-toggler:focus,
.btn-close:focus {
box-shadow: none;
outline: none;
}
.nav-link {
color: #666777;
font-weight: 500;
}
.nav-link:hover,
.nav-link.active {
color: #000;
}
@media screen and (min-width: 991px) {
.nav-link::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: orange;
visibility: hidden;
transition: 0.3s ease-in-out;
}
.nav-link:hover::before,
.nav-link.active::before {
width: 100%;
visibility: visible;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a class="navbar-brand me-auto" href="#">Logo</a>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Logo</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-center flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link mx-lg-2 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mx-lg-2" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link mx-lg-2" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link mx-lg-2" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link mx-lg-2" href="#">Contact</a>
</li>
</ul>
</div>
</div>
<a href="#" class="login-button">Login</a>
<button class="navbar-toggler pe-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
@RenderBody()
<hr style="border: 0; border-top: 1px solid #35374c; margin: 20px 0;">
<footer>
<div class="container-xxl">
<div class="row">
<div class="col-12">
<div class="footer-box" style="border: 1px solid #35374c; border-radius: 5px; padding: 50px 30px;">
<div class="row">
<div class="col-6">
<div class="left">
<span style="color: #55565a; font-size:40px">Sosyal Medyadan</span>
<span style="color:#35373c; font-size:40px;">Bizi</span>
<span style="color:#FF5100; font-size:40px;">Takip Edin!</span>
</div>
</div>
<div class="col-6">
<div class="right btn bg-light border-1" style="color:rgb(33, 37, 41); border-color:black; border-radius: 30px; padding:15px 12px; width:100px;">
<a href="https://www.linkedin.com/company/mimeda/" style="color: inherit; text-decoration: none;">
<span>LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="copyrights" style="display:flex; margin-top:10px; justify-content:center; width:100%; align-items:center;">
<div class="copy" style="display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%;">
<div class="text-copyrights" style="display:block;">
<a asp-controller="Home" asp-action="kisilerinVerilerinKorunmasıVeIslenmesiPolitikası" style="text-decoration:underline; display:block; font-family:'Gilmer-Bold'; color:#35373C; font-size:14px">Kişisel Verilerin Korunması ve İşlenmesi Politikası</a>
<a asp-controller="Home" asp-action="kisiselVerilerinKorunmasiHakkindaAydinlatmaMetni" style="text-decoration:underline; display:block; font-family:'Gilmer-Bold'; color:#35373C; font-size:14px">Kişisel Verilerin Korunması Hakkında Aydınlatma Metni</a>
<a asp-controller="Home" asp-action="veriSahibiIlgiliKisiBasvuruFormu" style="text-decoration:underline; display:block; font-family:'Gilmer-Bold'; color:#35373C; font-size:14px">Veri Sahibi İlgili Kişi Başvuru Formu</a>
<br />
<h4 style="font-size:14px;">Copyright © @DateTime.Now.Year Migros Medya Data</h4>
<p style="font-size:14px;">
<span class="strong">Migros Medya Data</span> web sitesinde her türlü bilgiyi ve görseli değiştirme, <br> düzeltme ve yayınlama hakkını saklı tutar.
</p>
</div>
<img src="~/Images/anadolu-grubu-logo.png" alt="Anadolu Grubu Logo" class="img-fluid" style="height:60px; vertical-align:middle;" />
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>