红色欧美样式bootstrap旅行婚纱摄影网页模板代码下载



4 12 5



模板描述:红色 欧美 bootstrap 旅行婚纱摄影 网页模板 代码下载,红色欧美样式bootstrap旅行婚纱摄影网页模板代码下载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/fontawesome-all.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:100i,400,500,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700" rel="stylesheet">

2. HTML代码

    <!-- banner -->
    <div class="banner">
        <!-- header -->
        <header>	
	<nav class="mnu navbar-light">
            <div class="logo" id="logo">
                <h1><a href="index.html">W-Planner</a></h1>
            </div>
				<label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
                <input type="checkbox" id="drop">
                    <ul class="menu">
                        <li class="active"><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li>
                            <!-- First Tier Drop Down -->
                            <label for="drop-2" class="toggle">Drop Down <span class="fa fa-angle-down" aria-hidden="true"></span> </label>
                            <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                            <input type="checkbox" id="drop-2" />
                            <ul>
                              <li><a href="services.html">Services</a>
							  </li>
                                <li><a href="gallery.html">Gallery</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </ul>
    </nav>
</header>
<!-- //header -->
        <div class="container">
            <!-- banner-text -->
            <div class="banner-text">
                <div class="slider-info">
                    <h3>Destination Weddings</h3>
					<a href="about.html" class="banner-button btn mt-md-5 mt-4">Know More</a>
				</div>
            </div>
        </div>
    </div>
	 <!-- //banner-text -->
	 <!--banner form-->
	<section class="banner_form py-5">
		<div class="container py-lg-3">
			<div class="row ban_form">
				<div class="col-lg-7 fom-left">
					<div class="categories_sub cats1">
						<h2 class="heading-agileinfo">Our Weddings  Story</h2>
						<p class="vam">Vivamus sed porttitor felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Sed lorem enim, Vivamus sed porttitor felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Sed lorem enim, </p></div>
				</div>
				<div class="col-lg-5 reg-fom">
					<img src="images/1.jpg" class="img-fluid" alt="">
				</div>
			</div>
		</div>
	</section>
	<!--//banner form-->
	  <!-- /services -->
    <section class="banner-bottom-wthree py-lg-5 py-md-5 py-3">
        <div class="container">
            <div class="inner-sec-w3ls py-lg-5 py-3">
               <h3 class="heading-agileinfo text-center">We Will Plan </h3>
                <div class="row middle-grids mt-md-5 pt-4">
                    <div class="col-lg-4 about-in-w3ls middle-grid-info text-center">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-bar-chart mb-2"></span>
                                <h5 class="card-title text-uppercase my-3">
                                 Analytics.</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 about-in-w3ls middle-grid-info active text-center">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-paperclip mb-2"></span>
                                <h5 class="card-title text-uppercase my-3">Listening</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 about-in-w3ls middle-grid-info text-center">
                        <div class="card">
                            <div class="card-body">
                                <span class="fa fa-print mb-2"></span>
                                <h5 class="card-title text-uppercase my-3">Presentation</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //services -->
