红色宽屏样式html5设计公司网页模板代码下载



5 17 6



模板描述:红色 宽屏 html5 设计公司 网页模板 代码下载,红色宽屏样式html5设计公司网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/fontawesome-all.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">

2. HTML代码

      <div class="header-outs" id="header">
	    <header>
			<div class="container-fluid px-lg-5 ">
				<nav class="mnu mx-auto">
					<label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
					<input type="checkbox" id="drop">
						<ul class="menu">
							<li class="mr-lg-4 mr-3 active"><a href="index.html">Home</a></li>
							<li class="mr-lg-4 mr-3"><a href="#about" class="scroll">About</a></li>
							<li class="mr-lg-4 mr-3"><a href="#services" class="scroll">Services</a></li>
							<li class="mr-lg-4 mr-3"><a href="#gallery" class="scroll">Gallery</a></li>
						  <li class="mr-lg-4 mr-3"><a href="#blog" class="scroll">Blog</a></li>
						  <li><a href="#contact" class="scroll">Contact</a></li>
						</ul>
				</nav>
			</div>
		</header>
<!--banner -->
		<div class="baner-text text-center">
			<h1 class="mx-auto">Integer porttitor</h1>
			<p class="mx-auto mt-4 pt-2">porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est</p>
			<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr" href="single.html" role="button">Get Started</a>
		</div>
         <div class="clearfix"></div>
	</div>
      <!-- //banner -->
<!-- news -->
	<section class="news py-5" id="about">
		<div class="container py-lg-5">
			<h3 class="heading text-center"> porttitor mollisar lorem <strong>at molestie</strong> </h3>
				<div class="row news-grids py-lg-5 mt-3 text-center">
						<div class="col-md-4 newsgrid1">
							<img src="images/g5.jpg" alt="news image" class="img-fluid">
							<h6>mollisar lorem</h6>
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. </p>
						</div>
						<div class="col-md-4 mt-md-0 mt-5 newsgrid2">
							<img src="images/g2.jpg" alt="news image" class="img-fluid">
							<h6>Integer porttitor </h6>
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</p>
						</div>
						<div class="col-md-4  mt-md-0 mt-5 newsgrid3">
							<img src="images/g3.jpg" alt="news image" class="img-fluid">
							<h6> porttitor mollisar</h6>
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</p>
						</div>
				</div>
				<div class="text-center mx-auto">
					<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr" href="single.html" role="button">Read More</a>
				</div>
		</div>
	</section>
<!-- //news -->	
<!-- ban_bottom -->	
<section class="ban_bottom1 py-5" id="more">
	<div class="container py-lg-5">
		<div class="ban_bottom_top text-center py-lg-5">
			<h3>Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem.</h3>
		</div>
	</div>
</section>
<!-- //ban_bottom -->
<!-- services -->
<section class="services py-5" id="services">
	<div class="container py-lg-5">
		<h3 class="heading text-center">porttitor mollisar lorem <strong>at molestie</strong> </h3>
			<ul class="list-unstyled-1 mt-5">
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-code"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum adipiscing </h6>
							<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu.</p>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-cubes"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum adipiscing </h6>
							<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu.</p>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-book"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum adipiscing </h6>
							<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu.</p>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-coffee"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum adipiscing </h6>
							<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu.</p>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-bolt"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum adipiscing </h6>
							<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu.</p>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-cog"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum adipiscing </h6>
							<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu.</p>
						</div>
					</div>
				</li>
			</ul>
	</div>
</section>
<!-- //services -->
<!-- Gallery -->
    <section class="gallery py-5" id="gallery">
        <div class="container py-lg-5">
           <h3 class="heading text-center"> porttitor mollisar lorem <strong>at molestie</strong> </h3>
			 <div class="row news-grids mt-lg-5 mt-4 text-center">
                <div class="col-md-4 col-sm-6 gal-img">
                    <a href="single.html"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 col-sm-6 proj-1 gal-img">
                    <a href="single.html"><img src="images/g2.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 col-sm-6 gal-img">
                    <a href="single.html"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 col-sm-6 mt-md-5 gal-img">
                   <a href="single.html"><img src="images/g4.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 col-sm-6 mt-md-5 gal-img">
                    <a href="single.html"><img src="images/g5.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 col-sm-6 mt-md-5 gal-img">
                    <a href="single.html"><img src="images/g6.jpg" alt="news image" class="img-fluid"></a>
                </div>
            </div>
        </div>
    </section>
