Project: CA Arunkumar and Co.(Website for CA Firm)

on

Write an HTML and CSS program to Display Simple Image Gallery

on

Code:

 <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Gallery</title>

<style>

h1{

text-align: center;

color: brown;

}

div.gallery{

margin: 20px;

border: 1px solid #ccc;

height: auto;

width: 150px;

float: left;

}

div.gallery:hover{

border: 1px solid blue;

}

div.gallery img{

width: 100%;

height: auto;

}

div.desc{

padding: 15px;

text-align: center;

}

</style>

</head>

<body>

<h1>Image Gallery</h1>

<div class="gallery">

<a target="_blank" href="https://en.wikipedia.org/wiki/Processor_(computing)">

<img src="processor.jpg" alt="Processor" width="600" height="400">

</a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. </div>

</div>

<div class="gallery">

<a target="_blank" href="https://en.wikipedia.org/wiki/Printer_(computing)">

<img src="printer.jpg" alt="Printer" width="600" height="400">

</a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. </div>

</div>

<div class="gallery">

<a target="_blank" href="https://en.wikipedia.org/wiki/Wi-Fi">

img src="wifi.jpg" alt="WiFi" width="600" height="400">

</a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. </div>

</div>

<div class="gallery">

<a target="_blank" href="https://en.wikipedia.org/wiki/Mouse">

<img src="mouse.png" alt="Mouse" width="600" height="400">

</a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. </div>

</div>

<div class="gallery">

<a target="_blank" href="https://en.wikipedia.org/wiki/Central_processing_unit">

<img src="cpu.jpg" alt="CPU" width="600" height="400">

</a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. </div>

</div>

<div class="gallery">

<a target="_blank" href="https://en.wikipedia.org/wiki/Wire">

<img src="wire.jpg" alt="Wire" width="600" height="400">

</a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. </div>

</div>

</body>

</html>

Output: