Partage
  • Partager sur Facebook
  • Partager sur Twitter

absence barre de recheche dans la navbar

La barre de recherche ne s'affiche pas dans la navbar.

TimRig
    20 mars 2024 à 0:14:39

    Bonjour, j'ai un soucis avec ma barre de recherche qui ne s'affiche pas dans la navbar. Est ce quelqu'un aurait une idée ?

    <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My Miaou</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
	<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
	<link src="catP.js"defer></script>
</head>
<body>
<!--tete debut-->
<header>
	<input type="checkbox"name="" id="toggler">
	<label for="toggler" class="fas fa-bars"></label>
	<a class="logo"> <img src="catP/Ologo.png"></a>
	
	<nav class="navbar">
		
		<a href="#home">Home</a>
		<a href="#M&I">M&I</a>
		<a href="#Cat">Cat Magazine</a>
		<a href="#About ">About </a></li>
		<a href="#Contact ">Contact </a>
		
		<i class="uil uil-search search-icon" id="searchIcon"></i>
      	<div class="search-box">
        <i class="uil uil-search search-icon"></i>
        <input type="text" placeholder="Search here..." />
      </div>
		
	</nav>
	
	<div class="icons">
		<a href="#" class="fas fa-heart"></a>
		<a href="#" class="fas fa-cat"></a>
		<a href="#" class="fas fa-user"></a>
		<!--<a href="#" class="fas fa-shopping-cart"></a>-->

	</div>	
</header>
<!--tete fin-->
<!--home start-->
<section class="home" id="home">
	<div class="content">
		<div class="container">
			<div class="overlay"></div>		
				<img class="responsive" width="600" height="400" id="slide" src="catP/catbox.jpg">
				<img class="responsive" width="600" height="400" id="slide" src="catP/cat3.jpg">
				<img class="responsive" width="600" height="400" id="slide" src="catP/catf2.jpg">

				<span > Find your soulmate with a cat</span>
				<p> Whether you're cuddly or adventurous, quiet or playful, we have the perfect four-legged companion to match your personality.</p>	
		</div>
		<!--<form >
		 	<input type="text" placeholder="cat name" required data-aos="fade-center" data-aos-duration="1000">
		 	<button type="submit" class="btn" data-aos="fade-center" data-aos-duration="1000">Search</button>
		</form>-->
		<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">Discover more</a>

	</div>
</section>
<!--home fin-->
<!--Div type de chat-->
<section class="Cat">
<h1 data-aos="fade-up" data-aos-duration="500">Discover the diversity of cat breeds </h1>
	<p data-aos="fade-up" data-aos-duration="500"> Find your perfect companion among these wonderful four-legged creatures.</p>
	<div class="row" data-aos="fade-up" data-aos-duration="1000">
		<div class="Breeds-col">
			<img src="catP/British.jpg" data-aos="fade-up" data-aos-duration="500">
			<h3 data-aos="fade-up" data-aos-duration="500">British Shorthair</h3>
			<p data-aos="fade-up" data-aos-duration="500">Le British Shorthair est originaire de Grande-Bretagne et fait fortement penser au chat du Cheshire d'Alice au pays des merveilles.</p>
			<br><br><br><br>
			<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">More</a>
		</div>
	
		<div class="Breeds-col" >
				<img src="catP/siamonis.jpg" data-aos="fade-up" data-aos-duration="500">
			<h3 data-aos="fade-up" data-aos-duration="500">Siamois</h3>
			<p data-aos="fade-up" data-aos-duration="500">Le Siamois, qui trouve ses origines au XIVe siècle dans l'ancien royaume de Siam (aujourd'hui la Thaïlande), est un chat apprécié pour son élégance et son intelligence.</p>
			<br><br>
			<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">More</a>
		</div>
			<div class="Breeds-col">
				<img src="catP/Bengal.jpg" data-aos="fade-up" data-aos-duration="500">
			<h3 data-aos="fade-up" data-aos-duration="500"> Bengal</h3>
			<p data-aos="fade-up" data-aos-duration="500">Le Bengal, né du croisement d'un chat domestique et d'un chat léopard d'Asie, possède un pelage unique qui rappelle ses origines sauvages, avec un fascinant motif tacheté ou marbré de différentes couleurs. </p>
			<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">More</a>
			</div>
		</div>

</section>
<!--end of breeds-->
<!--about Us-->
<section class="About" id="About">
<h1 class="heading"> <span>about</span> Us</h1>
<div class="row">
	<div class="video-container">
		<img src="catP/cat5.jpg" loop autoplay muted data-aos="fade-right" data-aos-duration="2000"></img>
		<h3>Find ur friend</h3>
	</div>
	<div class="content">
		<h3 data-aos="fade-right" data-aos-duration="1000">Why choose us</h3>
		<p data-aos="fade-left" data-aos-duration="1000">Discover a unique online chat experience where every meow counts. Our personalized platform helps you find the perfect feline companion that suits your personality and preferences. Browse through our diverse selection of cats and let yourself be charmed by your perfect four-legged friend. Meet your future life companion today on our chat site.</p>
		<a href="#" class="btn" data-aos="fade-right" data-aos-duration="2000">Learn More</a>
	</div>
