finishing the background-image change from yesterday

script.py

@@ -52,19 +52,17 @@ for folder in materials:
                     md = file.read()
                     card = markdown.markdown(md)
                     #print(card) # the print of all the md files
+                    card = f'<div class="card text">{ card }</div>'
                     cards[folder][card_folder].append(card)
             elif my_file.endswith(('.jpg', '.jpeg', '.png')):
                 if 'prototype_' in my_file:
                     my_file= my_file.replace('.jpg', '').replace('.jpeg', '').replace('.png', '').replace('prototype_', '').replace('_', ' ')
                     image_html = f'<img src="{relative_file_path}" alt="{my_file}" />' + f"<div class='image_titles'>{my_file}</div>"
-                    
                 else:
                     image_html = f'<img src="{relative_file_path}" alt="{my_file}" />'
-                mycard = f'<div class="card" style="background-image: url("{relative_file_path}");">{image_html}</div>    '
+                mycard = f'<div class="card img" style="background-image: url(\'{relative_file_path}\');">{image_html}</div>    '
                 cards[folder][card_folder].append(mycard)
-                #print(my_file)
-
-                
+                # print(mycard)
 
 #print(card_folder)
 #print(file_path)
@@ -97,22 +95,19 @@ for page in range(number_pages):
     card_8= choice(cards["4_add_ons"]["make-a-notebook-that"])
     cards["4_add_ons"]["make-a-notebook-that"].remove(card_8)
 
-
-
     page_html = f'''
 
     <div class="page">
-        <div class="card left-card">{card_1}</div>
-        <div class="card right-card">{card_2}</div>
-        <div class="card left-card">{card_3}</div>
-        <div class="card right-card">{card_4}</div>
-        <div class="card left-card">{card_5}</div>
-        <div class="card right-card">{card_6}</div>
-        <div class="card left-card">{card_7}</div>
-        <div class="card right-card">{card_8}</div>
+        {card_1}
+        {card_2}
+        {card_3}
+        {card_4}
+        {card_5}
+        {card_6}
+        {card_7}
+        {card_8}
     </div>
 
-
     '''
 
     pages.append(page_html)

style.css

@@ -20,18 +20,18 @@ body{
 
 .card {
     float: left;
-    width: calc(210mm / 2 - 10mm); /* Adjusted width to fit 2 cards per row with margins */
-    height: calc(297mm / 4 - 10mm); /* Adjusted height to fit 4 rows per page with margins */
-    /*border: 1mm solid salmon;*/
-    margin: 5mm; 
+    width: calc(210mm / 2); /* Adjusted width to fit 2 cards per row with margins */
+    height: calc(297mm / 4); /* Adjusted height to fit 4 rows per page with margins */
+    border: 1px solid black;
     box-sizing: border-box; /* Includes the border in the width and height calculation */
     overflow: hidden;   
-
-
-
-
 }
-
+.card.img{
+    
+}
+.card.text{
+    padding: 5mm; 
+}
 .card.left-card {
     padding-right: 10mm;