36 lines
608 B
Vue
36 lines
608 B
Vue
|
<template>
|
||
|
|
<div class="card project-card">
|
||
|
|
<div class="card-title">
|
||
|
|
<h1>{{name}}</h1>
|
||
|
|
</div>
|
||
|
|
<div class="card-content my-4">
|
||
|
|
<p>{{description}}</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<p><a :href="url">Website</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: [ 'name', 'description', 'url' ],
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.project-card {
|
||
|
|
@apply mx-4 my-4 w-full;
|
||
|
|
}
|
||
|
|
@screen md {
|
||
|
|
.project-card {
|
||
|
|
@apply w-1/2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@screen lg {
|
||
|
|
.project-card {
|
||
|
|
@apply w-1/3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|