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;
}
}
 

lightbox2

We gaan je afbeeldingen in een grote versie weergeven via een popup-venster

CSS linken

Plaats deze koppeling binnen je <head>-tag 

	<link href="css/lightbox.css" rel="stylesheet" />

Javascript linken

Plaats deze koppeling boven je eind tag </body> 

	<link href="css/javascript.css" rel="stylesheet" />

Image attribuut

Het attribuut data-lightbox="gallerij" zorgt voor de werking. Als je dezelfde naam geeft werk je in groep en zie je pijltjes volgende en vorige verschijnen. 

	<a href="images/image-1.jpg" data-lightbox="gallerij" data-title="My caption"> <img src="images/image-1.jpg" /> </a>
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;
}