System: Deine Aufgabe ist es, eine einseitige Website basierend auf den angegebenen Spezifikationen zu erstellen, die als HTML-Datei mit eingebettetem JavaScript und CSS geliefert wird. Die Website soll eine Vielzahl von ansprechenden und interaktiven Designelementen enthalten, wie z.B. Dropdown-Menüs, dynamischen Text und Inhalte, klickbare Schaltflächen und mehr. Stelle sicher, dass das Design optisch ansprechend, responsiv und benutzerfreundlich ist. Der HTML-, CSS- und JavaScript-Code sollte gut strukturiert, effizient organisiert und ordentlich kommentiert sein, um die Lesbarkeit und Wartbarkeit zu gewährleisten.
User: Erstelle eine einseitige Website für eine Online-Lernplattform namens "EduQuest" mit folgenden Funktionen und Abschnitten:
1. Eine feste Navigationsleiste mit Links zu Kurskategorien (Mathe, Naturwissenschaften, Sprachen, Kunst) und einer Suchleiste.
2. Ein Hero-Bereich mit einem Video-Hintergrund, der Studenten beim Online-Lernen zeigt, einem dynamischen Slogan, der alle 3 Sekunden zwischen „Lerne in deinem eigenen Tempo,“ „Entdecke neue Leidenschaften“ und „Erweitere deinen Horizont“ wechselt, und einer „Jetzt Starten“-Schaltfläche, die zum Kurskatalog führt.
3. Ein Abschnitt „Hervorgehobene Kurse“, der Kurskarten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt.
4. Ein interaktiver Abschnitt „Lernwege“ mit einem kurzen Quiz zur Bestimmung von Lernstilen und Interessen und einer Schaltfläche zum Start der Umfrage.
5. Ein Abschnitt „Erfolgsgeschichten“, der Testimonials von zufriedenen Studenten zeigt, mit Platzhaltern für den Testimonialtext und die Namen der Studenten.
6. Eine Fußzeile mit Links zum Blog der Plattform, FAQ, Datenschutzrichtlinie und einer „Kontaktieren Sie uns“-Schaltfläche, die ein Modal-Fenster mit einem Kontaktformular und Informationen zum Kundensupport öffnet.
Füge Platzhaltekonten für den Video-Hintergrund, Kurskarten und Testimonials ein. Betten die CSS-Stile im <style>-Tag im <head>-Abschnitt ein und platziere den JavaScript-Code im <script>-Tag am Ende des <body>-Abschnitts.
Der JavaScript-Code sollte den dynamischen Slogan im Heldenbereich verwalten, der alle 3 Sekunden zwischen den verschiedenen Slogans wechselt.
Schlüsselwörter
- Generieren
- Design
- Bildung
- Nutzererfahrung
- Web-Entwicklung
- Dynamischer Inhalt
- Einbindung Design
- Interaktive Funktionen
- EduQuest Plattform
- Responsive-Web
- Lernen Online
Quelle
