蓝色简洁形式pc+wap个性信息网页模板代码

蓝色简洁形式pc+wap个性信息网页模板代码

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/tooplate-style.css">

2. 引入JS

<script src="js/smooth-scroll.polyfills.min.js"></script>

3. HTML代码

    <div class="tm-container mx-auto">
        <section class="tm-section tm-section-1">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="tm-bg-circle-white tm-flex-center-v">
                            <header class="text-center">
                                <h1 class="tm-site-title">New SPOT</h1>
                                <p class="tm-site-subtitle">Free HTML one-page template</p>
                            </header>
                            <p>This HTML page features alternating circular spots in a clean and attractive way. You may use this template for any purpose. Photos are from Unsplash website.</p>
                            <p class="text-center mt-4 mb-0">
                                <a href="https://www.51qianduan.com/">51前端</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="tm-section-2" class="tm-section pt-2 pb-2">
            <div class="container">
                <div class="row">
                    <div class="col-xl-5 col-lg-6 tm-flex-center-v tm-text-container tm-section-left">
                        <h2 class="tm-color-secondary mb-4">Lorem ipsum dolor site</h2>
                        <p class="mb-4">Nullam erat dolor, ullamcorper et nisi nec, porta portitor nisi. Quisque lobortis sem ut facilisis
                            mattis. Sed eu pellentesque sapien, a finibus eros. Nunc ut ultricies augue.</p>
                        <p class="mb-5">Mauris sagittis dui arcu, sed luctus metus faucibus nec. Sed vulputate ipsum massa, ut dapibus purus
                            volutpat vel. Interdum et malesuada fames ac ante.</p>
                        <p class="text-right mb-0">
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </p>
                    </div>
                    <div class="col-xl-7 col-lg-6 tm-circle-img-container">
                        <img src="img/img-01.jpg" alt="Image" class="rounded-circle tm-circle-img">
                    </div>
                </div>
            </div>
        </section>
        <section id="tm-section-3" class="tm-section tm-section-3">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 tm-section-2-right">
                        <div class="tm-bg-circle-white tm-bg-circle-pad-2 tm-flex-center-v">
                            <header>
                                <h2 class="tm-color-primary">Duis vel vaius eros</h2>
                            </header>
                            <p>In hac habitasse platea dictumst. Ut tristique, purus vitae egestas hendrerit, tellus elit luctus
                                lacus
                            </p>
                            <ul class="dashed">
                                <li>Quisque lobortis sem ut facilisis mattis</li>
                                <li>Sed eu pellentesque sapien</li>
                                <li>Mauris sagittis dui arcu</li>
                                <li>Sed luctus metus faucibus nec</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="tm-section pt-2 pb-3">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4 col-lg-4 tm-flex-center-v tm-section-left">
                        <form action="#" class="tm-contact-form" method="POST">
                            <div class="form-group mb-4">
                                <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name" required/>
                            </div>
                            <div class="form-group mb-4">
                                <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email" required/>
                            </div>
                            <div class="form-group mb-5">
                                <textarea rows="5" id="contact_message" name="contact_message" class="form-control" placeholder="Message..." required></textarea>
                            </div>
                            <div class="form-group mb-0 text-right">
                                <button type="submit" class="btn tm-btn-primary tm-send-btn">Send</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-xl-8 col-lg-8 tm-circle-img-container tm-contact-right">
                        <img src="img/img-02.jpg" alt="Image" class="rounded-circle tm-circle-img">
                    </div>
                </div>
            </div>
        </section>
        <footer class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p class="small mb-4 tm-footer-text">Copyright &copy; 2018 Company Name 
                    | Design: <a href="https://www.51qianduan.com/">51前端</a>
                    </p>
                </div>
            </div>
        </footer>
    </div>
    <!-- https://github.com/cferdinandi/smooth-scroll -->
    <script>
        var scroll = new SmoothScroll('a[href*="#"]', {
            easing: 'easeInOutQuart',
            speed: 800
        });
    </script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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