AoIT Dashboard 2024 v1 by @Yasnirih - Codewith.it

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

Referenze

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<embed>Tag per l'incorporamento di contenuti multimediali
minImposta il valore numerico o temporale minimo per un elemento input
<th>Definisce una cella di intestazione di una tabella HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Costruzione di tabella con html5

fontawesome-esempio

Pagina di Esempio

26/01/2024 pagina html

Costruzione di tabella con html5

console elements

La Ghigliottina | Matteo Greco &

DEMO: Hi-Lo Game

match html tags

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<html>

<head>
  <title>AoIT Dashboard 2024 v1</title>
</head>

<body>
  <header>
    <h1> Music Discovery Dashboard</h1>
  </header>
  <div class="main-container">
    <div class="featured-albums">
      <h2>Feautured Albums </h2>
      <div class="album-grid">
        <p>Album 1</p>
        <a href="#" class="album"> <img src="https://www.udiscovermusic.com/wp-content/uploads/2017/08/Elvis-Presley-Album-Cover.jpg" alt="img1">
        </a>
        <p>Album 2</p>
        <a href="#" class="album"><img src="https://upload.wikimedia.org/wikipedia/en/0/09/Thriller_25_cover.jpg" alt="img2">
        </a>
        <p>Album 3</p>
        <a href="#" class="album"> <img src="https://upload.wikimedia.org/wikipedia/en/0/0d/Ellaandlouis.jpg" alt="img3">
        </a>
        <p>Album 4</p>
        <a href="#" class="album"> <img src="https://is1-ssl.mzstatic.com/image/thumb/Music126/v4/b6/ac/da/b6acdad9-7984-9fe7-dc4b-9697c50aa4d6/cover_198027217553.jpg/1200x1200bb.jpg" alt="img4">
        </a>
        <p>Album 5</p>
        <a href="#" class="album"> <img src="https://upload.wikimedia.org/wikipedia/en/2/2d/Sail_Out_by_Jhen%C3%A9_Aiko.png"alt="img5">
        </a>
      </div>
    </div>

    <div>
      <h2>Genres</h2>
      <div class="genres">
        <button class="genre-button">Rock</button>
        <button class="genre-button">Pop</button>
        <button class="genre-button">Jazz</button>
        <button class="genre-button">Hip-Hop</button>
        <button class="genre-button">R&B</button>
      </div>
    </div>

    <div class="now-playing">
      <h2>Now Playing</h2>
      <div class="now-playing-info">
        <img src="https://upload.wikimedia.org/wikipedia/en/9/96/The_Weeknd_-_Trilogy.png" alt="img6">
        <div class="track-info">
          <p>Artist: The Weeknd</p>
          <p>Track: Trilogy Album: Coming Down</p>
        </div>
      </div>
    </div>
  </div>

  <footer>
    &copy;Music Discovery By ~ Yasniri H. <3
  </footer>
</body>

</html>

body {
  font-family: 'Arial', sans-serif background-color: #f0f0f0;
  color: #333;
  margin: 0;
  padding: 0;
  text-align: center;

}

h1,
h2 {
  color: #f3ecec;
}

p {
  color: white;
}

a {
  text-decoration: none;
  color: #333;
}


header {
  background-color: #ce97ee;
  color: white;
  padding: 20px;
}

.main-container {
  display: grid;
  background-color: #a365cc;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.feautured-albums .album-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.album {
  display: block;
  width: 150px;
  margin: 10px;
  text-align: justify;
}

.album img {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 10px;
  transition: transform 0.3s;
}

.album img:hover {
  transform: scale(1.1);
}

.genre-filters {
  diplsay: flex;
  flex-direction: column;
  align-iteams: center;
}

.genres {
  display: flex;
  gap: 10px;
}

.genre-button {
  padding: 10px 20px;
  background-color: #d5aaf2;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.genre-button:hover {
  background-color: #4682b4;
}

.now-playing {
  text-align: center;
}

.now-playing-info {
  dislay: flex;
  justify-content: center;
  align-iteams: center;
  gap: 20px;
}

.now-playing-info img {
  width: 160px;
  border-raodus: 50%;
}

.track-info {
  text-align: left;
}

.track-info p {
  margin: 0;
}

footer {
  position: fixed;
  color: black;
  position: sticky;
  width: 100%;
}

footer a {
  color: #f81eff;
  margin: 0 5px;
  transition: color 0.3s;
}

footer a:hover [ color: #black;
]