<!-- blog -->	
<section class="blog_w3l py-5" id="blog">
	<div class="container py-lg-5">
		<div class="row blog_w3l_top">
			<div class="col-lg-8 blog_w3l_right">
				<h4 class="heading text-left mb-5"><a href="single.html"> Integer porttitor <strong>mollisar lorem,</strong> at molestie arcu pulvinar</a></h4>
					<a href="single.html"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
					<div class="blog_w3l-5">
						<h6>Integer porttitor mollisar lorem</h6>
						<p>Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar 
						Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar pellentesque mi non laoreet eleifend porttitor mollisar</p>
						<a class="btn btn-primary mt-lg-4 mt-3 agile-link-bnr1" href="single.html" role="button"><span class="fa fa-arrow-right mr-2"></span>Continue Reading</a>
					</div>
			</div>
			<div class="col-lg-4 blog_w3l_left">
				<div class="blog_w3l_left1">
					<div class="blog_w3l-2">
						<h5>20 December 2018</h5>
						<h3 class="mt-2"><a href="single.html">pellentesque mi non</a></h3>
						<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar</p>
					</div>
				</div>
				<div class="blog_w3l_left2">
					<div class="blog_w3l-2">
						<h5>20 December 2018</h5>
						<h3 class="mt-2"><a href="single.html">pellentesque mi non</a></h3>
						<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar</p>
					</div>
				</div>
				<div class="blog_w3l_left3">
					<div class="blog_w3l-2">
						<h5>20 December 2018</h5>
						<h3 class="mt-2"><a href="single.html">pellentesque mi non</a></h3>
						<p class="mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar</p>
					</div>
				</div>
			</div>
			</div>
		</div>
</section>
	<!-- //blog -->	
	<!-- contact -->
	<section class="contact py-5" id="contact">
		<div class="container py-lg-5">
			<div class="text-center">
				<h2 class="heading text-center">QUESTIONS OR COMMENTS? <strong>GET IN TOUCH:</strong> </h2>
			</div>
			<div class="row contact-top">
				<div class="col-lg-6 contact_grid_right">
					<form action="#" method="post">
						<div class="row contact_top">
							<div class="col-sm-6">
								<input type="text" name="Name" placeholder="Name" required="">
							</div>
							<div class="col-sm-6">
								<input type="email" name="Email" placeholder="Email" required="">
							</div>
						</div>	
							<textarea name="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>
						<button type="submit" class="btn">Send Message</button>
							<button type="reset" class="btn">Clear Form</button>
							<div class="clearfix"> </div>
					</form>
				</div>
				<div class="col-lg-6 contact_grid_left">
				<p class="mb-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar</p>
				<div class="row">
						<div class="col-lg-6 contact_grid_left-2">
							<ul class="list-unstyled">
								<li>
									<div class="row">
										<div class="col-3">
											<span class="fa fa-home"></span>
										</div>
										<div class="col-9">
											<p>4568 Integer Porttitor Eleifend Road, PN 00201 USA</p>
										</div>
									</div>
								</li>
								<li class="mt-3">
									<div class="row">
										<div class="col-3">
											<span class="fa fa-phone"></span>
										</div>
										<div class="col-9">
											<p>(000) 000-0000</p>
										</div>
									</div>
								</li>
								<li class="mt-3">
									<div class="row">
										<div class="col-3">
											<span class="fa fa-envelope"></span>
										</div>
										<div class="col-9">
											<a href="https://www.51qianduan.com/">51前端</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="col-lg-6 contact_grid_left-1">
							<ul class="list-unstyled">
								<li>
									<div class="row">
										<div class="col-3">
											<span class="fa fa-facebook"></span>
										</div>
										<div class="col-9">
											<a href="#">facebook.com</a>
										</div>
									</div>
								</li>
								<li class="mt-3">
									<div class="row">
										<div class="col-3">
											<span class="fa fa-twitter"></span>
										</div>
										<div class="col-9">
											<a href="#">twitter.com</a>
										</div>
									</div>
								</li>
								<li class="mt-3">
									<div class="row">
										<div class="col-3">
											<span class="fa fa-instagram"></span>
										</div>
										<div class="col-9">
											<a href="#">instagram.com</a>
										</div>
									</div>
								</li>
								<li class="mt-3">
								<div class="row">
									<div class="col-3">
										<span class="fa fa-linkedin"></span>
									</div>
									<div class="col-9">
										<a href="#">linkedin.com</a>
									</div>
								</div>
							</li>
						</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	 <!-- //contact -->
	 <div class="cpy-right text-center">
		<div class="container">
				<p class="py-md-5 py-4">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
			</div>
	</div>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 设计 设计公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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