79369600

Date: 2025-01-19 19:19:46
Score: 0.5
Natty:
Report link

First you should add !important to your slider styles and then instead of top: 0; you should write top: -59px !important; (59px is the size of the navbar).

Here is the corrected functional code:

Codepen

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #8b5656;
}

.navbar {
    --margin: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    position: sticky;
    top: 0;
    width: calc(100vw - 2 * var(--margin));
    z-index: 1000;
    border-radius: 80px;
    margin-left: var(--margin);
    margin-right: var(--margin);
    padding: 12px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.carouselslide{
    width: 100%; 
    height: 700px;
    overflow: hidden;
    position: relative;
    top: -59px !important;
}

.carouselslide img {
    filter: blur(8px);
    filter:brightness(0.3);
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="/Projeto Final/styles.css">
<!-- Nav bar-->

<nav class="navbar navbar-expand-lg">
          <a class="navbar-brand" href="#">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipground.com%2Fimages%2Fstackoverflow-logo-9.png&f=1&nofb=1&ipt=0765153ba1b0a57a6befd023995864bfb1337b7daee2a4d8360747a2051096cc&ipo=images" alt="Logo" width="30" height="30" class="d-inline-block align-text-top img-fluid">
            FlokkiFur </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list-nested"></i>
          </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto text-md-center text-left">
          <li class="nav-item">
              <a class="nav-link" href="#top">HOME</a> 
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#cartoes">PORTFOLIO</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">ABOUT ME</a> 
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a> 
          </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-twitter"></i></a> </li>
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-instagram"></i></a> </li>
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-tiktok"></i></a> </li>
      </ul>
</nav>

<!-- Bg carossel-->

    <div id="fotosCarousel" class="carouselslide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpreview.redd.it%2Fzfohxnf8t3pa1.jpg%3Fwidth%3D1024%26format%3Dpjpg%26auto%3Dwebp%26v%3Denabled%26s%3D0f660e0a56476991ee3b97f2885d8c010fec5b97&f=1&nofb=1&ipt=abc443565a4307bf540effd4e35273c0e8a9c3242503f6956ce59029b3e53501&ipo=images" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://softauthor.com/wp-content/uploads/2021/08/CSS-Background-Image-Full-Screent-With-background-Image-1536x1355.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://wonderfulengineering.com/wp-content/uploads/2014/10/image-wallpaper-15.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Reasons:
  • Blacklisted phrase (1): stackoverflow
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Eliseo