61 lines
1.7 KiB
Svelte
61 lines
1.7 KiB
Svelte
<script>
|
|
</script>
|
|
|
|
<div class="w-full h-full bg-red-100 rounded-xl">
|
|
<div class="p-3 rounded-t-xl bg-indigo-200">
|
|
<h1 class="font-semibold">Profile:</h1>
|
|
</div>
|
|
<div class="p-2">
|
|
<p><span class="font-bold">Name: </span>DutchEllie</p>
|
|
<p><span class="font-bold">Country: </span>The Netherlands</p>
|
|
<p><span class="font-bold">Occupation: </span>Student</p>
|
|
<div>
|
|
<span class="font-bold">Languages:</span>
|
|
<ul class="grid grid-cols-10 list-none">
|
|
<div class="col-start-2 col-span-3">
|
|
<p>🌍</p>
|
|
<p>Dutch</p>
|
|
<p>English</p>
|
|
<p>Japanese</p>
|
|
<p>💻</p>
|
|
<p>Go</p>
|
|
<p>C/C++</p>
|
|
<p>JS</p>
|
|
</div>
|
|
<div class="col-span-5">
|
|
<div class="mb-1 h-5 flex-grow rounded-xl">
|
|
<div class="h-5 w-7/12 rounded-xl" />
|
|
</div>
|
|
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
|
<div class="h-5 w-12/12 bg-indigo-300 rounded-xl" />
|
|
</div>
|
|
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
|
<div class="h-5 w-11/12 bg-indigo-300 rounded-xl" />
|
|
</div>
|
|
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
|
<div class="h-5 w-2/12 bg-indigo-300 rounded-xl" />
|
|
</div>
|
|
<div class="mb-1 h-5 flex-grow rounded-xl">
|
|
<div class="h-5 w-7/12 rounded-xl" />
|
|
</div>
|
|
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
|
<div class="h-5 w-11/12 bg-indigo-300 rounded-xl" />
|
|
</div>
|
|
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
|
<div class="h-5 w-8/12 bg-indigo-300 rounded-xl" />
|
|
</div>
|
|
<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
|
|
<div class="h-5 w-4/12 bg-indigo-300 rounded-xl" />
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.break {
|
|
width: 0;
|
|
}
|
|
</style>
|