placeholder images
This commit is contained in:
+22
-36
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user