58 lines
1 KiB
Svelte
58 lines
1 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
name: string;
|
|
link: string;
|
|
img?: string;
|
|
size?: { width: number; height: number };
|
|
description: string;
|
|
}
|
|
|
|
let {
|
|
name,
|
|
link,
|
|
img = "https://placehold.it/600x300",
|
|
size = { width: 600, height: 300 },
|
|
description
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div class="card">
|
|
<div class="back">
|
|
<a href={link}>
|
|
<img src={img} alt={name} width={size.width} height={size.height} />
|
|
</a>
|
|
</div>
|
|
<div class="description">
|
|
<h2>{name}</h2>
|
|
<p>{description}</p>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
|
|
<style>
|
|
.card {
|
|
display: flex;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
.back a {
|
|
border: 0px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.back a img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.description {
|
|
width: 500px;
|
|
}
|
|
|
|
@media screen and (max-width: 978px) {
|
|
.card {
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
</style>
|