Verification email - CGC

In this example below you will see how to do a Verification email - CGC 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 - CGC</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:#f9f9f9; -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:280px; border:none;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzk1LjggNTEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM5NS44IDUxIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNOTguMSwzNC4xYy0wLjQtMC42LTEuNC0xLjItMi41LTEuMmMtMS41LDAtMi4yLDAuNi0yLjIsMS40YzAsMC45LDEuMSwxLjIsMi40LDEuM2MyLjIsMC4zLDQuMywwLjksNC4zLDMuNGMwLDIuNC0yLjEsMy40LTQuNSwzLjRjLTIuMiwwLTMuOS0wLjctNC43LTIuNmwxLjctMC45YzAuNSwxLjIsMS43LDEuNywzLDEuN2MxLjMsMCwyLjUtMC40LDIuNS0xLjZjMC0xLTEuMS0xLjQtMi41LTEuNmMtMi4yLTAuMy00LjItMC44LTQuMi0zLjJjMC0yLjIsMi4yLTMuMSw0LjEtMy4xYzEuNywwLDMuNCwwLjUsNC4yLDIuMUw5OC4xLDM0LjF6Ii8+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTEwOS42LDQyLjJoLThjMC0zLjYsMC03LjEsMC0xMC43aDh2MmgtNlYzNmg1Ljh2MS45aC01Ljh2Mi40aDZWNDIuMnoiLz48cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNMTE3LjEsNDIuM0gxMTVsLTQuNC0xMC43aDIuM2wzLjIsOC4zbDMuMi04LjNoMi4zTDExNy4xLDQyLjN6Ii8+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTEzMC44LDQyLjJoLThjMC0zLjYsMC03LjEsMC0xMC43aDh2MmgtNlYzNmg1Ljh2MS45aC01Ljh2Mi40aDZWNDIuMnoiLz48cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNMTM5LjcsMzEuNWgydjEwLjdoLTEuM3YwbC01LjYtNy4ydjcuMmgtMlYzMS41aDEuNmw1LjIsNi42VjMxLjV6Ii8+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTE1NS4zLDM0LjdjMCwwLjgtMC40LDEuNi0xLjQsMi4xYzEuMywwLjQsMS43LDEuNywxLjcsMi40YzAsMi40LTEuOCwzLjEtNCwzLjFjLTEuNywwLTMuNCwwLTUuMSwwVjMxLjVjMS43LDAsMy40LDAsNS4xLDBDMTUzLjgsMzEuNSwxNTUuMywzMi41LDE1NS4zLDM0Ljd6IE0xNDguNiwzNS44aDMuMWMxLjMsMCwxLjctMC41LDEuNy0xLjFjMC0wLjUtMC40LTEuMy0xLjctMS4zaC0zLjFWMzUuOHogTTE0OC42LDQwLjRoMy4xYzAuOCwwLDItMC4zLDItMS4zYzAtMS0xLjItMS41LTItMS41aC0zLjFWNDAuNHoiLz48cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNMTY2LjYsNDIuMmgtMi40bC0zLjEtMy42aC0xLjl2My42aC0yVjMxLjVjMS43LDAsMy40LDAsNS4xLDBjMi41LDAsMy45LDEuNywzLjksMy41YzAsMS41LTAuNywyLjktMi43LDMuNGwzLjIsMy43VjQyLjJ6IE0xNTkuMSwzMy40djMuNGgzLjFjMS4zLDAsMS44LTAuOSwxLjgtMS43cy0wLjYtMS43LTEuOC0xLjdIMTU5LjF6Ii8+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTE2Ny40LDQyLjJWMzEuNWgydjEwLjdIMTY3LjR6Ii8+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTE4MC43LDM2LjhjMCwyLjctMS42LDUuNC01LjMsNS40Yy0xLjMsMC0yLjksMC00LjIsMFYzMS41YzEuMywwLDIuOSwwLDQuMiwwQzE3OSwzMS41LDE4MC43LDM0LjIsMTgwLjcsMzYuOHogTTE3My4yLDQwLjNoMi4yYzIuNCwwLDMuNC0xLjgsMy4zLTMuNWMwLTEuNy0xLTMuMy0zLjMtMy4zaC0yLjJWNDAuM3oiLz48cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNMTkwLDM0LjJjLTAuNy0wLjctMS44LTEuMS0yLjctMS4xYy0yLjMsMC0zLjcsMS43LTMuNywzLjljMCwxLjgsMSwzLjYsMy43LDMuNmMwLjgsMCwxLjYtMC4yLDIuNC0wLjl2LTEuOWgtMi43di0xLjhoNC42djQuNWMtMS4xLDEuMi0yLjQsMS45LTQuMywxLjljLTQsMC01LjctMi42LTUuNy01LjVjMC0zLDEuOS01LjgsNS43LTUuOGMxLjQsMCwyLjksMC42LDQsMS42TDE5MCwzNC4yeiIvPjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0yMDEuMiw0Mi4yaC04YzAtMy42LDAtNy4xLDAtMTAuN2g4djJoLTZWMzZoNS44djEuOWgtNS44djIuNGg2VjQyLjJ6Ii8+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTIwOS42LDM0LjFjLTAuNC0wLjYtMS40LTEuMi0yLjUtMS4yYy0xLjUsMC0yLjIsMC42LTIuMiwxLjRjMCwwLjksMS4xLDEuMiwyLjQsMS4zYzIuMiwwLjMsNC4zLDAuOSw0LjMsMy40YzAsMi40LTIuMSwzLjQtNC41LDMuNGMtMi4yLDAtMy45LTAuNy00LjctMi42bDEuNy0wLjljMC41LDEuMiwxLjcsMS43LDMsMS43YzEuMywwLDIuNS0wLjQsMi41LTEuNmMwLTEtMS4xLTEuNC0yLjUtMS42Yy0yLjItMC4zLTQuMi0wLjgtNC4yLTMuMmMwLTIuMiwyLjItMy4xLDQuMS0zLjFjMS43LDAsMy40LDAuNSw0LjIsMi4xTDIwOS42LDM0LjF6Ii8+PC9nPjxwYXRoIGZpbGw9IiMwRTRCOEYiIGQ9Ik03Ni4yLDM2LjJjLTIuMyw2LjYtOC40LDExLjMtMTUsMTEuM2MtMC45LDAtMS43LTAuMS0yLjYtMC4yYy0xLjQtMC4zLTIuOC0wLjctNC4xLTEuNGM0LjEtMy4yLDcuMi03LjYsOC43LTEyLjdoMGwwLjktMy40SDQybDAsMy4zbDE3LjUsMGMtMy4xLDguNC0xMC43LDEzLjktMTkuMywxNGMtMi43LDAtNS40LTAuNS03LjktMS42YzEuMi0xLjIsMi4zLTIuNSwzLjItNGwwLjctMS4xbC0zLjYsMGwtMC4yLDAuM2MtMyw0LjQtNy45LDctMTMsN2MtOC45LDAtMTYuMi03LjUtMTYuMi0xNi44QzMsMjEuNiwxMC4yLDE0LDE5LjEsMTRjNC45LDAsOS42LDIuMywxMi43LDYuM2wwLjIsMC4zbDMuNywwTDM1LDE5LjRjLTIuNi00LTYuNC02LjgtMTAuOC04YzMuOS00LjksOS42LTcuNywxNS44LTcuN2M5LjUtMC4xLDE3LjgsNi43LDIwLjIsMTYuM2wwLjEsMC41bDMuNiwwbC0wLjItMC45Yy0wLjQtMi0xLjEtMy45LTItNS43YzcuNSwwLjEsMTMuMyw1LjUsMTQuNywxMy4zbDMuMSwwYy0wLjQtMi44LTEuNS01LjQtMy03LjhjMCwwLTAuNC0wLjYtMC42LTAuOWMtMS43LTIuMy0zLjgtNC4yLTYuMi01LjZjLTMtMS43LTUuMi0yLjQtOC4zLTIuNGMtMC41LDAtMS4xLDAtMS42LDAuMUM1NS4yLDMuOSw0Ny44LDAsNDAsMGMtNy45LDAtMTUuMiw0LjEtMTkuNywxMC44Yy0wLjQsMC0wLjcsMC0xLjEsMEM4LjUsMTAuOC0wLjEsMTkuOSwwLDMxQzAsNDIuMSw4LjcsNTEuMSwxOS4zLDUxYzMuNCwwLDYuOC0xLDkuOC0yLjljMy40LDEuOCw3LjMsMi44LDExLjEsMi44YzMuOSwwLDcuOC0xLDExLjItMi45YzIuMSwxLjMsNC4zLDIuMSw2LjYsMi41YzEuMiwwLjIsMi40LDAuMywzLjYsMC4zYzEuOCwwLDMuNS0wLjQsNS4yLTFjNS45LTEuOSwxMC42LTcuMiwxMi41LTEzLjZMNzYuMiwzNi4yeiIvPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0xMDUuNSwyMy4xYy0xLjcsMS42LTMuOCwyLjQtNi4xLDIuNGMtNiwwLTguNS00LjEtOC41LTguM2MwLTQuMiwyLjctOC41LDguNS04LjVjMi4yLDAsNC4yLDAuOCw1LjksMi41bC0yLDEuOWMtMS4xLTEtMi41LTEuNS0zLjktMS41Yy0zLjksMC01LjUsMi45LTUuNSw1LjZjMCwyLjcsMS42LDUuNCw1LjUsNS40YzEuNCwwLDMtMC42LDQtMS42TDEwNS41LDIzLjF6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTExNy45LDIyLjFoLTguNGwtMS40LDNoLTMuM2w3LjItMTZoMy4zbDcuMiwxNmgtMy4zTDExNy45LDIyLjF6IE0xMTMuNywxMi40bC0zLDYuOGg2TDExMy43LDEyLjR6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTEzNC41LDloM3YxNi4xaC0xLjl2MGwtOC40LTEwLjh2MTAuOGgtM3YtMTZoMi41bDcuOSw5LjlWOXoiLz48cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMTU0LjQsMjMuMWMtMS43LDEuNi0zLjgsMi40LTYuMSwyLjRjLTYsMC04LjUtNC4xLTguNS04LjNjMC00LjIsMi43LTguNSw4LjUtOC41YzIuMiwwLDQuMiwwLjgsNS45LDIuNWwtMiwxLjljLTEuMS0xLTIuNS0xLjUtMy45LTEuNWMtMy45LDAtNS41LDIuOS01LjUsNS42YzAsMi43LDEuNiw1LjQsNS41LDUuNGMxLjQsMCwzLTAuNiw0LTEuNkwxNTQuNCwyMy4xeiIvPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0xNjguMSwyNS4xaC0xMmMwLTUuMywwLTEwLjcsMC0xNmgxMlYxMmgtOXYzLjdoOC43djIuOGgtOC43djMuNmg5VjI1LjF6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTE4NC42LDI1LjFIMTgxbC00LjctNS40aC0yLjl2NS40aC0zVjljMi41LDAsNS4xLDAsNy42LDBjMy44LDAsNS44LDIuNSw1LjgsNS4zYzAsMi4yLTEsNC40LTQuMSw1bDQuOSw1LjVWMjUuMXogTTE3My41LDExLjlWMTdoNC42YzEuOSwwLDIuOC0xLjMsMi44LTIuNmMwLTEuMy0wLjgtMi42LTIuOC0yLjZIMTczLjV6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTIwMi40LDEzYy0xLjEtMS0yLjctMS42LTQuMS0xLjZjLTMuNCwwLTUuNSwyLjYtNS41LDUuOWMwLDIuNiwxLjUsNS40LDUuNSw1LjRjMS4zLDAsMi40LTAuMywzLjYtMS4zdi0yLjhoLTQuMXYtMi43aDYuOXY2LjhjLTEuNiwxLjgtMy42LDIuOS02LjQsMi45Yy02LDAtOC41LTQtOC41LTguMmMwLTQuNSwyLjgtOC43LDguNS04LjdjMi4yLDAsNC4zLDAuOCw2LDIuNUwyMDIuNCwxM3oiLz48cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMjE5LjIsMjUuMWgtMTJjMC01LjMsMC0xMC43LDAtMTZoMTJWMTJoLTl2My43aDguN3YyLjhoLTguN3YzLjZoOVYyNS4xeiIvPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0yMzIuNSw5aDN2MTYuMWgtMS45djBsLTguNC0xMC44djEwLjhoLTN2LTE2aDIuNWw3LjksOS45Vjl6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTI1NC4zLDE3LjJjMCw0LjEtMi42LDguMy04LjIsOC4zcy04LjMtNC4xLTguMy04LjNjMC00LjIsMi43LTguNSw4LjMtOC41QzI1MS42LDguNywyNTQuNCwxMywyNTQuMywxNy4yeiBNMjQwLjgsMTcuMmMwLjEsMi42LDEuNSw1LjUsNS4zLDUuNWMzLjgsMCw1LjItMi44LDUuMi01LjVjMC0yLjctMS41LTUuNy01LjItNS43QzI0Mi4zLDExLjUsMjQwLjgsMTQuNSwyNDAuOCwxNy4yeiIvPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0yNzAuNSwxMy41bC01LjIsN2gtMC42bC01LjEtN3YxMS43aC0zdi0xNmgzLjVsNSw2LjlsNS02LjloMy41djE2aC0zVjEzLjV6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTI3Ni40LDI1LjF2LTE2aDN2MTZIMjc2LjR6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTI5Ni40LDIzLjFjLTEuNywxLjYtMy44LDIuNC02LjEsMi40Yy02LDAtOC41LTQuMS04LjUtOC4zYzAtNC4yLDIuNy04LjUsOC41LTguNWMyLjIsMCw0LjIsMC44LDUuOSwyLjVsLTIsMS45Yy0xLjEtMS0yLjUtMS41LTMuOS0xLjVjLTMuOSwwLTUuNSwyLjktNS41LDUuNmMwLDIuNywxLjYsNS40LDUuNSw1LjRjMS40LDAsMy0wLjYsNC0xLjZMMjk2LjQsMjMuMXoiLz48cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMzA4LjMsMTIuOWMtMC42LTAuOS0yLjEtMS44LTMuOC0xLjhjLTIuMiwwLTMuMywwLjktMy4zLDIuMWMwLDEuNCwxLjcsMS44LDMuNiwyYzMuMywwLjQsNi41LDEuMyw2LjUsNS4xYzAsMy42LTMuMiw1LjEtNi43LDUuMWMtMy4zLDAtNS44LTEtNy0zLjlsMi41LTEuM2MwLjcsMS44LDIuNiwyLjUsNC41LDIuNWMxLjksMCwzLjctMC43LDMuNy0yLjRjMC0xLjUtMS42LTIuMS0zLjctMi40Yy0zLjMtMC40LTYuMy0xLjMtNi4zLTQuOWMwLTMuMywzLjMtNC43LDYuMi00LjdjMi41LDAsNS4xLDAuNyw2LjMsMy4yTDMwOC4zLDEyLjl6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTMzMi4zLDIzLjFjLTEuNywxLjYtMy44LDIuNC02LjEsMi40Yy02LDAtOC41LTQuMS04LjUtOC4zYzAtNC4yLDIuNy04LjUsOC41LTguNWMyLjIsMCw0LjIsMC44LDUuOSwyLjVsLTIsMS45Yy0xLjEtMS0yLjUtMS41LTMuOS0xLjVjLTMuOSwwLTUuNSwyLjktNS41LDUuNmMwLDIuNywxLjYsNS40LDUuNSw1LjRjMS40LDAsMy0wLjYsNC0xLjZMMzMyLjMsMjMuMXoiLz48cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMzM2LjgsOS4xdjEzLjJoOC4zdjIuOGgtMTEuM3YtMTZIMzM2Ljh6Ii8+PHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTM2Mi40LDE3LjJjMCw0LjEtMi42LDguMy04LjIsOC4zYy01LjYsMC04LjMtNC4xLTguMy04LjNjMC00LjIsMi43LTguNSw4LjMtOC41QzM1OS43LDguNywzNjIuNSwxMywzNjIuNCwxNy4yeiBNMzQ4LjksMTcuMmMwLjEsMi42LDEuNSw1LjUsNS4zLDUuNWMzLjgsMCw1LjItMi44LDUuMi01LjVjMC0yLjctMS41LTUuNy01LjItNS43QzM1MC40LDExLjUsMzQ4LjksMTQuNSwzNDguOSwxNy4yeiIvPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zNzguNyw5LjF2OS4yYzAsNC43LTIuOSw3LjItNi45LDcuMmMtMy45LDAtNy4xLTIuMy03LjEtNy4yVjkuMWgzdjkuMmMwLDIuOSwxLjcsNC40LDQuMSw0LjRjMi41LDAsMy45LTEuNywzLjktNC40VjkuMUgzNzguN3oiLz48cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMzk1LjgsMTYuOWMwLjEsNC4xLTIuNCw4LjItOCw4LjJjLTIsMC00LjMsMC02LjMsMHYtMTZjMiwwLDQuMywwLDYuMywwQzM5My4zLDkuMSwzOTUuNywxMywzOTUuOCwxNi45eiBNMzg0LjUsMjIuMmgzLjNjMy42LDAsNS4xLTIuNyw1LTUuM2MtMC4xLTIuNS0xLjUtNS01LTVoLTMuM1YyMi4yeiIvPjwvc3ZnPg=="></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:#2574A9; border:1px solid #1e5d87; 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