IMG Generator code with HTML AND CSS
INTRODUCTION
Assalamu Alaikum guys kya haal hai ka theek Honge to Aaj is post Mein ma aapko batane Ja Raha Hun Ka Ham HTML and CSS Se Kaise image generator code banaa sakte hain jo ki Hamari bahut help Kare maslan Ke Ham Jaise Hi Ek generator ke button per click karen to Hamara yah Hamare liye ek image generate hokar a Jaaye to aaj ki post Mein Main aapko Yahi bataunga ki Ham Kaise Ek image generator code likh sakte hain wo bhi HTML aur CSS madad se.
So guys aap niche tasvir Dekh Rahe Honge is tasvir ko bhi Maine is code ke jarie hi generate Kiya Hai To Jaise Ki aap dekh sakte hain is mein Ek aurat aur uski beti Baithi Hui Hai yah Koi duniya mein lay nahin karti lekin yah image jo generete hui hai aur uske niche Bhi Ek image Di gai hai yah bhi generete ki hai aur uske niche Bhi Ek image Di gai hai to aap dekh sakte hain maine is code ke jarie image and add Ki Hai to niche Maine Puri detail se course Diya Hua Hai code Diya hua hai to aap usko jakar dekh sakte hain aur vah code sabse upar aapko HTML ka code mil Jaega aur uske niche aapko CSS ka code mil Jaega Jaise hi aap donon code Apne code ke Jon se aapke pass app hi aap us ma past Karenge to vaise hi Jab aap code ran Karenge to vaise hi aap ka code ran Hoga aur image generete hona start ho jayegi
start with HTML code
<!DOCTYPE html>
<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">
<title>Random IMG Generator</title>
<!-- ===== Links ===== -->
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://cdn.lordicon.com/ritcuqlt.js"></script>
</head>
<body>
<div class="wrapper">
<div class="card">
<div id="image">
<img id="img" src="https://picsum.photos/400/500/?random" alt="">
<div id="loader">
<lord-icon
src="https://cdn.lordicon.com/vlupvdhl.json"
trigger="loop"
delay="0"
colors="primary:#09aeec,secondary:#09aeec"
style="width:200px;height:200px">
</lord-icon>
</div>
</div>
<button id="btn">Generate</button>
</div>
</div>
<div class="creator">Created By Mudasir</div>
<!-- ===== Scripts ===== -->
<script src="assets/js/main.js"></script>
<script>
const btn = document.getElementById("btn");
const image = document.getElementById("img");
const loader = document.getElementById("loader");
function loadImage() {
loader.style.display = "grid";
const startTime = performance.now();
fetch("https://picsum.photos/300/400/?random")
.then(function (res) {
return res.blob();
})
.then(function (blob) {
const url = URL.createObjectURL(blob);
image.addEventListener("load", function () {
URL.revokeObjectURL(url);
const endTime = performance.now();
const loadingTime = endTime - startTime;
if (loadingTime >= 1000) {
loader.style.display = "none";
} else {
setTimeout(function () {
loader.style.display = "none";
}, 1000 - loadingTime);
}
});
image.src = url;
})
.catch(function (err) {
console.log(err);
loader.style.display = "none";
alert("Failed to load image.");
});
}
btn.addEventListener("click", loadImage);
</script>
</body>
</html>
start with css code
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #fff;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.wrapper {
height: 100%;
width: 100%;
display: grid;
place-items: center;
background-color: #0f171d;
}
.card {
height: 475px;
display: grid;
place-items: center;
z-index: 5;
}
#image {
display: grid;
place-items: center;
position: relative;
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.25);
}
#image::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(9, 175, 236, 0.2), rgba(2, 81, 229, 0.2));
z-index: -1;
filter: blur(10em);
border-radius: 15px;
}
#image img {
height: 300px;
width: 200px;
border-radius: 15px;
margin: 2.5rem;
}
#loader {
position: absolute;
display: none;
place-items: center;
height: 300px;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 15px;
}
#btn {
height: 50px;
width: 90%;
background: linear-gradient(to right, #09aeec, #0253e5);
border: 0;
border-radius: 50px;
display: grid;
place-items: center;
position: relative;
}
#btn::after{
content: '';
position: absolute;
height: 50px;
width: 125%;
background: linear-gradient(to right, rgba(9, 175, 236, 0.2), rgba(2, 81, 229, 0.2));
z-index: -1;
filter: blur(10em);
}
.creator{
color: #fff;
position: absolute ;
z-index: 10;
bottom: 5px;
right: 5px;
font-size: x-small;
}
0 Comments
spam comment are not allow