maken van de vinyl overzicht

[SamaraFellaDina]

[wingsvn]

10.09.2024 breakdownschets Ik heb een snelle breakdownschets gemaakt om voor mezelf duidelijk te krijgen welke elementen en gegevens ik nodig heb en hoe het album component in elkaar steekt.

Vervolgens heb ik een opzet gemaakt in sveltekit.

 <main>
    <h2>pick a track</h2>
    <ul>
      {#each data.persons as person}
        <li>
          <button class="vinyl-album">
            <img src={person.avatar} alt="{person.name}'s avatar" width="150" height="150" />
          </button>
          <div class="vinyl-record">
            <div class="vinyl-record-label">
            </div>
          </div>
        </li>
      {/each} 
    </ul>
  </main>

Met flex-box zet ik de albums naast elkaar

ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em 4em;
  }

[wingsvn]

Hierna heb ik de de vinyl cover met de vinyl record samengevoegd:

li {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style:"";
  }