<!-- choose -->
	<section class="choose py-5">
		<div class="container py-md-4 mt-md-3"> 
			<div class="row inner_w3l_agile_grids-1 ">
				<div class="col-lg-6 w3layouts_choose_left_grid1">
					<div class="choose_top">
						<h4 class="mb-3 mt-3 text-white">Feel Free to Contact Our Agents Directly</h4>
						<p class="text-white">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est. Cras mi ipsum, consectetur ac ipsum in, egestas vestibulum tellus.Proin ac fermentum est. Cras mi ipsum, consectetur ac ipsum in, egestas vestibulum tellus.</p>
						<a href="services.html" class="btn btn-primary mt-3">Read More</a>
					</div>
				</div>
				<div class="col-lg-6 w3layouts_choose_left_grid2">
					<div class="row">
						<div class="col-md-6 w3l_choose_bottom1 mt-3 pt-md-4">
							<div class="choose_bottom_top">
                                <span class="fa fa-gift mb-2"></span>
                                <h5 class="card-title text-uppercase my-3">Weddings</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.
                                </p>
                            </div>
						</div>
						<div class="col-md-6 w3l_choose_bottom2">
							<div class="choose_bottom_top">
                                <span class="fa fa-cutlery mb-2"></span>
                                <h5 class="card-title text-uppercase my-3">Parties</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.
                                </p>
                            </div>
						</div>
						<div class="col-md-6 w3l_choose_bottom3 mt-3 pt-md-4">
							<div class="choose_bottom_top">
                                <span class="fa fa-music mb-2"></span>
                                <h5 class="card-title text-uppercase my-3">Entertainment</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.
                                </p>
                            </div>
						</div>
						<div class="col-md-6 w3l_choose_bottom4">
							<div class="choose_bottom_top">
                                <span class="fa fa-glass mb-2"></span>
                                <h5 class="card-title text-uppercase my-3">Celebrations</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.
                                </p>
                            </div>
						</div>
					</div>
				</div>
			</div>
	</div>   
</section>
<!-- //choose -->
	 <!-- /advantage -->
    <section class="banner-bottom py-lg-5 py-md-5 py-3">
        <div class="container">
            <div class="inner-sec py-lg-5 py-3">
                 <h3 class="heading-agileinfo text-center">Our Advantages</h3>
               <div class="row middle-grids mt-lg-5 pt-5">
                   <div class="col-lg-6 advantage-grid-info1">
                        <div class="advantage_left1 text-center">
                            <img src="images/p1.jpg" class="img-fluid" alt="">
                        </div>
                    </div> 
					 <div class="col-lg-6 advantage-grid-info pt-md-5">
                        <div class="advantage_left">
							<h4 class="mb-2">Integer porttitor mollisar</h4>
                            <h3>Laoreet Eleifend</h3>
							<p class="mt-2">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est. Cras mi ipsum, consectetur ac ipsum in, egestas vestibulum tellus.</p>
                        </div>
                    </div>
                </div>
				 <div class="row middle-grids pt-lg-5">
                    <div class="col-lg-6 advantage-grid-info pt-md-5 mt-md-5">
                        <div class="advantage_left">
							<h4 class="mb-2">Integer porttitor mollisar</h4>
                            <h3>Pellentesque mi non</h3>
							<p class="mt-2">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est. Cras mi ipsum, consectetur ac ipsum in, egestas vestibulum tellus.</p>
                        </div>
                    </div>
                    <div class="col-lg-6 advantage-grid-info1">
                        <div class="advantage_left2 text-center">
                            <img src="images/g1.jpg" class="img-fluid" alt="">
                        </div>
                    </div> 
                </div>
			</div>
        </div>
    </section>
    <!-- //advantage -->
	<!-- feedback -->
	<section class="news py-5">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="heading-agileinfo text-white text-center">Recent FeedBack</h3>
			<div class="row mt-md-5 pt-4">
				<div class="col-md-4 item">
					<div class="feedback-info py-5 px-4">
						<h4 class="mb-2">Tempor incididunt ut labore hytnm
						</h4>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo.</p>
						<div class="feedback-grids mt-4">
							<div class="feedback-img">
								<img src="images/te1.jpg" class="img-fluid rounded-circle" alt="" />
							</div>
							<div class="feedback-img-info">
								<h5>Mary Jane</h5>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="col-md-4 item-2">
					<div class="feedback-info py-5 px-4">
						<h4 class="mb-2">Tempor incididunt ut labore hytnm
						</h4>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo.</p>
						<div class="feedback-grids mt-4">
							<div class="feedback-img">
								<img src="images/te3.jpg" class="img-fluid rounded-circle" alt="" />
							</div>
							<div class="feedback-img-info">
								<h5>Olivia Ruth</h5>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="col-md-4 item">
					<div class="feedback-info py-5 px-4">
						<h4 class="mb-2">Tempor incididunt ut labore hytnm
						</h4>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo.</p>
						<div class="feedback-grids mt-4">
							<div class="feedback-img">
								<img src="images/te2.jpg" class="img-fluid rounded-circle" alt="" />
							</div>
							<div class="feedback-img-info">
								<h5>Blake Joe</h5>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //feedback -->
	<!-- stats -->
	<section class="stats py-5">
		<div class="container py-md-5">
			<h3 class="heading-agileinfo text-center">Our Achievements</h3>
			<span class="w3-line black"></span>	
			<div class="row inner_w3l_agile_grids-1 pt-md-5 mt-4">
				<div class="col-lg-3 col-sm-6 w3layouts_stats_left w3_counter_grid">
					<span class="fa fa-users mb-2"></span>
					<p class="counter">250</p>
					<h3>Clients</h3>
				</div>
				<div class="col-lg-3 col-sm-6 w3layouts_stats_left w3_counter_grid1">
					<span class="fa fa-gift mb-2"></span>
					<p class="counter">182</p>
					<h3>Weddings</h3>
				</div>
				<div class="col-lg-3 col-sm-6 w3layouts_stats_left w3_counter_grid2">
					<span class="fa fa-glass mb-2"></span>
					<p class="counter">105</p>
					<h3>Bachelore Parties</h3>
				</div>
				<div class="col-lg-3 col-sm-6 w3layouts_stats_left w3_counter_grid2">
					<span class="fa fa-music mb-2"></span>
					<p class="counter">150</p>
					<h3>Other Events</h3>
				</div>
			</div>
		</div>	
	</section>