</div>	
</section>

<!--conctact section-->
<section class="Contact" id="Contact" data-aos="fade-left" data-aos-duration="1000">
	<h1 class="heading"><span>Contact</span> Us</h1>
	<div class="row">
		<form action="">
			<input type="text" placeholder ="name" class="box" required>
			<input type="email" placeholder="email" class="box" required>
			<input type="password" placeholder="password" class="box" required>
			<textarea name=""class="box" placeholder="Message" id="" cols="30" rows="10" ></textarea>
			<input type="submit" value="send message" class="btn">
			
		</form>
		
		
		   <footer>
           
            <a href="https://github.com/helb-prigogine/BAC1-2324-Q2-PRJ-WEB-TEAM5.git" target="_blank"><img class="social-media-img" src="catP/github-142-svgrepo-com.svg" alt="GitHub"></a>
            <a href="#" target="_blank"><img class="social-media-img" src="catP/instagram-color-svgrepo-com.svg" alt="Instagram"></a>
            <a href="#" target="_blank"><img class="social-media-img" src="catP/linkedin-svgrepo-com.svg" alt="LinkedIn"></a>
            <a href="#" target="_blank"><img class="social-media-img" src="catP/twitter-svgrepo-com.svg" alt="Twitter"></a>
            
        </footer>
  
	</div>

</section>
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>
</html>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

