红色欧美风格响应式马桶应用APP网页模板



4 14 5



模板描述:红色 欧美 响应式 马桶应用APP 网页模板,红色欧美风格响应式马桶应用APP网页模板html模板下载

代码结构

1. 引入CSS

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

2. HTML代码

    <section class="main-banner" id="home">
        <div class="layer">
            <div class="header-wthree-top-w3layouts text-right">
                <h1 class="logo"><a href="index.html">Launcher</a></h1>
                <ul class="list-unstyled apps-lists text-right">
                    <li>
                        <a href="#" class="btn"><span class="fa fa-apple mr-2" aria-hidden="true"></span>App Store</a>
                    </li>
                    <li class="ml-2">
                        <a href="#" class="btn"><span class="fa fa-android mr-2" aria-hidden="true"></span>Android</a>
                    </li>
                </ul>
                <ul id="menu">
                    <li>
                        <input id="check02" type="checkbox" name="menu" />
                        <label for="check02"><span class="fa fa-bars" aria-hidden="true"></span></label>
                        <ul class="submenu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="#about" class="scroll">Why</a></li>
                            <li><a href="#services" class="scroll">Features</a></li>
                            <li><a href="#screen" class="scroll">Screen Shots</a></li>
                            <li><a href="#testimonials" class="scroll">Testimonials</a></li>
                            <li><a href="#contact" class="scroll">Contact</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="container">
                <div class="baner-info-w3layouts text-center">
                    <h3>Launch Soon</h3>
                    <h6 class="mx-auto mt-md-4 mt-3">Make cool pages easily with MyApp.</h6>
                </div>
            </div>
        </div>
    </section>
    <!-- //banner -->
    <!--/ banner-bottom-w3ls -->
    <section class="banner-bottom-w3ls py-lg-5 py-4" id="about">
        <div class="container py-sm-5 py-4">
            <div class="ab-grids row text-left pb-3">
                <div class="col-lg-6 pt-lg-5">
                    <img src="images/app1.png" class="img-fluid" alt="mobile-image">
                </div>
                <div class="col-lg-6 pl-lg-5">
                    <div class="header-wthree pt-lg-5 pt-3 text-left">
                        <h3 class="tittle mb-lg-4 mb-3">Why Launcher ?</h3>
                    </div>
                    <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.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>
                    <p class="my-3">Praesent ullamcorper dui turpis.At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <ul class="tic-info list-unstyled">
                        <li>
                            <span class="fa fa-check mr-2"></span> Integer sit amet mattis quam
                        </li>
                        <li>
                            <span class="fa fa-check mr-2"></span> Praesent ullamcorper dui turpis
                        </li>
                        <li>
                            <span class="fa fa-check mr-2"></span> Integer sit amet mattis quam
                        </li>
                        <li>
                            <span class="fa fa-check mr-2"></span> Integer sit amet mattis quam
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!--// banner-bottom-w3ls-->
    <!--/services -->
    <section class="services py-lg-5 py-4" id="services">
        <div class="container py-sm-4 py-4">
            <div class="header-wthree py-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3">What We Love To Do</h3>
            </div>
            <div class="feature-grids row text-left">
                <div class="col-lg-4">
                    <div class="bottom-gd p-lg-5 p-3">
                        <span class="fa fa-pencil-square-o" aria-hidden="true"></span>
                        <h3 class="my-4">Customizeable</h3>
                        <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="bottom-gd2-active p-lg-5 p-3">
                        <span class="fa fa-laptop" aria-hidden="true"></span>
                        <h3 class="my-4">Fully Responsive</h3>
                        <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="bottom-gd p-lg-5 p-3">
                        <span class="fa fa-folder-open-o" aria-hidden="true"></span>
                        <h3 class="my-4">Well Documented</h3>
                        <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="bottom-gd p-lg-5 p-3">
                        <span class="fa fa-clone" aria-hidden="true"></span>
                        <h3 class="my-4">Friednly Design</h3>
                        <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="bottom-gd p-lg-5 p-3">
                        <span class="fa fa-headphones" aria-hidden="true"></span>
                        <h3 class="my-4">Online Support</h3>
                        <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="bottom-gd p-lg-5 p-3">
                        <span class="fa fa-magic" aria-hidden="true"></span>
                        <h3 class="my-4">Retina Ready</h3>
                        <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--// services -->
    <!-- banner-bottom-w3ls1 -->
    <section class="mobile py-lg-5 py-5" id="screen">
        <div class="container py-sm-3 py-3">
            <div class="header-wthree py-lg-5 text-center">
                <h3 class="tittle mb-lg-3 mb-3"> Screen shots</h3>
            </div>
            <div class="row">
                <div class="col-lg-6 pr-lg-5">
                    <div class="header-wthree pt-lg-5 pt-3 text-left">
                        <h3 class="tittle mb-lg-4 mb-3">why it's best</h3>
                    </div>
                    <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.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>
                    <p class="my-3">Praesent ullamcorper dui turpis.At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <ul class="tic-info list-unstyled">
                        <li>
                            <span class="fa fa-bell-o mr-2"></span> Integer sit amet mattis quam
                        </li>
                        <li>
                            <span class="fa fa-database mr-2"></span> Praesent ullamcorper dui turpis
                        </li>
                        <li>
                            <span class="fa fa-bullhorn mr-2"></span> Integer sit amet mattis quam
                        </li>
                        <li>
                            <span class="fa fa-diamond mr-2"></span> Integer sit amet mattis quam
                        </li>
                    </ul>
                </div>
                <div class="slider col-lg-6 mt-4">
                    <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">
                                    <img src="images/mobile1.png" class="img-fluid" alt="mobile-image">
                                </div>
                            </li>
                            <li>
                                <div id="bg1">
                                    <img src="images/mobile2.png" class="img-fluid" alt="mobile-image">
                                </div>
                            </li>
                            <li>
                                <div id="bg2">
                                    <img src="images/mobile3.png" class="img-fluid" alt="mobile-image">
                                </div>
                            </li>
                            <li>
                                <div id="bg3">
                                    <img src="images/mobile2.png" class="img-fluid" alt="mobile-image">
                                </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>
                </div>
            </div>
        </div>
    </section>
    <!-- //banner-bottom-w3ls1 -->
    <section class="subscribe">
        <div class="layer two">
            <div class="container text-center py-5">
                <div class="header-wthree pt-lg-3 pt-4">
                    <h3 class="tittle two mb-lg-5 mb-3">Subscribe Now</h3>
                </div>
                <form action="#" method="post" class="newsletter mt-lg-5 mt-3">
                    <input class="email" type="email" placeholder="Your email..." required="">
                    <button class="but-submit" type="submit"><span class="fa fa-paper-plane-o" aria-hidden="true"></span> Subscribe</button>
                </form>
            </div>
        </div>
    </section>
    <!-- Gallery -->
    <section class="middile-sec pt-5" id="gallery">
        <div class="container">
            <div class="header-wthree py-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3"> How It Looks</h3>
            </div>
        </div>
        <div class="middile-inner-con">
            <div class="tab-main mx-auto text-center">
                <input id="tab1" type="radio" name="tabs" checked>
                <label for="tab1"><span class="fa fa-laptop" aria-hidden="true"></span> Desktop</label>
                <input id="tab2" type="radio" name="tabs">
                <label for="tab2"><span class="fa fa-tablet" aria-hidden="true"></span> Tablet</label>
                <input id="tab3" type="radio" name="tabs">
                <label for="tab3"><span class="fa fa-mobile" aria-hidden="true"></span> Mobile</label>
                <section id="content1">
                    <img src="images/tab1.png" class="img-fluid" alt="mobile-image">
                </section>
                <section id="content2">
                    <img src="images/tab2.png" class="img-fluid" alt="mobile-image">
                </section>
                <section id="content3">
                    <img src="images/mobile4.png" class="img-fluid" alt="mobile-image">
                </section>
            </div>
        </div>
        <div class="stats-info">
            <div class="layer three">
                <div class="container">
                    <div class="row text-center stats-inner-con">
                        <div class="col counter-gd">
                            <div class="counter">
                                <span class="fa fa-headphones" aria-hidden="true"></span>
                                <h3 class="timer count-title count-number">100</h3>
                                <p class="count-text">Support</p>
                            </div>
                        </div>
                        <div class="col counter-gd">
                            <div class="counter">
                                <span class="fa fa-user" aria-hidden="true"></span>
                                <h3 class="timer count-title count-number">1200</h3>
                                <p class="count-text">Cleints</p>
                            </div>
                        </div>
                        <div class="col counter-gd">
                            <div class="counter">
                                <span class="fa fa-tasks" aria-hidden="true"></span>
                                <h3 class="timer count-title count-number">1700</h3>
                                <p class="count-text">Pojects</p>
                            </div>
                        </div>
                        <div class="col counter-gd">
                            <div class="counter">
                                <span class="fa fa-coffee" aria-hidden="true"></span>
                                <h3 class="timer count-title count-number">157</h3>
                                <p class="count-text">Cups of Coffee</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//gallery -->
    <!-- banner-bottom-w3ls1 -->
    <section class="mobile py-lg-5 py-5" id="screen">
        <div class="container">
            <div class="row py-lg-5 py-4">
                <div class="col-lg-6 pr-lg-5">
                    <div class="header-wthree pt-lg-5 pt-3 text-left">
                        <h3 class="tittle mb-lg-4 mb-3">Choose Your Plan</h3>
                    </div>
                    <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.At vero eos et accusam et justo duo dolores et ea rebum..</p>
                    <p class="my-3">Praesent ullamcorper dui turpis.At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <ul class="tic-info list-unstyled">
                        <li>
                            <span class="fa fa-bell-o mr-2"></span> Integer sit amet mattis quam
                        </li>
                        <li>
                            <span class="fa fa-database mr-2"></span> Praesent ullamcorper dui turpis
                        </li>
                        <li>
                            <span class="fa fa-bullhorn mr-2"></span> Integer sit amet mattis quam
                        </li>
                        <li>
                            <span class="fa fa-diamond mr-2"></span> Integer sit amet mattis quam
                        </li>
                    </ul>
                </div>
                <div class="slider col-lg-6 mt-4">
                    <div class="row pricing-plans">
                        <div class="col-md-6 price-main text-center">
                            <div class="pricing-grid card">
                                <div class="card-body">
                                    <h4 class="text-uppercase mb-3">Standard</h4>
                                    <h5 class="card-title pricing-card-title">
                                        <span class="align-top">$</span>199
                                    </h5>
                                    <ul class="price-in list-unstyled mt-3 mb-4">
                                        <li>10 User Access</li>
                                        <li>100gb Cloud Storage</li>
                                        <li>10 Domain Names</li>
                                        <li>35 Projects</li>
                                        <li>Limited Support</li>
                                    </ul>
                                    <div class="price-button mt-md-3 mt-2">
                                        <a class="btn text-uppercase" href="#contact">
                                                        Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 price-main text-center">
                            <div class="pricing-grid card">
                                <div class="card-body">
                                    <h4 class="text-uppercase mb-3">Business</h4>
                                    <h5 class="card-title pricing-card-title">
                                        <span class="align-top">$</span>399
                                    </h5>
                                    <ul class="price-in list-unstyled mt-3 mb-4">
                                        <li>10 User Access</li>
                                        <li>100gb Cloud Storage</li>
                                        <li>10 Domain Names</li>
                                        <li>35 Projects</li>
                                        <li>Limited Support</li>
                                    </ul>
                                    <div class="price-button mt-md-3 mt-2">
                                        <a class="btn text-uppercase active" href="#contact">
                                                        Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //banner-bottom-w3ls1 -->
    <!--/ banner-bottom-w3ls -->
    <section class="banner-bottom-w3ls pt-lg-5 py-5" id="app-serve">
        <div class="container pt-lg-5 py-5">
            <div class="ab-grids row text-left">
                <div class="col-lg-6 pt-lg-5 mt-lg-5 app-mob">
                    <img src="images/app2.png" class="img-fluid" alt="mobile-image">
                </div>
                <div class="col-lg-6 pl-lg-5 mb-lg-5">
                    <div class="header-wthree text-left">
                        <h3 class="tittle two mb-lg-4 mb-3">Suitable For Anytype LandingPage</h3>
                    </div>
                    <p>Integer sit amet mattis quam, sit amet ultricies velit.Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis. Praesent ullamcorper dui turpis.</p>
                    <div class="feature-grids text-left ml-3 mt-5">
                        <div class="bottom-gd my-lg-5">
                            <span class="fa fa-database" aria-hidden="true"></span>
                            <h3 class="my-4">Easily manage your works</h3>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                        </div>
                        <div class="bottom-gd my-lg-5">
                            <span class="fa fa-money" aria-hidden="true"></span>
                            <h3 class="my-4">Get payments smoothly.</h3>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--// banner-bottom-w3ls-->
    <!--/testimonials-->
    <section class="testimonials py-5" id="testimonials">
        <div class="container py-lg-5 py-4">
            <div class="header-wthree pb-lg-5 pb-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3"> What They Say</h3>
            </div>
            <div class="row mt-3">
                <div class="col-lg-4 test-grid text-left px-lg-3">
                    <div class="test-info">
                        <p>Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.</p>
                        <h3 class="mt-md-4 mt-3"> Abraham Smith</h3>
                        <div class="test-img text-center mb-3">
                            <img src="images/team.jpg" class="img-fluid" alt="user-image">
                        </div>
                        <div class="mobl-footer test-soc text-center">
                            <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>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 test-grid text-left px-lg-3">
                    <div class="test-info">
                        <p>Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.</p>
                        <h3 class="mt-md-4 mt-3"> Mariana Noe</h3>
                        <div class="test-img text-center mb-3">
                            <img src="images/team1.jpg" class="img-fluid" alt="user-image">
                        </div>
                        <div class="mobl-footer test-soc text-center">
                            <ul class="list-unstyled">
                                <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>
                    </div>
                </div>
                <div class="col-lg-4 test-grid text-left px-lg-3">
                    <div class="test-info">
                        <p>Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.</p>
                        <h3 class="mt-md-4 mt-3">Nebula Nairobi</h3>
                        <div class="test-img text-center mb-3">
                            <img src="images/team2.jpg" class="img-fluid" alt="user-image">
                        </div>
                        <div class="mobl-footer test-soc text-center">
                            <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>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact -->
    <section class="contact py-5" id="contact">
        <div class="container">
            <div class="header-wthree py-lg-5 py-4 text-center">
                <h3 class="tittle mb-lg-3 mb-3"> Get In Touch</h3>
            </div>
            <div class="contact-form mx-auto text-left">
                <form name="contactform" id="contactform" method="post" action="#" onsubmit="return(validate());" novalidate="novalidate">
                    <div class="row">
                        <div class="col-lg-4 con-gd">
                            <div class="form-group" data-aos="fade-up">
                                <label>Name *</label>
                                <input type="text" class="form-control" id="name" placeholder="" name="name">
                            </div>
                        </div>
                        <div class="col-lg-4 con-gd">
                            <div class="form-group" data-aos="fade-up">
                                <label>Email *</label>
                                <input type="email" class="form-control" id="email" placeholder="" name="email">
                            </div>
                        </div>
                        <div class="col-lg-4 con-gd">
                            <div class="form-group" data-aos="fade-up">
                                <label>Phone No. *</label>
                                <input type="text" class="form-control" id="phone" placeholder="" name="phone">
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-5">
                        <label>How can we help?</label>
                        <textarea name="issues" class="form-control" id="iq" placeholder=""></textarea>
                    </div>
                    <div class="contact-page">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </form>
            </div>
            <div class="map my-md-5 my-3">
                <iframe src="" class="map" style="border:0" allowfullscreen=""></iframe> </div>
        </div>
    </section>
    <!-- //contact -->
    <!-- footer -->
    <footer class="footer py-sm-5 py-5">
        <div class="container py-xl-5 py-lg-3">
            <div class="contact_grid_left">
                <ul class="list-unstyled row text-left">
                    <li class="col-lg-4 adress-info">
                        <div class="row">
                            <div class="col-md-3 text-lg-center adress-icon">
                                <span class="fa fa-map-marker"></span>
                            </div>
                            <div class="col-md-9 text-left">
                                <h6>Location</h6>
                                <p>The company name
                                    <br>New York City. </p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4 adress-info">
                        <div class="row">
                            <div class="col-md-3 text-lg-center adress-icon">
                                <span class="fa fa-envelope-open-o"></span>
                            </div>
                            <div class="col-md-9 text-left">
                                <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 adress-info">
                        <div class="row">
                            <div class="col-md-3 text-lg-center adress-icon">
                                <span class="fa fa-mobile"></span>
                            </div>
                            <div class="col-md-9 text-left">
                                <h6>Phone Number</h6>
                                <p>+ 1234567890</p>
                                <p>+ 0987654321</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="logo-2 text-center mt-4">
                <h2><a class="logo" href="index.html">Launcher</a></h2>
            </div>
            <!-- social icons footer -->
            <div class="mobl-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">Copyright &copy; 2019.Company name All rights reserved.<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 -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 大气 霸气

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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