blog/sample.html

97 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'sans': ['"Source Sans 3"'],
},
}
}
}
</script>
<title>Meow</title>
</head>
<body class="flex flex-row my-8">
<nav class="my-8 ml-16 text-xl">
<div class="flex flex-row">
<ul class="flex flex-col mr-6">
<li class="p-1 w-max"><a href="../index.html">Blog</a></li>
<li class="p-1 w-max"><a href="index.html">Portfolio</a></li>
<li class="p-1 w-max"><a href="index.html">À Propos de moi</a></li>
</ul>
<span class="after:content-[''] after:w-[1px] after:bg-black after:my-2 after:h-4/5 after:block"></span>
</div>
</nav>
<main class="my-8 ml-24 mr-[38rem]">
<h1 class="text-3xl my-4">Suspendisse quam dolor, sollicitudin nec velit sodales, tempus iaculis elit.</h1>
<h2 class="text-xl text-[#747474] italic my-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit...</h2>
<div class="text-[#404852]">
<p class="my-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta erat non maximus
porttitor. Etiam massa felis,
luctus at eros nec, vestibulum sodales dolor. Donec pellentesque, tellus eu pharetra fringilla, arcu
sapien fringilla
nulla, eget gravida arcu mi eu diam. In hac habitasse platea dictumst. Vestibulum neque mauris, faucibus
eget hendrerit
molestie, ultrices sed purus. In porttitor scelerisque euismod. Sed ultrices efficitur interdum.
Maecenas massa urna,
lobortis ac arcu ac, hendrerit ultricies turpis. Nulla in consectetur justo, sit amet elementum lacus.
</p>
<p class="my-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae consequat massa. Aliquam
egestas pellentesque
elementum. Ut efficitur justo eu libero vestibulum dapibus. Etiam vitae turpis nunc. Maecenas sit amet
elementum dolor.
In luctus tellus non rhoncus dictum. Mauris laoreet velit velit, in pellentesque enim auctor a. Nulla at
lacus vel magna
lacinia tincidunt. Ut aliquet suscipit tincidunt.
Nulla arcu tortor, aliquet quis congue in, vestibulum vitae arcu. Duis nisi ex, tincidunt quis
condimentum in,
sollicitudin quis nisi. In fringilla ultricies venenatis. Aliquam a quam eros. Curabitur eget tincidunt
orci. Quisque
hendrerit porta augue, eget venenatis diam pellentesque sed. Sed pellentesque vitae urna blandit
lobortis. Sed tellus
nulla, rutrum rhoncus ante at, lacinia efficitur augue. Pellentesque habitant morbi tristique senectus
et netus et
malesuada fames ac turpis egestas. Nam eget dolor ut augue commodo lacinia et at dolor. Sed ut vehicula
lacus. Integer
semper vehicula dignissim.
</p>
<h3 class="text-black text-xl">Donec vitae nisl in sem viverra cursus.</h3>
<p class="my-3">Suspendisse dictum urna nunc, non laoreet tortor vulputate eget. Praesent sit amet risus a
lacus eleifend bibendum.
Vivamus et placerat tellus, ut tristique nibh. Maecenas porttitor ex ac turpis interdum iaculis. Etiam
egestas erat non
metus vehicula, viverra vulputate est condimentum. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Nam
vehicula diam sed pharetra malesuada. Etiam non libero et risus viverra volutpat. Donec in justo tortor.
Mauris gravida
finibus sem eget lacinia. Praesent lacinia posuere lacus eget dignissim. Morbi tempus mauris id ante
aliquet finibus.
Quisque ut dignissim neque, ut accumsan urna. Morbi interdum erat eu erat tempus finibus.
</p>
</div>
</main>
<footer class="w-full fixed m-1 left-0 bottom-0 flex justify-center">
<a class="mx-1 underline" href="#">Flux RSS</a>
<span class="mx-1">&bull;</span>
<a class="mx-1 underline" href="#">Inspirer de Sidey</a>
<span class="mx-1">&bull;</span>
<a class="mx-1 underline" href="#">GitHub</a>
<span class="mx-1">&bull;</span>
<a class="mx-1 underline" href="#">Instagram</a>
</footer>
</body>
</html>