Scribd
Upload
96 views2 pages

CSS Flexbox Photo Gallery

This document contains the HTML and CSS code for a photo gallery website. The HTML includes a header, gallery div, and 9 images within the gallery div. The CSS styles the page with flexbox properties, including making the gallery a flex container that wraps images in rows and centers them with gaps between. It also styles the header, images, and adds a border radius.

Uploaded by

Daniel León Vásquez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
96 views2 pages

CSS Flexbox Photo Gallery

This document contains the HTML and CSS code for a photo gallery website. The HTML includes a header, gallery div, and 9 images within the gallery div. The CSS styles the page with flexbox properties, including making the gallery a flex container that wraps images in rows and centers them with gaps between. It also styles the header, images, and adds a border radius.

Uploaded by

Daniel León Vásquez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: sans-serif;
background: #f5f6f7;
}

.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;
}

.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}

.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}

.gallery::after {
content: "";
width: 350px;
}

You might also like