@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap');
:root {
--color-body: #b6cbce;
--color-heading: #eef3db;
--color-base: #033f47;
--color-base2: #022a30;
--color-brand: #e0f780;
--color-brand2: #deff58;
--sidbar-width: 240px;
--font-base: "Bai Jamjuree";
}
*{
background-color: var(--color-base2);
color: var(--color-base);
font-family: var(--font-base);
}
.navbar .nav-link {
font-weight: 700;
text-transform: uppercase;
color: white;
transition:all 0.5s ease-in;
}
.navbar .nav-link:hover{
color: var(--color-brand);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
color: aliceblue;
font-weight: 700;
}
a {
text-decoration: none;
color: var(--color-body);
transition: all 0.5s ease;
}
a:hover {
color: var(--color-brand);
}
img {
width: 100%;
}
h3 {
color: white;
}
@media (min-width:992px) {
.navbar {
min-height: 100vh;
width: 240px;
background: linear-gradient(rgba(3, 63, 71, 0.623), rgba(3, 63, 71, 0.853)), url(./sidebar-img.jpg);
background-size: cover;
background-position: center;
}
.navbar img{
border: 8px solid var(--color-brand);
}
}<!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.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011d011c">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation bar start -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container flex-lg-column">
<a class="navbar-brand mx-lg-auto mb-lg-4" href="#"><span class="h3 text-white fw-bold d-block d-none">Shuvo Raj</span>
<img src="./person.jpg" class="d-none d-lg-block rounded-circle" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto flex-lg-column text-lg-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navigation bar close -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf8f4e9fedba9b5aaaab5ad">[email protected]</a>/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e05190518">[email protected]</a>/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>navbar color can't vanish or be transparent because it is linked to body color, how to solve this issue? I'm working on some projects based on YouTube tutorials and encountering an error. Is there a way to overcome these challenges?
I'm developing this project using HTML/CSS/Bootstrap 5.