Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
/* ------------------------------------- 
        GLOBAL 
------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    width: 100% !important;
    height: 100%;
    font-family: 'Raleway', sans-serif;
}
​
/* ------------------------------------- 
        ELEMENTS 
------------------------------------- */
a {
    font-family: 'Raleway', sans-serif;
}
​
.btn-primary {
    background-color: #c26458;
    color: #ffffff;
    padding: 9px 22px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    margin-bottom: 30px;
}
​
.last {
    margin-bottom: 0;
}
​
.first {
    margin-top: 0;
}
​
/* ------------------------------------- 
        BODY 
------------------------------------- */
table.body-wrap {
    width: 100%;
    padding: 40px;
}
​
/* ------------------------------------- 
        TYPOGRAPHY 
------------------------------------- */
h1,h2,h3 {
    font-family: 'Raleway', sans-serif;
    line-height: 1.1;
    margin-bottom: 15px;
    color: #000;
    margin: 25px 0 0px;
    line-height: 1.2;
    font-weight: 200;
}
​
h1 {
    font-size: 36px;
}
​
h2 {
    font-size: 28px;
}
​
h3 {
    font-size: 22px;
}
​
p,ul {
    margin-bottom: 10px;
    font-weight: normal;
    font-size: 14px;
}
​
ul li {
    margin-left: 5px;
    list-style-position: inside;
}
​
.text-upper {
    text-transform: uppercase;
}
​
.text-center {
    text-align: center;
}
​
​
/* main style */
.container {
    display: block !important;
    max-width: 480px !important;
    margin: 0 auto !important; /* makes it centered */
    clear: both !important;
    border: none !important;
    background: transparent !important;
}
​
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
    padding: 0px;
    max-width: 600px;
    margin: 0;
    display: block;
    -moz-box-shadow: 0 0 1px #a3a9ac;
    -webkit-box-shadow: 0 0 1px #a3a9ac;
    box-shadow: 0 0 1px #a3a9ac;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 3px solid #a3a9ac !important;
}
​
/* Let's make sure tables in the content area are 100% wide */
.content table {
    width: 100%;
    padding: 0;
}
​
/* Adding other elements style */
.mail-header-s {
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: 600;
    color: #88b17d;
}
​
.mail-header-main {
    background-color: #7f9ead;
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: 700;
    margin-top: 8px;
    margin-left: -3px;
    margin-right: -3px;
    padding-top: 7px;
    padding-bottom: 7px;
}
​
.mail-content-main {
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: 600;
    color: #a3a9ac;
    margin-bottom: 0px;
}
​
.pad-b-50 {
    padding-bottom: 50px;
}
​
.top-image {
}
</style>
</head>
​
<body>
    <!-- body -->
    <table class="body-wrap">
        <tr>
            <td></td>
            <td class="container">
                <table style="width: 100%;">
                    <tr>
                        <td></td>
                        <td class="text-center"><img class="top-image"
                            src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" /></td>
                        <td></td>
                    </tr>
                </table>
                <!-- content -->
                <div class="content">
                    <table cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <h2 class="text-upper text-center mail-header-s">Hello</h2><br><br><br><br><br><br><br>
                            </td>
                        </tr>
                        
                    </table>
                </div> <!-- /content -->
​
            </td>
            <td></td>
        </tr>
    </table>
    <!-- /body -->
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers