verschillende kleuren (#1)

Author: Safae-e

faq.html

@@ -9,25 +9,66 @@
 		<style>
 			/* Schrijf hier gewoon je CSS voor dit component */
 
-			details > p {
+			.item:nth-of-type(1)[open] summary {
+				background-color: rgb(128, 0, 255);
+				width: 270px;
+				border-radius: 8px 8px 0 0;
+				padding: 5px;
+			}
+
+			.item:nth-of-type(1)[open] p {
+				background-color: rgb(128, 0, 255);
 				margin: 0%;
 				border-radius: 0 8px 8px 8px;
 				padding: 5px;
+				margin-bottom: 10px;
+
 			}
 
-			details > summary {
+
+			.item:nth-of-type(2)[open] summary {
+				background-color: rgb(102, 223, 150);
+				width: 270px;
+				border-radius: 8px 8px 0 0;
+				padding: 5px;
+			}
+
+			.item:nth-of-type(2)[open] p {
+				background-color: rgb(102, 223, 150);
+				margin: 0%;
+				border-radius: 0 8px 8px 8px;
+				padding: 5px;
+				margin-bottom: 10px;
+			}
+
+
+			.item:nth-of-type(3)[open] summary {
+				background-color: rgb(239, 235, 105);
 				width: 270px;
 				border-radius: 8px 8px 0 0;
 				padding: 5px;
+			}
+			
+			.item:nth-of-type(3)[open] p {
+				background-color: rgb(239, 235, 105);
+				margin: 0%;
+				border-radius: 0 8px 8px 8px;
+				padding: 5px;
+				margin-bottom: 10px;
+			}
 
+		details > p {
+				margin: 0%;
+				border-radius: 0 8px 8px 8px;
+				padding: 5px;
 			}
-  			
-			details:open > summary,p {
-				background-color:rgb(122, 13, 210) ;
-				margin-top: 15px;
+
+			details > summary {
+				width: 270px;
+				border-radius: 8px 8px 0 0;
+				padding: 5px;
+
 			}
-		
-		
 			/* Hint: Dit component kun je volledig met HTML en CSS bouwen */
 
 			/* Hint: Denk aan de states van het component; deze kan open en dicht zijn */
@@ -37,23 +78,23 @@
 		<h1>Veelgestelde vragen</h1>
 
 
-		<details>
+		<details class="item">
 			<summary>Wat is frontend development?</summary>
 
 			<p>
 				Een frontend developer ontwerpt en bouwt websites in HTML, CSS en JavaScript. Deze frontend talen leer je bij ons, je hebt dus geen voorkennis nodig.
 			</p>
 		</details>
 
-		<details>
+		<details class="item">
 			<summary>Moet ik al kunnen coderen?</summary>
 
 			<p>
 				Nee, je hebt helemaal geen voorkennis nodig om te beginnen aan deze opleiding, we kunnen je alles leren! Als je wel al voorkennis hebt, is dat alleen maar goed, dan kunnen we je helpen je skills te verbeteren en te verdiepen in de stof.
 			</p>
 		</details>
 
-		<details>
+		<details class="item">
 			<summary>Wat is een Associate Degree?</summary>
 
 			<p>

switch.html

@@ -17,44 +17,45 @@
 		      height: 34px;
 		    }
 
-		/* De checkbox */
-		    .switch input {
-		      display: none
-		    }
-		
-		 /* De balk van de switch */
-		    .slider {
-		      position: absolute;
-		      top: 0;
-		      left: 0;
-		      right: 0;
-		      bottom: 0;
-		      background-color: #737272;
-		      border-radius: 34px;
-		    }
-		
-		.slider:before {
-		      position: absolute;
-		      content: "";
-		      height: 26px;
-		      width: 26px;
-		      border-radius: 50%;
-		      left: 4px;
-		      bottom: 4px;
-		      background-color: white;
-		      transition: 0.2s;
-		    }
+			/* De checkbox */
+			    .switch input {
+			      display: none
+			    }
+			
+			 /* De balk van de switch */
+			    .slider {
+			      position: absolute;
+			      top: 0;
+			      left: 0;
+			      right: 0;
+			      bottom: 0;
+			      background-color: #737272;
+			      border-radius: 34px;
+			    }
+			
+				/* Slider rondje */
+				.slider:before {
+			      position: absolute;
+			      content: "";
+			      height: 26px;
+			      width: 26px;
+			      border-radius: 50%;
+			      left: 4px;
+			      bottom: 4px;
+			      background-color: white;
+			      transition: 0.2s;
+			    }
 
-					
-			input:checked + .slider {
-              background-color: #5ee4b1;
-            }
-		
-		 /* Wanneer de knop naar rechts gaat */
-		    input:checked + .slider:before {
-		      transform: translateX(26px);
-		    }
-		
+
+				input:checked + .slider {
+        	      background-color: #5ee4b1;
+        	    }
+			
+			    /* rondje gaat naar rechts */
+			    input:checked + .slider:before {
+			      transform: translateX(26px);
+			    }
+			
 
 					/* Hint: Dit component kun je volledig met HTML en CSS bouwen */