红色扁平风格的圣诞节产品企业网站源码下载



12 46 16



模板描述:红色扁平风格 圣诞节产品 企业网站,红色扁平风格的圣诞节产品企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.css">
<link href='http://fonts.useso.com/css?family=Raleway:400,900,600|Pacifico' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.useso.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/evenfly.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/snowstorm-min.js"></script>

3. HTML代码

    <!-- ===========================
    HERO SECTION
    =========================== -->
    <div id="hero">
        <div class="redoverlay">
            <div class="container">
                <div class="row">
                    <div class="herotext">
                        <h2 class="wow zoomInDown" data-wow-duration="3s">HoHo Holiday Sale Started!</h2>
                        <h1 class="wow flipInY">It’s The time</h1>
                        <a class="btn btn-reverse wow zoomIn" href="#products">
                            <h3>To save upto 75% this holiday <span class="optional">or bang your head!</span></h3>                            
                        </a><!--#NOTE: texts inside the OPTIONAL tag above would be hidden on smaller mobile screens -->
                        <p class="wow fadeInUp" data-wow-duration="2s">Offer ends On December 31 Wednesday</p>
                        <img class="bigbell wow tada infinite" data-wow-duration="30s" src="img/bell.png" alt="">
                    </div>
                    <div class="santa wow bounceInDown" data-wow-duration="2s">
                        <img src="img/santa.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div><!--HERO SECTION END-->
    <!-- ===========================
    OVERVIEW SECTION
    =========================== --> 
    <div id="overview" class="container">       
        <!--SECTIONHEAD START-->
        <div class="sectionhead">            
            <h2>Best <span class="highlight">free</span> christmas template ever</h2>
            <p>SantaGo is another free Bootstrap HTML Christmas sales and affiliate page template built and distributed by EvenFly Team as a small Cristmas gift under Creative Commons 3.0 license.</p>
            <hr>
        </div><!--SECTIONHEAD END-->
        <!--OVERVIEW ITEMS-->
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <img src="img/o1.png" alt="">
                <h4>Exclusively on EvenFly</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div><!--ITEM END-->
            <div class="col-md-6 col-lg-4">
                <img src="img/o2.png" alt="">
                <h4>Money back guarantee</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div><!--ITEM END-->
            <div class="col-md-6 col-lg-4">
                <img src="img/o3.png" alt="">
                <h4>Free worldwide home deivery</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div><!--ITEM END-->
            <div class="col-md-6 col-lg-4">
                <img src="img/o4.png" alt="">
                <h4>Pre & Post purchase support</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div><!--ITEM END-->
            <div class="col-md-6 col-lg-4">
                <img src="img/o5.png" alt="">
                <h4>Surprise gift included</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div><!--ITEM END-->
            <div class="col-md-6 col-lg-4">
                <img src="img/o6.png" alt="">
                <h4>It will be free forever</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div><!--ITEM END-->
        </div><!--OVERVIEW ITEMS END-->
    </div><!--OVERVIEW SECTION END-->
    <!-- ===========================
    CALL-TO-ACTION SECTION
    =========================== -->
    <div class="calltoaction">
    <div class="lightoverlay">
        <div class="container">
            <div class="col-md-4">
                <img src="img/tree.gif" alt="">
            </div><!--CALL-TO-ACTION IMAGE END-->
            <div class="sectionhead content col-md-8">
                <h2>Best <span class="highlight">free landing page</span> template</h2>
                <p>SantaGo is another free Christmas sales and affiliate landing page template built and distributed by <a href="http://xmoban.cn">EvenFly Team</a> as a small cristmas gift under Creative Commons 3.0 license. If you have any question, suggestion or need assistance, feel free to <a href="mailto:support@venfly.com">email us</a> anytime.
</p>
                <a href="" class="btn btn-default">Download</a>
            </div><!--CALL-TO-ACTION CONTENT END-->
        </div><!--CALL-TO-ACTION CONTAINER END-->
    </div><!--CALL-TO-ACTION OVERLAY END-->
