演示网站 bootstrap创意产品介绍布局样式
编写代码
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Creative Section Design</title> <link rel='stylesheet' href='http://cdn.bootstrapmb.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <header class="header-design"> <div class="listar-map-button"> <div class="listar-map-button-text" style="display: inline-block; opacity: 1;"> <span class="icon-map2"> How it Works? </span> </div> </div> <div class="footer-wave"></div> </header> <div class="pset"> <div class="container"> <div class="row listar-feature-items"> <div class="col-xs-12 col-sm-6 col-md-4 listar-feature-item-wrapper listar-feature-with-image listar-height-changed" data-aos="fade-zoom-in" data-aos-group="features" data-line-height="25.2px"> <div class="listar-feature-item listar-feature-has-link"> <a href="" target="_blank"></a> <div class="listar-feature-item-inner"> <div class="listar-feature-right-border"></div> <div class="listar-feature-block-content-wrapper"> <div class="listar-feature-icon-wrapper"> <div class="listar-feature-icon-inner"> <div> <img alt="Businesses" class="listar-image-icon" src="1899582.svg"> </div> </div> </div> <div class="listar-feature-content-wrapper" style="padding-top: 0px;"> <div class="listar-feature-item-title listar-feature-counter-added"> <span><span>01</span> Businesses </span> </div> <div class="listar-feature-item-excerpt"> Start publish listings to show everyone the details and goodies of your establishment. </div> </div> </div> </div> </div> <div class="listar-feature-fix-bottom-padding listar-fix-feature-arrow-button-height"></div> </div> <div class="col-xs-12 col-sm-6 col-md-4 listar-feature-item-wrapper listar-feature-with-image listar-height-changed" data-aos="fade-zoom-in" data-aos-group="features" data-line-height="25.2px"> <div class="listar-feature-item listar-feature-has-link"> <a href="" target="_blank"></a> <div class="listar-feature-item-inner"> <div class="listar-feature-right-border"></div> <div class="listar-feature-block-content-wrapper"> <div class="listar-feature-icon-wrapper"> <div class="listar-feature-icon-inner"> <div> <img alt="Customers" class="listar-image-icon" src="1899506.svg"> </div> </div> </div> <div class="listar-feature-content-wrapper" style="padding-top: 0px;"> <div class="listar-feature-item-title listar-feature-counter-added"> <span><span>02</span> Customers </span> </div> <div class="listar-feature-item-excerpt"> Easily find interesting places by local experts, save time by checking listing features. </div> </div> </div> </div> </div> <div class="listar-feature-fix-bottom-padding listar-fix-feature-arrow-button-height"></div> </div> <div class="col-xs-12 col-sm-6 col-md-4 listar-feature-item-wrapper listar-feature-with-image listar-height-changed" data-aos="fade-zoom-in" data-aos-group="features" data-line-height="25.2px"> <div class="listar-feature-item listar-feature-has-link"> <a href="" target="_blank"></a> <div class="listar-feature-item-inner"> <div class="listar-feature-right-border"></div> <div class="listar-feature-block-content-wrapper"> <div class="listar-feature-icon-wrapper"> <div class="listar-feature-icon-inner"> <div> <img alt="Feedback" class="listar-image-icon" src="1899604.svg"> </div> </div> </div> <div class="listar-feature-content-wrapper" style="padding-top: 0px;"> <div class="listar-feature-item-title listar-feature-counter-added"> <span><span>03</span> Feedback </span> </div> <div class="listar-feature-item-excerpt"> Visitors discuss listings to share experiences, so businesses get reputation consolidated. </div> </div> </div> </div> </div> <div class="listar-feature-fix-bottom-padding listar-fix-feature-arrow-button-height"></div> </div> </div> </div> </div> <!-- partial --> </body> </html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
