分享一个好看的邮件单页模板

/ 浏览:2505 次

工作需求做了一个邮件的单页内容介绍模板,自给自足自力更新,喜欢的直接扒代码走,记得别忘记注明出处,谢谢!

效果图:

<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<style type="text/css" media="all">
.content {
    width: 700px;
    margin: auto;
    background: #fff;
    line-height: 1.5;
    font-size: 15px;
    color: #333;
    font-family: microsoft yahei;
}

.content-body {
    -webkit-box-shadow: 0 5px 23px 3px rgba(0,0,0,.15);
    box-shadow: 0 5px 23px 3px rgba(0,0,0,.15);
}

.essence-info {
    width: 400px;
    color: #fff;
}

.essence-logo {
    width: 70px;
}

.essence-logo img {
    width: 70px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.emailhead {
    background: #6958ca;
    padding: 15px;
    border-radius: 5px 5px 0px 0px;
}

.oneimg img {
    width: 350px;
}

.twoimg img {
    width: 175px;
}

.threeimg {
    text-align: center;
    width: 175px;
    background: #eee;
    height: 175px;
}

.threeimg p {
    font-size: 35px;
    margin-bottom: 0px;
    margin-top: 5px;
    font-weight: 700;
}

.plusinfo {
    padding-top: 25px;
}

.essence {
    font-size: 30px;
    margin-left: -2px;
}

.educational {
    letter-spacing: 5px;
}

.gmat-info {
    font-weight: 100;
}

.emailtitle {
    font-size: 21px;
    font-weight: 700;
    padding-top: 55px;
    text-transform: uppercase;
    width: 90%;
    margin: auto;
}

.emailimg {
    -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    -ms-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    -o-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
}

.comingleft {
    width: 90%;
    margin: auto;
}

.emailtitle h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    border-left: 5px solid #333;
    padding-left: 25px;
    margin-left: -35px;
    font-size: 25px;
    font-weight: 700;
}

.post-comtime,.cominginfo h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 0px;
}

.cominginfo img {
    width: 15px;
    padding-right: 5px;
}

.plantrybtn {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 2em;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.plantrybtn a {
    display: inline-block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    background-color: #6958ca;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
}

.gmatteach {
    padding-top: 0px;
    padding-bottom: 20px;
    font-size: 17px;
}

.intro {
    font-size: 25px;
    font-weight: 700;
    border-left: 5px solid #333;
    padding-left: 25px;
    margin-left: -35px;
    text-transform: uppercase;
}

.zeyuface img {
    width: 85px;
    float: left;
    margin-left: -40px;
    margin-right: 35px;
    border-radius: 9999px;
    -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    -ms-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    -o-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
    padding-right: 0px;
}

.footer {
    text-align: center;
}

.qcode {
    text-align: center;
    padding-top: 10px;
}

.qcode img {
    width: 150px;
}

.qcode p {
    margin-top: 0px;
    padding-bottom: 10px;
}

@media (max-width: 767px) {
    .content {
        width: 100%;
    }

    .essence-info {
        width: 65%;
        color: #fff;
    }

    .oneimg img {
        width: 100%;
    }

    .twoimg img {
        width: 100%;
    }

    .threeimg {
        height: 184px;
        width: 100%;
    }

    .emailtitle h3 {
        margin-left: -15px;
        padding-left: 10px;
        font-size: 20px;
    }

    .intro {
        margin-left: -15px;
        padding-left: 10px;
        font-size: 20px;
    }
}
</style>

<div class="content">
    <div class="content-body">
        <div class="emailhead">
            <div class="essence-info left">
                <div class="essence">ESSENCE</div>
                <div class="educational">EDUCATIONAL</div>
                <div class="gmat-info">Best GMAT Training in HongKong</div>
            </div>
            <div class="essence-logo right">
                <a href="http://www.essence-edu.com" target="_blank">
                    <img src="http://www.essence-edu.cn/theme/essence/images/logo.png" alt="Essence Eduacational" />
                </a>
            </div>
            <div class="clear"></div>
        </div>
        <div class="emailimg">
            <div class="shwoimg left oneimg">
                <img src="http://ovwflbf4p.bkt.clouddn.com/email/e1s.jpg" alt="gmat plus">
            </div>
            <div class="shwoimg left twoimg">
                <img src="http://ovwflbf4p.bkt.clouddn.com/e2.jpg" alt="gamt plus">
            </div>
            <div class="shwoimg left threeimg">
                <div class="plusinfo">
                    <p>GMAT</p>
                    <p>PLUS</p>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="emailbody">
            <div class="emailtitle">
                <h3>Coming FREE GMAT course</h3>
            </div>
            <div class="comingbody">
                <div class="comingleft">
                    <h3 class="post-comtime"><font color="red">Time: </font><span id="coursetime">18-Nov-17 14:00-17:00 (HKT)</span></h3>
                    <p class="venue"><i class="fa fa-bank"></i> Venue : Room 103, 1/F, Kam Ling Court Commercial Center, 532-534 Queen's Road
                        <br>West.Once you reach MTR station of HKU, please take B2 exit and walk in the direction of Kenndytown.</p>
                    <div class="cominginfo">
                        <h3><font color="red">Course:</font> Conquering GMAT Math + Verbal</h3>
                        <p>We will review the math and talk more about Data Sufficiency (DS) questions - once the definition of sufficiency (to determine a proposition and a variable) is mastered, you can continue to apply our 3 strategies to conquer them!
                            <br
                            />We will continue to talk about sentence correction and will summarize all grammatical rules!</p>
                    </div>
                    <div class="plantrybtn"> <a href="http://www.essence-edu.com/landing-m.html#freeenroll" target="_blank" class="pricing-button">Enroll 3 Hours Free Class</a>
                    </div>
                    <div class="cominginfo">
                        <h3 class="intro" style="margin-bottom: 30px;">GMAT Plus Course</h3>
                        <ul>
                            <div class="zeyuface">
                                <img src="http://gmatstatic.essence-edu.cn/zeyu_small.jpg" alt="gmat plus">
                            </div>
                            <li class="gmatteach">A GMAT Course Taught by Zeyu LI , A derivative trader from tier 1 Investment Bank in HK, who earns Multi-Million HKD per year!</li>
                        </ul>
                        <div class="clear"></div>
                        <h3><img src="http://ovwflbf4p.bkt.clouddn.com/email/right.png" alt="Essence Eduacational GMAT Plus">GMAT 800 Strategies</h3>
                        <ul>
                            <li>Our goal is to help you achieve:</li>
                            <li>AWA: 5.5 - 6</li>
                            <li>Reading: 100% Correct</li>
                            <li>Critical Reasoning: 100% Correct</li>
                            <li>Sentence Correction: 90% Correct</li>
                            <li>Math: 100% Correct</li>
                        </ul>
                        <h3><img src="http://ovwflbf4p.bkt.clouddn.com/email/right.png" alt="Essence Eduacational GMAT Plus">Formal Logic + Problem Solving Philosophy</h3>
                        <ul>
                            <li>Instead of teaching only tricks for the exam, we will share with our students formal logic and problem solving philosophy to cultivate rational thinking to help them solve harsh problems in reality!</li>
                        </ul>
                        <h3><img src="http://ovwflbf4p.bkt.clouddn.com/email/right.png" alt="Essence Eduacational GMAT Plus">Investment Bank Career Talk</h3>
                        <ul>
                            <li>We invite several elites from different divisions in leading investment banks to share their career experience with our students. It would be a precious opportunity to learn what these jobs truly are to identify those that
                                fit their ambitions and hence make necessary preparations.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="plantrybtn"> <a href="http://www.essence-edu.com/landing-m.html#freeenroll" target="_blank" class="pricing-button">Enroll 3 Hours Free Class</a>
        </div>
        <div class="qcode">
            <img src="http://mathstatic.essence-edu.cn/qrcode.jpg" alt="wechat">
            <p>Follow Us On Wechat</p>
        </div>
    </div>
    <div class="footer">
        <p>Copyright © 2015-2017 Essence Educational Company Limited. All Rights Reserved</p>
    </div>
</div>

如果你想转载,请注明来源或者出处