</div><!--CALL-TO-ACTION END-->
    <!-- ===========================
    PRODUCTS SECTION
    =========================== -->
    <div id="products" class="container">
        <!--SECTIONHEAD START-->
        <div class="sectionhead text-center">
            <h2>Catch the <span class="highlight">bang head</span> deals</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
            <hr>
        </div><!--SECTIONHEAD END-->
        <!--FEATURED PRODUCT START-->
        <div class="featureditem row">
            <div class="col-md-5 text-center">
                <a href="">
                    <img class="productimg" src="img/product-1.jpg" alt="">
                </a>
                <!--DISCOUNT TAG-->
                <div class="offertag percentoffer bigtag">
                    <h4>50%</h4>
                    <p>off</p>
                </div>
                <!--DISCOUNT TAG END-->
            </div><!--PRODUCT IMAGE END-->
            <!--PRODUCT DETAILS STRART-->
            <div class="col-md-7">
                <h4><a href="">Christmas Special Girls Shoe Dui Din O Tikbo na</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p class="price">US <span class="highlight">$4.25</span> / piece</p>
                <p>Original Price: US $8.49 , You Save:US $4.24</p>
                <a href="" class="btn btn-default">Buy now</a>
            </div><!--ITEM DETAILS END-->
        </div><!--FEATURED PRODUCT END-->
        <hr><!--SEPARETOR LINE-->
        <!--SMALL ITEM 1ST ROW START-->
        <div class="row moreitems">
            <!--SMALL ITEM 1 START-->
            <div class="col-md-6">
                <!--SMALL PRODUCT IMAGE START-->
                <div class="col-md-4 text-center">
                    <a href="">
                        <img class="productimg" src="img/product-2.jpg" alt="">
                    </a>
                    <!--DISCOUNT TAG-->
                    <div class="smalltag offertag fixedoffer">
                        <h4>$39</h4>
                        <p>off</p>
                    </div><!--DISCOUNT TAG END-->
                </div><!--PRODUCT IMAGE END-->
                <!--SMALL PRODUCT DESCRIPTION START-->
                <div class="col-md-8">
                    <h4><a href="">Eida Kintu Tomato Na Morich</a></h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                    <p class="price">US <span class="highlight">$4.25</span> / piece</p>
                    <p>Original Price: US $8.49 , You Save:US $4.24</p>
                </div><!--SMALL PRODUCT DESCRIPTION END-->
            </div><!--SMALL ITEM 1 END-->
            <!--SMALL ITEM 2 START-->
            <div class="col-md-6">
                <!--SMALL PRODUCT IMAGE START-->
                <div class="col-md-4 text-center">
                    <a href="">
                        <img class="productimg" src="img/product-3.jpg" alt="">
                    </a>
                    <!--DISCOUNT TAG-->
                    <div class="smalltag offertag percentoffer">
                        <h4>30%</h4>
                        <p>off</p>
                    </div><!--DISCOUNT TAG END-->
                </div><!--PRODUCT IMAGE END-->
                <!--SMALL PRODUCT DESCRIPTION START-->
                <div class="col-md-8">
                    <h4><a href="">Girls' Pocha Chocolate Shoe</a></h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                    <p class="price">US <span class="highlight">$4.25</span> / piece</p>
                    <p>Original Price: US $8.49 , You Save:US $4.24</p>
                </div><!--SMALL PRODUCT DESCRIPTION END-->
            </div><!--SMALL ITEM 2 END-->
        </div><!--SMALL ITEM 1ST ROW END-->
        <!--SMALL ITEM 2ND ROW START-->
        <div class="row moreitems">
            <!--SMALL ITEM 3 START-->
            <div class="col-md-6">
                <!--SMALL PRODUCT IMAGE START-->
                <div class="col-md-4 text-center">
                    <a href="">
                        <img class="productimg" src="img/product-4.jpg" alt="">
                    </a>
                    <!--DISCOUNT TAG-->
                    <div class="smalltag offertag otheroffer">
                        <h4>Free</h4>
                        <p>Gift</p>
                    </div><!--DISCOUNT TAG END-->
                </div><!--PRODUCT IMAGE END-->
                <!--SMALL PRODUCT DESCRIPTION START-->
                <div class="col-md-8">
                    <h4><a href="">Dui Nombor Colorful Blanket</a></h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                    <p class="price">US <span class="highlight">$4.25</span> / piece</p>
                    <p>Original Price: US $8.49 , You Save:US $4.24</p>
                </div><!--SMALL PRODUCT DESCRIPTION END-->
            </div><!--SMALL ITEM 3 END-->
            <!--SMALL ITEM 4 START-->
            <div class="col-md-6">
                <!--SMALL PRODUCT IMAGE START-->
                <div class="col-md-4 text-center">
                    <a href="">
                        <img class="productimg" src="img/product-5.jpg" alt="">
                    </a>
                    <!--DISCOUNT TAG-->
                    <div class="smalltag offertag fixedoffer">
                        <h4>$20</h4>
                        <p>off</p>
                    </div><!--DISCOUNT TAG-->
                </div><!--PRODUCT IMAGE END-->
                <!--SMALL PRODUCT DESCRIPTION START-->
                <div class="col-md-8">
                    <h4><a href="">Azaira Baby Toy Kinley Dhora</a></h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                    <p class="price">US <span class="highlight">$4.25</span> / piece</p>
                    <p>Original Price: US $8.49 , You Save:US $4.24</p>
                </div><!--SMALL PRODUCT DESCRIPTION END-->
            </div><!--SMALL ITEM 4 END-->
        </div><!--SMALL ITEM 2ND ROW END-->
    </div><!--PRODUCTS SECTION END-->
    <!-- ===========================
    SUBSCRIBE SECTION
    =========================== -->
    <div id="subscribe">
        <div class="darkoverlay">
            <div class="container text-center">
                <img class="santaicon wow tada infinite" data-wow-duration="20s" src="img/santa-sm.png" alt="">
                <div class="sectionhead">            
                    <h2>Don’t miss the <span class="highlight">upcoming hot deals</span> amymore</h2>
                    <p>Just give us your email address below, and forget it. We’ll send you every time we have something special for you. No worries, Santa never send spam mails. And you can unsubscribe anytime as well.</p>    
                </div><!--SECTIONHEAD END-->            
                <!--MAILCHIMP FORM START-->  
                <div class="mailchimp">
                    <form action="http://evenfly.us8.list-manage.com/subscribe/post?u=62bca83399cf0083546588b62&amp;id=f85a072005" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><!-- #NOTE: Replace this with your Mailchimp action URL -->
                            <input type="text" value="" name="FNAME" id="mce-FNAME" placeholder="First Name" required>
                            <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Email Address" required>
                            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-inverse">
                    </form>
                </div>
            </div><!--SUBSCRIBE CONTAINER END-->
        </div><!--OVERLAY END-->
    </div><!--SUBSCRIBE SECTION END-->        
    <!-- ===========================
    FOOTER
    =========================== -->
    <footer class="container text-center">             
        <h2 class="logo">Santa<span class="highlight">Go</span></h2>
        <img class="santacap" src="img/santa_cap.png" alt="">
        <P>Another free Bootstrap Landing page temlate from <a href="http://xmoban.cn">xmoban.cn</a> released under <a href="https://creativecommons.org/licenses/by/3.0/">CC 3.0</a> license.</P>
        <hr>
    </footer><!--FOOTER END-->
    <!-- ===========================
    SOCIAL ICONS
    =========================== -->
    <div class="sticky-container">
		<ul class="sticky">
			<li>
				<a href="">
                    <img title="" alt="" src="img/facebook.svg" />
                    <p>Facebook</p>
				</a>
			</li>
			<li>
				<a href="">
                    <img title="" alt="" src="img/twitter.svg" />
                    <p>Twitter</p>
				</a>
			</li>
			<li>
				<a href="">
                    <img title="" alt="" src="img/pinterest.svg" />
                    <p>Pinterest</p>
				</a>
			</li>
			<li>
				<a href="">
                    <img title="" alt="" src="img/linkedin.svg" />
                    <p>Linkedin</p>
				</a>
			</li>
			<li>
			    <a href="">
                    <img title="" alt="" src="img/google_plus.svg" />
                    <p>Google Plus</p>
				</a>
			</li>
			<li>
			    <a href="">
                    <img title="" alt="" src="img/instagram.svg" />
                    <p>Instagram</p>
				</a>
			</li>
		</ul>
	</div>
    <!-- ===========================
    NECESSARY SCRIPTS
    =========================== --> 
    <script src="https://ajax.useso.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="js/evenfly.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/snowstorm-min.js"></script>
    <script>new WOW().init();</script>    



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 生活用品

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到