AoIT Dashboard 2024 v1 by @Yasnirih - Codewith.it

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

References

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
multipart/form-dataCodifica dei caratteri di un form
<map>Inserisce immagini mappa cliccabili in un documento
<h6>Titolo di intestazione di sesto livello

Users

Log in to search for users

Explore

Find inspiration

INFORMATICA - ESERCIZIO 3

Modulo multi Processo

Esercitazione 2

Esercizi 05/03/2024 es3

test1 pagina principale

La Storia di Cappuccetto Rosso

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.

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