Hướng dẫn pricing cards html & css - thẻ định giá html & css

• MultiWebpress
• Ngày 18 tháng 10 năm 2021
• Miễn bình luận

Xin chào các bạn, hôm nay trong blog này, bạn sẽ học cách tạo thẻ định giá đáp ứng bằng cách sử dụng HTML & CSS thuần túy. Điều này dành cho những người mới bắt đầu muốn học những thứ mới bằng HTML & CSS. Gần đây, tôi đã chia sẻ một mẫu đăng nhập Facebook bằng HTML & CSS. Bây giờ, thời gian để tạo một bảng giá hoặc thẻ bảng giá chỉ bằng HTML & CSS.ello Friends, Today in this blog you’ll learn how to create a Responsive Pricing Card using pure HTML & CSS. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a Facebook login Form using HTMl & CSS. Now it’s time to create a Pricing Tables Or Price List Card using HTML & CSS Only.

Thẻ giá được thiết kế để dễ dàng so sánh giá của từng đăng ký trên các trang web thương mại. Trong thiết kế này, chúng tôi có một so sánh hoặc ví dụ về lưu trữ web. Bảng giá là một thiết kế nơi các mặt hàng được liệt kê trên một trang web để hiển thị các tính năng có sẵn của chúng như so sánh giá, tính năng, kế hoạch định giá, đăng ký, v.v.pricing comparisons, features,Pricing plans, Subscriptions, etc.

Trên các hình ảnh xem trước, bạn có thể thấy có 3 bảng hoặc thẻ định giá hiển thị các so sánh lưu trữ web. Trong đó chúng tôi có ba kế hoạch khác nhau. Mỗi kế hoạch web có chi phí khác nhau để dễ dàng so sánh với hai kế hoạch khác. Chúng tôi có ba kế hoạch lưu trữ web được liệt kê ở đây kế hoạch cơ bản, kế hoạch cao cấp và kế hoạch Ulitmate.Pricing cards that show Web Hosting comparisons. In this we have three different plans. Each Web Plans are of different cost to easily compare with other two plans. We have three plans of Web Hosting listed here BASIC PLAN , PREMIUM PLAN, & ULITMATE PLAN.

✓ Nó hiển thị các tính năng có trong kế hoạch được liệt kê.It shows the features included in the plan listed.

Nó cho thấy các tính năng được loại trừ trong kế hoạch được liệt kê.

Nếu bạn tìm thấy khó khăn để hiểu những gì được viết trong blog này, bạn cũng có thể xem một hướng dẫn video.

Hướng dẫn video về thẻ định giá đáp ứng (bảng giá)

Bạn cũng có thể thích:

• Làm thế nào để tạo biểu mẫu đăng nhập?
• Làm thế nào để tạo các biểu tượng truyền thông xã hội nổi?
• Thanh điều hướng đáp ứng | Tiêu đề trong HTML, CSS & JavaScript?
• Làm thế nào để tạo chân trang trong HTML & CSS thuần túy?
• Gõ văn bản hoạt hình CSS | Hiệu ứng văn bản chữ CSS | HTML & CSS thuần túy
• Hoạt hình đột quỵ CSS | Bối cảnh văn bản hoạt hình với CSS Stroke | HTML & CSS thuần túy
• Làm thế nào để tạo nút CSS 3D? | HTML & CSS

Trong video, bạn đã thấy thẻ định giá đáp ứng (bảng giá). Có nhiều cách khác nhau để tạo thẻ giá này (bảng giá), một trong số đó là cách chúng tôi đã thiết kế nó.Responsive Pricing Card (Pricing Tables).There are many different ways to create this Pricing Card(Price List), one of which is the way we have designed it.

Nếu bạn thích thẻ định giá đáp ứng này (bảng định giá) & nbsp; và muốn sử dụng nó trong dự án của bạn, bạn có thể tự do sao chép và sử dụng nó mà không có bất kỳ hạn chế nào và bạn có thể đưa bảng định giá lên cấp độ tiếp theo với sự sáng tạo của mình.Responsive Pricing Card (Pricing Tables) and want to use it in your project you can freely copy & use it without any restriction, And you can take Pricing Tables to the next level with your creativity.

Thẻ giá đáp ứng (bảng giá) [Mã nguồn]

Vì vậy, để tạo các bảng giá này, bạn cần tạo hai tệp khác nhau. Hai tệp là index.html và một tệp khác là tệp style.css. Hãy nhớ rằng khi bạn tạo một tệp HTML don don quên thêm tiện ích mở rộng .html trên tệp HTML và tiện ích mở rộng .CSS vào tệp kiểu của bạn.Pricing Tables you need to create two different files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

Hãy để tạo ra một tệp biểu định kiểu xếp tầng (CSS) với tên của style.css và dán các mã bên dưới trong tệp HTML của bạn. Hãy nhớ rằng bạn đã tạo một tệp có phần mở rộng .cssCascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension

