黑色宽屏样式html5文艺作品展示网页模板代码下载



4 13 5



模板描述:黑色 宽屏 html5 文艺作品展示 网页模板 代码下载,黑色宽屏样式html5文艺作品展示网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,400italic,500,100italic,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/fonticons.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/navmenu.css" />
<link rel="stylesheet" href="assets/css/plugins.css" />
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css" />
<link rel="stylesheet" href="assets/css/white.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,400italic,500,100italic,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/fonticons.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/navmenu.css" />
<link rel="stylesheet" href="assets/css/plugins.css" />
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css" />
<link rel="stylesheet" href="assets/css/white.css">

2. 引入JS

<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/materialize.js"></script>
<script src="assets/js/jquery.magnific-popup.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/materialize.js"></script>
<script src="assets/js/jquery.magnific-popup.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>

3. HTML代码

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="myicon.png">
<!-- Raleway Google fonts  -->
<!-- Compiled and minified CSS -->
<!-- For navmenu css -->
<!--For Plugins external css-->
<!--Theme custom css -->
<!--Theme Responsive css-->
<!--Theme Colors css-->
<!--<link rel="stylesheet" href="assets/css/white.css">-->
<!--Old browser  JS-->
</head>
<body data-spy="scroll" data-target="#scrollspy">
<div class="main_figur">
	<div class="preloader">
		<h2>Loading...</h2>
		<div class="loaded hexdots-loader">Loading…</div>
	</div><!-- End off Preloader -->
	<div class="container">
		<div class="div-menu">
			<header class="cd-header">
				<a href="#home" class="brand-logo text-left"><img src="assets/images/logo.png" alt="" /></a>
				<a class="cd-menu-trigger" href="#main-nav"><span></span></a>
			</header>
		</div>
		<nav id="main-nav">
			<ul>
				<li><a href="#home">Home</a></li>
				<li><a href="#about">About Us</a></li>
				<li><a href="#service">Service</a></li>
				<li><a href="#team">Our Team</a></li>
				<li><a href="#portfolio">Our Work</a></li>
				<li><a href="#contactus">Contact</a></li>
			</ul>
			<a href="#" class="cd-close-menu">Close<span></span></a>
		</nav>
	</div>
	<!-- Home Section -->
	<section id="home" class="home">
		<div class="overlay"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-12 ">
					<div class="main_home text-center wow fadeInUp" data-wow-duration="700ms">
						<h1>Everything is designed. <br /> 
							Few things are designed well.</h1>
						<ul class="list-inline">
							<li><a target="_blank" href="#">Welcome</a></li>
							<li><a target="_blank" href="#">design</a></li>
							<li><a target="_blank" href="#">develop</a></li>
							<li><a target="_blank" href="#">support</a></li>
						</ul>
					</div>
					<div class="scrolldown">
						<a href="#about"><i class="fa fa-long-arrow-down"></i></a>
					</div>
				</div><!-- End of col-md-12 -->
			</div><!-- End of row -->
		</div><!-- End of Container -->
	</section><!-- End of Home Section -->
	<!-- About Section -->
	<section id="about" class="about">
		<div class="container">
			<div class="row">
				<div class="col-md-12 ">
					<div class="main_about_area p-t-3">
						<div class="head_title m-y-3  wow fadeInUp">
							<div class="row">
								<div class="col-md-4">
									<h2>About Us</h2>
								</div>
								<div class="col-md-8">
									<h6 class="m-b-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
										Integer arcu orci, Fermentum Vel finibus ac, blandit at tortor. 
										Sed auctor ex id nulla ultricies laoreet. </h6>
									<p>
										Duis id tortor vitae odio vulputate aliquam quis eget eros. Suspendisse condimentum feugiat mi, 
										non sodales eros cursus a. Nunc volutpat volutpat mi sed vehicula. Mauris hendrerit mollis volutpat. 
										Fusce elit ipsum, dignissim id ullamcorper eu, vehicula a lorem. Praesent non nunc id metus placerat sollicitudin vitae sed odio.
									</p>
								</div>
							</div>
						</div>
						<div class="about_content center p-b-3 wow fadeInUp" data-wow-duration="700ms">
							<div class="row">
								<div class="col-md-4">
									<div class="single_abt single_about m-y-3">
										<i class="fa fa-lightbulb-o"></i>
										<h3>Design</h3>
										<p>Nulla consectetur, dui ut mollis dapibus, dui urna blandit elit, at ornare ante dui sit amet mi.</p>
									</div>
								</div>
								<div class="col-md-4">
									<div class="single_abt single_about m-y-3">
										<i class="fa fa-toggle-off"></i>
										<h3>Design</h3>
										<p>Nulla consectetur, dui ut mollis dapibus, dui urna blandit elit, at ornare ante dui sit amet mi.</p>
									</div>
								</div>
								<div class="col-md-4">
									<div class="single_abt single_about m-y-3">
										<i class="fa fa-lock"></i>
										<h3>Design</h3>
										<p>Nulla consectetur, dui ut mollis dapibus, dui urna blandit elit, at ornare ante dui sit amet mi.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<hr />
				</div><!-- End of col-md-12 -->
			</div><!-- End of row -->
		</div><!-- End of Container-fluid -->
	</section><!-- End of Home Section -->
	<!-- Portfolio Section -->
	<section id="portfolio" class="portfolio">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="main_portfolio_area">
						<div class="head_title m-y-3 p-y-3 wow fadeInUp">
							<div class="row">
								<div class="col-md-4">
									<h2>Portfolio</h2>
								</div>
								<div class="col-md-8">
									<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
										Integer arcu orci, Fermentum Vel finibus ac, blandit at tortor. 
										Sed auctor ex id nulla ultricies laoreet. </h6>
								</div>
							</div>
						</div>
						<div class="main_portfolio_content">
							<div class="row">
								<div class="col-md-5 col-xs-12">
									<div class="row">
										<div class="col-md-4  col-xs-12">
											<div class="single_portfolio">
												<img src="assets/images/pf11.jpg" alt="" />
												<div class="single_portfolio_overlay">
													<div class="icon_area text-center">
														<a href="https://www.51qianduan.com/">51前端</a>
													</div>
												</div>
											</div>
										</div>
										<div class="col-md-8  col-xs-12">
											<div class="single_portfolio">
												<img src="assets/images/pf12.jpg" alt="" />
												<div class="single_portfolio_overlay">
													<div class="icon_area text-center">
														<a href="https://www.51qianduan.com/">51前端</a>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-8  col-xs-12">
											<div class="single_portfolio">
												<img src="assets/images/pf13.jpg" alt="" />
												<div class="single_portfolio_overlay">
													<div class="icon_area text-center">
														<a href="https://www.51qianduan.com/">51前端</a>
													</div>
												</div>
											</div>
										</div>
										<div class="col-md-4  col-xs-12">
											<div class="single_portfolio">
												<img src="assets/images/pf14.jpg" alt="" />
												<div class="single_portfolio_overlay">
													<div class="icon_area text-center">
														<a href="https://www.51qianduan.com/">51前端</a>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-12  col-xs-12">
											<div class="single_portfolio">
												<img src="assets/images/pf15.jpg" alt="" />
												<div class="single_portfolio_overlay">
													<div class="icon_area text-center">
														<a href="https://www.51qianduan.com/">51前端</a>
													</div>
												</div>
											</div>
										</div>
									</div> 
								</div>
								<div class="col-md-4  col-xs-12">
									<div class="single_portfolio">
										<img src="assets/images/pf21.jpg" alt="" />
										<div class="single_portfolio_overlay">
											<div class="icon_area text-center">
												<a href="https://www.51qianduan.com/">51前端</a>
											</div>
										</div>
									</div>
									<div class="single_portfolio height_1">
										<img src="assets/images/pf22.jpg" alt="" />
										<div class="single_portfolio_overlay">
											<div class="icon_area text-center">
												<a href="https://www.51qianduan.com/">51前端</a>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-3  col-xs-12">
									<div class="single_portfolio height_1">
										<img src="assets/images/pf31.jpg" alt="" />
										<div class="single_portfolio_overlay">
											<div class="icon_area text-center">
												<a href="https://www.51qianduan.com/">51前端</a>
											</div>
										</div>
									</div> 
									<div class="single_portfolio">
										<img src="assets/images/pf32.jpg" alt="" />
										<div class="single_portfolio_overlay">
											<div class="icon_area text-center">
												<a href="https://www.51qianduan.com/">51前端</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div><!-- End of main Portfolio area -->
				</div><!-- End of col-md-12 -->
			</div><!-- End of row -->
		</div><!-- End of container -->
	</section><!-- End of Tobias Section -->
	<section id="service" class="service colorsbg">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="main_service_area">
						<div class="head_title m-y-3 p-t-3 wow fadeInUp">
							<div class="row">
								<div class="col-md-4">
									<h2>Our Services</h2>
								</div>
								<div class="col-md-8">
									<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
										Integer arcu orci, Fermentum Vel finibus ac, blandit at tortor. 
										Sed auctor ex id nulla ultricies laoreet. </h6>
								</div>
							</div>
						</div>
						<div class="main_service_content">
							<div class="single_service_area m-t-3 p-t-2">
								<div class="row">
									<div class="col-md-6 no-padding">
										<div class="signle_service_left text-sm-center wow fadeInleft">
											<img src="assets/images/service1.jpg" alt="" />
										</div>
									</div>
									<div class="col-md-5 col-md-push-1">
										<div class="single_service p-r-1 wow fadeInUp">
											<h2 class="m-b-2">design</h2>
											<p>Sed eu nunc id lacus bibendum volutpat vel a odio. Curabitur eu eros eget tortor pretium euismod ut eu justo. 
												Proin laoreet condimentum magna id tincidunt. Proin ultricies, sapien sed pharetra ullamcorper, erat dui mollis mi, 
												vitae viverra leo tellus sit amet dui. Nulla vestibulum ante molestie felis accumsan tempor. </p>
											<p>Duis aliquam, neque at porttitor tempus, enim felis finibus tortor, at fringilla mi nulla at magna. 
												Cras accumsan elit quis varius placerat. Morbi fringilla gravida arcu sed tempus. Pellentesque faucibus neque eu ultricies pharetra. 
												Phasellus ligula dolor, condimentum ut elementum eget, ullamcorper nec lectus.</p>
										</div>
									</div>
								</div>
							</div><!-- End of single service area -->
							<div class="single_service_area  m-t-3 p-t-3">
								<div class="row">
									<div class="col-md-6 col-md-push-6 no-padding">
										<div class="signle_service_left text-sm-center wow fadeInRight">
											<img src="assets/images/service2.jpg" alt="" />
										</div>
									</div>
									<div class="col-md-5 col-md-pull-6">
										<div class="single_service single_service_left_text wow fadeInUp">
											<h2 class="m-b-2">develop</h2>
											<p>Sed eu nunc id lacus bibendum volutpat vel a odio. Curabitur eu eros eget tortor pretium euismod ut eu justo. 
												Proin laoreet condimentum magna id tincidunt. Proin ultricies, sapien sed pharetra ullamcorper, erat dui mollis mi, 
												vitae viverra leo tellus sit amet dui. Nulla vestibulum ante molestie felis accumsan tempor. </p>
											<p>Duis aliquam, neque at porttitor tempus, enim felis finibus tortor, at fringilla mi nulla at magna. 
												Cras accumsan elit quis varius placerat. Morbi fringilla gravida arcu sed tempus. Pellentesque faucibus neque eu ultricies pharetra. 
												Phasellus ligula dolor, condimentum ut elementum eget, ullamcorper nec lectus.</p>
										</div>
									</div>
								</div>
							</div><!-- End of single service area -->
							<div class="single_service_area m-t-3 p-t-3">
								<div class="row">
									<div class="col-md-6  no-padding">
										<div class="signle_service_left text-sm-center wow fadeInleft">
											<img src="assets/images/service3.jpg" alt="" />
										</div>
									</div>
									<div class="col-md-5 col-md-push-1">
										<div class="single_service p-r-1 wow fadeInUp">
											<h2 class="m-b-2">support</h2>
											<p>Sed eu nunc id lacus bibendum volutpat vel a odio. Curabitur eu eros eget tortor pretium euismod ut eu justo. 
												Proin laoreet condimentum magna id tincidunt. Proin ultricies, sapien sed pharetra ullamcorper, erat dui mollis mi, 
												vitae viverra leo tellus sit amet dui. Nulla vestibulum ante molestie felis accumsan tempor. </p>
											<p>Duis aliquam, neque at porttitor tempus, enim felis finibus tortor, at fringilla mi nulla at magna. 
												Cras accumsan elit quis varius placerat. Morbi fringilla gravida arcu sed tempus. Pellentesque faucibus neque eu ultricies pharetra. 
												Phasellus ligula dolor, condimentum ut elementum eget, ullamcorper nec lectus.</p>
										</div>
									</div>
								</div>
							</div><!-- End of single service area -->
						</div><!-- End of main service content -->
					</div><!-- End of main service area -->
				</div><!-- End of col-md-12 -->
			</div><!-- End of row -->
		</div><!-- End of container -->
	</section><!-- End of Service Section -->
	<!-- Team Section -->
	<section id="team" class="team">
		<div class="container">
			<div class="row">
				<div class="main_team_area m-t-3">
					<div class="head_title m-y-3  wow fadeInUp">
						<div class="row">
							<div class="col-md-4">
								<h2>Our Team</h2>
							</div>
							<div class="col-md-8">
								<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
									Integer arcu orci, Fermentum Vel finibus ac, blandit at tortor. 
									Sed auctor ex id nulla ultricies laoreet. </h6>
							</div>
						</div>
					</div>
					<div class="main_team_content wow fadeInUp">
						<div class="col-md-3 col-xs-12">
							<div class="single_team m-t-2">
								<div class="team_socail_area text-center m-b-1">
									<a href=""><i class="fa fa-facebook"></i></a>
									<a href=""><i class="fa fa-behance"></i></a>
									<a href=""><i class="fa fa-dribbble"></i></a>
									<a href=""><i class="fa fa-google-plus"></i></a>
								</div>
								<img src="assets/images/team1.jpg" alt="" />
								<div class="single_team_text text-center">
									<h6>Jack Corfield</h6>
									<p>CREATIVE DIRECTOR</p>
								</div>
							</div>
						</div><!-- End of col-md-4 -->
						<div class="col-md-3 col-xs-12">
							<div class="single_team  m-t-2">
								<div class="team_socail_area text-center m-b-1">
									<a href=""><i class="fa fa-facebook"></i></a>
									<a href=""><i class="fa fa-behance"></i></a>
									<a href=""><i class="fa fa-dribbble"></i></a>
									<a href=""><i class="fa fa-google-plus"></i></a>
								</div>
								<img src="assets/images/team2.jpg" alt="" />
								<div class="single_team_text text-center">
									<h6>Mohammad alamin</h6>
									<p>creative graphic designer</p>
								</div>
							</div>
						</div><!-- End of col-md-4 -->
						<div class="col-md-3 col-xs-12">
							<div class="single_team  m-t-2">
								<div class="team_socail_area text-center m-b-1">
									<a href=""><i class="fa fa-facebook"></i></a>
									<a href=""><i class="fa fa-behance"></i></a>
									<a href=""><i class="fa fa-dribbble"></i></a>
									<a href=""><i class="fa fa-google-plus"></i></a>
								</div>
								<img src="assets/images/team3.jpg" alt="" />
								<div class="single_team_text text-center">
									<h6>Brock Tardent</h6>
									<p>DEVELOPER</p>
								</div>
							</div>
						</div><!-- End of col-md-4 -->
						<div class="col-md-3 col-xs-12">
							<div class="single_team  m-t-2">
								<div class="team_socail_area text-center m-b-1">
									<a href=""><i class="fa fa-facebook"></i></a>
									<a href=""><i class="fa fa-behance"></i></a>
									<a href=""><i class="fa fa-dribbble"></i></a>
									<a href=""><i class="fa fa-google-plus"></i></a>
								</div>
								<img src="assets/images/team4.jpg" alt="" />
								<div class="single_team_text text-center">
									<h6>Brock Roe</h6>
									<p>PROJECT MANAGER</p>
								</div>
							</div>
						</div><!-- End of col-md-4 -->
					</div>
				</div><!-- End of main Team area -->
			</div><!-- End of row -->
		</div><!-- End of container -->
	</section><!-- End of Team Section -->
	<!-- Testiomonial Section -->
	<section id="testiomonial" class="testimonial">
		<div class="main_testimonial_area">
			<div class="overlay"></div>
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="head_title m-y-3 p-t-2  wow fadeInUp">
							<div class="row">
								<div class="col-md-4">
									<h2>Testimonials</h2>
								</div>
								<div class="col-md-8">
									<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
										Integer arcu orci, Fermentum Vel finibus ac, blandit at tortor. 
										Sed auctor ex id nulla ultricies laoreet. </h6>
								</div>
							</div>
						</div>
						<div class="testimonial_content text-center p-y-3 m-b-3">
							<div class="test_slider">
								<div class="single_test">
									<h3 class="">You don't get heaven or hell. Do you know the only reward you get for being Batman? 
										You get to be Batman.</h3>  
									<p>- Neil Gaiman</p>
								</div>
								<div class="single_test">
									<h3 class="">You don't get heaven or hell. Do you know the only reward you get for being Batman? 
										You get to be Batman.</h3>  
									<p>- Neil Gaiman</p>
								</div>
								<div class="single_test">
									<h3 class="">You don't get heaven or hell. Do you know the only reward you get for being Batman? 
										You get to be Batman.</h3>  
									<p>- Neil Gaiman</p>
								</div>
							</div>
						</div>
					</div> <!-- End off col-md-12 -->
				</div>
			</div>
		</div>
	</section> <!-- End of testimonial Section -->
	<section id="blog" class="blog">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="main_blog_area m-y-3 p-y-3 wow fadeInUp">
						<div class="col-md-3">
							<div class="single_blog_menu m-t-2">
								<h2>Blog</h2>
								<ul>
									<li class="active"><a href="">Latest Posts</a></li>
									<li><a href="">Design</a></li>
									<li><a href="">develop</a></li>
									<li><a href="">support</a></li>
								</ul>
							</div>
						</div>
						<div class="col-md-3">
							<div class="single_blog m-t-2">
								<div class="single_blog_img">
									<img src="assets/images/blog1.jpg" alt="" />
								</div>
								<div class="single_blog_text m-t-1">
									<h6>Quisque sit amet quam centum, aliquet nisi et, viverra dui.</h6>
									<span class="font-italic">May 14th, 2016</span>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="single_blog m-t-2">
								<div class="single_blog_img">
									<img src="assets/images/blog2.jpg" alt="" />
								</div>
								<div class="single_blog_text m-t-1">
									<h6>Quisque sit amet quam centum, aliquet nisi et, viverra dui.</h6>
									<span class="">May 14th, 2016</span>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="single_blog m-t-2">
								<div class="single_blog_img">
									<img src="assets/images/blog3.jpg" alt="" />
								</div>
								<div class="single_blog_text m-t-1">
									<h6>Quisque sit amet quam centum, aliquet nisi et, viverra dui.</h6>
									<span class="">May 14th, 2016</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div><!-- End of container  -->
	</section><!-- End of blog Section -->
	<!-- Contact Section -->
	<section id="contactus" class="contactus colorsbg">
		<div class="container-fluid">
			<div class="row">
				<div class="main_service_area main_contactus_area">
					<div class="row">
						<div class="col-md-6 no-padding">
							<div class="contact_us_right wow fadeInLeft">
								<div class="single_contactus">
									<div class="ourmap"></div>
								</div>
							</div>
						</div><!-- End of col-md-6 -->
						<div class="col-md-6 no-padding wow rollIn">
							<div class="main_contact_area p-t-2 p-x-3">
								<div class="head_title">
									<h2>Get in Touch</h2>
								</div>
								<div class="single_contant_right">
									<form action="#" id="formid">
										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<input type="text" class="form-control" name="name" placeholder="Your Name..." required="">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<input type="text" class="form-control" name="phone" placeholder="Phone" required="">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<input type="email" class="form-control" name="email" placeholder="Your Email Address" required="">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<textarea class="form-control" name="message" rows="8" placeholder="Your Message"></textarea>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="m-b-2 m-t-2">
												<input type="submit" value="Send message">
											</div>
										</div>
									</form>
								</div>
								<!-- Copyright -->
								<div class="row">
									<div class="main_footer">
										<div class="col-md-3">
											<div class="footer_logo text-xs-center m-b-2">
												<a href="#home"><img src="assets/images/logo.png" alt="" /></a>
											</div>
										</div>
										<div class="col-md-8">
											<div class="copyright_text margin-top-20 center">
												<p class=" wow fadeInRight animated" data-wow-duration="1s">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
											</div>
										</div>
										<div class="col-md-1 no-padding">
											<div class="scrollup center">
												<a href="#"><i class="fa fa-chevron-up"></i></a>
											</div>
										</div>
									</div>
								</div><!-- End of row -->
							</div><!-- End of main contact area -->
						</div><!-- End of col-md-6 -->
					</div>
				</div>
			</div><!-- End of row -->
		</div><!-- End of container -->
	</section><!-- End of Contactus Section -->
</div>
<!-- Compiled and minified JavaScript -->
</body>
</html>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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