黄色大气形式pc+wap仓库货运网页模板代码

黄色大气形式pc+wap仓库货运网页模板代码

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800" rel="stylesheet">

2. HTML代码

    <!-- mian-content -->
    <section class="main-content" id="home">
        <!-- /header -->
        <header>
            <div class="container-fluid px-lg-5 px-3">
                <!-- nav -->
                <nav class="py-2 d-lg-flex">
                    <div id="logo">
                        <h1><a class="navbar-brand logo" href="index.html">
                                 Conveyance
                            </a></h1>
                    </div>
                    <label for="drop" class="toggle">Menu</label>
                    <input type="checkbox" id="drop" />
                    <ul class="menu ml-auto">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li>
                            <!-- First Tier Drop Down -->
                            <label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label>
                            <a href="#">More Info <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                            <input type="checkbox" id="drop-2" />
                            <ul class="inner-ul">
                                <li><a href="#gallery">Gallery</a></li>
                                <li><a href="#stats">Stats</a></li>
                                <li><a href="#posts">Blog</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
                <!-- //nav -->
            </div>
        </header>
        <!-- //header -->
        <div class="csslider infinity" id="slider1">
            <input type="radio" name="slides" checked="checked" id="slides_1" />
            <input type="radio" name="slides" id="slides_2" />
            <input type="radio" name="slides" id="slides_3" />
            <input type="radio" name="slides" id="slides_4" />
            <ul>
                <li>
                    <div id="bg">
                        <div class="banner-info-wthree">
                            <div class="container">
                                <h3>24*7 Services Provided For Customers</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg1">
                        <div class="banner-info-wthree">
                            <div class="container">
                                <h3> Transport Your Cargo Everywhere</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg2">
                        <div class="banner-info-wthree">
                            <div class="container">
                                <h3>Propel yourself into the future.</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg3">
                        <div class="banner-info-wthree">
                            <div class="container">
                                <h3>Premium Worldwide Logistics Network</h3>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="arrows">
                <label for="slides_1"></label>
                <label for="slides_2"></label>
                <label for="slides_3"></label>
                <label for="slides_4"></label>
            </div>
            <div class="navigation">
                <div>
                    <label for="slides_1"></label>
                    <label for="slides_2"></label>
                    <label for="slides_3"></label>
                    <label for="slides_4"></label>
                </div>
            </div>
        </div>
        <!-- //banner -->
    </section>
    <!--// mian-content -->
    <!--/ about -->
    <section class="about py-5" id="about">
        <div class="container py-3">
            <div class="header py-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3">About Us</h3>
            </div>
            <div class="row about-grids mt-lg-5">
                <div class="col-lg-6 ab-info">
                    <h3 class="mb-3">Lorem ipsum dolor sit amet consectetur adipisicing
                    </h3>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis.At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet,sed diam nonumy.
                    </p>
                </div>
                <div class="col-lg-6 ab-img">
					<img class="img-fluid" src="images/1.jpg" alt="">
                </div>
            </div>
        </div>
    </section>
    <!--// about -->
    <!--/services -->
    <section class="blog_hcls_w3layouts py-lg-5 py-md-4" id="services">
        <div class="container py-sm-5 py-4">
            <div class="header py-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3"> Services</h3>
            </div>
            <div class="row mt-lg-5 mt-md-4 mt-4">
                    <div class="col-lg-4 about-in text-left">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-anchor mb-2"></span>
                                <h6 class="my-3">Consectetur elit</h6>
                                <h5 class="card-title">Ocean Freight</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur elit,Adipisicing elit tempor.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 about-in text-left">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-fighter-jet mb-2"></span>
                                <h6 class="my-3">Consectetur elit</h6>
                                <h5 class="card-title">Air Freight</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur elit,Adipisicing elit tempor.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 about-in text-left">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-truck mb-2"></span>
                                <h6 class="my-3">Consectetur elit</h6>
                                <h5 class="card-title">Land Transport</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur elit,Adipisicing elit tempor.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 about-in text-left">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-ship mb-2"></span>
                                <h6 class="my-3">Consectetur elit</h6>
                                <h5 class="card-title">Supply</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur elit,Adipisicing elit tempor.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 about-in text-left">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-compass mb-2"></span>
                                <h6 class="my-3">Consectetur elit</h6>
                                <h5 class="card-title">Fast &amp; On Time</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur elit,Adipisicing elit tempor.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 about-in text-left">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-money mb-2"></span>
                                <h6 class="my-3">Consectetur elit</h6>
                                <h5 class="card-title">Weather Insurance</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur elit,Adipisicing elit tempor.</p>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </section>
    <!--// services -->
    <!--/counter-->
    <section class="stats py-lg-5 py-4" id="stats">
        <div class="container">
            <div class="row text-center">
                <div class="col-md counter-gd-w3ls">
                    <div class="counter">
						<span class="fa fa-thumbs-o-up mb-2"></span>
                        <h3 class="timer count-title count-number">250</h3>
                        <p class="count-text">Projects Done</p>
                    </div>
                </div>
                <div class="col-md counter-gd-w3ls">
                    <div class="counter">
						<span class="fa fa-smile-o mb-2"></span>
                        <h3 class="timer count-title count-number">600</h3>
                        <p class="count-text">Happy Clients</p>
                    </div>
                </div>
                <div class="col-md counter-gd-w3ls">
                    <div class="counter">
						<span class="fa fa-users mb-2"></span>
                        <h3 class="timer count-title count-number">900</h3>
                        <p class="count-text">Team Workers</p>
                    </div>
                </div>
                <div class="col-md counter-gd-w3ls">
                    <div class="counter">
						<span class="fa fa-trophy mb-2"></span>
                        <h3 class="timer count-title count-number">7</h3>
                        <p class="count-text">Years of Experience</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//counter-->
    <!--/team -->
    <section class="blog_hcls_w3layouts py-lg-5 py-5" id="team">
        <div class="container py-sm-5 py-4">
            <div class="header py-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3">We Offered Services</h3>
            </div>
            <div class="feature-grids row text-center">
                <div class="col-lg-6 photo-gd">
                    <div class="thumbnail card">
                        <div class="img-event">
                            <img class="list-group-image img-fluid" src="images/team1.jpg" alt="">
                        </div>
                        <div class="caption card-body p-lg-5 p-3">
                            <h4 class="group card-title inner list-group-item-heading">
                                Expert Staff</h4>
                            <p class="list-group-item-text">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 photo-gd">
                    <div class="thumbnail card">
                        <div class="img-event">
                            <img class="list-group-image img-fluid" src="images/team2.jpg" alt="">
                        </div>
                        <div class="caption card-body p-lg-5 p-3">
                            <h4 class="group card-title inner list-group-item-heading">
                                Trucking Services</h4>
                            <p class="list-group-item-text">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--// services -->
    <!-- Gallery -->
    <section class="gallery py-5" id="gallery">
        <div class="container py-lg-5 py-3">
            <div class="header py-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3"> Our Work</h3>
            </div>
            <div class="row news-grids text-center">
                <div class="col-md-4 gal-img">
                    <a href="#gal1"><img src="images/1.jpg" alt="news image" class="img-fluid"></a>
                    <a href="#gal2"><img src="images/2.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal3"><img src="images/3.jpg" alt="news image" class="img-fluid"></a>
                    <a href="#gal4"><img src="images/4.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal5"><img src="images/5.jpg" alt="news image" class="img-fluid"></a>
                    <a href="#gal6"><img src="images/6.jpg" alt="news image" class="img-fluid"></a>
                </div>
            </div>
        </div>
        <!-- popup-->
        <div id="gal1" class="pop-overlay animate">
            <div class="popup">
                <img src="images/1.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal2" class="pop-overlay animate">
            <div class="popup">
                <img src="images/2.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal3" class="pop-overlay animate">
            <div class="popup">
                <img src="images/3.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup3 -->
        <!-- popup-->
        <div id="gal4" class="pop-overlay animate">
            <div class="popup">
                <img src="images/4.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal5" class="pop-overlay animate">
            <div class="popup">
                <img src="images/5.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal6" class="pop-overlay animate">
            <div class="popup">
                <img src="images/6.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
    </section>
    <!--// gallery -->
	<!-- newsletter -->
    <section class="newslett py-5">
        <div class="container">
            <div class="header py-lg-5 py-3">
                <h3 class="tittle text-center mb-lg-3 mb-3"> Subscribe Now</h3>
            </div>
            <div class="contact-form mx-auto text-left pb-3">
                <form id="contactform" method="post" action="#">
                    <div class="row">
                        <div class="col-lg-4 con-gd-w3layouts">
                            <div class="form-group">
                                <label>Name *</label>
                                <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
                            </div>
                        </div>
                        <div class="col-lg-4 con-gd-w3layouts">
                            <div class="form-group">
                                <label>Email *</label>
                                <input type="email" class="form-control" id="name" placeholder="Enter Email" name="email">
                            </div>
                        </div>
                        <div class="col-lg-4 con-gd-w3layouts">
                            <div class="form-group">
                                <label>Subscribe *</label>
                                <button type="submit" class="btn btn-default">Subscribe</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- //newsletter -->
    <!-- blog -->
    <section class="blog_hcls_w3layouts py-lg-5 py-md-4" id="posts">
        <div class="container py-sm-5 py-4">
            <div class="header py-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3"> Blog Posts</h3>
            </div>
            <div class="row mt-4">
                <!-- blog grid -->
                <div class="col-lg-6  mt-lg-5 mt-4 mx-auto">
                    <div class="card">
                        <div class="card-header p-0 position-relative">
                            <a href="single.html">
                                <img class="card-img-bottom " src="images/1.jpg" alt="Card image cap">
                            </a>
                        </div>
                        <div class="card-body">
                            <h5 class="blog-title card-title font-weight-bold">
                                <a href="single.html">Lorem Ipsum Dolor Sit Amet</a>
                            </h5>
                            <p>At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet,sed diam nonumy.</p>
                            <div class="blog-user-info d-flex my-3">
                                <label class=""> <span class="fa fa-user mr-3"></span> Admin</label>
                                <label class="mx-3"> <span class="fa fa-clock-o mr-3"></span> 08:35 PM</label>
                                <label class=""> <span class="fa fa-calendar mr-3"></span> 08.10.2019</label>
                            </div>
                            <a href="single.html" class="btn blog-btn h_care-bnr-btn">  
                                Read more
                           </a>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
                <!-- blog grid -->
                <div class="col-lg-6  mt-lg-5 mt-4 mx-auto">
                    <div class="card">
                        <div class="card-header p-0 position-relative">
                            <a href="single.html">
                                <img class="card-img-bottom" src="images/4.jpg" alt="Card image cap">
                            </a>
                        </div>
                        <div class="card-body">
                            <h5 class="blog-title card-title font-weight-bold">
                                <a href="single.html">Lorem Ipsum Dolor Sit Amet</a>
                            </h5>
                            <p>At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet,sed diam nonumy.</p>
                            <div class="blog-user-info d-flex my-3">
                                <label class=""> <span class="fa fa-user mr-3"></span> Admin</label>
                                <label class="mx-3"> <span class="fa fa-clock-o mr-3"></span> 08:35 PM</label>
                                <label class=""> <span class="fa fa-calendar mr-3"></span> 08.10.2019</label>
                            </div>
                            <a href="single.html" class="btn blog-btn h_care-bnr-btn">  
                                Read more
                           </a>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
                <!-- blog grid -->
                <div class="col-lg-6 my-lg-5 my-4 mx-auto">
                    <div class="card">
                        <div class="card-header p-0 position-relative">
                            <a href="single.html">
                                <img class="card-img-bottom" src="images/5.jpg" alt="Card image cap">
                            </a>
                        </div>
                        <div class="card-body">
                            <h5 class="blog-title card-title font-weight-bold">
                                <a href="single.html">Lorem Ipsum Dolor Sit Amet</a>
                            </h5>
                            <p>At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet,sed diam nonumy.</p>
                            <div class="blog-user-info d-flex my-3">
                                <label class=""> <span class="fa fa-user mr-3"></span> Admin</label>
                                <label class="mx-3">  <span class="fa fa-clock-o mr-3"></span> 08:35 PM</label>
                                <label class=""> <span class="fa fa-calendar mr-3"></span> 08.10.2019</label>
                            </div>
                            <a href="single.html" class="btn blog-btn h_care-bnr-btn">  
                                Read more
                           </a>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
				<!-- blog grid -->
                <div class="col-lg-6 my-lg-5 my-4 mx-auto">
                    <div class="card">
                        <div class="card-header p-0 position-relative">
                            <a href="single.html">
                                <img class="card-img-bottom" src="images/team1.jpg" alt="Card image cap">
                            </a>
                        </div>
                        <div class="card-body">
                            <h5 class="blog-title card-title font-weight-bold">
                                <a href="single.html">Lorem Ipsum Dolor Sit Amet</a>
                            </h5>
                            <p>At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet,sed diam nonumy.</p>
                            <div class="blog-user-info d-flex my-3">
                                <label class=""> <span class="fa fa-user mr-3"></span> Admin</label>
                                <label class="mx-3">  <span class="fa fa-clock-o mr-3"></span> 08:35 PM</label>
                                <label class=""> <span class="fa fa-calendar mr-3"></span> 08.10.2019</label>
                            </div>
                            <a href="single.html" class="btn blog-btn h_care-bnr-btn">  
                                Read more
                           </a>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
                <!-- pop-blog -->
                <!-- //pop-blog -->
            </div>
        </div>
    </section>
    <!-- //blog -->
    <!-- footer -->
    <footer class="footer-content py-sm-5 py-4">
        <div class="container py-xl-5 py-lg-3">
            <div class="contact_grid_left">
                <ul class="list-unstyled row loaction-content">
                    <li class="col-lg-4 address-content-inf-w3ls">
                        <div class="row">
                            <div class="col-md-3 icon-left">
                                <span class="fa fa-home"></span>
                            </div>
                            <div class="col-md-9 icon-right">
                                <h6>Address</h6>
                                <p>The company name
                                    <br>New York City. </p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4 address-content-inf-w3ls">
                        <div class="row">
                            <div class="col-md-3 icon-left">
                                <span class="fa fa-envelope"></span>
                            </div>
                            <div class="col-md-9 icon-right">
                                <h6>Email</h6>
                                <a href="https://www.51qianduan.com/">51前端</a>
                                <br>
                                <a href="https://www.51qianduan.com/">51前端</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4 address-content-inf-w3ls">
                        <div class="row">
                            <div class="col-md-3 icon-left">
                                <span class="fa fa-phone"></span>
                            </div>
                            <div class="col-md-9 icon-right">
                                <h6>Phone Number</h6>
                                <p>+ 1234567890</p>
                                <p>+ 0987654321</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- social icons footer -->
            <div class="w3ls-footer text-center mt-4">
                <ul class="list-unstyled">
                    <li>
                        <a href="#">
							<span class="fa fa-facebook-f"></span>
						</a>
                    </li>
                    <li class="mx-1">
                        <a href="#">
							<span class="fa fa-twitter"></span>
						</a>
                    </li>
                    <li>
                        <a href="#">
							<span class="fa fa-dribbble"></span>
						</a>
                    </li>
                    <li class="ml-1">
                        <a href="#">
							<span class="fa fa-vk"></span>
						</a>
                    </li>
                </ul>
            </div>
            <!-- copyright -->
            <p class="copy-right-grids text-li text-center my-sm-4 my-4">© 2019 Conveyance. All Rights Reserved | Design by
                <a href="https://www.51qianduan.com/">51前端</a>
            </p>
            <div class="top_move text-center">
                <a href="https://www.51qianduan.com/">51前端</a>
            </div>
            <!-- //copyright -->
        </div>
    </footer>
    <!-- footer -->

用户评论

18素材网

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


官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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