Mã CSS

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(0deg, rgba(240,101,36,0.6727065826330532) 0%, rgba(255,100,100,1) 100%);
}
.wrapper{
  max-width: 1090px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wrapper .table{
  background: #fff;
  width: calc(33% - 20px);
  padding: 30px 30px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  text-align: center;
}
.table .price-section{
  display: flex;
  justify-content: center;
}
.table .price-area{
  height: 120px;
  width: 120px;
  border-radius: 50%;
  padding: 2px;
}

.aj_p{
  text-align: center;
}

p.aj_des {
  color: grey;
  padding-bottom: 30px;
  font-size: 14px;
}

.table.premium {
  margin: -20px;
}

.premium_all {
  padding-top: 22px;
}

.price-area .inner-area{
  height: 100%;
  width: 100%;
  line-height: 117px;
  text-align: center;
  color: #fff;
  position: relative;
}

.price-area .inner-area .text{
  font-size: 25px;
  font-weight: 400;
  position: absolute;
  top: -10px;
  left: 5px;
}

.price-area .inner-area .price{
  font-size: 45px;
  font-weight: 500;
  margin-left: 16px;
}

.table .package-name{
  width: 100%;
  height: 2px;
  margin :35px 0;
  position: relative;
}

.table .features li{
  margin-bottom: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.features li .list-name{
  font-size: 17px;
  font-weight: 400;
}

.features li .icon{
  font-size: 15px;
}

.features li .icon.check{
  color: #2db94d;
}

.features li .icon.cross{
  color: #cd3241;
}

.table .btn{
  width: 100%;
  display: flex;
  justify-content: center;
}

.table .btn button{
  width: 80%;
  height: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.table .btn button:hover{
  border-radius: 5px;
}

.basic ::selection,
.basic .price-area,
.basic .inner-area,
.basic .head_tab h2{
  color:red;
}

.basic .btn button{
  background: red;
  color: #fff;
  margin-top: -75px;
}

.basic .btn button:hover{
  background: rgba(240, 101,36);
  color: #fff;
}

.premium ::selection,
.premium .price-area,
.premium .inner-area,
.premium .head_tab h2{
  color:#ba24f0;
}

.premium .btn button{
  background: #ba24f0;
  color: #fff;
  margin-top: -75px;
}

.premium .btn button:hover{
  background: rgba(240, 101,36);
  color: #fff;
}

.ultimate ::selection,
.ultimate .price-area,
.ultimate .inner-area,
.ultimate .head_tab h2{
  color:#f5b55a;
}

.ultimate .btn button{
  background: #f5b55a;
  color: #fff;
  margin-top: -75px;
}

.ultimate .btn button:hover{
  background: rgba(240, 101,36);
  color: #fff;
}

@media (max-width:756px){
  .wrapper .table{
    width: 100%;
  }

  .table.premium{
    margin: 40px 0px;
  }
  .table.ultimate{
    margin: 0px;
  }
}

::selection{
  color:#fff;
}

.table .ribbon{
  width: 150px;
  height: 150px;
  position: absolute;
  top: -10px;
  left: -10px;
  overflow: hidden;
}

.table .ribbon::before,
table .ribbon::after{
  position: absolute;
  content: "";
  z-index: -1;
  display: block;
  border: 7px solid #ba24f0;
  border-top-color: transparent;
  border-left-color: transparent;
}

.table .ribbon::before{
  top: 0px;
  right: 15px;
}

.table .ribbon::after{
  bottom: 15px;
  left: 0px;
}

.table .ribbon span{
  position: absolute;
  top:30px;
  right: 0;
  transform: rotate(-45deg);
  width: 200px;
  background: #ba24f0;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  font-size: 17px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}




				
			

Bây giờ hãy tạo một ngôn ngữ đánh dấu siêu văn bản (HTML) với tên của index.html và dán các mã bên dưới trong tệp HTML của bạn. Hãy nhớ rằng bạn đã tạo một tệp có phần mở rộng .htmlHypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension

MÃ HTML

				
					




    
    
    Pricing Tables using HTML & CSS | MultiWebPress
    
    


  

    

      
Single Web Hosting

      
Ideal solution for beginners
      
            
      

        
        
₹159/mo when you renew
        
 
          1 Website
          
        
        

          ~10000 Visits Monthly
          
        
        

          30 GB SSD Storage
          
        
        

          100 GB Bandwidth
          
        
      
      
See all features 

    

    

      
Premium Web Hosting

      
Perfect package for personal
      
BEST VALUE
      
      
      

        
        
₹159/mo when you renew
        

          50 Website
          
        
        

          ~25000 Visits Monthly 
          
        
        

          60 GB SSD Storage
          
        
        

          200 GB Bandwidth
          
        
      
      
See all features 

    

    

      
Ultimate Web Hosting

      
Perfect package for businesses




      
      
      

        
        
₹159/mo when you renew
        

          100 Website
          
        
        

          ~75000 Visits Monthly 
          
        
        

          200 GB SSD Storage
          
        
        

          500 GB Bandwidth
          
        
      
      
See all features 

    

  

Sau khi tạo hai tệp và mã dán này, bây giờ chạy các tệp trong trình duyệt của bạn. Bạn có thể chạy đến bất kỳ trình duyệt nào bạn có trên máy tính của bạn. (Google Chrome, Firefox, Internet Explorer, v.v.)(Google Chrome, Firefox, Internet explorer etc.)

Đó là tất cả, bây giờ bạn đã tạo thành công thẻ định giá đáp ứng (bảng định giá) & nbsp; sử dụng HTML & CSS.Responsive Pricing Card (Pricing Tables)  using HTML & CSS.

Nếu mã của bạn có bất kỳ lỗi/ lỗi/ hoặc bạn phải đối mặt với bất kỳ vấn đề nào, thì vui lòng bình luận bên dưới hoặc liên hệ với chúng tôi từ trang liên hệ với chúng tôi.

Hy vọng bạn thích đọc và xem video. Vui lòng làm và đăng ký kênh YouTube của tôi và theo dõi tôi trên Instagram.

Cảm ơn trước!

ĐĂNG LẠI

Để lại một câu trả lời

Thể loại

• Bootstrap (1)
• Các nút CSS (3)
• Chân trang (1)
• HTML & CSS (15)
• Mẫu đăng nhập (1)
• Thanh điều hướng (2)
• Bài viết được đề xuất (16)
• Các nút truyền thông xã hội (2)
• Mẫu (2)
• WordPress (9)