Verification email - SBG

In this example below you will see how to do a Verification email - SBG with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by prebla, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright prebla ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Verification email - SBG</title>
  
  
  
  
  
</head>

<body>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Seven Bridges Account Verification</title>
</head>
<body style="width:100%; height:100%; margin:0; padding:32px; font: normal normal normal 14px/21px Arial,sans-serif; color:#333; background-color:#f1f1f1; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
    <table class="email-wrapper" style="width:100%; height:100%; margin:auto; padding:0; text-align:center; vertical-align:middle; border-spacing:0; border-collapse:collapse;"><tr><td>
    
    <table class="email-layout" style="width:450px; height:300px; margin:auto; padding:0; vertical-align:middle; border-spacing:0; border-collapse:collapse;">
        <thead class="email-header" style="text-align:center;"><tr><th style="padding-bottom:32px; text-align:center; font-weight:normal;">            
            <a href="http://www.sgbenomics.com" target="_blank"><img style="width:180px; border:none;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA3NzIuNyAxMTEuNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNzcyLjcgMTExLjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojMDgzMDUwO30uc3Qxe2Rpc3BsYXk6bm9uZTt9PC9zdHlsZT48ZyBpZD0iTGF5ZXJfMSI+PGcgaWQ9IlhNTElEXzJfIj48ZyBpZD0iWE1MSURfMjMzXyI+PHBhdGggaWQ9IlhNTElEXzI0NV8iIGNsYXNzPSJzdDAiIGQ9Ik02My41LDE0LjFsLTUuOCwxMi4yYy04LjktNS40LTE3LjgtNy42LTI0LjEtNy42Yy04LjEsMC0xMy40LDMuMS0xMy40LDguNmMwLDE4LDQ0LjQsOC4zLDQ0LjMsMzcuOWMwLDE0LjctMTIuOSwyMy43LTMxLDIzLjdjLTEyLjksMC0yNS4xLTUuMy0zMy42LTEzbDYtMTJjOC41LDcuNywxOSwxMiwyNy44LDEyYzkuNiwwLDE1LjQtMy42LDE1LjQtMTBjMC0xOC4zLTQ0LjQtOC4xLTQ0LjQtMzcuM2MwLTE0LjEsMTIuMS0yMi45LDI5LjktMjIuOUM0NS40LDUuNiw1NS45LDksNjMuNSwxNC4xeiIvPjxwYXRoIGlkPSJYTUxJRF8yNDFfIiBjbGFzcz0ic3QwIiBkPSJNMTMzLjEsNjIuM0g4NS45YzIuMSw5LjYsOS41LDE1LjYsMTkuNCwxNS42YzYuOCwwLDEzLTIuNiwxNy42LTcuM2w3LjIsNy42Yy02LjEsNi43LTE1LDEwLjYtMjUuOCwxMC42Yy0xOS4zLDAtMzEuOS0xMi44LTMxLjktMzEuNmMwLTE4LjksMTMtMzEuNywzMS42LTMxLjhDMTI1LjgsMjUuNSwxMzQuNywzOS44LDEzMy4xLDYyLjN6IE0xMjEuMyw1Mi41Yy0wLjUtMTAuMS03LjItMTYuMi0xNy40LTE2LjJjLTkuOSwwLTE2LjgsNi4yLTE4LjMsMTYuMkgxMjEuM3oiLz48cGF0aCBpZD0iWE1MSURfMjM5XyIgY2xhc3M9InN0MCIgZD0iTTE2MC41LDg4LjRsLTI0LjItNjIuNWgxNC4xbDE3LjQsNDkuMmwxNy4xLTQ5LjJoMTMuNWwtMjMuOSw2Mi41SDE2MC41eiIvPjxwYXRoIGlkPSJYTUxJRF8yMzZfIiBjbGFzcz0ic3QwIiBkPSJNMjYxLjUsNjIuM2gtNDcuMmMyLjEsOS42LDkuNSwxNS42LDE5LjQsMTUuNmM2LjgsMCwxMy0yLjYsMTcuNi03LjNsNy4yLDcuNmMtNi4xLDYuNy0xNSwxMC42LTI1LjgsMTAuNmMtMTkuMywwLTMxLjktMTIuOC0zMS45LTMxLjZjMC0xOC45LDEzLTMxLjcsMzEuNi0zMS44QzI1NC4zLDI1LjUsMjYzLjIsMzkuOCwyNjEuNSw2Mi4zeiBNMjQ5LjgsNTIuNWMtMC41LTEwLjEtNy4yLTE2LjItMTcuNC0xNi4yYy05LjksMC0xNi44LDYuMi0xOC4zLDE2LjJIMjQ5Ljh6Ii8+PHBhdGggaWQ9IlhNTElEXzIzNF8iIGNsYXNzPSJzdDAiIGQ9Ik0zMzMuMyw0OS41djM4LjloLTEzLjVWNTMuM2MwLTkuNC01LjYtMTUuMS0xNS0xNS4xYy0xMC4zLDAuMS0xNi44LDcuMy0xNy43LDE3djMzLjJoLTEzLjVWMjUuOWgxMy41djEyYzQuNS04LjcsMTIuNC0xMi40LDIzLTEyLjRDMzI0LjYsMjUuNSwzMzMuMywzNC42LDMzMy4zLDQ5LjV6Ii8+PC9nPjxnIGlkPSJYTUxJRF8xMzJfIj48cGF0aCBpZD0iWE1MSURfMjI5XyIgY2xhc3M9InN0MCIgZD0iTTM4Ny40LDYuM2MxNywwLDI3LjYsNy43LDI3LjYsMjAuNWMwLDkuMy01LjUsMTYuMi0xNC40LDE4LjNjMTEsMS45LDE3LjYsOS43LDE3LjYsMjAuOGMwLDE0LjEtMTEuNCwyMi41LTI5LjksMjIuNWgtMzYuNVY2LjNIMzg3LjR6IE0zNjUuNiw0MC40aDIxLjFjOC44LDAsMTQuMS00LjEsMTQuMS0xMXMtNS4zLTEwLjctMTQuMS0xMC43aC0yMS4xVjQwLjR6IE0zNjUuNiw3Ni4yaDIxLjFjMTAuOCwwLDE3LjMtNC4yLDE3LjMtMTJjMC03LjMtNi41LTExLjYtMTcuMy0xMS42aC0yMS4xVjc2LjJ6Ii8+PHBhdGggaWQ9IlhNTElEXzIyN18iIGNsYXNzPSJzdDAiIGQ9Ik00NDUuMywzOC41YzQuMi04LjUsMTEuNy0xMi45LDIxLjYtMTIuOXYxMi45Yy0xMi42LTAuNy0yMC41LDYuNy0yMS42LDE3LjR2MzIuNmgtMTMuNVYyNi4xaDEzLjVWMzguNXoiLz48cGF0aCBpZD0iWE1MSURfMjI0XyIgY2xhc3M9InN0MCIgZD0iTTQ5My43LDguMmMwLDQuNy0zLjQsOC4xLTcuOSw4LjFjLTQuNSwwLTcuOS0zLjQtNy45LTguMWMwLTQuOCwzLjQtOC4yLDcuOS04LjJDNDkwLjMsMCw0OTMuNywzLjQsNDkzLjcsOC4yeiBNNDc5LjIsODguNVYyNi4xaDEzLjR2NjIuNUg0NzkuMnoiLz48cGF0aCBpZD0iWE1MSURfMjIxXyIgY2xhc3M9InN0MCIgZD0iTTU2OS41LDg4LjVINTU2Vjc3LjhjLTQuNSw3LjMtMTIsMTEuMy0yMiwxMS4zYy0xOCwwLTI5LjktMTMtMjkuOS0zMmMwLTE4LjgsMTIuMS0zMS42LDI5LjctMzEuNmMxMC4xLDAsMTcuNiw0LjEsMjIuMiwxMS40VjEuNGgxMy41Vjg4LjV6IE01NTYsNTcuNWMwLTEyLjEtNy45LTIwLjUtMTkuMS0yMC41cy0xOS4xLDguNi0xOS4zLDIwLjVjMC4xLDExLjksNy45LDIwLjMsMTkuMywyMC4zQzU0OC4xLDc3LjgsNTU2LDY5LjQsNTU2LDU3LjV6Ii8+PHBhdGggaWQ9IlhNTElEXzIxOF8iIGNsYXNzPSJzdDAiIGQ9Ik02NDIuMiw4Mi40YzAsMTgtMTIuOCwyOS4yLTMyLjQsMjkuMmMtOS43LDAtMTguMy0zLjEtMjUuOS04LjJsNS44LTkuN2M1LjksNC4zLDEyLDYuOCwxOS42LDYuOGMxMS45LDAsMTkuNi02LjksMTkuNi0xNy43di03LjljLTQuMiw2LjgtMTEuMywxMC42LTIwLjcsMTAuNmMtMTYuOSwwLTI4LjItMTIuMi0yOC4yLTMwLjJjMC0xNy42LDExLjItMjkuNiwyNy43LTI5LjdjOS42LTAuMSwxNi44LDMuOCwyMS4xLDEwLjZWMjYuMWgxMy40VjgyLjR6IE02MjguOCw1NS42YzAtMTEuMy03LjQtMTkuMS0xOC0xOS4xYy0xMC43LDAtMTguMSw4LTE4LjIsMTkuMWMwLjEsMTEuMyw3LjQsMTkuMywxOC4yLDE5LjNDNjIxLjQsNzQuOSw2MjguOCw2Ni45LDYyOC44LDU1LjZ6Ii8+PHBhdGggaWQ9IlhNTElEXzIxNV8iIGNsYXNzPSJzdDAiIGQ9Ik03MTQuNiw2Mi41aC00Ny4yYzIuMSw5LjYsOS41LDE1LjYsMTkuNCwxNS42YzYuOCwwLDEzLTIuNiwxNy42LTcuM2w3LjIsNy42Yy02LjEsNi43LTE1LDEwLjYtMjUuOCwxMC42Yy0xOS4zLDAtMzEuOS0xMi44LTMxLjktMzEuNmMwLTE4LjksMTMtMzEuNywzMS42LTMxLjhDNzA3LjMsMjUuNiw3MTYuMiwzOS45LDcxNC42LDYyLjV6IE03MDIuOCw1Mi42Yy0wLjUtMTAuMS03LjItMTYuMi0xNy40LTE2LjJjLTkuOSwwLTE2LjgsNi4yLTE4LjMsMTYuMkg3MDIuOHoiLz48cGF0aCBpZD0iWE1MSURfMjEzXyIgY2xhc3M9InN0MCIgZD0iTTc3MS43LDMxLjhsLTQuOSwxMGMtNS41LTMuNC0xMi40LTUuNS0xOC01LjVjLTUuMywwLTkuMiwxLjgtOS4yLDYuMmMwLDExLjUsMzMuMiw1LjMsMzMuMSwyNy45YzAsMTIuOC0xMS40LDE4LjUtMjMuOSwxOC41Yy05LjIsMC0xOC45LTMuMS0yNS4xLTguN2w0LjgtOS42YzUuNCw0LjgsMTQuMSw3LjcsMjAuOSw3LjdjNS44LDAsMTAuMi0yLDEwLjItNi43YzAtMTIuOC0zMi45LTUuNi0zMi44LTI4LjJjMC0xMi43LDExLTE4LjEsMjMtMTguMUM3NTcuNywyNS41LDc2NiwyNy44LDc3MS43LDMxLjh6Ii8+PC9nPjwvZz48L2c+PGcgaWQ9Imd1aWRlcyIgY2xhc3M9InN0MSI+PC9nPjwvc3ZnPg=="></img></a>
        </th></tr></thead>
        
        <tbody class="email-body"><tr><td style="text-align:left;">     
            <div style="padding:21px 32px; background-color:#fff; border-bottom:2px solid #e1e1e1; border-radius:3px;">
                <h1 style="font-size:21px; line-height:30px; font-weight:bold;">Almost there! Just confirm your email</h1>
                <p>
                    Please confirm your email to start searching and experimenting on Seven Bridges platform.
                </p>
                <p style="padding:11px 0; text-align:left;">
                    <a href="" target="_blank" style="padding:11px 21px; text-decoration:none; color:#fff !important; background-color:#42af5b; border:1px solid #358d49; border-radius:3px;">Confirm email</a>
                </p>
                <p>
                    Cheers,<br>
                    The Seven Bridges Team
                </p>
            </div>
        </td></tr></tbody>
        
        <tfoot class="email-footer" style="text-align:center; font-weight:normal;"><tr><td style="padding-top:32px;">
            <div style="color:#999;">
                <a href="" target="_blank" style="text-decoration:none; color:#446cb3 !important;">Get in touch</a> |
                <a href="" target="_blank" style="text-decoration:none; color:#446cb3 !important;">Knowledge Center</a> |
                <a href="" target="_blank" style="text-decoration:none; color:#446cb3 !important;">Log in</a>
            </div>
            <small style="font-size:12px; color:#999;">© 2016 Seven Bridges, Inc. 1 Broadway, 14th Floor, Cambridge, MA 02142<small>
        </td></tr></tfoot>
    </table>
        
    </td></tr></table>
</body>
</html>
  
  

</body>

</html>

Comments