RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design footer

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-01-08 18:21:49 +06:00
parent 29528220fc
commit 92c4f8f8a7
2 changed files with 54 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/blog/card.vue
View File

@@ -8,7 +8,7 @@ defineProps<{
</script>
<template>
<article class="group border p-5 m-5 rounded-2xl shadow-lg text-zinc-700">
<article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
<NuxtLink to="/home" class="">
<img
class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-105 transition-all"

65
components/main/footer.vue
View File

@@ -1,15 +1,56 @@
<template>
<nav class="py-5 border-t">
<div class="container flex justify-between mx-auto">
<NuxtLink to="/" class="text-2xl font-medium"> Elon's Blog </NuxtLink>
<ul class="nav flex space-x-5">
<li>
<NuxtLink to="/categories"> Categories </NuxtLink>
</li>
<li>
<NuxtLink to="/blogs"> Blogs </NuxtLink>
</li>
</ul>
<div class="py-5 border-t text-zinc-700">
<div class="px-6 container max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3">
<div>
<p class="text-black text-2xl py-1 font-semibold">Al Asad Nur Riyad</p>
<p class="py-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia soluta voluptatum
eligendi laboriosam non reprehenderit.
</p>
<div class="my-3 space-x-3 pb-3">
<NuxtLink class="p-2 bg-gray-300 rounded-md">
<Icon name="fa:github" size="1em" />
</NuxtLink>
<NuxtLink class="p-2 bg-gray-300 rounded-md">
<Icon name="fa:linkedin-square" size="1em" />
</NuxtLink>
<NuxtLink class="p-2 bg-gray-300 rounded-md">
<Icon name="fa:twitter-square" size="1em" />
</NuxtLink>
<NuxtLink class="p-2 bg-gray-300 rounded-md">
<Icon name="fa:stack-overflow" size="1em" />
</NuxtLink>
</div>
</div>
<div class="flex flex-col my-5 md:my-0 md:justify-self-center">
<p class="text-black text-base font-semibold">Quick Link</p>
<NuxtLink to="/" class="hover:underline">Home</NuxtLink>
<NuxtLink to="/" class="hover:underline">Categories</NuxtLink>
<NuxtLink to="/" class="hover:underline">Archive</NuxtLink>
<NuxtLink to="/" class="hover:underline">About Me</NuxtLink>
</div>
<div>
<p class="text-black text-base font-semibold">Connect</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eaque inventore
quia nesciunt?
</p>
<input
id="email"
type="email"
name="EMAIL"
placeholder="Enter your email"
class="mt-3 form-control w-full border-2 rounded-lg p-2 text-sm bg-gray-100"
/>
<button class="btn w-full bg-sky-600 p-2 rounded-lg text-white mt-3 text-sm">
Subscribe
</button>
</div>
</div>
<div class="border-t">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, doloremque?</h1>
</div>
</div>
</div>
</nav>
</template>