HTML CSS 制作响应式价格表单展示id1075-网页前端设计

HTML & CSS 制作响应式价格表单展示id1075-网页前端设计

源码下载地址

在新演示地址
html

<a class="maxbutton-3 maxbutton" href="https://www.5g-o.com/codedesign/wp-content/uploads/2020/05/index.html"><span class="mb-text">在线预览</span></a> <a class="maxbutton-3 maxbutton" href="https://www.5g-o.com/codedesign/wp-content/uploads/2020/05/index.html"><span class="mb-text">在线预览</span></a> <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="https://www.5g-o.com/codedesign/wp-content/uploads/2020/05/style-1.css">
</head><div class="pricing-table"><div class="pricing-card"><h3 class="pricing-card-header">Personal</h3><div class="price"><sup>$</sup>15<span>/MO</span></div><ul><li><strong>3</strong> Websites</li><li><strong>20 GB</strong> SSD</li><li><strong>1</strong> Domain Name</li><li><strong>5</strong> Email</li><li><strong>1x</strong> CPU & RAM</li></ul><a href="#" class="order-btn">Order Now</a></div><div class="pricing-card"><h3 class="pricing-card-header">Professional</h3><div class="price"><sup>$</sup>30<span>/MO</span></div><ul><li><strong>10</strong> Websites</li><li><strong>50 GB</strong> SSD</li><li><strong>1</strong> Domain Name</li><li><strong>20</strong> Email</li><li><strong>1.5x</strong> CPU & RAM</li></ul><a href="#" class="order-btn">Order Now</a></div><div class="pricing-card"><h3 class="pricing-card-header">Premium</h3><div class="price"><sup>$</sup>50<span>/MO</span></div><ul><li><strong>30</strong> Websites</li><li><strong>150 GB</strong> SSD</li><li><strong>1</strong> Domain Name</li><li><strong>40</strong> Email</li><li><strong>2x</strong> CPU & RAM</li></ul><a href="#" class="order-btn">Order Now</a></div><div class="pricing-card"><h3 class="pricing-card-header">Ultimate</h3><div class="price"><sup>$</sup>80<span>/MO</span></div><ul><li><strong>100</strong> Websites</li><li><strong>500 GB</strong> SSD</li><li><strong>1</strong> Domain Name</li><li><strong>100</strong> Email</li><li><strong>4x</strong> CPU & RAM</li></ul><a href="#" class="order-btn">Order Now</a></div></div>
</body>
</html>

css

*{margin: 0;padding: 0;box-sizing: border-box;font-family: "Open Sans",sans-serif;text-decoration: none;list-style: none;
}body{background-color: #30336b;min-height: 100vh;display: flex;align-items: center;
}.pricing-table{display: flex;flex-wrap: wrap;justify-content: space-around;width: min(1600px, 100%);margin: auto;
}.pricing-card{flex: 1;max-width: 360px;background-color: #fff;margin: 20px 10px;text-align: center;cursor: pointer;overflow: hidden;color: #2d2d2d;transition: .3s linear;
}.pricing-card-header{background-color: #0fbcf9;display: inline-block;color: #fff;padding: 12px 30px;border-radius: 0 0 20px 20px;font-size: 16px;text-transform: uppercase;font-weight: 600;transition: .4s linear;
}.pricing-card:hover .pricing-card-header{box-shadow: 0 0 0 26em #0fbcf9;
}.price{font-size: 70px;color: #0fbcf9;margin: 40px 0;transition: .2s linear;
}.price sup, .price span{font-size: 22px;font-weight: 700;
}.pricing-card:hover ,.pricing-card:hover .price{color: #fff;
}.pricing-card li{font-size: 16px;padding: 10px 0;text-transform: uppercase;
}.order-btn{display: inline-block;margin-bottom: 40px;margin-top: 80px;border: 2px solid #0fbcf9;color: #0fbcf9;padding: 18px 40px;border-radius: 8px;text-transform: uppercase;font-weight: 500;transition: .3s linear;
}.order-btn:hover{background-color: #0fbcf9;color: #fff;
}@media screen and (max-width:1100px){.pricing-card{flex: 50%;}

源码下载地址

在新演示地址

点赞评论转发就是对up的最大支持和鼓励，非常谢谢!

HTML CSS 制作响应式价格表单展示id1075-网页前端设计相关推荐

如何用一简单的CSS制作响应式HTML网页
如何用简单的CSS制作响应式HTML网页 #故事前端开发在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量. 最赞的一点就是:这个响应式效果只需要添加 ...
HTML期末大作业(HTML+CSS+JavaScript响应式游戏资讯网站bootstrap网页)
响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
HTML5期末大作业：动漫网站设计——html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作 ...
CSS：响应式下的折叠菜单(条纹式)
2019独角兽企业重金招聘Python工程师标准>>> 原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单译者:dwqs 写在之前, ...
Web前端--HTML+CSS+JavaScript响应式网络科技网页设计
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
演示效果: 如下所示,您可以看到我创建的演示: 一个基于HTML,CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏,文章末尾给出了完整的源码截图演示地址 http://haiyongcsdn.gitee ...

HTML CSS 制作响应式价格表单展示id1075-网页前端设计

HTML CSS 制作响应式价格表单展示id1075-网页前端设计相关推荐

最新文章

热门文章