terrancesnyder/email-template.html

## email-template.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Catalina News</title>
  </head>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto:100,300,400,500" rel="stylesheet">
    <style>
        body {
            margin: 0px auto;
            width: 80%;
            min-height: 800px;
            font-family: 'Noto Sans', sans-serif;
            padding-top: 10%;
        }
        .awesome-font {
            font-family: 'Roboto', sans-serif;
        }
        .hero {
        	margin: 0px auto;
        	width: 100%;
            max-width: 800px;
            min-height: 300px;
            height: 100%;

            -webkit-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.15);
            -moz-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.15);
            box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.15);
            background-color: #33ddcc;
        }

        .side {
        	width: 40%;
            min-height: 300px;
            float: left;
            height: 100%;
        }
        .side h1 {
        	color: #fff;
            font-weight: 100;
            margin: 0px;
            padding: 0px;
            padding: 1em;
        }
        .content {
        	width: 49%;
            float: right;
            padding: 1em;
            background-color: #fff;
        }
        .content h1 {
        	 font-family: 'Open Sans', 'Nato Sans', sans-serif;
            font-size: 28px;
            font-weight: 300;
            color: #336699;
            margin: 0px;
            padding: 0px;
            margin-bottom: 1em;
        }
        .clearfix {
        	display: block;
            clear: both;
            height: 0px;
            width: 0px;
        }

        .legal {
            margin: 0px auto;
            margin-top: 20px;
        	width: 100%;
            max-width: 800px;
            min-height: 300px;
            font-size: 12px;
            color: #888;
            font-size: 12px;
        }
        .legal ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        .legal li {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        .button {
        	margin: 0px auto;
        	display: inline-block;
            padding: 1em;
            padding-left: 1.5em;
            padding-right: 1.5em;

        	background-color: #2d2d2d;
            color: #fff;
            font-size: 12px;

            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        @media only screen and (max-width: 700px) {
            .side {
                width: 100%;
                min-height: auto;
                float: none;
            }
            .side h1 {
                border: 1px solid red;
                padding-bottom: .5em;
                width: auto;
                padding: 1em;
            }
            .content {
                float: none;
                width: auto;
                padding: none;
                background-color: #fff;
            }
        }

        @media only screen and (max-width: 500px) {
        	body {
        		font-size: 14px;
            }
        }

        @media only screen and (max-width: 400px) {
        	body {
        		font-size: 13px;
            }
        }

        .side a {
        	background-color: #fff;
            opacity: 0.5;
            padding: 5px;
            margin-left: 5px;
            border-radius: 10px;
        }
    </style>

  <body>

      <div class="hero">
          <div class="side">
              <h1 class="awesome-font">Catalina Programmatic Advertising!</h1>

              <a href="3">どもありがとございます</a>
          </div>
          <div class="content">
              <h1>店頭の購買データをもとにオンライン運用型広告を配信。</h1>
              <p>
ターゲティングから施策の売上貢献まで購買データによる可視化を実現。
              </p>
              <p>
                  カタリナの新ソリューション「Catalina-Programmatic Advertising（通称C-PAD）」により、独自の方法でオンライン化した実店頭の購買データを活用し、配信の各プロセスの最適化が可能になりました。</p>
              <p>
C-PADを活用して、普段の運用型広告の効果を最大化しませんか？
              </p>
              <p>
ご興味ある方は是非下記のお問い合わせフォームからご連絡ください。
              </p>

              <a href="{url}" class="button">お問い合わせ</a>
          </div>
          <div class="clearfix"></div>
      </div>

      <div class="legal">
          <ul>
              <li>
                  ※本メールは弊社社員と名刺を交換させて頂いたお客様、過去イベントへの参加、Webサイトからお問い合わせをいただきましたお客様を対象にお送りしております。
              </li>
              <li>
                  ※このメールは送信専用メールアドレスから配信されています。ご返信いただいてもお答えできませんのでご了承ください。
              </li>
          </ul>
          <p>
Copyright © %%current_year_YYYY%%, Catalina Marketing Japan K.K.
〒105-0001 東京都港区虎ノ門二丁目2番1号 JTビル15階
          </p>
      </div>

  </body>
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Catalina News</title>
	</head>
	<link href="https://fonts.googleapis.com/css?family=Noto+Sans\|Roboto:100,300,400,500" rel="stylesheet">
	<style>
	body {
	margin: 0px auto;
	width: 80%;
	min-height: 800px;
	font-family: 'Noto Sans', sans-serif;
	padding-top: 10%;
	}
	.awesome-font {
	font-family: 'Roboto', sans-serif;
	}
	.hero {
	margin: 0px auto;
	width: 100%;
	max-width: 800px;
	min-height: 300px;
	height: 100%;

	-webkit-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.15);
	background-color: #33ddcc;
	}

	.side {
	width: 40%;
	min-height: 300px;
	float: left;
	height: 100%;
	}
	.side h1 {
	color: #fff;
	font-weight: 100;
	margin: 0px;
	padding: 0px;
	padding: 1em;
	}
	.content {
	width: 49%;
	float: right;
	padding: 1em;
	background-color: #fff;
	}
	.content h1 {
	font-family: 'Open Sans', 'Nato Sans', sans-serif;
	font-size: 28px;
	font-weight: 300;
	color: #336699;
	margin: 0px;
	padding: 0px;
	margin-bottom: 1em;
	}
	.clearfix {
	display: block;
	clear: both;
	height: 0px;
	width: 0px;
	}

	.legal {
	margin: 0px auto;
	margin-top: 20px;
	width: 100%;
	max-width: 800px;
	min-height: 300px;
	font-size: 12px;
	color: #888;
	font-size: 12px;
	}
	.legal ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	.legal li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

	.button {
	margin: 0px auto;
	display: inline-block;
	padding: 1em;
	padding-left: 1.5em;
	padding-right: 1.5em;

	background-color: #2d2d2d;
	color: #fff;
	font-size: 12px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

	@media only screen and (max-width: 700px) {
	.side {
	width: 100%;
	min-height: auto;
	float: none;
	}
	.side h1 {
	border: 1px solid red;
	padding-bottom: .5em;
	width: auto;
	padding: 1em;
	}
	.content {
	float: none;
	width: auto;
	padding: none;
	background-color: #fff;
	}
	}

	@media only screen and (max-width: 500px) {
	body {
	font-size: 14px;
	}
	}

	@media only screen and (max-width: 400px) {
	body {
	font-size: 13px;
	}
	}

	.side a {
	background-color: #fff;
	opacity: 0.5;
	padding: 5px;
	margin-left: 5px;
	border-radius: 10px;
	}
	</style>

	<body>

	<div class="hero">
	<div class="side">
	<h1 class="awesome-font">Catalina Programmatic Advertising!</h1>

	<a href="3">どもありがとございます</a>
	</div>
	<div class="content">
	<h1>店頭の購買データをもとにオンライン運用型広告を配信。</h1>
	<p>
	ターゲティングから施策の売上貢献まで購買データによる可視化を実現。
	</p>
	<p>
	カタリナの新ソリューション「Catalina-Programmatic Advertising（通称C-PAD）」により、独自の方法でオンライン化した実店頭の購買データを活用し、配信の各プロセスの最適化が可能になりました。</p>
	<p>
	C-PADを活用して、普段の運用型広告の効果を最大化しませんか？
	</p>
	<p>
	ご興味ある方は是非下記のお問い合わせフォームからご連絡ください。
	</p>

	<a href="{url}" class="button">お問い合わせ</a>
	</div>
	<div class="clearfix"></div>
	</div>

	<div class="legal">
	<ul>
	<li>
	※本メールは弊社社員と名刺を交換させて頂いたお客様、過去イベントへの参加、Webサイトからお問い合わせをいただきましたお客様を対象にお送りしております。
	</li>
	<li>
	※このメールは送信専用メールアドレスから配信されています。ご返信いただいてもお答えできませんのでご了承ください。
	</li>
	</ul>
	<p>
	Copyright © %%current_year_YYYY%%, Catalina Marketing Japan K.K.
	〒105-0001 東京都港区虎ノ門二丁目2番1号 JTビル15階
	</p>
	</div>

	</body>
	<!--[if mso]>
	<style type="text/css">
	body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
	</style>
	<![endif]-->
	</html>