In: Computer Science
Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under the h1 tag that is a description of your image gallery. Also style the paragraph with a color and font family.
Dear Student ,
As per the requirement submitted above , kindly find the below solution.
NOTE :THIS IMAGES ARE USED FOR DEMONSTRATION PURPOSE ONLY.
Here a new web page with name "PolaroidStyle.html" is created, which contains following code.
PolaroidStyle.html :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title for web page -->
<title>Polaroid style image gallery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link> is used for external stylesheet -->
<link href="polaroidStyle.css" rel="stylesheet">
</head>
<body>
<h1>Polaroid style image gallery </h1>
<table>
<tr>
<td><img src="image1.jpg" /></td>
<td><img src="image2.jpg" /></td>
<td><img src="image3.jpg" /></td>
</tr>
</table>
<p>Polaroid style image gallery using html and css.
This is simple image gallery.
</p>
</body>
</html>
******************************
polaroidStyle.css :
/* style rule for body */
body{
margin-left: 300px;
}
/* style rule for h1 */
h1{
color: green;
size: 24px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-style: italic;
text-align: center;
}
/* style rule for para */
p{
color: brown;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
font-weight: bold;
}
/* style rule for image */
img{
height:200px;
width:200px;
float: left;
border:3px inset darkorchid;
padding: 10px;
}
======================================================
Output : Open web page PolaroidStyle.html in the browser and will get the screen as shown below
Screen 1 :PolaroidStyle.html
NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.