Nikurasu
/
htmlcsstraining
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added the article card

This commit is contained in:
Nikurasu 2022-01-23 17:59:39 +01:00
parent 8e09476c17
commit d056d76904
1 changed files with 42 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@ -68,7 +68,48 @@
</div>
</header>
<main></main>
<main class="max-w-6xl mx-auto mt-20">
<article class="bg-gray-200 rounded-xl">
<div class="py-6 px-5 flex">
<div class="flex-1 mr-8">
<img src="https://picsum.photos/799/500" alt="A Picture" class="rounded-xl">
</div>
<div class="flex-1 flex flex-col justify-between">
<header>
<div class="space-x-2">
<a href="#" class="px-2 py-1 border border-blue-300 rounded-full text-blue-300 text-xs uppercase font-semibold">Japan</a>
<a href="#" class="px-2 py-1 border border-red-300 rounded-full text-red-300 text-xs uppercase font-semibold">Travel</a>
</div>
<div class="mt-4">
<h1 class="text-3xl">This is a very long title for my travel to Japan, enjoy it.</h1>
<time class="mt-2 block text-gray-400 text-xs">1 day ago</time>
</div>
</header>
<div class="text-sm mt-6">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
</p>
</div>
<footer class="flex justify-between items-center mt-8">
<div class="flex items-center text-sm">
<img class="rounded-full" style="height:35px;" src="images/picrew04.png" alt="avatar">
<div class="ml-3">
<h5 class="font-bold">Nikurasu</h5>
<h6>Just a blogger</h6>
</div>
</div>
<div>
<a href="#" class="text-xs font-semibold bg-gray-400 rounded-full py-2 px-6">Read More</a>
</div>
</footer>
</div>
</div>
</article>
</main>
<footer></footer>
</section>