fdnd-task · M4TThys123 · Jan 14, 2022 · Jan 14, 2022 · Jan 14, 2022 · Jan 14, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,29 +1,82 @@
-> _Fork_ deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
+# FDND Programma
 
-# Titel
-<!-- Geef je project een titel en schrijf in één zin wat het is -->
+Dit is de herontwerp van de fdnd programma website. 
+## 📙 Inhoudsopgave
 
-## Inhoudsopgave
+- [User Story](#beschrijving)
+- [Beschrijving](#beschrijving)
+- [Kenmerken](#kenmerken)
+- [Installatie](#installatie)
+- [Gebruik](#gebruik)
+- [Bronnen](#bronnen)
+- [Licentie](#licentie)
 
-  * [Beschrijving](#beschrijving)
-  * [Kenmerken](#kenmerken)
-  * [Installatie](#installatie)
-  * [Gebruik](#gebruik)
-  * [Bronnen](#bronnen)
-  * [Licentie](#licentie)
+## User Story
+
+De gebruikers van de fdnd website bestaat uit potenciele studenten, fdnd studenten, bestaande partners en potentiële partener. De belanerijkste doen van de gebruiker is het vinden van passende informatie over FDND. Een subdoel is het bekijken/inspireren van gemaakte werk van studenen en het bekijken van het leerprogramma (sprint & semesters).
+
+1: Als potentiële partner wil ik snel kunnen vinden in welke sprint ik het beste kan aansluiten zodat ik een aansluitende opdracht kan bedenken die goed aansluit op de stof van de sprint.
+
+2: Als potentiële student wil ik snel kunnen vinden wat voor soort opdrachten ik ga krijgen op deze opleiding zodat ik een goede keuze kan maken of deze opleiding bij mij past.
+
+3: Als potentiële student wil ik het werk van fdnd studenten kunnen bekijken zodat ik me kan laten inspireren.
+
+4: Als opdrachtgever wil ik dat een herontwerp van de fdnd programma microsite zodat alle gewenste content op de website te vinden is.
+
+5: Als opdrachtgever wil ik dat een herontwerp van de fdnd programma microsite zodat de presentatie van de content overzichtelijk is.
+
+
+
+Is de flow logisch?
+Zijn de intercative element duidelijk?
+Weet een gebruiker wat die moet doen?
 
 ## Beschrijving
+
+[🌐 Live Versie](https://m4tthys123.github.io/the-startup-fdnd-program/)
+
+De opleiding Frontend Development & Design wil een redesign van de program microsite die alle gewenste content bevat, tevens moet de content overzichtelijk zijn. En tenslotte moet de site voldoen aan de huisstijl.
+
 <!-- In de Beschrijving staat hoe je project er uit ziet, hoe het werkt en wat je er mee kan. -->
 <!-- Voeg een mooie poster visual toe 📸 -->
 <!-- Voeg een link toe naar Github Pages 🌐-->
 
 ## Kenmerken
+
+**Tools gebruikt:**
+
+- 💻 Visual Studio Code
+- ✍️ Illustrator
+- 🤳 Photoshop
+- 🖌️ XD
+- ✍️ Pen & Papier
+
+**Code Skills:**
+
+- 💀 HTML5
+- 🧍 CSS3
+- ⚽ JavaScript
 <!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met Javascript gedaan en hoe? Misschien heb je een framwork of library gebruikt? -->
 
 ## Installatie
 
+Installeren met HTTPS
+
+```
+git clone https://github.com/M4TThys123/the-startup-fdnd-program.git
+cd the-startup-fdnd-program
+```
 ## Gebruik
+Installeren met HTTPS
+
+```
+git clone https://github.com/M4TThys123/the-startup-fdnd-program.git
+cd the-startup-fdnd-program
+```
+
+## 📕 Wiki
 
+Link naar de [Wiki](https://github.com/M4TThys123/the-startup-fdnd-program/wiki)
 ## Bronnen
 
 ## Licentie

diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/header-img-2.jpg b/assets/header-img-2.jpg
diff --git a/assets/header-img.jpg b/assets/header-img.jpg
diff --git a/assets/rituelen.png b/assets/rituelen.png
diff --git a/index.html b/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>FDND Programma</title>
+  <meta name="description" content="FDND  Programma; semesters, sprints en thema's">
+
+  <link rel="canonical" href="https://programma.fdnd.nl/">
+  <meta name="robots" content="index, follow">
+
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400&amp;display=swap" rel="stylesheet">
+
+  <link rel="icon" type="image/png" href="https://styleguide.fdnd.nl/favicon.png">
+
+  <meta property="og:title" content="FDND Programma">
+  <meta property="og:description" content="Het programma van de Ad Frontend Design &amp; Development">
+  <meta property="og:site_name" content="programma.fdnd.nl">
+  <meta property="og:url" content="https://programma.fdnd.nl">
+  <meta property="og:type" content="website">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="stylesheet" href="styles/swiper-bundle.min.css">
+  <link rel="stylesheet" href="https://styleguide.fdnd.nl/fdnd.css?_cacheOverride=1643369775769">
+  <link rel="stylesheet" href="styles/style.css">
+</head>
+<body id="top">
+
+  <header>
+    <h1><abbr title="Frontend Design & Development"><span>FDND</span></abbr> <span>Programma</span></h1>
+  </header>
+
+  <main class="expand">
+    <section class="semester">
+      <h2>Semesters & sprints</h2>
+
+      <p>Het programma van FDND bestaat uit 4 semesters. Semester 1, 2 en 3 bestaan ieder uit 6 sprints. Ieder sprint heeft een eigen thema, waarin bijpassende opdrachten/leertaken worden aangeboden. Het 4e semester bestaat uit een einproject en vrije invulling.</p>
+    </section>
+
+    <article class="het-statische-web">
+      <h2>Het statische web</h2>
+
+      <div class="static__container">
+        <div class="swiper mySwiper">
+          <div class="swiper-wrapper">
+            <article class="static__card swiper-slide">
+              <a>Sprint 1 - Your Tribe</a>
+              <p>
+                De focus in deze sprint ligt op kennismaken, samenwerken en hoe je interface en vormgevingsprincipes kan toepassen voor een responsive design.
+              </p>
+              <section class="static__tags">
+                <span>Flexbox</span>
+                <span>Github</span>
+                <span>Responsive Design</span>
+              </section>
+            </article>
+
+            <article class="static__card swiper-slide">
+              <a> Sprint 2 - The Client </a>
+              <p>
+                De focus van deze sprint ligt op het maken van een opdracht voor een opdrachtgever en het presenteren van het resultaat.
+              </p>
+              <section class="static__tags">
+                <span>Debriefing</span>
+                <span>Styleguide</span>
+                <span>Visual Thinking</span>
+              </section>
+            </article>
+
+            <article class="static__card swiper-slide">
+              <a>Sprint 3 - All Human</a>
+              <p>
+                De focus van deze sprint ligt op het maken van een opdracht voor een opdrachtgever en het presenteren van het resultaat.
+              </p>
+              <section class="static__tags">
+                <span>Accessibillity</span>
+                <span>A11y Checklist</span>
+                <span>Usability Lab</span>
+              </section>
+            </article>
+
+
+            <article class="static__card swiper-slide">
+              <a>Sprint 4 - The Campaign</a>
+              <p>
+                De focus van deze sprint ligt op het toepassen van een huisstijl en maken van formulieren.              </p>
+              <section class="static__tags">
+                <span>Living Styleguides</span>
+                <span>WebGL & Three.js</span>
+                <span>Sketchnoting</span>
+              </section>
+            </article>
+
+            <article class="static__card swiper-slide">
+              <a>Sprint 5 - Fix the Flow</a>
+              <p>
+                De focus van deze sprint ligt op navigatie en informatie architectuur van een website.              </p>
+              <section class="static__tags">
+                <span>Navigeren</span>
+                <span>Filteren & Sorteren</span>
+                <span>Formulieren</span>
+              </section>
+            </article>
+
+            <article class="static__card swiper-slide">
+              <a>Sprint 6 - The Startup</a>
+              <p>
+                De focus van deze sprint ligt op werkwijze en samenwerken, en hoe je een opdrachtgever kan helpen.     
+              </p>  
+              <section class="static__tags">  
+                <span>Navigeren</span>
+                <span>Filteren & Sorteren</span>
+                <span>Formulieren</span>
+              </section>
+            </article>
+          </div>
+
+          <div class="swiper-button-next"></div>
+          <div class="swiper-button-prev"></div>
+          <div class="swiper-pagination"></div>
+        </div>
+
+      </div>
+    </article>
+
+
+    <section id="opdrachten-leertraken">
+      <h2>Samenwerken in de sprints</h2>
+
+      <h3>Opdrachten</h3>
+      <p>
+        Samen met de opdrachtgever vertalen we opdrachten naar leertaken. Student kiezen gedurende een sprint aan welke taken zijn gaan werken:
+      </p>
+      <p>
+        <a href="https://tasks.fdnd.nl" class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path>
+            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path>
+          </svg>Bekijk het overzicht van leertaken
+        </a>
+      </p>
+
+
+      <h3>Rituelen</h3>
+      <p>
+        Tijdens de sprint voeren de opdrachtgevers en studenten een aantal vaste rituelen uit.
+      </p>
+      <figure>
+        <img src="./assets/rituelen.png" alt="Rituelen bij het werken aan opdrachten tijdens een sprint">
+        <figcaption>Rituelen bij het werken aan opdrachten tijdens een sprint.</figcaption>
+      </figure>
+      <p>
+        <a href="https://rituelen.fdnd.nl" class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path>
+            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path>
+          </svg>
+          Lees meer over de rituelen
+        </a>
+      </p>
+    </section>
+  </main>
+
+  <footer>
+    <nav>
+      <h2>FDND microsites</h2>
+      <p>
+        FDND maakt gebruik van microsites. 
+        Microsites zijn kleine websites ter ondersteuning van een campagne, informatie over een product, dienst of voor een ander specifiek doel. 
+      </p>
+      <ul>
+        <li><a href="https://fdnd.nl">FDND.nl</a></li>
+        <li><a href="https://contact.fdnd.nl">Contact en routebeschrijving</a></li>
+        <li><a href="https://programma.fdnd.nl">Programma</a></li>
+        <li><a href="https://skc.fdnd.nl">Studie Keuze Check</a></li>
+        <li><a href="https://partners.fdnd.nl">Partners</a></li>
+        <li><a href="https://tasks.fdnd.nl">Leertaken</a></li>
+        <li><a href="https://styleguide.fdnd.nl">Styleguide</a></li>
+      </ul>
+    </nav>
+  </footer>
+
+  <script src="scripts/swiper-bundle.min.js"></script>
+  <script src="scripts/main.js"></script>
+</body>
+</html>
diff --git a/scripts/main.js b/scripts/main.js
@@ -0,0 +1,31 @@
+// STATIC SWIPER
+var swiper = new Swiper(".mySwiper", {
+    slidesPerView: 1,
+    spaceBetween: 10,
+    // loop: true,
+    // centeredSlides: true,
+    loopFillGroupWithBlank: true,
+
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    breakpoints: {
+        640: {
+          slidesPerView: 2,
+          spaceBetween: 20,
+        },
+        768: {
+          slidesPerView: 3,
+          spaceBetween: 40,
+        },
+        // 1024: {
+        //   slidesPerView: 5,
+        //   spaceBetween: 50,
+        // },
+      },
+  });
diff --git a/scripts/swiper-bundle.min.js b/scripts/swiper-bundle.min.js