fdnd-task · miel775 · Sep 12, 2024 · Sep 13, 2024 · Sep 13, 2024 · Sep 13, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/1. Cafe Fest.mp4 b/1. Cafe Fest.mp4
diff --git a/2. Uitzicht_1.mp4 b/2. Uitzicht_1.mp4
diff --git a/215697_small.mp4 b/215697_small.mp4
diff --git a/3. Winkel.mp4 b/3. Winkel.mp4
diff --git a/4. Lokaal Huren.mp4 b/4. Lokaal Huren.mp4
diff --git a/5. Trappenhuis.mp4 b/5. Trappenhuis.mp4
diff --git a/6. Aquarium.mp4 b/6. Aquarium.mp4
diff --git a/Illustrator/1x/Artboard 1.png b/Illustrator/1x/Artboard 1.png
diff --git a/Illustrator/illu map hva.ai b/Illustrator/illu map hva.ai
diff --git a/README.md b/README.md
@@ -1,10 +1,128 @@
+# Squad Page RMR
 
-# Squad page
+Dit is het ontwerp van de squad page gemaakt door Renzo, Miel en Riley.
 
-Ontwerp en maak met een team een Squad Page met HTML, CSS en JS.
+## Inhoudsopgave
 
-De instructie van deze leertaak staan in de [INSTRUCTIONS.md](https://github.com/fdnd-task/your-tribe-squad-page/blob/main/docs/INSTRUCTIONS.md)
+  * [Beschrijving](#beschrijving)
+  * [Gebruik](#gebruik)
+  * [Kenmerken](#kenmerken)
+  * [Bronnen](#bronnen)
+  * [Licentie](#licentie)
 
+## Beschrijving
+
+Voor Sprint 1 is er de opdracht gegeven om een Squad Page te ontwerpen in groepen van drie personen. De reden voor deze Squad Page is om de visitekaartjes en interessante plekken op de Amstel Campus te laten zien op een interactieve manier.
+
+Met behulp van foto's is er laten zien wat onze gedachtegang was tijdens dit project en welke ontwerpen er zijn gemaakt. 
+
+De pagina is responsive ontworpen en dus bereikbaar voor mobiele, tablet, en desktop gebruikers. 
+
+Hier staat de website: https://renzowille.github.io/squad-page-rmr/finalindex.html
+
+<img width="1439" alt="squadpage" src="https://github.com/user-attachments/assets/b17df2d0-29f7-4fb2-a3b5-435c5b91b696">
+
+_Layout van de homepage_
+
+
+
+## Gebruik
+
+De Squad Page kan op deze manier gebruikt worden: 
+
+KLik op de foto van de persoon van wiens visitekaartje je wilt zien, dit brengt je naar een ander tablad waar je het visitekaartje kan zien en gebruiken. Zoals je ziet, zijn alle foto's in een carousel gezet waardoor de doorloop makkelijk en clean is. Hover over een foto, en de carousel stopt met draaien voor een optimale gebruikservaring.
+
+Voor de map van de Amstel Campus, hover over een punt op de kaart om meer informatie te kunnen zien over een interessante plek op de campus waar gewerkt kan worden.
+
+## dingen waar we tegen aan liepen
+
+Gebaseerd op onze schets was heel snel duidelijk voor ons dat we een bewegende achtergrond wilde om wat extra effect te creëren. Dat was gelukt door middel van een video als achtergrond te zetten maar we kwamen er al snel dat niet alle browsers de video’s registreren als achtergronden waardoor de conclusie al snel getrokken kon worden dat niet iedereen de vid zou kunnen zien als achtergrond, we hebben hiervoor een oplossing bedacht waarbij wij een screenshot hebben gemaakt van de video en die in onze code achter de video hebben geplakt. Op deze manier hebben gebruikers waarvan hun browsers niet de video kunnen ondersteunen nog steeds hetzelfde design als gebruikers waarbij hun browsers wel de video kunnen ondersteunen.
+
+ ```html
+       <video playsinline autoplay muted loop poster="image.png" id="bgvid">
+        <source src="215697_small.mp4" type="video/mp4">
+      </video>
+
+  ```
+
+
+### Visitekaartjes
+
+
+<img width="1440" alt="Schermafbeelding 2024-09-19 om 10 43 08" src="https://github.com/user-attachments/assets/21fa9bef-c3ab-4146-a3d5-46ce249219dd">
+
+
+### Amstel Campus
+
+We hebben ook de amstel campus map toegevoegd aan onze website. We hebben een leuke functie toegevoegd waar de gebouwen in de zero state blauwe puntjes zijn , met een hover hebben we kunnen creëren dat zodra je met je curser over een van de blauwe puntjes gaat informatie te voorverschijn komt over wat voor gebouw op die plek staat etc. Op deze manier word de gebruiker niet overvallen met veel informatie maar kan de gebruiker zelf bepalen wat voor informatie op dat moment willen zien.
+
+<img width='1440' alt='schermafbeelding' src='https://github.com/RenzoWille/squad-page-rmr/blob/main/Screenshot%202024-09-20%20084119.png?raw=true'>
+
+
+
+## Kenmerken
+
+De website is gebouwd met [HTML](#html) en [CSS](#CSS), en [JavaScript](#JavaScript).
+
+### HTML
+
+Hieronder staat de basis structuur uitgelegd met de setting in de [HEAD](#HEAD) en opmaak van de [BODY](#BODY):
+
+#### HEAD
+
+  In de `<head>` worden twee CSS file geladen. De algemene styleguide met basis settings en kleuren. 
+  En een local CSS file met specifieke styling voor deze pagina. 
+  ```html
+<link rel="stylesheet" href="finalstyles.css">   
+  ```
+
+#### BODY
+
+  De structuur van de body is [HEADER](#HEADER), [CAROUSEL](#CAROUSEL): 
+
+  ##### HEADER
+  In de header staat de H1 titel.
+
+  ##### CAROUSEL
+  In de carousel staan de verschillende classes de squad page aan moet voldoen om de carousel werkend te maken. Dit wordt gedaan door: 
+ ```html
+       <div class="carousel">
+        <div class="carousel-wrapper">
+            <div class="carousel-slide">
+  ```
+
+### CSS
+
+In de CSS staat een `carousel-slide;` op de html voor een animatie wanneer de pagina wordt ingeladen dat de carousel naar links blijft bewegen door de carousel leven in te blazen.
+
+```css
+     .carousel-slide {
+    display: flex;
+    flex: 1 0 calc(100% / 33); /* Elke afbeelding neemt 1/33 van de wrapper */
+    margin-right: 20px;
+}
+```
+### JavaScript
+
+In de JavaScript staat de 'carousel-slide' toepassing die zorgt dat de carousel draait.
+
+(foto van JavaScript)
+
+Bij de achtergrond van de tweede pagina zijn sterren op de achtergrond toegepast. Deze sterren staan elke keer op een andere plek doordat de functie 'random' is gebruikt.
+
+<img width='1440' alt='schermafbeelding' src='https://github.com/RenzoWille/squad-page-rmr/blob/main/Screenshot%202024-09-20%20084449.png?raw=true)'>
+
+
+## Bronnen 
+
+Renzo: https://renzowille.github.io/squad-page-rmr/indexrenzo.html
+Riley: https://renzowille.github.io/squad-page-rmr/docs/index.html
+Miel: https://renzowille.github.io/squad-page-rmr/indexMiel.html
+
+Final:
+
+
+
 ## Licentie
 
 This project is licensed under the terms of the [MIT license](./LICENSE).
diff --git a/Screenshot 2024-09-20 084119.png b/Screenshot 2024-09-20 084119.png
diff --git a/Screenshot 2024-09-20 084449.png b/Screenshot 2024-09-20 084449.png
diff --git a/Squad1H-Anouar.JPG b/Squad1H-Anouar.JPG
diff --git a/Squad1H-Anouk.JPG b/Squad1H-Anouk.JPG
diff --git a/Squad1H-Aria.JPG b/Squad1H-Aria.JPG
diff --git a/Squad1H-Arman.JPG b/Squad1H-Arman.JPG
diff --git a/Squad1H-Daan.JPG b/Squad1H-Daan.JPG
diff --git a/Squad1H-Finn.JPG b/Squad1H-Finn.JPG
diff --git a/Squad1H-Kai.JPG b/Squad1H-Kai.JPG
diff --git a/Squad1H-Kate.JPG b/Squad1H-Kate.JPG
diff --git a/Squad1H-Kerem.JPG b/Squad1H-Kerem.JPG
diff --git a/Squad1H-Kyan.JPG b/Squad1H-Kyan.JPG
diff --git a/Squad1H-Luuk-2.JPG b/Squad1H-Luuk-2.JPG
diff --git a/Squad1H-Luuk.JPG b/Squad1H-Luuk.JPG
diff --git a/Squad1H-Marije.JPG b/Squad1H-Marije.JPG
diff --git a/Squad1H-Miel (1).JPG b/Squad1H-Miel (1).JPG
diff --git a/Squad1H-Miel.JPG b/Squad1H-Miel.JPG
diff --git a/Squad1H-Mkiyas.JPG b/Squad1H-Mkiyas.JPG
diff --git a/Squad1H-Nawal.JPG b/Squad1H-Nawal.JPG
diff --git a/Squad1H-Nayome.JPG b/Squad1H-Nayome.JPG
diff --git a/Squad1H-Rapha.JPG b/Squad1H-Rapha.JPG
diff --git a/Squad1H-Renzo.JPG b/Squad1H-Renzo.JPG
diff --git a/Squad1H-Reyhan.JPG b/Squad1H-Reyhan.JPG
diff --git a/Squad1H-Rick.JPG b/Squad1H-Rick.JPG
diff --git a/Squad1H-Riley.JPG b/Squad1H-Riley.JPG
diff --git a/Squad1H-Safoe.JPG b/Squad1H-Safoe.JPG
diff --git a/Squad1H-Sascha.JPG b/Squad1H-Sascha.JPG
diff --git a/Squad1H-Sebastiaan-2.JPG b/Squad1H-Sebastiaan-2.JPG
diff --git a/Squad1H-Sebastiaan.JPG b/Squad1H-Sebastiaan.JPG
diff --git a/Squad1H-Senne.JPG b/Squad1H-Senne.JPG
diff --git a/Squad1H-Sidney.JPG b/Squad1H-Sidney.JPG
diff --git a/Squad1H-Sjors.JPG b/Squad1H-Sjors.JPG
diff --git a/Squad1H-Stella.JPG b/Squad1H-Stella.JPG
diff --git a/amstelcampus.png b/amstelcampus.png
diff --git a/amstelcampuss.png b/amstelcampuss.png
diff --git a/assets/Squad1H-Anouar.JPG b/assets/Squad1H-Anouar.JPG
diff --git a/assets/Squad1H-Anouk.JPG b/assets/Squad1H-Anouk.JPG
diff --git a/assets/Squad1H-Aria.JPG b/assets/Squad1H-Aria.JPG
diff --git a/assets/Squad1H-Arman.JPG b/assets/Squad1H-Arman.JPG
diff --git a/assets/Squad1H-Daan.JPG b/assets/Squad1H-Daan.JPG
diff --git a/assets/Squad1H-Finn.JPG b/assets/Squad1H-Finn.JPG
diff --git a/assets/Squad1H-Kai.JPG b/assets/Squad1H-Kai.JPG
diff --git a/assets/Squad1H-Kate.JPG b/assets/Squad1H-Kate.JPG
diff --git a/assets/Squad1H-Kerem.JPG b/assets/Squad1H-Kerem.JPG
diff --git a/assets/Squad1H-Kyan.JPG b/assets/Squad1H-Kyan.JPG
diff --git a/assets/Squad1H-Luuk-2.JPG b/assets/Squad1H-Luuk-2.JPG
diff --git a/assets/Squad1H-Luuk.JPG b/assets/Squad1H-Luuk.JPG
diff --git a/assets/Squad1H-Marije.JPG b/assets/Squad1H-Marije.JPG
diff --git a/assets/Squad1H-Miel.JPG b/assets/Squad1H-Miel.JPG
diff --git a/assets/Squad1H-Mkiyas.JPG b/assets/Squad1H-Mkiyas.JPG
diff --git a/assets/Squad1H-Nawal.JPG b/assets/Squad1H-Nawal.JPG
diff --git a/assets/Squad1H-Nayome.JPG b/assets/Squad1H-Nayome.JPG
diff --git a/assets/Squad1H-Rapha.JPG b/assets/Squad1H-Rapha.JPG
diff --git a/assets/Squad1H-Renzo.JPG b/assets/Squad1H-Renzo.JPG
diff --git a/assets/Squad1H-Reyhan.JPG b/assets/Squad1H-Reyhan.JPG
diff --git a/assets/Squad1H-Rick.JPG b/assets/Squad1H-Rick.JPG
diff --git a/assets/Squad1H-Riley.JPG b/assets/Squad1H-Riley.JPG
diff --git a/assets/Squad1H-Safoe.JPG b/assets/Squad1H-Safoe.JPG
diff --git a/assets/Squad1H-Sascha.JPG b/assets/Squad1H-Sascha.JPG
diff --git a/assets/Squad1H-Sebastiaan-2.JPG b/assets/Squad1H-Sebastiaan-2.JPG
diff --git a/assets/Squad1H-Sebastiaan.JPG b/assets/Squad1H-Sebastiaan.JPG
diff --git a/assets/Squad1H-Senne.JPG b/assets/Squad1H-Senne.JPG
diff --git a/assets/Squad1H-Sidney.JPG b/assets/Squad1H-Sidney.JPG
diff --git a/assets/Squad1H-Sjors.JPG b/assets/Squad1H-Sjors.JPG
diff --git a/assets/Squad1H-Stella.JPG b/assets/Squad1H-Stella.JPG
diff --git a/assets/Squad1H-Suleyman.JPG b/assets/Squad1H-Suleyman.JPG
diff --git a/assets/Squad1H-Tessa.JPG b/assets/Squad1H-Tessa.JPG
diff --git a/assets/Squad1H-Yamen.JPG b/assets/Squad1H-Yamen.JPG
diff --git a/assets/illu map hva-01.png b/assets/illu map hva-01.png
diff --git a/assets/space-background.jpg b/assets/space-background.jpg
diff --git a/button down.png b/button down.png
diff --git a/button.png b/button.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colorful Circles Background</title>
+    <!-- Link to CSS file -->
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Background Circles -->
+    <div class="circle circle1"></div>
+    <div class="circle circle2"></div>
+    <div class="circle circle3"></div>
+    <div class="circle circle4"></div>
+    <div class="circle circle5"></div>
+
+    <!-- Header Section -->
+    <header>
+        <h1>FDND squad page</h1>
+    </header>
+
+    <!-- Main Content Section -->
+    <main>
+        <p>Meet our squad.</p>
+    </main>
+
+    <!-- Footer Section -->
+    <footer>
+        <p>&copy; 2024 FDND program. All rights reserved.</p>
+    </footer>
+</body>
+</html>
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,91 @@
+/* Reset default browser styling */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Set the background color of the entire page to white */
+body {
+    background-color: white;
+    color: #333; /* Default text color */
+    font-family: Arial, sans-serif;
+    padding: 20px;
+    overflow-x: hidden; /* Prevent horizontal scroll */
+    position: relative; /* To position the background circles */
+}
+
+/* Header styling */
+header {
+    text-align: center;
+    margin-bottom: 40px;
+    z-index: 10; /* Higher z-index to ensure it stays above the circles */
+    position: relative; /* Relative positioning to keep it above the circles */
+}
+
+/* Main content styling */
+main {
+    text-align: center;
+    margin-bottom: 40px;
+    z-index: 10; /* Higher z-index to ensure it stays above the circles */
+    position: relative; /* Relative positioning to keep it above the circles */
+}
+
+/* Footer styling */
+footer {
+    text-align: center;
+    margin-top: 40px;
+    font-size: 0.9em;
+    color: #666;
+    z-index: 10; /* Higher z-index to ensure it stays above the circles */
+    position: relative; /* Relative positioning to keep it above the circles */
+}
+
+/* Circle styles */
+.circle {
+    position: fixed; /* Fixed to stay visible while scrolling */
+    border-radius: 50%;
+    z-index: 1; /* Lower z-index to stay behind other content */
+    opacity: 0.5; /* Slight transparency for a soft look */
+}
+
+/* Specific circles with different sizes and colors */
+.circle1 {
+    width: 300px;
+    height: 300px;
+    background-color: #a2d5f2; /* Pastel blue */
+    top: 10%;
+    left: 5%;
+}
+
+.circle2 {
+    width: 500px;
+    height: 500px;
+    background-color: #c4aedb; /* Pastel purple */
+    top: 50%;
+    left: 15%;
+}
+
+.circle3 {
+    width: 150px;
+    height: 150px;
+    background-color: #b1e5d3; /* Pastel green */
+    top: 30%;
+    left: 75%;
+}
+
+.circle4 {
+    width: 100px;
+    height: 100px;
+    background-color: #d4b5ff; /* Another pastel purple */
+    top: 75%;
+    left: 80%;
+}
+
+.circle5 {
+    width: 200px;
+    height: 200px;
+    background-color: #f3d5b5; /* Pastel peach */
+    top: 20%;
+    left: 50%;
+}