Instructions:
* Create the Pages you want to link to (with at least the correct page title).
* Create a folder within Files to store the images for the tiles. Set the availability of the folder to 'Only available with link'.
* Use the </> button to access the code editor for the Canvas page.
* Pick a colour for the background that is not white but has a high enough contrast from the text colour. Add the hexadecimal code for the colour to the first line after the 'background' tag. See https://htmlcolorcodes.com/ .
* Use one 'block' of code for each 'tile' to appear in the grid. The tiles will automatically arrange themselves to suit the size of the screen of the user.
* Add the web address of the page you want to link to *twice*, and the web address for the image.
* Add the text to appear in the link *twice*. A user should be able to tell from this text alone what they can expect to find by following the link.
* Canvas will add more code once you save the page, and change the layout.




<div 
  style="background: #ffcccc; 
  padding: 10pt; 
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto;"
>
    <div 
      style="display: flex; 
      flex-wrap: wrap; 
      justify-content: center;"
    >

<!-- Start of block -->

        <div class=".tile" style="margin: 10px;">
            <p>
		<a 
		  title="(Link text)" 
		  href="https://canvas.liverpool.ac.uk/courses/(Canvas page web address)" 
		>
		  <img 
		    style="height: 30vh; 
		    max-height: 200px; 
		    min-height: 50px;" 
		    role="presentation" 
		    src="https://canvas.liverpool.ac.uk/courses/(Image web address)" 
		    alt=""  
		  />
		</a>
	    </p>
            <p style="text-align: center;">
		<a 
		  href="https://canvas.liverpool.ac.uk/courses/(Canvas page web address)"
		>
		  (Link text)
		</a>
            </p>
        </div>

<!-- End of block -->

<!-- Start of block -->
  block 2
<!-- End of block -->


    </div>
</div>