红色欧美形式响应式创意策划工作室网页模板代码



5 18 7



模板描述:响应式创意策划工作室,红色欧美形式响应式创意策划工作室网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,600,700" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,600,700" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="scripts/main.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="scripts/main.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Start Simple</title>
<meta name="description" content=""/>
</head>
<body id="top">
<header class="tf-header">
  <nav class="navbar py-5 navbar-dark">
	<div class="container">
	  <h1><a class="navbar-brand" href="/">Start Simple</a></h1>
	  <div id="navbar">
		<ul class="nav pull-right">
		  <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
		  <li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
		  <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
		</ul>
	  </div>
	</div>
  </nav>
  <div class="container">
	<div class="row">
	  <div class="col-md-7 col-sm-12">
		<h2>Startup Landing Page <br> for your Product &<br> Services</h2>
	  </div>
	</div>
	<div class="row">
	  <div class="col-md-7 col-sm-12">
		<p class="mt-4">Perfect landing page to showcase your product or service. Built with Bootstrap 4.</p>
		<p class="mt-5"><strong class="text-uppercase">Try for Free</strong><span> - Just leave your e-mail below and we will get in touch</span></p>
	  </div>
	</div>
	<div class="row no-gutters">
	  <div class="col-md-4 col-sm-12 tf-hh-col">
		<input class="mt-1 form-control" type="email" placeholder="*Your Email Address">
	  </div>
	  <div class="col-md-3 col-sm-12"><a class="tf-header-heading-btn a btn btn-primary btn-block mt-1" href="#">Request Free Trial</a></div>
	</div>
  </div>
</header>
<div class="page-content">
  <div>
<div class="tf-work-section">
<div class="container" id="work">
<h2 class="h3">Our Success Stories</h2>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4 col-sm-12 pt-2">
	<div class="card"><img class="img-fluid card-img-top" src="images/2-start-simple.jpg" alt="2-start-simple"/>
	  <div class="card-body">
		<p class="text-muted">Lorem ipsum dolor sit amet consectetur adipiscing elit interdum sagittis, nisi ac aptent vitae est facilisi.</p><a class="text-dark card-link" href="#">Learn More</a>
	  </div>
	</div>
  </div>
  <div class="col-md-4 col-sm-12 pt-2">
	<div class="card"><img class="img-fluid card-img-top" src="images/3-start-simple.jpg" alt="3-start-simple"/>
	  <div class="card-body">
		<p class="text-muted">Porttitor varius auctor litora congue sociosqu montes eleifend facilisi elementum convallis, diam et nullam sem.</p><a class="text-dark card-link" href="#">Learn More</a>
	  </div>
	</div>
  </div>
  <div class="col-md-4 col-sm-12 pt-2">
	<div class="card"><img class="img-fluid card-img-top" src="images/4-start-simple.jpg" alt="4-start-simple"/>
	  <div class="card-body">
		<p class="text-muted">Commodo convallis varius egestas purus rhoncus cras morbi dignissim, ligula vestibulum ultrices urna semper.</p><a class="text-dark card-link" href="#">Learn More</a>
	  </div>
	</div>
  </div>
</div>
</div>
</div>
<div class="tlinks">Collect from <a href="https://www.51qianduan.com/">51前端</a></div>
<div class="tf-quotes-section">
<div class="carousel slide mt-5" id="tf-carousel" data-ride="carousel">
<ol class="carousel-indicators">
  <li class="active" data-target="#tf-carousel" data-slide-to="0"></li>
  <li data-target="#tf-carousel" data-slide-to="1"></li>
  <li data-target="#tf-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
  <div class="carousel-item active" style="background-image: url('images/5-start-simple-slider.jpg');">
	<div class="carousel-caption">
	  <p class="slider-text-1">"Amazing product, Start Simple cares for their customers and helps them at every step.<br>I am a satisfied customer!"</p>
	  <p class="slider-text-2">Walter George<br>CEO, Founder of Gupply</p>
	</div>
  </div>
  <div class="carousel-item" style="background-image: url('images/6-start-simple-slider.jpg');">
	<div class="carousel-caption">
	  <p class="slider-text-1">"Start Simple thinks outside the box and offers solutions through the creative process of developing apps.<br>They helped me succeed!"</p>
	  <p class="slider-text-2">Nancy Young<br>Managing Director, Amazingly</p>
	</div>
  </div>
  <div class="carousel-item" style="background-image: url('images/7-start-simple-slider.jpg');">
	<div class="carousel-caption">
	  <p class="slider-text-1">"Simple yet elegant solution to showcase our product and services.<br>Couldn't have asked for more!"</p>
	  <p class="slider-text-2">Glenn Harrold<br>Marketing Manager</p>
	</div>
  </div>
</div><a href="https://www.51qianduan.com/">51前端</a><a href="https://www.51qianduan.com/">51前端</a>
</div>
</div>
<div class="tf-contact-section">
<div class="container" id="contact">
<h2 class="h4">Tell us About Your Requirement</h2>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4 col-sm-12">
	<h3 class="h5">Contact us</h3>
	<form action="#" method="POST">
	  <div class="row no-gutters">
		<div class="col-lg-6 col-md-12 col-sm-12 tf-contact-col">
		  <input class="bg-light form-control" type="text" name="name" placeholder="*Name" required="required"/>
		</div>
		<div class="col-lg-6 col-md-12 col-sm-12 pb-2">
		  <input class="bg-light form-control" type="email" name="_replyto" placeholder="*Your Email Address" required="required"/>
		</div>
	  </div>
	  <div class="row pb-2 no-gutters">
		<div class="col-md-12 col-sm-12">
		  <textarea class="bg-light mb-2 form-control" name="message" placeholder="*Your Message" rows="5" required></textarea>
		</div>
	  </div>
	  <button class="btn btn-primary" type="submit">Submit</button>
	</form>
  </div>
  <div class="col-md-8 col-sm-12 float-right text-right">
	<h3 class="h5">Address</h3><span>Start Simple<br/>United States</span>
	<p></p>
	<h3 class="h5">Phone</h3>
	<p>(243) 948 3866</p>
	<h3 class="h5">Email</h3>
	<p>contact@example.com</p>
  </div>
</div>
</div>
</div></div>
</div>
<footer class="bg-dark py-4 mt-5 tf-footer">
  <div class="container text-light">
	<div class="row">
	  <div class="col-md-6 col-sm-12">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></div>
	  <div class="col-md-6 col-sm-12 text-right tf-design"></div>
	</div>
  </div>
</footer>
</body>
</html>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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