Card Gallery Code

HTML

CSS

            
            <section id="gallery">
                <div class="card"><img src="https://picsum.photos/250/270"> <h3>Haircut</h3> <p>Includes a consultation, shampoo & condition, scalp massage, haircut, & blow-dry.</p></div>
                <div class="card"><img src="https://picsum.photos/251/270"> <h3>Haircolor</h3> <p>Includes consultation, color, shampoo & condition, scalp massage, & blow-dry.</p></div>
                <div class="card"><img src="https://picsum.photos/249/270"> <h3>Styling</h3> <p>Includes consultation, shampoo & condition, scalp massage, blow-dry & curling or flat iron.</p></div>
            </section>

                
                    section#gallery {
                        background-color: white;
                        display: flex;
                        justify-content: center;
                        padding-top: 72px;
                        padding-bottom: 72px;
                        flex-wrap: wrap;
                    }
                    
                    div.card {
                        max-width: 296px;
                        font-family: Verdana, Geneva, Tahoma, sans-serif;
                        text-align: center;
                        margin-left: 32px;
                        margin-right: 32px;
                        margin-bottom: 20px;
                
                    }
                
                    div.card > img {
                        border-radius: 20px;
                    }