Create an Image Gallery with HTML & CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{margin-left:100px;}
img:{padding:4px;}
img:hover {box-shadow: 0 1px 18px 10px rgba(255, 0, 0);opacity: 0.8;transform: rotate(15deg);border-radius: 20px 0px 20px 0px;}
div.a{float:left;padding:10px;}
div.about {
text-align: center;margin-left:1px;margin-top:15px;border:2px solid black; border-bottom:none;border-left:none;border-right:none;}
span{box-shadow:1px 1px 6px 15px red;background:rgb(255,0,0,1);margin-left:-75px;}
pre{margin-top:-86px;}
hr {
width: 100px;
height: 7px;
background: red;
transition: width 1s; 
}
hr:hover {
width: 900px;
}
pre::first-letter{color:red;font-size: 38px;font-family: cursive;}
pre:hover{color:green;text-shadow: 1px 1px 6px whitesmoke;}
</style>
</head>
<body>
<div style="background: rgb(21,3,87);color:white;height:150px;border-radius: 20px;margin:auto;"><br><br><h1 align="left"><span>Images Gallery</span><pre><h2> Created By:- Infotech Computer Institute</h2></pre><hr></h1></div>
<br><br>
<div style="border:2px;filter:drop-shadow(5px -2px 6px black);">
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Center Hardoi</div></div>
<div class="a"><a href="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"target="_blank"><img src="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"width="200"height="300"></a><div class="about">Actor:- Amir Khan</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">Nature</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">Actor:- Salman Khan</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">Peacock</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">Sunflower</div></div>
<div class="a"><a href="D:\download\pexels-min-an-1629216.jpg"target="_blank"><img src="D:\download\pexels-min-an-1629216.jpg"width="200"height="300"></a><div class="about">Lord Buddha</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Institutions</div></div>
<div class="a"><a href="C:\Users\2023\Downloads\doc.png"target="_blank"><img src="C:\Users\2023\Downloads\doc.png"width="200"height="300"></a><div class="about">Dr. Menka Singh</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\pik.jpg"target="_blank"><img src="C:\Users\2023\Pictures\pik.jpg"width="200"height="300"></a><div class="about">M D:- Satyam Trivedi</div></div></div>
</body>
</html>
.png)
No comments:
Post a Comment
*******Please Comment, Like and Share******
दोस्तों पूरी पोस्ट पढने के लिए धन्यवाद, आशा करता हूँ आप को यह पोस्ट पसंद आई होगी और भी अधिक जानकारी के लिए या मुझसे जुड़ने के लिए आप मुझे मेरे फेसबुक पेज information & technology computer institutions और इन्स्टाग्राम ID:- satyam_hardoi को फॉलो कर सकते है,
मेरा youtube चैनल itci computer hardoi सर्च करे और पाए कंप्यूटर से सम्बंधित सभी विडियो और हाँ प्लीज नई अपडेट पाने के लिए चैनल को सब्सक्राइब जरुर करें, धन्यवाद | आपका $ सत्यम सर् $