蓝色简洁形式pc+wap企业软件产品网页模板代码

蓝色简洁形式pc+wap企业软件产品网页模板代码

1. 引入CSS

<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/pe-icon-7-stroke.css">
<link rel="stylesheet" href="css/eden-responsive.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700">
<link href="https://fonts.googleapis.com/css?family=Timmana" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

2. 引入JS

<script src="../js/html5shiv.js"></script>
<script src="../js/respond.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/isometric/main.js"></script>

3. HTML代码

<div id="page" class="page">
<header class="header16" id="header16">
        <nav role="navigation" class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle" type="button">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand brand"><i class="fa fa-gg fa-flip-horizontal"></i>Alpha</a>
                </div>
                <div id="navbar-collapse-02" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Team</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="intro">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="header-content text-left">
                            <div class="svg-logo"><img class="img-responsive" src="images/SVG/Logo-13-white.svg" alt="Watch Video"></div>
                            <h1 class="margin-auto">Your time is unique</h1>
                            <p>You were put on this earth to achieve your greatest self, to live out your purpose, and
                                to do it courageously.</p>
                            <a href="#" class="btn btn-info button">Read More</a>
                        </div>
                    </div>
                </div>
                <!-- features -->
                <div class="features">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="single-content">
                                <h3><i class="fa fa-wordpress success-ebg"></i> Wordpress</h3>
                                <p>
                                    Probant malis deserunt commodo labore labore do pariatur, concursionibus singulis
                                    multos consequat.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="single-content">
                                <h3><i class="fa fa-joomla primary-ebg"></i> Joomla</h3>
                                <p>
                                    Probant malis deserunt commodo labore labore do pariatur, concursionibus singulis
                                    multos consequat.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="single-content">
                                <h3><i class="fa fa-code danger-ebg"></i> Bootstrap</h3>
                                <p>
                                    Probant malis deserunt commodo labore labore do pariatur, concursionibus singulis
                                    multos consequat.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Content section 1 -->
    <section id="content-section1" class="content-section1">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center section-titles">
                    <h1 class="section-title">Unique Services</h1>
                    <p class="section-para">We are always happy to help you with installing, optimising and promoting
                        your portfolio. All incoming features and updates are also included in the pack.</p>
                </div>
                <div class="col-md-4">
                    <div class="text-center single-content">
                        <i class="fa fa-wordpress skyblue-gradient"></i>
                        <h3>Wordpress</h3>
                        <p>
                            Probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis
                            multos consequat.
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center single-content">
                        <i class="fa fa-joomla blue-gradient"></i>
                        <h3>Joomla</h3>
                        <p>
                            Probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis
                            multos consequat.
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center single-content">
                        <i class="fa fa-code red-gradient"></i>
                        <h3>Bootstrap</h3>
                        <p>
                            Probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis
                            multos consequat.
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center single-content">
                        <i class="fa fa-code red-gradient"></i>
                        <h3>Bootstrap</h3>
                        <p>
                            Probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis
                            multos consequat.
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center single-content">
                        <i class="fa fa-code skyblue-gradient"></i>
                        <h3>Bootstrap</h3>
                        <p>
                            Probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis
                            multos consequat.
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center single-content">
                        <i class="fa fa-code blue-gradient"></i>
                        <h3>Bootstrap</h3>
                        <p>
                            Probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis
                            multos consequat.
                        </p>
                    </div>
                </div>
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>
    <!-- end Content section 1 -->
    <!-- Content section 20 -->
    <section id="content-section20" class="content-section20">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center section-titles">
                    <h1 class="section-title">Take Your Time</h1>
                    <p class="section-para">We are always happy to help you with installing, optimising and promoting
                        your portfolio. All incoming features and updates are also included in the pack.</p>
                </div>
                <div class="col-md-4 col-md-offset-1 mn-top">
                    <div class="media single-content">
                        <h3 class="border-default">We Love Creativity</h3>
                        <p>
                            We are always happy to help you with installing, optimising and promoting your portfolio.
                            All incoming features and updates are also included in the pack.
                        </p>
                        <div><a class="btn btn-info button"><i class="fa fa-apple"></i>Download</a> <a class="btn btn-link">Read More</a></div>
                    </div>
                </div>
                <div class="col-md-5 col-md-offset-1">
                    <div class="screenshot-wrap"><img class="img-responsive" src="images/iphone-screen3.png" alt="iphone image"></div>
                </div>
            </div>
        </div>
    </section>
    <!-- end Content section 20 -->
    <!-- Content section 16 -->
    <section id="content-section16" class="content-section16">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="highlight-text center-block">
                        <h1>Eden UI is an <span>effortlessly</span>, authentic handcrapted design that suitable for any
                            bussiness</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end Content section 16 --><!-- Content section 19 -->
    <section id="content-section19" class="content-section19">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-md-offset-1">
                    <div class=""><img class="img-responsive" src="images/iphone-screen1.png" alt="iphone image"></div>
                </div>
                <div class="col-md-4 col-md-offset-1 mn-top">
                    <div class="media single-content">
                        <div class="media-left pull-left">
                            <i class="fa fa-wordpress skyblue-gradient"></i>
                        </div>
                        <div class="media-body">
                            <h3>Wordpress</h3>
                            <p>
                                Probant an malis deserunt commodo labore labore do atur, concursiobus singulis multos
                                consequat.
                            </p>
                        </div>
                    </div>
                    <div class="media single-content">
                        <div class="media-left pull-left">
                            <i class="fa fa-joomla red-gradient"></i>
                        </div>
                        <div class="media-body">
                            <h3>Joomla</h3>
                            <p>
                                Probant an malis deserunt commodo labore labore do atur, concursiobus singulis multos
                                consequat.
                            </p>
                        </div>
                    </div>
                    <div class="media single-content">
                        <div class="media-left pull-left">
                            <i class="fa fa-cog blue-gradient"></i>
                        </div>
                        <div class="media-body">
                            <h3>Bootstrap</h3>
                            <p>
                                Probant an malis deserunt commodo labore labore do atur, concursiobus singulis multos
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end Content section 19 -->
    <section id="pricing-plan8" class="pricing-plan8">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center section-titles">
                        <h1 class="section-title">Unique Services</h1>
                        <p class="section-para">We are always happy to help you with installing, optimising and promoting
                            your portfolio. All incoming features and updates are also included in the pack.</p>
                </div>
            </div>
        </div>
        <div class="pricing pricing-palden">
            <div class="pricing-item">
                <div class="pricing-deco">
                    <svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
                                  <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
                                  <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
                                  <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
                                  <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
                                </svg>
                    <div class="pricing-price">
                        <span class="pricing-currency">$</span>29
                        <span class="pricing-period">/ mo</span>
                    </div>
                    <h3 class="pricing-title">Startup</h3>
                </div>
                <ul class="pricing-feature-list">
                    <li class="pricing-feature">1 GB of space</li>
                    <li class="pricing-feature">Support at $25/hour</li>
                    <li class="pricing-feature">Limited cloud access</li>
                </ul>
                <button class="pricing-action">Choose plan</button>
            </div>
            <div class="pricing-item pricing__item--featured">
                <div class="pricing-deco">
                    <svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
                                <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
                                <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
                                <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
                                <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
                                </svg>
                    <div class="pricing-price">
                        <span class="pricing-currency">$</span>59
                        <span class="pricing-period">/ mo</span>
                    </div>
                    <h3 class="pricing-title">Standard</h3>
                </div>
                <ul class="pricing-feature-list">
                    <li class="pricing-feature">5 GB of space</li>
                    <li class="pricing-feature">Support at $5/hour</li>
                    <li class="pricing-feature">Full cloud access</li>
                </ul>
                <button class="pricing-action">Choose plan</button>
            </div>
            <div class="pricing-item">
                <div class="pricing-deco">
                    <svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
                                <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
                                <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
                                <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
                                <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
                                </svg>
                    <div class="pricing-price">
                        <span class="pricing-currency">$</span>99
                        <span class="pricing-period">/ mo</span>
                    </div>
                    <h3 class="pricing-title">Premium</h3>
                </div>
                <ul class="pricing-feature-list">
                    <li class="pricing-feature">10 GB of space</li>
                    <li class="pricing-feature">Support at $5/hour</li>
                    <li class="pricing-feature">Full cloud access</li>
                </ul>
                <button class="pricing-action">Choose plan</button>
            </div>
        </div>
    </section><!-- Content section 21 -->
    <section id="content-section21" class="content-section21">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                    <h1 class="quote">"We are always happy to help you with installing, optimising and promoting your
                        portfolio. All incoming features and updates are also included in the pack"</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div><img class="img-responsive center-block" src="images/clients/a.png" alt="client image"></div>
                </div>
                <div class="col-md-3">
                    <div><img class="img-responsive center-block" src="images/clients/b.png" alt="client image"></div>
                </div>
                <div class="col-md-3">
                    <div><img class="img-responsive center-block" src="images/clients/c.png" alt="client image"></div>
                </div>
                <div class="col-md-3">
                    <div><img class="img-responsive center-block" src="images/clients/d.png" alt="client image"></div>
                </div>
            </div>
        </div>
    </section><!-- end Content section 21 --><!-- counter 2 -->
    <section class="counter2">
        <div class="row info-color">
            <div class="col-md-4 info-area text-center">
                <div>
                    <i class="pe-7s-user pe-va"></i>
                    <h4>123</h4>
                    <h3>Members</h3>
                </div>
            </div>
            <div class="col-md-4 info-area text-center">
                <div>
                    <i class="pe-7s-drawer pe-va"></i>
                    <h4>78+</h4>
                    <h3>Reviews</h3>
                </div>
            </div>
            <div class="col-md-4 info-area text-center">
                <div>
                    <i class="pe-7s-study pe-va"></i>
                    <h4>100+</h4>
                    <h3>Awards</h3>
                </div>
            </div>
        </div>
    </section>
    <!-- end counter 2 --><!-- form 1 -->
    <section id="form1" class="form1">
        <div class="container">
            <div class="row">
                <div class="contact-overlay">
                    <div class="col-md-6">
                        <h1 class="section-title">Send Message</h1>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="sr-only">Your Name</label>
                                    <input name="name" class="form-control" placeholder="Your Name" type="text">
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="sr-only">Your Email</label>
                                    <input name="email" class="form-control" placeholder="Your Email" type="email">
                                </div>
                            </div>
                            <div class="col-sm-12 ">
                                <div class="form-group">
                                    <label class="sr-only">Massage</label>
                                    <textarea class="form-control textarea" name="message" rows="5" placeholder="Massage"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default">Send</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 col-md-offset-1">
                        <ul class="list-unstyled">
                            <li class="contact-info">Contact Info</li>
                            <li><i class="fa fa-phone-square warning-ecolor"></i> <span>+977 324 644 676 / +800 123 456 789</span>
                            </li>
                            <li><i class="fa fa-home success-ecolor"></i> <span>5 New York City, NY,United States</span>
                            </li>
                            <li><i class="fa fa-envelope danger-ecolor"></i> <span>admin@bootexperts.com</span></li>
                        </ul>
                        <ul class="list-inline social-links">
                            <li class="addr-title"> Social Link</li>
                            <br>
                            <li><i class="fa fa-facebook-official"></i></li>
                            <li><i class="fa fa-twitter"></i></li>
                            <li><i class="fa fa-google-plus"></i></li>
                            <li><i class="fa fa-dribbble"></i></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end form 1 --><section id="footer4" class="footer4">
        <div class="item dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 social">
                        <ul class="list-inline">
                            <!-- <li><h2><i class="fa fa-gg fa-flip-horizontal footer-logo"></i> EDEN UI</h2></li> -->
                            <li><span>©Copyright 2018 | Designed with Eden Builder</span></li>
                            <li class="pull-right">
                                <ul class="list-inline">
                                    <li href="#">About</li>
                                    <li href="#">Contact</li>
                                    <li href="#">Terms</li>
                                    <li href="#">Privacy</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section></div><!-- /#page -->
<!--=== Load JS here for greater good ====-->

用户评论

18素材网

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


官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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