index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" />
    <title>Breathe Code Photo Feed</title>
    
</head>
<body>
    <header>
        <div class="header">
            <h1>Breathe Code Photo Feed</h1>
        </div>
    </header>
    <div class="wrapper">
        <div class="content">
            <div class="photo-header">
                <div class="photo-title">
                    <h2>My first photo</h2>
                </div>
                <div class="photo-number">
                    <span>12/14</span>
                </div>
            </div>
            <div class="photo-image">
                <img src="https://www.pbh2.com/wordpress/wp-content/uploads/2013/12/happy-samoyed.jpg" alt="Image should appear here">
            </div>
            <div class="photo-caption">
                <p>This is my first photo of the feed. This is a multiline comment for testing purposes. I am learning to code with <strong>#BreatheCode</strong></p>
            </div>
        </div>
        <div class="content">
            <div class="photo-header">
                <div class="photo-title">
                    <h2>Some cute thing</h2>
                </div>
                <div class="photo-number">
                    <span>12/17</span>
                </div>
            </div>
            <div class="photo-image">
                <img src="https://www.petplace.com/static/db1e0e0d3cf2c5aba8b6fb41e28bc8cb/5f007/Samoyed-Main.jpg" alt="Image should appear here">
            </div>
            <div class="photo-caption">
                <p>The internet approves this cute dog...<strong>#BreatheCode</strong></p>
            </div>    
        </div>
        <div class="content">
            <div class="photo-header">
                <div class="photo-title">
                    <h2>And of course... food!</h2>
                </div>
                <div class="photo-number">
                    <span>12/17</span>
                </div>
            </div>
            <div class="photo-image">
                <img src="https://hips.hearstapps.com/del.h-cdn.co/assets/18/07/1518475314-vanilla-cupcake-horizontal-.jpg" alt="Image should appear here">
            </div>
            <div class="photo-caption">
                <p>Because no photo feed is cool without some food on it!...<strong>#BreatheCode</strong></p>
            </div>    
        </div>
        <div class="content">
            <div class="photo-header">
                <div class="photo-title">
                    <h2>Some logo for further testing</h2>
                </div>
                <div class="photo-number">
                    <span>12/17</span>
                </div>
            </div>
            <div class="photo-image">
                <img src="https://static1.squarespace.com/static/575a6067b654f9b902f452f4/59e64b57cf81e064f900819a/5c8c127beb393116ec4e1c52/1552683697079/300Logo.png?format=1500w" alt="Image should appear here">
            </div>
            <div class="photo-caption">
                <p>Image resizes! good! <strong>#BreatheCode</strong></p>
            </div>    
        </div>                
    </div>
</body>
</html>