黄色欧美风格响应式人休艺术网页模板



3 10 4



模板描述:黄色 欧美 响应式 人休艺术 网页模板,黄色欧美风格响应式人休艺术网页模板html模板下载

代码结构

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="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900" 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">
                                <span class="fa fa-camera" aria-hidden="true"></span> Clack
                            </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">Statsts</a></li>
                                <li><a href="#partners">Partners</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">
                                <h6>PHOTOGRAPHY</h6>
                                <h3>Model Photography</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg1">
                        <div class="banner-info-wthree">
                            <div class="container">
                                <h6>PHOTOGRAPHY</h6>
                                <h3> Art of the Camera</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg2">
                        <div class="banner-info-wthree">
                            <div class="container">
                                <h6>PHOTOGRAPHY</h6>
                                <h3>Model Photography</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg3">
                        <div class="banner-info-wthree">
                            <div class="container">
                                <h6>PHOTOGRAPHY</h6>
                                <h3> Art of the Camera</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"><span class="sub-tittle">Few words</span> About Us</h3>
            </div>
            <div class="row about-grids mt-lg-5">
                <div class="col-lg-6 ab-info">
                    <h3 class="mb-3">Hello, We Are Profesional PHOTOGRAPHER
                    </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">
                </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"><span class="sub-tittle">Latest</span> Services</h3>
            </div>
            <div class="feature-grids row text-center">
                <div class="col-lg-4">
                    <div class="bottom-gd p-lg-5 p-3">
                        <span class="fa fa-camera" aria-hidden="true"></span>
                        <h3 class="my-4">Urban Exploration</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-video-camera" aria-hidden="true"></span>
                        <h3 class="my-4"> Shoot Amazing Films</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-camera-retro" aria-hidden="true"></span>
                        <h3 class="my-4">Best Photographer</h3>
                        <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    </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">
                        <h3 class="timer count-title count-number">100</h3>
                        <p class="count-text">Support</p>
                    </div>
                </div>
                <div class="col-md counter-gd-w3ls">
                    <div class="counter">
                        <h3 class="timer count-title count-number">1700</h3>
                        <p class="count-text">Happy Hours</p>
                    </div>
                </div>
                <div class="col-md counter-gd-w3ls">
                    <div class="counter">
                        <h3 class="timer count-title count-number">1200</h3>
                        <p class="count-text">Flims</p>
                    </div>
                </div>
                <div class="col-md counter-gd-w3ls">
                    <div class="counter">
                        <h3 class="timer count-title count-number">157</h3>
                        <p class="count-text">Cups of Coffee</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"><span class="sub-tittle">Meet Us</span> Our Photo graphers</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">
                                Art &amp; Design</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">
                                Art &amp; Design</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"><span class="sub-tittle">Latest</span> Stunning Clacks</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 -->
    <!-- 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"><span class="sub-tittle">Latest</span> Blog Posts</h3>
            </div>
            <div class="row mt-4">
                <!-- blog grid -->
                <div class="col-lg-10  mt-lg-5 mt-4 mx-auto">
                    <div class="card flex-row">
                        <div class="card-header p-0 position-relative">
                            <a href="single.html">
                                <img class="card-img-bottom rounded-circle img-thumbnail" src="images/t3.jpg" alt="Card image cap">
                                <span class="fa fa-user post-icon bg-theme" aria-hidden="true"></span>
                            </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-10  mt-lg-5 mt-4 mx-auto">
                    <div class="card flex-row">
                        <div class="card-header p-0 position-relative">
                            <a href="single.html">
                                <img class="card-img-bottom rounded-circle img-thumbnail" src="images/t1.jpg" alt="Card image cap">
                                <span class="fa fa-user post-icon bg-theme" aria-hidden="true"></span>
                            </a>
                        </div>
                        <div class="card-body">
                            <h5 class="blog-title card-title font-weight-bold">
                                <a href="single.htmll">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-10 my-lg-5 my-4 mx-auto">
                    <div class="card flex-row">
                        <div class="card-header p-0 position-relative">
                            <a href="single.html">
                                <img class="card-img-bottom rounded-circle img-thumbnail" src="images/t2.jpg" alt="Card image cap">
                                <span class="fa fa-user post-icon bg-theme" aria-hidden="true"></span>
                            </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 -->
    <!-- partners -->
    <section class="partners py-md-5 py-4" id="partners">
        <div class="container pb-xl-5">
            <div class="header pb-lg-5 py-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3"><span class="sub-tittle">Find Us</span> Our Partners</h3>
            </div>
            <div class="row grid-part text-center pb-lg-3">
                <div class="col-sm-2 col-4">
                    <div class="parts-w3ls">
                        <a href="#"><span class="fa fa-angellist"></span></a>
                    </div>
                </div>
                <div class="col-sm-2 col-4">
                    <div class="parts-w3ls">
                        <a href="#"><span class="fa fa-opencart"></span></a>
                    </div>
                </div>
                <div class="col-sm-2 col-4">
                    <div class="parts-w3ls">
                        <a href="#"><span class="fa fa-lastfm"></span></a>
                    </div>
                </div>
                <div class="col-sm-2 col-4 mt-sm-0 mt-3">
                    <div class="parts-w3ls">
                        <a href="#"><span class="fa fa-openid"></span></a>
                    </div>
                </div>
                <div class="col-sm-2 col-4 mt-sm-0 mt-3">
                    <div class="parts-w3ls">
                        <a href="#"><span class="fa fa-skyatlas"></span></a>
                    </div>
                </div>
                <div class="col-sm-2 col-4 mt-sm-0 mt-3">
                    <div class="parts-w3ls">
                        <a href="#"><span class="fa fa-ravelry"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //partners -->
    <!-- contact -->
    <section class="contact py-5">
        <div class="container">
            <div class="header py-lg-5 py-3">
                <h3 class="tittle text-left mb-lg-3 mb-3"><span class="sub-tittle">Say Hello</span> 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>
    <!-- //contact -->
    <!-- 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>
            <div class="logo-2 text-center mt-4">
                <h2><a class="logo" href="index.html"><span class="fa fa-camera" aria-hidden="true"></span> Clack</a></h2>
            </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">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响应式 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 黄色 大气 霸气 摄影 婚纱摄影 摄影公司 婚纱摄影公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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