diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 86553c2544de7a0edaae40cbb3e0e49992cbed3f..587ed2ae30af2aa993b65463e86efad4727c62fc 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -30,6 +30,8 @@ label {
margin-top: 5%;
display: flex;
justify-content: space-between;
+ margin-left: 5%;
+ margin-right: 5%;
}
.course-col{
flex-basis: 31%;
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/developers/HeiBra.png b/FullstackProsjekt/src/frontend/src/components/photos/developers/HeiBra.png
new file mode 100644
index 0000000000000000000000000000000000000000..035fd232332d8a1629ee46dfb02594c303717227
Binary files /dev/null and b/FullstackProsjekt/src/frontend/src/components/photos/developers/HeiBra.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/developers/KriKol.png b/FullstackProsjekt/src/frontend/src/components/photos/developers/KriKol.png
new file mode 100644
index 0000000000000000000000000000000000000000..50c6c8365a878a15da26782453e49a094e8883bd
Binary files /dev/null and b/FullstackProsjekt/src/frontend/src/components/photos/developers/KriKol.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png b/FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png
new file mode 100644
index 0000000000000000000000000000000000000000..257608b39fc8906fc063f6e700d13ac803c8c383
Binary files /dev/null and b/FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/developers/TorAnt.png b/FullstackProsjekt/src/frontend/src/components/photos/developers/TorAnt.png
new file mode 100644
index 0000000000000000000000000000000000000000..f84b2fcf4676c88f4b140b6a9f0f078378303c32
Binary files /dev/null and b/FullstackProsjekt/src/frontend/src/components/photos/developers/TorAnt.png differ
diff --git a/FullstackProsjekt/src/frontend/src/views/AboutView.vue b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
index 74dede255c285ad028a918bc3de6d2ac221a3233..909d494df9e140d992e835bf0e304dedcffedf29 100644
--- a/FullstackProsjekt/src/frontend/src/views/AboutView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
@@ -1,13 +1,168 @@
-<script setup>
-import Svg from '../assets/Svg.vue'
-</script>
-
<template>
<body>
- <h1> This is about page</h1>
+ <div class="about-section">
+ <h1>About</h1>
+ <p>Welcome to our quiz web application! We provide a comprehensive and user-friendly platform for creating, managing, and taking quizzes for educational, training, or entertainment purposes.</p>
+ <div class="space"> </div>
+ <h2>Our Features</h2>
+ <div class="columns">
+ <div class="column">
+ <ul>
+ <li>Quiz Creation: Create quizzes with various question types, difficulty levels, and multimedia elements.</li>
+ <li>Tagging and Categorization: Organize your questions with difficulty level and categories.</li>
+ <li>Search and Filter: Quickly find relevant questions based on categories and difficulty levels.</li>
+ <li>Question Management: Add, edit, delete, and organize questions within quizzes.</li>
+ </ul>
+ </div>
+ <div class="column">
+ <ul>
+ <li>Quiz Templates: Use pre-designed or customizable templates for easy quiz creation.</li>
+ <li>Import and Export: Import questions from external sources and export quizzes in various formats.</li>
+ <li>Scoring and Feedback: Automatically score quizzes and provide immediate feedback.</li>
+ <li>Progress Tracking: Track your progress, view past quiz attempts, and monitor performance statistics.</li>
+ <li>Feedback and Support: Provide feedback, report issues, and access customer support.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+
+
+ <h1 class ="our-team" style="text-align:center">Our Team</h1>
+ <div class="row">
+ <div class="column">
+ <div class="card">
+ <img id="logo" src="../components/photos/developers/TorAnt.png" />
+ <div class="container">
+ <h2>Torbjørn Antonsen</h2>
+ <p class="title">Developer</p>
+ <p>2 year Bachelor in Computer Science at NTNU Trondheim </p>
+ <p>torbjorn@ntnu.no</p>
+ <p><button class="button">Contact</button></p>
+ </div>
+ </div>
+ </div>
+
+ <div class="column">
+ <div class="card">
+ <img id="logo" src="../components/photos/developers/HeiBra.png" />
+ <div class="container">
+ <h2>Heine Mærde Brakstad</h2>
+ <p class="title">Developer</p>
+ <p>2 year Bachelor in Computer Science at NTNU Trondheim</p>
+ <p>heine@ntnu.no</p>
+ <p><button class="button">Contact</button></p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="column">
+ <div class="card">
+ <img id="logo" src="../components/photos/developers/KriKol.png" />
+ <div class="container">
+ <h2>Kristiane Skogvang Kolshus</h2>
+ <p class="title">Developer</p>
+ <p>2 year Bachelor in Computer Science at NTNU Trondheim</p>
+ <p>kristiane@ntnu.no</p>
+ <p><button class="button">Contact</button></p>
+ </div>
+ </div>
+ </div>
+
+ <div class="column">
+ <div class="card">
+ <img id="logo" src="../components/photos/developers/MadJon.png" />
+ <div class="container">
+ <h2>Madeleine Stenberg Jonassen</h2>
+ <p class="title">Developer</p>
+ <p>2 year Bachelor in Computer Science at NTNU Trondheim</p>
+ <p>madelesj@ntnu.no</p>
+ <p><button class="button">Contact</button></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
</body>
</template>
+<script>
+export default {
+ name: 'About',
+};
+</script>
+
<style>
+.columns {
+ display: flex;
+ justify-content: space-between;
+}
+
+.column {
+ flex: 1;
+ margin-right: 20px;
+}
+
+.column p{
+ font-size: 14px;
+}
+p {
+ font-size: 20px;
+}
+li{
+ font-size: 16px;
+}
+
+.card {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ margin: 8px;
+}
+
+.about-section {
+ padding: 10vh 10vh 10vh 10vh;
+ text-align: center;
+ background-color: #858A93;
+ color: #242F40;
+}
+.our-team{
+ color: #242F40;
+}
+
+.container {
+ padding: 0 16px;
+ color: #242F40;
+}
+
+.title {
+ color: grey;
+}
+
+.button {
+ border: none;
+ outline: 0;
+ display: inline-block;
+ padding: 8px;
+ color: white;
+ background-color: #363636;
+ text-align: center;
+ cursor: pointer;
+ width: 100%;
+ font-family: monospace;
+}
+
+.button:hover {
+ background-color: #555;
+}
+
+#logo{
+ width: 100%;
+}
-</style>
\ No newline at end of file
+@media screen and (max-width: 650px) {
+ .column {
+ width: 100%;
+ display: block;
+ }
+}
+</style>
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index 2528f9a9c7eba61f767b875f460527d404b84081..59811937eb6c19c54053cce5f3d4f2bc3620ab78 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -73,7 +73,6 @@ export default {
<style>
.loginPage {
padding-top: 85px;
- padding-left: 20px;
display: flex;
justify-content: center;
align-items: center;
@@ -125,4 +124,9 @@ export default {
align-items: center;
}
+@media (max-width: 700px) {
+
+
+}
+
</style>