Issue
I'm trying to do so that when you pass with the mouse over the links the text of the navbar its color changes and border bottom, border bottom worked but i don't understand why color text doesn't change
HTML
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<title>Savinov Denis</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-custom">
<div class="container">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</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 justify-content-center" id="navbarNav">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Compétences</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading6">À Propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading7">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg" class="d-block w-100"
style="filter: brightness(10%);" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>SAVINOV Denis</h5>
<p>Développeur Web Indépendant</p>
</div>
</div>
<div class="carousel-item">
<img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg" class="d-block w-100"
style="filter: brightness(10%);" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-center">Création de sites web</h5>
<p class="text-center">Site vitrine, e-commerce, forum et autres</p>
</div>
</div>
<div class="carousel-item">
<img src="images/10705380.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-center">Web design, conception graphiques</h5>
<p class="text-center">Logos, plaquettes publicitaire, cartes de visites,
newsletters</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container text-center" href="scrollspyHeading1">
<h1>MES SERVICES</h1>
<h3>Des prestations adaptées à vos besoins</h3>
</div>
<div class="container text-center" href="scrollspyHeading2">
<div class="row">
<div class="col">
<h5 class="text-end">Gestion de projets web</h5>
<p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.</p>
<h5 class="text-end">Intégration Web</h5>
<p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
<h5 class="text-end">Développements spécifiques</h5>
<p class="text-end">Des outils adaptés à votre coeur de métier,
applications & solutions personnalisées.</p>
<h5 class="text-end">Référencement naturel</h5>
<p class="text-end">Affichage sémantique des informations,
des pages propres pour un référencement optimal.</p>
</div>
<div class="col">
<img src="images/index.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col">
<h5 class="text-start">Conception graphique & Webdesign</h5>
<p class="text-start">Logos, templates Web, plaquettes publicitaires,
cartes de visite, newsletters...</p>
<h5 class="text-start">Dynamisme des pages</h5>
<p class="text-start">Des animations de contenu non intrusives
pour embellir votre projet.</p>
<h5 class="text-start">Interface d'administration</h5>
<p class="text-start">Outils spécifiques au bon fonctionnement
de votre entreprise.</p>
<h5 class="text-start">Responsive design</h5>
<p class="text-start">Compatible tous supports, tablette & application mobile.</p>
</div>
</div>
<p>Compatible Mobile, Tablettes & P.C</p>
<h3>Développement Web Responsive</h3>
</div>
<div class="container text-center" href="scrollspyHeading3">
<h1>MES COMPÉTENCES</h1>
<h3>Des compétences à votre service</h3>
<div class="container text-center">
<div class="row">
<div class="col">
<h1 class="text-start">Domaines de compétences</h1>
<h4 class="text-start"> Gestion de projets web </h4>
<p class="text-start">Site vitrine, corporate, évènementiel, e-commerce, intranet, application
mobile.</p>
<h4 class="text-start"> Conception graphique & Webdesign </h4>
<p class="text-start">Logos, templates Web, plaquettes publicitaires, cartes de visite,
newsletters...</p>
<h4 class="text-start">Applications spécifiques et Interface d'administration</h4>
<p class="text-start">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>
<h4 class="text-start">Mise en place / Modification / Gestion de CMS</h4>
<p class="text-start">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>
<h4 class="text-start">Intégration (X)HTML / CSS</h4>
<p class="text-start">Codage à la main respectueux des standards du Web</p>
<h4 class="text-start"> Dynamise des pages par JavaScript / AJAX </h4>
<p class="text-start">jQuery, Prototype, Mootools, Scriptaculous</p>
<h4 class="text-start">Validation W3C, WAI & référencement naturel SEO</h4>
<p class="text-start"> Accessibilité & ergonomie des pages web </p>
<h4 class="text-start"> Conception multi-plateformes </h4>
<p class="text-start">Compatible tous supports, tablette & application mobile</p>
</div>
<div class="col">
<h1>Compétences en développement</h1>
<h1>Compétences en conception graphique</h1>
</div>
<h1 class="text-center">Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
</div>
</div>
</div>
<div class="container text-center" href="scrollspyHeading4">
<h1>MES PROJETS</h1>
<h4>Une partie des projets sur lesquels j'ai travaillé</h4>
</div>
<div class="container text-center" href="scrollspyHeading6">
<h1>À PROPOS</h1>
<h4>Je suis développeur web freelance et j'aime ça !</h4>
<div class="row">
<div class="col">
<h4 class="text-start">Un développeur web passionné !</h4>
<p class="text-start">Ma passion pour le développement web commence en 2003 et m'a demandé un changement
radical de cursus
afin de pouvoir pleinement l'exploiter.</br> </br>
Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
divers projets développés.</br> </br>
En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un plus
large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
</div>
<div class="col">
<img src="images/index.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col">
<h4 class="text-start">Expérience en développement</h4>
<p class="text-start"> Mon expérience acquise au fil des projets me permet de mieux comprendre les
attentes d'un client
et de
répondre précisement au besoin demandé en fonction du domaine d'activité.</p>
<p class="text-start">Du site vitrine au projet plus complexe, je vous propose une expertise et un
développement web qui
correspond à vos attentes & à vos besoins.</p>
<h3 class="text-start">Un tarif adapté à votre projet</h3>
<p class="text-start"> Travaillant régulièrement avec des PME, associations ou particuliers, je vous
propose des solutions
à
votre portée & adaptée à votre budget.</p>
</div>
</div>
</div>
<div class="container text-center" href="scrollspyHeading7">
<h1>CONTACTEZ-MOI</h1>
<h3>Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h3>
<div class="row">
<div class="col text-start">
<h6>ADRESSE</h6>
<p>45, allée des Grives 83390 Cuers</p>
<h6>Téléphone</h6>
<p>(+33) 6.15.42.10.45</p>
<h6>E-mail</h6>
<p>contact@mcrevoulin.com</p>
<h6>Horaires</h6>
<p>Lundi - Vendredi
09H00 - 18H00</p>
<h6>S.I.R.E.N</h6>
<p>522 491 000</p>
</div>
<div class="col">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954505828!2d7.69203969606045!3d48.56905316140801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1%3A0x971a483118e7241f!2sStra%C3%9Fburg%2C%20Frankreich!5e0!3m2!1sde!2sde!4v1658941325979!5m2!1sde!2sde"
width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813%3A0x48d94c0efba762bd!2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde"
width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="col">
Column
</div>
</div>
</div>
<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
</html>
CSS
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
/* Modify the background color */
.navbar-custom {
background-color: rgba(255, 255, 255, 0.37);
}
.navbar-nav .nav-item .nav-link {
color: white;
}
.nav-item a:hover {
color: cyan;
box-shadow: inset 0 -2.5px 0 0 cyan;
}
.carousel-inner .carousel-item>img {
-webkit-animation: thing 20s;
-o-animation: thing 20s;
animation: thing 20s;
}
@keyframes thing {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.5, 1.5);
}
}
But it does not work I do not understand why, it seems to me that the code is correct but when I pass on the links of the navbar the hover to change colors does not work. What should I do to fix this code issue? I have try code from others topic but don't resolved my problem
Solution
It is because of the parent selectors you are using before the :hover on this line
.navbar-nav .nav-item .nav-link {
color: white;
}
Try with
.navbar-nav .nav-item .nav-link:hover {
color: cyan;
box-shadow: inset 0 -2.5px 0 0 cyan;
}
Answered By - Veli Kukova
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.