challenge 3

docs/challenge_gradients.md

@@ -0,0 +1,68 @@
+[← overzicht](CHALLENGES.md)
+
+---
+
+# CSS challenge 3: Gradients
+
+🗓️ ⸺ **Dinsdag 24 september**  
+⏰ ⸺ **9:30 - ca 11:30 uur**  
+🙋 ⸺ even aanmelden - max 24  
+
+📗 ⸺
+<a href="pres/FDND-2425-CSSchallenge3-Gradients-intro.pdf" target="_blank" rel="noopener noreferrer">Gradients intro</a> 
+(pdf 11MB)  
+📗 ⸺
+<a href="pres//FDND-2425-CSSchallenge3-Custom-properties-intro.pdf" target="_blank" rel="noopener noreferrer">Custom properties intro</a> 
+(pdf)  
+
+---
+
+## Oefening 1: 🤝 meet the properties
+
+📊 ⸺ 🔵
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge3-Gradients-oefening1.pdf" target="_blank" rel="noopener noreferrer">Gradients oefening 1</a> 
+(pdf)
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/oNrKpXb" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/YzomYXG" target="_blank" rel="noopener noreferrer">Uitwerking</a>
+(CodePen)
+
+niet meteen spieken 🫣  
+
+---
+
+## Oefening 2: 🧊 Gradients galore
+
+📊 ⸺ 🔵 🔴 ⚫️
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge2-transform-transition-oefening2.pdf" target="_blank" rel="noopener noreferrer">Transform & Transition oefening 2</a> 
+(pdf)  
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/xxoBNBK" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/live/eYwqyJo" target="_blank" rel="noopener noreferrer">Voorbeeld</a>
+(CodePen)  
+
+---
+
+## Links
+
+🎯 ⸺ [A single div](https://a.singlediv.com/) (Lynn Fisher 👸)  
+🎯 ⸺ [CSS patterns](https://projects.verou.me/css3patterns/) (Lea Verou 👸)  
+🎯 ⸺ [CSS patterns](https://css-pattern.com/) (Afif Temani 🤴)  
+🎯 ⸺ [Gradient Generator](https://cssgradient.io/) (www 🧰)  
+
+🎯 ⸺ [Linear](developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) (MDN 🦊)  
+🎯 ⸺ [Repeating-linear](developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient) (MDN 🦊)   
+🎯 ⸺ [Radial](developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) (MDN 🦊)  
+🎯 ⸺ [Repeating-radial](developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-radial-gradient) (MDN 🦊)  
+🎯 ⸺ [Conic](developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient) (MDN 🦊)  
+🎯 ⸺ [Repeating-conic](developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient) (MDN 🦊)