html价格表模板，产品划分定价表模板

一款产品服务对象不同价格也不同，小编整理了一款html价格表模板，产品划分定价表模板，该模板设计简约，内含3个模块，可用作产品不同分类的定价对比。

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>17sucai - 3 Useful Gutenberg Custom Blocks - Pricing table</title>
  <link rel='stylesheet' href='https://fonts.geekzu.org/css?family=Source+Sans+Pro:400,400i,700,900&amp;display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="pricing-table">
	<div class="plan">
		<h1 class="type-1">Personal</h1>
		<h2>Perfect for working solo.</h2>
		<h3>Free</h3>
		
		<ul>
			<li>100Mb of storage</li>
			<li>1 email address</li>
			<li>Basic time tracking</li>
		</ul>
		
		<a href="#" class="btn type-1">Start now</a>
	</div>
	
	<div class="plan highlighted">
		<span class="badge">Most popular</span>
		<h1 class="type-2">Business</h1>
		<h2>Best suited for small businesses.</h2>
		<h3>$19</h3>
		
		<ul>
			<li>Unlimited storage</li>
			<li>10 email addresses</li>
			<li>Advanced time tracking</li>
		</ul>
		
		<a href="#" class="btn type-2">Start now</a>
	</div>
	
	<div class="plan">
		<h1 class="type-3">Corporate</h1>
		<h2>Ideal for large corporations.</h2>
		<h3>$59</h3>
		
		<ul>
			<li>Unlimited storage</li>
			<li>Unlimited email addresses</li>
			<li>Advanced time tracking</li>
		</ul>
		
		<a href="#" class="btn type-3">Start now</a>
	</div>
</div>
<!-- partial -->
  
</body>
</html>

style.css文件

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(110.76deg, #73E1F3 1.84%, #FED195 99.37%);
}

.pricing-table {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 18px;
  width: 100%;
}
.pricing-table .plan {
  background: #fff;
  border-radius: 8px;
  padding: 4rem 1rem;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: #444555;
  position: relative;
  margin: 0.5rem;
  z-index: 1;
}
.pricing-table .plan.highlighted {
  padding-top: 8rem;
  z-index: 2;
}
.pricing-table h1 {
  font-weight: bold;
  font-size: 22px;
  text-transform: uppercase;
}
.pricing-table h2 {
  font-weight: normal;
  font-size: 18px;
  color: #9A9CB8;
}
.pricing-table h3 {
  font-weight: black;
  font-size: 55px;
  line-height: 69px;
  color: #14172C;
}
.pricing-table ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 4rem 0;
}
.pricing-table ul li {
  margin-bottom: 0.35rem;
}
.pricing-table .btn {
  display: inline-block;
  padding: 1rem 0;
  width: 10rem;
  border-radius: 100px;
  font-weight: bold;
  font-size: 18px;
  text-transform: capitalize;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 0.2s;
}
.pricing-table .btn:hover {
  transform: scale(0.95);
}
.pricing-table .btn.type-1 {
  background-color: #0ea8c1;
}
.pricing-table h1.type-1 {
  color: #0ea8c1;
}
.pricing-table .btn.type-2 {
  background-color: #ffc300;
}
.pricing-table h1.type-2 {
  color: #ffc300;
}
.pricing-table .btn.type-3 {
  background-color: #732eff;
}
.pricing-table h1.type-3 {
  color: #732eff;
}
.pricing-table .badge {
  position: absolute;
  top: 4rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #00e899;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

@media screen and (min-width: 800px) {
  .pricing-table {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pricing-table .plan {
    width: 30%;
    margin: 0 0 0 -1.5rem;
  }
  .pricing-table .plan.highlighted {
    padding-bottom: 8rem;
  }
}

 

声明： 1、本站所有文章仅供参考，如有侵权 请联系我们删除 meng#yimiaonet.com #换成@ 2、文章大部分源自网络或ai生成，文章不作为任何依据，仅供参考。 3、本站的所有源码都是在网络上转载或由用户投稿，仅供参考学习使用，请您务必在下载后24小时内删除。 4、本站下载的所有源码等内容不得用于任何违反相关法律法规的用途，一经发现 我们立即向有关部门报备。 5、如果您需要商用，可以联系客服定制开发或购买商业源码栏目内的内容，当然也可以联系部分源码的原作者；我们最终一切版权。 6、您注册本站会员后，如果需要注销账号等适宜，请联系客服。