<!-- //stats -->
<!--/newsletter-->
    <footer class="newsletter_right pymd-5 py-4" id="footer">
        <div class="container">
            <div class="inner-sec py-md-5 py-3">
                <div class="row mb-md-4 mb-md-3">
					<div class="col-lg-3 col-md-6 social-info text-left">
                       <h3 class="tittle1 foot mb-md-5 mb-4 text-white">Get in touch</h3>
						<p>0926k 4th block building,king Avenue, </p>
						<p class="my-2"> New York City,USA</p>
						<p class="phone">phone: +0444 555 6789</p>
						<p class="phone my-2">Fax: +0444 555 6789</p>
						<p class="phone">Mail:
							<a href="https://www.51qianduan.com/">51前端</a>
						</p>
                    </div>
					<div class="col-lg-3 col-md-6 social-info text-left">
					 <h3 class="tittle1 foot mb-md-5 mb-4 text-white">About Us</h3>
                       <p>Curabitur non nulla sit amet nislinit tempus convallis quis ac lectus. lac inia eget consectetur sed, convallis at tellus.
						Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum primis tempus convallis.</p>
                    </div>
                    <div class="col-lg-6 col-md-12 n-right tex-left">
                        <h3 class="tittle1 foot mb-md-5 mb-4 text-white">Subscribe our Newsletter</h3>
                        <form action="#" method="post">
                            <div class="form-group d-flex">
                                <input class="form-control" type="email" name="Email" placeholder=" Email Address" required="">
                                <button class="form-control submit text-uppercase" type="submit ">Subscribe</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </footer>
	<div class="copyright py-3">
		<div class="container">
			<div class="row">
				<div class="col-md-8">      
					<p class="copy-right mt-2">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
					</p>
				</div>
				<div class="col-md-4">
					<ul class="social-icons scial justify-content-end">
						<li class="mr-1"><a href="#"><span class="fa fa-facebook"></span></a></li>
						<li class="mx-1"><a href="#"><span class="fa fa-twitter"></span></a></li>
						<li class="mx-1"><a href="#"><span class="fa fa-google-plus"></span></a></li>
						<li class="mx-1"><a href="#"><span class="fa fa-linkedin"></span></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
    <!--//newsletter-->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 大气 霸气 摄影 婚纱摄影 摄影公司 婚纱摄影公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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