<style>
    .welcome{
      height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: row;
    }
  
    .welcome__image{
      height: 100%;
      width: 65%;
      background-image: url("/../2.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    }
  
    .welcome__image--blur{
      width: 100%;
      height: 100%;
      background-color: rgba(50, 101, 212, 0.603);
    }
  
    .welcome__login{
      width: 35%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  
    a{
      width: 300px;
    }

    table{
        overflow: scroll;
    }

    @media (max-width: 1024px) {
    .welcome__image{
    width: 50%;
    background-position:right;
  }
  .welcome__login{
    width: 50%;
    
    }
  }

  @media (max-width: 650px) {
    .welcome__image{
    width: 0%;
    background-image: none;
  }
  .welcome__login{
    width: 100%;
    }
  }
  </style>

<div class="welcome">
    <div class="welcome__image">
      <div class="welcome__image--blur"></div>
    </div>
    <div class="welcome__login">
<table>
    <tr >
    <% questions.forEach(function(question) { %>        
       <td class="p-2 border border-secondary"> <%= question %></td>
    <% }) %>
    </tr>
    
    <h4 class="p-2" style ="margin: 50px 0 20px 0;">Lista odpowiedzi:</h4>
        <% for (let m = 0; m < answers.length ; m++) { %>         
    <tr>
        
            <% for (let n = 0; n < answers[0].length ; n++) { %>
            <td class="p-2 border border-primary"><%= answers[m][n]%></td>
        <% } %>
    </tr>
    <% } %> 
 </table>
 <a href="../../yourPolls/<%= pollId %>" class="btn btn-secondary" style = "margin-top: 30px;">Back</a>
</div>
</div>