blogger開発講座: メール登録ホーム

これは、今作っているメールとして、広告ホームです。実際の物を表示しています。
まだ、リンク先は、作成していません。
ベースのhtmlは、FC2で、作りました。何も難しい事は、してません。

ソース

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>メール登録ホーム</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

/* メインイメージ */

.main {
            padding: 60
              ;//144px 0;
            width: 100%;
            background: #3bafda;
            background-image: linear-gradient(135deg, #8cc152, #3bafda, #4a89dc);
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 3em;
        }             /* ヘッダー */

.header {
            z-index: 100;
            padding: 24px 0;
            width: 100%;
            border-bottom: #ccd1d9 solid 1px;
            background: #fff;
            color: #333;
            text-align: center;
        }

.header-title {
            margin: 0;
            font-size: 2.4em;
        }

/* ボディー */

.body {
            width: 1000px;
            margin: 0 auto;
            display: block;
            clear: both;
            content: "";
        }
        /* コンテンツ */

.content {
            padding: 48px 0 24px;
            width: 780px;
            float: left;
            box-sizing: border-box;
        }

.button_example{
border:1px solid #ff2596; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #ff5db1; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5db1), to(#D5D8DB));
 background-image: -webkit-linear-gradient(top, #ff5db1, #D5D8DB);
 background-image: -moz-linear-gradient(top, #ff5db1, #D5D8DB);
 background-image: -ms-linear-gradient(top, #ff5db1, #D5D8DB);
 background-image: -o-linear-gradient(top, #ff5db1, #D5D8DB);
 background-image: linear-gradient(to bottom, #ff5db1, #D5D8DB);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff5db1, endColorstr=#D5D8DB);
}

.button_example:hover{
 border:1px solid #f60080;
 background-color: #ff2a98; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff2a98), to(#babfc3));
 background-image: -webkit-linear-gradient(top, #ff2a98, #babfc3);
 background-image: -moz-linear-gradient(top, #ff2a98, #babfc3);
 background-image: -ms-linear-gradient(top, #ff2a98, #babfc3);
 background-image: -o-linear-gradient(top, #ff2a98, #babfc3);
 background-image: linear-gradient(to bottom, #ff2a98, #babfc3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff2a98, endColorstr=#babfc3);
}

</style>
</head>

<body id="top">
<div class="main">
アフィリエイト講座メール登録ホーム</div>
<div>

<table width='100%'>
<tbody>
<tr>
<td style="text-align: left;">
メール登録をお願いします。
</td>
<td style="text-align: right;">
<a class='button_example' href='http://marineaf117.blogspot.jp/'><span style='text-align: center;' >ホームへ戻る</span></a>

</td>
</tr>
</tbody>
</table>
</div>
<hr color="#000000" width="100%" size="1" />
<table style=""  width='100%'>
<tbody>
<tr>

</dt>
</tr>
</tbody>
</table>
</td>
<td width='60%' style='vertical-align:top'>

<div style="text-align: center;">
<div>
名前は、本名である必要は、ありません</div>
<div>
ここで登録された方には、サイト更新情報や、最新情報等が、メールされます。</div>
<div>
解除は、簡単にできます。</div>
<div>
メールについているメール解除をクリックするだけで、解除ホームページへいけます。</div>
<div>
メールアドレスを入力して、ボタンを押すだけです。</div>
<br/>
<span style="color: #ff0000;"><?php
print $_REQUEST["input_err"];
?>
</span>

<table style="margin-left: auto; margin-right: auto;" border="1" cellspacing="0"
style="border-collapse: collapse;">
<tbody>
<tr>
<td style="text-align:td">
名前
</td>
<td style="text-align: left;"><input type="text" name="user_name" style='margin: 3px;width:200px'  value=<?=$_REQUEST["user_name"]?>>2文字以上</td>
</tr>
<tr>
<td style="text-align: right;">メールアドレス </td>
<td style="text-align: left;"><input type="mail" name="user_mail" pattern="^[0-9a-zA-Z]+[\w-]+@[\w\.-]+\.\w{2,}$" style='margin: 3px;width:300px' value=<?=$_REQUEST["user_mail"]?>>64文字まで</td>
</tr>
</tbody>
</table>
<br/>
<input type=submit  style='margin: 3px;width:150px' class='button_example' value='決定'>
<br><br>登録終了した場合、登録アドレスに<br>
私からの挨拶メールが送信されます。<br>
friendmarine@yahoo.co.jpからの<br>
メールを受信可能に設定して置いて下さい。<br>
このメールアドレスは、まりねのコミュニケーション用です。<br>
要望質問等も受け付けしています。<br>
</div>
</form>

</td>
<td width='20%' style='vertical-align:top'>
<table style="margin-left: auto; margin-right: auto;" border="0" cellspacing="0"
style="border-collapse: collapse;">
<tbody>
<tr>
<td>

</dt>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody>
</table>

</body>

</html>

ページトップへ戻る

menu

2016年4月30日土曜日

メール登録ホーム

0 件のコメント:

コメントを投稿