:root{
    --pink:#e84393;
  }
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  
  body{
    background: #fffffe;
  }
  html
  {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    overflow-x: hidden;
  }
  
  section{
    padding: 2rem 9%;
  }
  .heading{
    text-align: center;
    font-size: 4rem;
    color: #333;
    padding: 1rem;
    margin: 2rem 0;
    background:#e3f6f5;
  }
  
  .btn{
    display: inline-block;
    margin-top: 1rem;
    border-radius: 5rem;
    background:black;
    color: #fff;
    padding: .9rem 3.5rem;
    cursor: pointer;
    font-size: 1.7rem;
  }
  .btn:hover{
    background: #ffd803;
  }
  
  header
  {
    position: fixed;
    top: 0;left: 0;right: 0;
    background: #fffffe;
    padding: 2rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  }
  header .logo {
    font-size: 3rem;
    color: #333;
    font-weight: bolder;
  }
  .navbar .search-icon {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .navbar .search-box {
    position: absolute;
    right: 250px; 
    height: 45px;
    max-width: 555px;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s linear;
  }
  .navbar.openSearch .search-box {
    opacity: 1;
    pointer-events: auto;
  }
  .search-box .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    left: 15px;
    color: #4a98f7;
    transform: translateY(-50%);
  }
  .search-box input {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 6px;
    background-color: #fff;
    padding: 0 15px 0 45px;
  }
  .navbar .navOpenBtn,
  .navbar .navCloseBtn {
    display: none;
  }
  
  @media screen and (max-width: 1160px) {
    .nav {
      padding: 15px 100px;
    }
    .nav .search-box {
      right: 150px;
    }
  }
  @media screen and (max-width: 950px) {
    .nav {
      padding: 15px 50px;
    }
    .nav .search-box {
      right: 100px;
      max-width: 400px;
    }
  }
  @media screen and (max-width: 768px) {
    .nav .navOpenBtn,
    .nav .navCloseBtn {
      display: block;
    }
  /* pour faire en sorte que la barre de recherche soit en dessous de la navbar en fenêtré*/
    .nav .search-box {
      top: calc(100% + 10px);
      max-width: calc(100% - 20px);
      right: 50%;
      transform: translateX(50%);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
  }
  header .logo{
    font-size: 3rem;
    color: #333;
    font-weight:bolder;
  }
  header .navbar a{
    font-size: 2rem;
    padding: 0 1.5rem;
    color:#272343;
  }
  header .navbar a:hover{
    color:#ffd803;
  }
  header .icons a
  {
    font-size: 2.5rem;
    color: #333;
    margin-left: 1.5rem;
  }
  header .icons a:hover{
    color:#ffd803;
  }
  header #toggler
  {
    display: none;
  }
  header .fa-bars
  {
    font-size: 3rem;
    color: #333;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    cursor: pointer;
    border: .1rem solid rgba(0, 0, 0, .3);
    display: none;
  
  }
  
.container{
  height: 100vh;
  margin-top: 6rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.overlay{
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  max-width: 100%;
  top: 0;
  left: 0;
  height: 100%; 
  z-index: 10;
}

@keyframes fade {
  0% {
    opacity: 1;
}
33%  {
    opacity: 0;
}
67%{
    opacity: 0;
}
100%{
    opacity: 1;
}
}
#slide
{
  width: 100%;
  height: 100%;
  display: block;
  display: flex;  
  object-fit: cover;  
  position: absolute;
  top: 0;
  left: 0;    
  animation: fade 9s ease-in-out infinite alternate;
}

.img:nth-of-type(1){
  animation-delay: 0s;
}
.img:nth-of-type(2){
    animation-delay: 3s;
}
.img:nth-of-type(3){
    animation-delay: 6s;
}
.container span,
.container p {
  z-index: 100;
  position: relative;
}

.container span {
  font-size: clamp(3rem, 5vw, 3.8rem); 
  color: #ffd803;
  padding: 1rem 0;
  line-height: 1.5;
}

.container p {
  font-size: clamp(1rem, 2.5vw, 1.8rem); 
  color: #212121;
  padding: 1rem 0;
  line-height: 1.5;
}*/


*/
  .Cat{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
    /*background-color: #bae8e8;*/
  }
  .Cat h1{
    font-size:36px ;
    font-weight: 600;
    color: #272343;
  }
  .Cat h3{
    text-align: center;
    font-weight: 600;
    margin: 10px;
  }
  .Cat p{
    color:#777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px 0;
  }
  .Cat img{
    height:210px;
    width: 210px;
    border-radius: 2rem;
  }
  .Cat .row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
  }
  .Cat .Breeds-col{
    flex-basis: 31%;
    background: #bae8e8;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
  }
  .Cat .Breeds-col:hover{
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
  }
  
  .About .row{
    display:flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 2rem 0;
    padding-bottom: 3rem;
  }
  .About .row .video-container{
    flex: 1 1 40rem;
    position: relative;
  
  }
  .About .row .video-container img{
    width: 100%;
    border: 1.5rem solid #fff;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    height: 100%;
    object-fit:cover ;
  
  }
  .About .row .video-container h3{
    position: absolute;
    top: 50%;transform: translateY(-50%);
    background: #fff;
    font-size: 3rem;
    width: 100%;
    padding: 1rem 2rem;
    text-align: center;
    mix-blend-mode: screen;
  }
  .About .row .content{
  
    flex: 1 1 40rem;
  }
  
  .About .row .content h3{
    font-size: 3rem;
    color: #333;
  }
  .About .row .content p{
    font-size: 1.5rem;
    color: #999;
    padding: 5rem 0;
    padding-top: 1rem;
    line-height:1.5 ;
  
  }
  .Contact .row{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  align-items: center;
  }
  .Contact .row form{
    flex: 1 1 40rem;
    padding: 2rem 2.5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
    border: .1rem solid rgba(0, 0, 0, .1);
    background: #fff;
  border-radius: .5rem;
  
  }
  
  .Contact .row .image{
    flex: 1 1 40rem;
  }
  .Contact .row .image img{
  width: 100%;
  }
  .Contact .row form .box{
    padding: 1rem;
    font-size: 1.7rem;
    color: #333;
    text-transform: none;
    border: .1rem solid rgba(0, 0, 0, .1);
    border-radius: 5rem;
    margin: .7rem 0;
    width: 100%;
  }
  .Contact .row form .box:focus{
    border-color: yellow;
  }
  .Contact .row form textarea{
    height: 15rem;
    resize: none;
  
  }
  
  /*footer*/
  footer
  {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 20vh;
      width: 75%;
      margin: auto;
      opacity: 0.2;
      border-top: 1px solid #212121;
      margin-top: 2%;
  }
  
  footer:hover
  {
      animation: fade 0.3s ease;
      opacity: 0.9;
  }
  .social-media-img
  {
      height: 5vh;
  }
  
  .codecell-img
  {
      height: 10vh;
  }
  
  @keyframes fade
  {
      0%
      {
          opacity: 0.2;
      }
  
      100%
      {
          opacity: 0.9;
      }
  }
  
  /* Media queries */
  
  @media screen and (max-width: 1295px)
  {
      footer
      {
          width: 95%;
      }
  }
  
  @media screen and (max-width: 500px)
  {
      footer
      {
          opacity: 0.9;
      }
  }
  
  
  
  
  @media (max-width:991px)
  {
    html
      {
        font-size: 55%;
        
    }
    header{
      padding: 2rem;
    }
    section{
      padding: 2rem;
    }
    .home{
      background-position: left;
    }
  
  }
  @media (max-width:768px)
  {
    header  .fa-bars{
      display: block;
    }
    header .navbar{
      position: absolute;
      top: 100%;left: 0;right: 0;
      background: #eee;
      border-top: .1rem solid rgba(0, 0, 0, .1);
      clip-path: polygon(0 0,100% 0,100% 0,0 0);
    }
    header #toggler:checked ~ .navbar{
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    }
      header .navbar a{
        margin: 1.5rem;
        padding: 1.5rem;
        background: #fff;
        border: 1rem solid rgba(0, 0, 0, .1);
        display: block;
      }
      .home .content h3{
        font-size: 5rem;
      }
      .home .content spam{
        font-size: 2.5rem;
      }
      .Cat .row{
        flex-direction:column ;
      }
  }
  @media (max-width:450px)
  {
    html
      {
        font-size: 50%;
      }
      .heading{
        font-size: 3rem;
      }  
   
  
  }

    -
    Edité par TimRig 21 mars 2024 à 9:15:01

    • Partager sur Facebook
    • Partager sur Twitter

    absence barre de recheche dans la navbar

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur ●
    • Markdown