Bouwen - amirdev98/look-and-feel-living-styleguide GitHub Wiki

Het bouwen in code wat best wel makkelijk, ik moest alleen maar een voorbeeld van een link maken, van wanner hij wordt gehoverd en wanner hij gewoon statisch was.

Image van de links styleguide

Screenshot 2023-03-18 at 15 37 07 * 🌐[Link](https://styleguide-vervoerregioamsterdam.student.fdnd.nl/links) naar `links` pagina

HTML code van de styleguide

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vervoerregio Amsterdam living styleguide -</title>
    <link rel="stylesheet" href="../links.css" />
  
  </head>
  <body>
    <header>
      <h1>Vervoerregio Amsterdam styleguide</h1>
    </header>
   
 <section class="container">
 <h1>Hoe links er uit moeten zien</h1>
 <h2>Normal state</h2>
 <!-- link states -->
  <ul>
    <li><a class="link" href="#waarneembaar">Waarneembaar</a></li>

  </ul>
  <h1>Hover state</h1>
  <ul>
    <li><a class="hoverstate" href="#waarneembaar">Waarneembaar</a></li>
   
  </ul>

      </section>
   
  </body>
</html>

CSS code dat dat ik heb geschreven in de eerste week:

CSS code

/* ROOT */
:root {
  --charcoal: #282a35;
  --light-green: #d9eee1;
 
  --light-rose: #f3ecea;
  --light-blue: #96d4d4;

  --magenta: #b9005f;

  --black: #000;
  --white: #fff;

  --nav-color: #fff;
  --header-color: #606EB3;
  --body-color: #fadce8;
}
* {
  margin: 100px;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;

  font-family: "Roboto", sans-serif;
}




body {
  background-color: var(--body-color);
  display: grid-col 1fr, 1fr;
}

CSS code dat ik heb geschreven in de tweede week:

li {
  list-style: none;
}

  .link {
  color: var(--black);
  font-size: 20px;
  font-weight: bold;
}

.hoverstate{
  color: var(--magenta);
  font-size: 20px;
  font-weight: bold;
}


a:hover {
  color: var(--magenta);
}
⚠️ **GitHub.com Fallback** ⚠️