<!DOCTYPE html> <html> <head> <title>Table with Flip Cards</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="cards"> <table id="SDGtop"> <tr> <td> <a href="#SDG3"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="300" height="300"> </div> <div class="flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-3.svg" width="300" height="300"> </div> </div> </div> </a> </td> <td> <a href="#SDG7"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG7-ICON.svg" width="300" height="300"> </div> <div class="flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-7.svg" width="300" height="300"> </div> </div> </div> </a> </td> <td> <a href="#SDG8"> <div id="flipcard" class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG8-ICON.svg" width="300" height="300"> </div> <div class="flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-8.svg" width="300" height="300"> </div> </div> </div> </a> </td> <td> <a href="#SDG10"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG10-ICON.svg" width="300" height="300"> </div> <div class="flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-10.svg" width="300" height="300"> </div> </div> </div> </a> </td> </tr> <tr> <td> <a href="#SDG11"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG11-ICON.svg" width="300" height="300"> </div> <div class "flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-11.svg" width="300" height="300"> </div> </div> </div> </a> </td> <td> <a href="#SDG12"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG12-ICON.svg" width="300" height="300"> </div> <div class="flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-12.svg" width="300" height="300"> </div> </div> </div> </a> </td> <td> <a href="#SDG13"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG13-ICON.svg" width="300" height="300"> </div> <div class="flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-13.svg" width="300" height="300"> </div> </div> </div> </a> </td> <td> <a href="#SDG14"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG14-ICON.svg" width="300" height="300"> </div> <div class="flip-card-back"> <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-14.svg" width="300" height="300"> </div> </div> </div> </a> </td> </tr> </table> </div> </body> </html> <!DOCTYPE html> <html> <head> <title>SDG 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="SDG3"> <img class="img3" src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="2000" height="2000" alt="SDG 3"> <div class="text3" style="text-align: left;"> <h2><strong>SDG 3: Good Health and Well-being</strong></h2> <p style="color: black;"><strong>Ensure healthy lives and promote well-being for all at all ages</strong></p> <p style="color: black; font-size: 8vw;"> Phasing out mercury-ladened fluorescent lamps will help to achieve <a href="https://sdgs.un.org/goals/goal3">objective 3.9</a> which seeks to substantially reduce the number of deaths and illnesses from hazardous chemicals and air, water and soil pollution and contamination. </p> </div> </div> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter