Navbar Example 2 by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<tr>Definisce le righe di una tabella (rows)
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
typeSpecifica la tipologia/funzione di un elemento.
<table>Tag primario per la creazione di tabelle
<h2>Titolo di intestazione di secondo livello
<caption>Definisce didascalie all'interno di una tabella

Users

Log in to search for users

Explore

Find inspiration

google search clone

Pascal Landriscina

esercitazione8.html

le miniere di nuxis

Copia testo in appunti

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
<head>
  <title>Navbar Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <ul class="navbar-list">
      <li class="navbar-item"><a href="#">Home</a></li>
      <li class="navbar-item"><a href="#">About</a></li>
      <li class="navbar-item"><a href="#">Services</a></li>
      <li class="navbar-item"><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

/* Reset some default styles */
body, ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
}

/* Navbar styles */
.navbar {
  background-color: #8d8eff; /* Background color of the navbar */
  padding: 15px; /* Add some spacing around the navbar content */
  display: flex; /* Display the navbar items in a row */
  justify-content: center; /* Center the navbar items horizontally */
}
.navbar-list {
  display: flex; /* Display the navbar items in a row */
}
.navbar-item {
  margin: 0 15px; /* Add some spacing between each navbar item */
}

.navbar-item a {
  text-decoration: none; /* Remove underline from the links */
  color: #fff; /* Text color of the links */
  font-size: 18px; /* Font size for the links */
  padding: 10px 15px; /* Add padding to the links for better clickability */
  border-radius: 20px; /* Add rounded corners to the links */
  background-color: #7149ff; /* Background color of the links */
  transition: background-color 0.3s ease; /* Add a smooth transition effect to the background color */
} 

/* Change the background color of the links on hover */
.navbar-item a:hover {
  background-color: #4f27de;
}

/* Add a creative hover effect */
.navbar-item a:before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #007bff; /* Color of the creative hover effect */
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.navbar-item a:hover:before {
  opacity: 1;
  top: -20px;
}

/* Style the active link */
.navbar-item a.active {
  background-color: #007bff;
}