Styleguide de Hallen | V1.0

Typography

ITC Avant Garde Gothic

ITC Avant Garde Gothic

    @font-face {
      font-family: "AvantGardeGothicMedium";
      src: url(./fonts/Medium.otf);
    }
              

Headings

Wanneer de achtergrond #0A3250 (--navy), is dan word de tekst #ffffff (--white) en wanneer de achtergrond #ffffff (--white) is, word de tekst #0A3250 (--navy).

               <div class="heading1" > Heading 1 </div>
               <div class="heading2" > Heading 2 </div>

              

                .heading1 {
                  display: flex;
                  justify-content: center;
                  background-color: var(--navy);
                  color: var(--white);
                  padding: 0.5em;
                  font-size: 2.5em;
                  width: 7em;
                }
              

Navigation

Betreft de navigation is het belangrijk dat het deze content bevat. Verder moet het op een wit achtergrond en de hover state in het groen.

            <div class="nav-links">
          <ul>
            <h2>De Buurt<span>campus</span></h2>
            <section class="nav-flexbox">
              <li><a href="">home</a></li>
              <li><a href="">over ons</a></li>
              <li><a href="">contact</a></li>
            </section>
            <li><button class="button-nav">aanmelden</button></li>
          </ul>
        </div>

        

          .nav-links ul li {
              list-style: none;
              text-transform: uppercase;
              display: inline;
              padding: 0.5em 0.75em;
            }

            .nav-links ul li a {
              color: #030202;
              text-decoration: none;
              font-size: 13px;
              display: block;
            }

            .nav-links ul li::after {
              content: "";
              width: 0%;
              height: 2px;
              background: #2aad51;
              display: block;
              margin: auto;
              transition: 0.5s;
            }

            .nav-links ul li:hover::after {
              width: 100%;
            }

            .button-nav {
              width: 10.7em;
              padding: 1em;
              padding-top: 0.9em;
              font-size: 13px;
              text-align: center;
              text-transform: uppercase;
              border-radius: 2.5em;
              border-style: none;
              color: #ffffff;
              background-color: #0a3250;
              cursor: pointer;
              transition: all 0.3s ease-in-out;
            }

         

Buttons

Deze button wordt voor de meest belangrijke actie gebruikt op de pagina.

Deze button is voor de alle overige acties op de pagina.

                  
                  <a href="/index.html" class="button-secundary">
                    Meld je aan 
                  <i class="fa fa-angle-right" aria-hidden="true"></i></a>      

                  <a href="/index.html" class="button-primary">
                    Bekijk meer
                  <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                

                  .button {
                    width: 10.7em;
                    margin: 0.75em 2em;
                    padding: 1em;
                    padding-top: 0.9em;
                    font-size: 1em;
                    text-align: center;
                    border-radius: 2.5em;
                    border-style: none;
                    color: #272932;
                    background-color: #46aa64;
                    cursor: pointer;
                    transition: all 0.3s ease-in-out;
                  }
                

Deze buttons worden gebruikt als een actie (momenteel) niet kan worden uitgevoerd.

                  <a href="/index.html" class="button-disabled"<
                    Bekijk meer
                  <i class="fa fa-angle-right" aria-hidden="true"></i></a>

               

                  .button-disabled {
                    width: 10.7em;
                    margin: 1.75em 2em;
                    padding: 1em;
                    padding-top: 0.9em;
                    font-size: 1em;
                    text-align: center;
                    border-radius: 2.5em;
                    border-style: none;
                    opacity: 50%;
                    color: #272932;
                    background-color: #b3d9bb;
                    cursor: not-allowed;
                  }
                

Icons

Voor de icons gebruiken wij Google Icons. Deze zijn op verschillende manieren te importeren en ze zijn customizeable.

Ook kun je ze downloaden als SVG-bestand en op die manieren importeren.

Images

De Hallen heeft een speciale link met persfoto's die gebruikt mogen worden op de website.

Interactive items

Hover met je muis over deze elements, dan zie je de interactie.

Interactive Navigation

• Home
• Over ons
• Contact

<nav class="header__nav">
    <a href="#">Home</a>
    <a href="#">Over ons</a>
    <a href="#">Contact</a>
<nav/>

.header__nav a:hover {
  color: var(--green);
  scale: 1.1;
  transition: 0.4s;
}

Interactive Links

de-buurtcampus.nl

<a class="buurtcampus-link" href="#">de-buurtcampus.nl</a>

.buurtcampus-link:hover {
  text-decoration: underline;
}

Wil je meer informatie, klik dan hier!

<a class="inline-link" href="#">klik dan hier!</a>

.inline-link:hover {
  text-decoration: underline;
}