FMJansen/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

  <head>
  	   <meta charset="utf-8">
    <title>Eerstejaarsweekend 2020</title>
    <link rel="shortcut icon" href="./Images/Logo.png"/> <!-- je hebt hier een ‘trailing slash’ (de / voor >), die hoeft niet -->
     <meta charset="utf-8"> <!-- deze is dubbel! -->
  		<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="./main.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Muli:wght@300;800&display=swap">

  </head>

    <body>

 <img src="./Images/IDpayoffzwartwit.png"; alt="ID logo" height="60" width="auto" vspace="15" hspace="15" class="logo">
<!-- De ; mag hier weg. Officieel mag dat daar niet staan, maar HTML is vrij ‘toelatend’ waardoor er niks kapot gaat. -->
<!-- De vspace en hspace zijn deprecated (dus ze bestonden ooit, maar nu officieel niet meer) dus die mogen weg. -->
<!-- Nice dat je een alt hebt toegevoegd! Hier zijn geen harde regels voor, maar omdat het de afbeelding moet beschrijven als die niet laadt of je een schermlezer gebruikt (bijv. als slechtziende), is iets als ‘Logo ID study association’ misschien nicer, omdat het dan alle tekst ook meeneemt die je anders zou zien. -->

<h1 class= tekst style="position:relative;top:100px" > Eerstejaarsweekend 2020 </h1>
<h1 class= tekst style="position:relative;top:80px" > Industrieel Ontwerpen </h1>
<!-- Twee keer een h1 na elkaar zou ik niet doen, omdat het dan twee losse koppen zijn. Een <h1> en met een <br> tussen de twee regels of <h1> en <p class="subtitle"> eronder zouden beter kloppen met de ‘betekenis’ van die elementen. -->

<p class= hoi style="position:relative;top:80px" > 14 tot 16 augustus 2020 </p>
<p class= doei style="position:relative;top:160px" > Meer info volgt op 20 mei! </p>
<!-- Een class zonder "" er omheen werkt wel, maar is niet ideaal. Als je namelijk classes wil gaan combineren (bijvoorbeeld class="hoi hoi--groot") dan gaat het fout als er geen quotes omheen staan. -->
<!-- Wat er in deze style staat zou je ook in main.css kunnen zetten bij deze class. Dat maakt het als het goed is uiteindelijk overzichtelijker als je website groter wordt. -->


    </body>
</html>

## main.css
/* Het voornaamste: een aantal dingen herhaal je nu terwijl dat niet per se hoeft. Zeker geen ramp, maar hoe meer elementen je hebt, hoe fijner het is om minder te herhalen, want dat houdt het overzichtelijker (en uiteindelijk ook je bestand kleiner en daardoor sneller voor je website-bezoeker, maar dat is zeker nu maar marginaal). */

body {
	background:#395268;
}

.tekst{
	text-align:center; /* Dit zou je bij body kunnen toevoegen. Als je naast je huidige inhoud nog wat anders toevoegt, is het misschien logischer om een <div> of <section> met een bepaalde class (bijv. ‘intro’ of ‘top’) om je huidige inhoud heen te zetten en daar deze regel aan te geven. Dan wordt daarin alles gecentreerd, maar heb je daar voor je andere inhoud geen last van */
  	color: #fff9e6;
  	font-family: 'Muli', sans-serif; /* Dit zou je nu bij de body kunnen toevoegen, omdat je op je hele pagina Muli wil gebruiken, alleen met andere font-weight’s */
    font-weight: 800;
}

.hoi{
	text-align:center;
  	color: #e8cf7b;
  	font-family: 'Muli', sans-serif;
    font-weight: 300;
  	font-size:18px;
}

.doei{
	text-align:center;
  	color: #fff9e6;
  	font-family: 'Muli', sans-serif;
  	font-size:22px;
    font-weight: 300;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Eerstejaarsweekend 2020</title>
	<link rel="shortcut icon" href="./Images/Logo.png"/> <!-- je hebt hier een ‘trailing slash’ (de / voor >), die hoeft niet -->
	<meta charset="utf-8"> <!-- deze is dubbel! -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./main.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Muli:wght@300;800&display=swap">

	</head>

	<body>

	<img src="./Images/IDpayoffzwartwit.png"; alt="ID logo" height="60" width="auto" vspace="15" hspace="15" class="logo">
	<!-- De ; mag hier weg. Officieel mag dat daar niet staan, maar HTML is vrij ‘toelatend’ waardoor er niks kapot gaat. -->
	<!-- De vspace en hspace zijn deprecated (dus ze bestonden ooit, maar nu officieel niet meer) dus die mogen weg. -->
	<!-- Nice dat je een alt hebt toegevoegd! Hier zijn geen harde regels voor, maar omdat het de afbeelding moet beschrijven als die niet laadt of je een schermlezer gebruikt (bijv. als slechtziende), is iets als ‘Logo ID study association’ misschien nicer, omdat het dan alle tekst ook meeneemt die je anders zou zien. -->

	<h1 class= tekst style="position:relative;top:100px" > Eerstejaarsweekend 2020 </h1>
	<h1 class= tekst style="position:relative;top:80px" > Industrieel Ontwerpen </h1>
	<!-- Twee keer een h1 na elkaar zou ik niet doen, omdat het dan twee losse koppen zijn. Een <h1> en met een <br> tussen de twee regels of <h1> en <p class="subtitle"> eronder zouden beter kloppen met de ‘betekenis’ van die elementen. -->

	<p class= hoi style="position:relative;top:80px" > 14 tot 16 augustus 2020 </p>
	<p class= doei style="position:relative;top:160px" > Meer info volgt op 20 mei! </p>
	<!-- Een class zonder "" er omheen werkt wel, maar is niet ideaal. Als je namelijk classes wil gaan combineren (bijvoorbeeld class="hoi hoi--groot") dan gaat het fout als er geen quotes omheen staan. -->
	<!-- Wat er in deze style staat zou je ook in main.css kunnen zetten bij deze class. Dat maakt het als het goed is uiteindelijk overzichtelijker als je website groter wordt. -->


	</body>
	</html>
	/* Het voornaamste: een aantal dingen herhaal je nu terwijl dat niet per se hoeft. Zeker geen ramp, maar hoe meer elementen je hebt, hoe fijner het is om minder te herhalen, want dat houdt het overzichtelijker (en uiteindelijk ook je bestand kleiner en daardoor sneller voor je website-bezoeker, maar dat is zeker nu maar marginaal). */

	body {
	background:#395268;
	}

	.tekst{
	text-align:center; /* Dit zou je bij body kunnen toevoegen. Als je naast je huidige inhoud nog wat anders toevoegt, is het misschien logischer om een <div> of <section> met een bepaalde class (bijv. ‘intro’ of ‘top’) om je huidige inhoud heen te zetten en daar deze regel aan te geven. Dan wordt daarin alles gecentreerd, maar heb je daar voor je andere inhoud geen last van */
	color: #fff9e6;
	font-family: 'Muli', sans-serif; /* Dit zou je nu bij de body kunnen toevoegen, omdat je op je hele pagina Muli wil gebruiken, alleen met andere font-weight’s */
	font-weight: 800;
	}

	.hoi{
	text-align:center;
	color: #e8cf7b;
	font-family: 'Muli', sans-serif;
	font-weight: 300;
	font-size:18px;
	}

	.doei{
	text-align:center;
	color: #fff9e6;
	font-family: 'Muli', sans-serif;
	font-size:22px;
	font-weight: 300;
	}