AlanSimpsonMe · May 19, 2019 20:38
diff --git a/ResponsiveFigures.html b/ResponsiveFigures.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta name="author" content="Alan Simpson" />
    <meta name="description"
        content="Responsive captioned pictures with figure, figcaption, and flexbox (HTML5 and CSS3)" <meta
        charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Responsive Figures</title>
    <style>
        /* Container div uses flexbox */
        .figures {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        /* Each figure container */
        .figures figure {
            border: solid 1px silver;
            width: 320px;

        }

        /* The image inside a figure */
        .figures figure img {
            width: 100%;
            height: 220px;
        }

        /* The caption text */
        .figures figcaption {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            padding: 0 0 4px 6px;
        }
    </style>
 </head>

 <body>
    <!-- All responsive images go inside this div -->
    <div class="figures">
        <!-- Each image and captoion in a figure.../figure block -->
        <figure>
            <img src="images/lifestyle01.jpg" alt="">
            <figcaption>This is the first figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle02.jpg" alt="">
            <figcaption>This is the second figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle03.jpg" alt="">
            <figcaption>This is the third figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle04.jpg" alt="">
            <figcaption>This is the fourth figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle05.jpg" alt="">
            <figcaption>This is the fifth figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle06.jpg" alt="">
            <figcaption>This is the sixth figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle07.jpg" alt="">
            <figcaption>This is the seventh figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle08.jpg" alt="">
            <figcaption>This is the eighth figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle09.jpg" alt="">
            <figcaption>This is the ninth figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle10.jpg" alt="">
            <figcaption>This is the tenth figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle11.jpg" alt="">
            <figcaption>This is the eleventh figure caption</figcaption>
        </figure>
        <figure>
            <img src="images/lifestyle12.jpg" alt="">
            <figcaption>This is the twelvth figure caption</figcaption>
        </figure>
    </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="author" content="Alan Simpson" />
	<meta name="description"
	content="Responsive captioned pictures with figure, figcaption, and flexbox (HTML5 and CSS3)" <meta
	charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Responsive Figures</title>
	<style>
	/* Container div uses flexbox */
	.figures {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	}

	/* Each figure container */
	.figures figure {
	border: solid 1px silver;
	width: 320px;

	}

	/* The image inside a figure */
	.figures figure img {
	width: 100%;
	height: 220px;
	}

	/* The caption text */
	.figures figcaption {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	padding: 0 0 4px 6px;
	}
	</style>
	</head>

	<body>
	<!-- All responsive images go inside this div -->
	<div class="figures">
	<!-- Each image and captoion in a figure.../figure block -->
	<figure>
	<img src="images/lifestyle01.jpg" alt="">
	<figcaption>This is the first figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle02.jpg" alt="">
	<figcaption>This is the second figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle03.jpg" alt="">
	<figcaption>This is the third figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle04.jpg" alt="">
	<figcaption>This is the fourth figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle05.jpg" alt="">
	<figcaption>This is the fifth figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle06.jpg" alt="">
	<figcaption>This is the sixth figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle07.jpg" alt="">
	<figcaption>This is the seventh figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle08.jpg" alt="">
	<figcaption>This is the eighth figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle09.jpg" alt="">
	<figcaption>This is the ninth figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle10.jpg" alt="">
	<figcaption>This is the tenth figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle11.jpg" alt="">
	<figcaption>This is the eleventh figure caption</figcaption>
	</figure>
	<figure>
	<img src="images/lifestyle12.jpg" alt="">
	<figcaption>This is the twelvth figure caption</figcaption>
	</figure>
	</div>
	</body>

	</html>