Untitled

avatar
unknown
plain_text
2 months ago
1.1 kB
3
Indexable
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout</title>
<style>
body {
  display: flex; /* Use flexbox for the main container */
  justify-content: space-around; /* Space images evenly */
  align-items: center; /* Center images vertically */
  min-height: 100vh; /* Make the container fill the viewport height */
  background-color: #f0f0f0; /* Light gray background */
}

.image-container {
  width: 200px; /* Width of each image container */
  margin: 20px; /* Spacing around each image */
  text-align: center; /* Center text within the container */
}

img {
  max-width: 100%; /* Make images responsive */
  border: 1px solid #ddd; /* Add a border */
  border-radius: 5px; /* Rounded corners */
}
</style>
</head>
<body>

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <p>Devon Lane</p>
</div>

<div class="image-container">
  <img src="image2.jpg" alt="Image 2">
  <p>Devon Lane</p>
</div>

<div class="image-container">
  <img src="image3.jpg" alt="Image 3">
  <p>Devon Lane</p>
</div>

<div class="image-container">
  <img src="image4.jpg" alt="Image 4">
  <p>Devon Lane</p>
</div>

</body>
</html>
Editor is loading...
Leave a Comment