AoIT Dashboard 2024 v1 by @Yasnirih - Codewith.it

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

Referenze

enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<embed>Tag per l'incorporamento di contenuti multimediali
<i>Formatta il testo in corsivo/italico non enfatizzato
<h4>Titolo di intestazione di quarto livello
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
crossoriginGestisce richieste tra documenti provenienti da origini differenti.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ciao io sono sara

PERGAMEMORY - I Segreti dei Bevill

5/10/24 es. 5 - consonanti

Ricetta Cous Cous

Il museo di Leonardo

Esercizio (02/02/2024)

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;
]