import os folder = "./images/" #defining as a list images = [] titles = [] #shows all the images os.listdir(folder) for image in os.listdir(folder): print(image) print(folder + image) print("---") images.append(folder + image) titles.append(image) #html counter = 0 all_cards = "" for image in images: #html image element img = f"<img src='{ image }'>" #img = "<img src="' + image +"'>" #define title title = titles[counter] #printing to inspect print(img) #mini template for card card = f""" <div class="card"> <h2>{ title }</h2> <p>{ img }</p> </div> """ #printing to inspect mini template print(card) #add it to the all cards variable all_cards = all_cards + card #we add +1 to our counter counter = counter + 1 html = f""" <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex card</title> <link href="stylesheet.css" rel="stylesheet"> </head> <body> <h1>gardening cards for lil gardeners</h1> <section> { all_cards } </section> </body> </html> """ with open("cards.html", "w") as output: output.write(html)