New route and schoolDisplay.vue

src/components/education/schoolDisplay.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="school_display">
+        <div class="school_picture">
+            <img :src="img"/>
+        </div>
+
+        <div class="school_info">
+            <p class="school_name">{{ name }}</p>
+            <p class="school_about">{{ desc }}</p>
+            <a :href="link" v-if="link!=undefined"><button class="button">Website</button></a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    defineProps({
+        name:{
+            type:String,
+            required:true
+        },
+        desc:{
+            type:String,
+            required:true
+        },
+        img:{
+            type:String,
+            required:true
+        },
+        link:{
+            type:String,
+            required:false
+        }
+    })
+</script>
+
+<style scoped>
+    .school_display{
+        width: 100%; /*Should be in a <article> covering 80% of vw*/
+        max-width: 1000px;
+        background-color: rgb(61, 61, 61);
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        /*align-items: center;*/
+        justify-content: center;
+    }
+
+    .school_picture{
+        width: fit-content;
+        height: fit-content;
+        flex: 1 1 30%;
+        margin: 15px;
+        overflow: hidden;
+    }
+    .school_picture img{
+        width: 100%;
+    }
+
+    .school_info{
+        height: 80%;
+        width: 60%;
+        margin-left: 10px;
+        margin-right: 10px;
+        display: flex;
+        flex-direction: column;
+    }
+    .school_name{
+        font-size: 1.5em;
+        margin-top: 15px;
+        margin-bottom: 5px;
+    }
+    .school_about{
+        margin: 0;
+    }
+    .school_info button{
+        margin-top: 15px;
+        margin-block: 15px;
+        background-color: rgb(51, 143, 230);
+        font-size: 1.1em;
+        width: 150px;
+        color:black;
+    }
+</style>