Maak een eigen website van één-pagina (index.html). De inhoud mogen jullie kiezen, bijvoorbeeld een sportclub of
vereniging
. Het is de bedoeling om de inhoud en de vormgeving aan te passen.

Verander de achtergrondkleur en tekstkleuren

Verander de eigenschappen color (tekstkleur) en background-color (achtergrondkleur). Geef ook een leuk lettertype mee voor de headings.

Positionering

In deze oefening staat display:flex centraal. Je plaats elementen naast elkaar.

Leer hier hoe u een soepel scrolleffect kunt creëren.

Bekijk hier het voorbeeld.

Je moet 2 zaken doen om naar een andere plaats binnen dezelfde pagina te springen:

  1. Om te kunnen linken naar een tekst verderop in een pagina, moet die tekst een ankerplaats worden.
    <div class="main" id="section1">
    		
  2. Een link maken: je gooit een anker uit, naar de unieke ankerplaats die je net gemaakt hebt.
    <a href="#section2">Link</a>
    		

De volledige code ziet er zo uit:

<head>
<style>
#section1 {
  height: 100vh;
  overflow:auto;
  background-color: pink;
}

#section2 {
  height: 100vh;
  overflow:auto;
  background-color: yellow;
}
</style>
</head>

<body>

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>


</body>

Je kan met CSS nu ook een soepel scrolleffect creëren.

Bekijk hier het voorbeeld.

html {
  scroll-behavior: smooth;
}

Safari en oudere browsers ondersteunt deze CSS-code nog niet. Hierdoor moeten we jQuery gebruiken:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>
Basis klasse .container
/* opmaak container */
.container {
/* in het midden centreren van de browser */
margin: 0 auto;
border:1px solid black;
}

  Media query voor verschillende groottes
/* media query's = responsive design */
/* hier geef je opmaak mee die specifiek dienen in deze schermgrootte
/* small screen = mobiel */
@media only screen and (min-width: 48em) {
.container {
width: 46rem;
}
}

/* medium screen = tablet en laptop */
@media only screen and (min-width: 62em) {
.container {
width: 61rem;
}
}

/* large screen = desktop */
@media only screen and (min-width: 75em) {
.container {
width: 71rem;
}
}
 
Geef alle elementen
/* zorgt ervoor dat elementen met padding en border de breedte niet wordt opgeteld met de totale breedte */
* {
    box-sizing:border-box;
}
body {
	/* zorgt dat de browser mooi vanuit de linker bovenhoek begint */
    margin:0;
	/* tekstkleur */
	color:black;
	/* letterfamily */
	font-size:16px;
	font-family: Arial,sans-serif;
}