ebok1 / connect-your-tribe-profile-card Goto Github PK

• Je kaart is niet responsive, als je het op een mobiel bekijkt verdwijnt de linkere flap
• Je zou voor een mobile version misschien de kaart naar beneden open laten klappen.

In je CSS maak je gebruik van nth-of-type zoals hieronder:

Dit zou je makkelijker kunnen schrijven door gebruik te maken van classes, want als je nu de volgorde van je content veranderd dan klopt de opmaak niet meer.

Meer lezen over classes: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

De hover van de iconen doen het niet helemaal. De iconen springen supersnel heen en weer.

• kijk nog even goed naar je css, bij de hover state voor de iconen.

Tips
verwijder onnodige elementen

<section></section>

Html structuur resultaten
Je gebruikt veel sections zonder een heading element

Je sluit de sections hier 2 keer klopt niet met de structuur.

   <section>
      <section>
        <button id="card-open">Click<i class='bx bxs-chevrons-right'></i></button>
      </section>
      <section>
        <p> <a href="https://www.instagram.com/ellenoor_bok/"><img src="/images/pngwing.com (1).png" class="instagram">
          </a>
        </p>
        <p> <a href="https://www.linkedin.com/in/ellenoor-bok-029096290/"><img src="/images/pngwing.com (2).png"
              class="linkedin">
          </a>
        </p>
        <p> <a href="https://www.facebook.com/ellenoor.bok/"><img src="/images/pngwing.com (4).png" class="facebook">
          </a>
        </p>
      </section>
    </section>

Bij image maak gebruik van een alt.

        <p> <a href="https://www.linkedin.com/in/ellenoor-bok-029096290/"><img src="/images/pngwing.com (2).png"

Tops

Mappenstructuur ziet er goed uit

Goed dat je van comments gebruik maakt

Het is niet netjes om je images geen alt te geven want nu is het niet heel toegankelijk.

Lees meer hierover: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img