404page
Suvodip Ghosh
parent
057ad51a3b
commit
e84ab39dca
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container-fluid z-0 " style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
|
||||
<div class="astronaut flex place-items-center justify-center pt-8">
|
||||
<img src="https://images.vexels.com/media/users/3/152639/isolated/preview/506b575739e90613428cdb399175e2c8-space-astronaut-cartoon-by-vexels.png" alt="" class="src">
|
||||
</div>
|
||||
<div class="flex justify-center place-items-center">
|
||||
<div class="text-color-1 text-4xl pb-28 font-bold star"> <p class="text-center">ERROR: 404 - Page Not Found</p> </div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="container mx-auto">
|
||||
<h1 class="text-4xl text-color-1 font-semibold text-center p-6">Curriculum Blog</h1>
|
||||
<div class="p-5">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
|
||||
<div v-for="(item, index) in tbBlog" class="shadow-md rounded p-2 m-2">
|
||||
<figure class=" p-4 ">
|
||||
<img class="w-full" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&height=280'" alt="" >
|
||||
<div class="flex bg-yellow-200 absolute -mt-12 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
|
||||
<div class="pt-6 space-y-4">
|
||||
<blockquote>
|
||||
<p class="text-3xl font-medium text-color-1 line-clamp-1 line-clamp-2">{{ item.meta }}</p>
|
||||
</blockquote>
|
||||
<figcaption class="font-medium">
|
||||
<!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
|
||||
<div class="text-color-2 line-clamp-3 text-xl line-clamp-4 text-justify" v-html="item.meta_description"></div>
|
||||
<div class="text-slate-700 p-2 shadow-md rounded text-center">
|
||||
<a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a>
|
||||
</div>
|
||||
</figcaption>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.line-clamp-4 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.astronaut img{
|
||||
width:200px;
|
||||
/* position:absolute; */
|
||||
top:55%;
|
||||
animation:astronautFly 4s infinite linear;
|
||||
}
|
||||
@keyframes astronautFly{
|
||||
0%{
|
||||
left:-100px;
|
||||
}
|
||||
25%{
|
||||
top:20%;
|
||||
transform:rotate(60deg);
|
||||
}
|
||||
50%{
|
||||
transform:rotate(45deg);
|
||||
top:55%;
|
||||
}
|
||||
75%{
|
||||
top:60%;
|
||||
transform:rotate(-30deg);
|
||||
}
|
||||
100%{
|
||||
left:110%;
|
||||
transform:rotate(30deg);
|
||||
}
|
||||
}
|
||||
@keyframes starTwinkle{
|
||||
0%{
|
||||
background:rgba(255,255,255,0.4);
|
||||
}
|
||||
25%{
|
||||
background:rgba(255,255,255,0.8);
|
||||
}
|
||||
50%{
|
||||
background:rgba(255,255,255,1);
|
||||
}
|
||||
75%{
|
||||
background:rgba(255,255,255,0.8);
|
||||
}
|
||||
100%{
|
||||
background:rgba(255,255,255,0.4);
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.text-color-2 {
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
tbBlog: {},
|
||||
tbBlog_curriculum: {},
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.getItemByCategory()
|
||||
// console.log(this.smProducts)
|
||||
// console.log(this.$route.query.cat)
|
||||
// console.log(this.fruits)
|
||||
},
|
||||
methods: {
|
||||
getItemByCategory() {
|
||||
fetch('https://management.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=curriculum&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.tbBlog = data.data
|
||||
// console.log(data)
|
||||
this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Menu from "../components/Menu.astro";
|
||||
import ErorPage from "../components/ErorPage.vue";
|
||||
import Footer from "../components/Footer.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu />
|
||||
<ErorPage client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -371,7 +371,7 @@ import Footer from "../components/Footer.vue";
|
|||
/* # The Rotating Marker # */
|
||||
details summary::-webkit-details-marker { display: none; }
|
||||
summary::before {
|
||||
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
|
||||
/* font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif; */
|
||||
content: "▶";
|
||||
position: absolute;
|
||||
/* top: 1rem; */
|
||||
|
|
|
|||
Loading…
Reference in New Issue