sonika/svelte_learning_project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard card style changes

Browse Source
This commit is contained in:
Sonika 2024-04-15 19:20:30 +05:30
parent 173db6e4d6
commit 296f6b4d60
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Dashboard.svelte
View File

@ -1,25 +1,21 @@
<script>
import { onMount } from 'svelte';
let data = []; // Initialize an empty array to store the dummy data
let data = [];
onMount(() => {
// Define dummy data
data = [
{ id: 1, title: 'Card 1', description: 'Description for Card 1' },
{ id: 2, title: 'Card 2', description: 'Description for Card 2' },
{ id: 3, title: 'Card 3', description: 'Description for Card 3' },
{ id: 4, title: 'Card 4', description: 'Description for Card 4' },
{ id: 5, title: 'Card 5', description: 'Description for Card 5' },
{ id: 6, title: 'Card 6', description: 'Description for Card 6' }
// Add more dummy data objects as needed
{ id: 1, title: 'Pikachu', description: 'Description for Pikachu', backgroundImage: 'url(https://rukminim2.flixcart.com/image/850/1000/k12go7k0/poster/8/s/n/large-pikachu-pokemons-sticker-poster-anime-poster-pokemon-original-imafkq9thzgkch8f.jpeg?q=90&crop=false)' },
{ id: 2, title: 'Bulbasaur', description: 'Description for Bulbasaur', backgroundImage: 'url(https://images2.alphacoders.com/135/1351279.png)' },
{ id: 3, title: 'Charmander', description: 'Description for Charmander', backgroundImage: 'url(https://editors.dexerto.com/wp-content/uploads/2023/11/15/Pokemon-TCG-Charmander.jpg)' },
{ id: 4, title: 'Jigly Puff', description: 'Description for Jigly Puff', backgroundImage: 'url(https://assetsio.gnwcdn.com/pokemon_go_jigglypuff_thumbnail.jpg?width=1600&height=900&fit=crop&quality=100&format=png&enable=upscale&auto=webp)' },
{ id: 5, title: 'Staryou', description: 'Description for Staryou', backgroundImage: 'url(https://facts.net/wp-content/uploads/2023/07/17-facts-about-staryu-1689335160.jpg)' },
{ id: 6, title: 'Togepi', description: 'Description for Togapy', backgroundImage: 'url(https://www.wallpaperflare.com/static/105/845/154/pok%C3%A9mon-togepi-pokemon-character-wallpaper.jpg)' }
];
});
</script>
<div class="dashboard">
{#each data as item}
<div class="card">
<div class="card" style="background-image: {item.backgroundImage}">
<h2>{item.title}</h2>
<p>{item.description}</p>
<!-- You can add more elements here to display additional data -->
@ -44,6 +40,8 @@
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
transition: transform 0.3s ease;
background-size: cover; /* Cover the entire card with the background image */
background-position: center;
}
.card:hover {
@ -54,11 +52,12 @@
h2 {
font-size: 24px;
margin-bottom: 10px;
color: #333333;
color: #000000;
}
p {
font-size: 16px;
color: #666666;
font-weight: 700;
color: #000000;
}
</style>