placeholder images

This commit is contained in:
teslim
2025-02-13 22:18:51 +01:00
parent b2031f2def
commit b8fc924e7e
2 changed files with 26 additions and 40 deletions
+22 -36
View File
@@ -2,23 +2,10 @@
<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
/>
<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=Roboto:wght@100;500;700;900&display=swap"
rel="stylesheet"
@@ -28,39 +15,39 @@
<style>
body {
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
}
.ferrari {
background-image: url(https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/nordin/076532395068ferrari.png);
background-repeat: no-repeat;
background-position: center left;
background-image: url(https://placehold.co/600x400/EEE/31343C);
background-repeat: no-repeat;
background-position: center left;
}
.wing {
background-image: url(https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/nordin/076532395068wing.png);
background-repeat: no-repeat;
background-position: center right;
background-image: url(https://placehold.co/600x400/EEE/31343C);
background-repeat: no-repeat;
background-position: center right;
}
</style>
</head>
<body class="h-screen w-screen h-[800px] overflow-x-hidden ">
<div class=" js bg-white grid grid-cols-3 gap-1 bg-[red] p-3 "></div>
<body class="h-screen w-screen h-[800px] overflow-x-hidden">
<div class="js bg-white grid grid-cols-3 gap-1 bg-[red] p-3"></div>
<script>
const js = document.querySelector(".js")
for(let i = 0 ; i < 240; i++) {
js.innerHTML += ` <div class="border-2 border-black border-dashed relative ">
const js = document.querySelector(".js");
for (let i = 0; i < 240; i++) {
js.innerHTML += ` <div class="border-2 border-black border-dashed relative ">
<div class="h-[12px] w-full bg-[#B3E1AB]"></div>
<div class="flex h-[245px] bg-[#EDF0F3] w-[100%] ">
<div class="w-[25%] z-[100]">
<img
class="block w-[96%] h-[50%]"
src="https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/nordin/076532395068redLottery.png"
src="https://placehold.co/600x400/EEE/31343C"
alt="lottery car"
/>
<img
class="block w-[98%] h-[50%]"
src="https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/nordin/076532395068darkLottery.png"
src="https://placehold.co/600x400/EEE/31343C"
alt="lottery car"
/>
</div>
@@ -101,7 +88,7 @@
</h5>
<img
src="https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/nordin/076532395068appLogo.svg"
src="https://placehold.co/600x400/EEE/31343C"
class="h-[35px]"
alt=""
/>
@@ -114,14 +101,13 @@
</div>
<div class="h-[12px] w-full bg-[#B3E1AB]"></div>
<img
src="https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/nordin/076532395068barcode.png"
src=https://placehold.co/600x400/EEE/31343C"
alt="barcode"
class="absolute top-1/2 right-0 transform -translate-y-1/2"
/>
</div>
`
}
`;
}
</script>
</body>
</html>