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

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

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;
  }
}

 

请务必线上支付,通过线下支付的出现任何问题平台均不担保!

相关推荐

域名备案网页代码,蓝色服务器租用网站源码

域名备案网页代码,蓝色服务器租用网站源码一个网站的搭建域名服务器必不可少,整理了一款...

透明的霜雾玻璃图片预览特效

透明的霜雾玻璃图片预览特效jscss3制作图片透明的遮罩层,鼠标悬停圆形的霜雾玻璃镜...

黑白亮度背景切换代码

黑白亮度背景切换代码js制作简单的网页黑白色背景切换,点击按钮明亮度背景颜色切换特效...

金融企业网站开发,投资理财网站源码下载

金融企业网站开发,投资理财网站源码下载分享一款金融企业网站开发,投资理财网站源码下载...

发表回复

登录... 后才能评论