add arrow

newsletter_examples/2.html

@@ -67,10 +67,10 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            width: calc(50% - 10px);
+            width: calc(50% - 50px);
             margin: 10px 0;
             text-align: center;
-            padding: 20px;
+            padding: 10px;
             background-color: #F9F9F9;
             border-radius: 8px;
             border: 1px solid #DDDDDD;
@@ -142,6 +142,14 @@
         a:hover {
             text-decoration: underline;
         }
+
+        .arrow {
+            font-size: 1.5rem;
+            color: gray;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     </style>
 </head>
 
@@ -179,6 +187,10 @@
                     <h3 style="color:black;"> ${transaction_name} </h3>
                 </div>
 
+                <div class="arrow">
+                    &#8594;
+                </div>
+
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 1">
                     <h3 style="color:black;">${recommendation_name}</h3>
@@ -193,6 +205,11 @@
                     <img src=${transaction_url} alt="Previous Product 2">
                     <h3 style="color:black;">${transaction_name}</h3>
                 </div>
+
+                <div class="arrow">
+                    &#8594;
+                </div>
+
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 2">
                     <h3 style="color:black;">${recommendation_name}</h3>