Pricing Card Design using HTML & CSS

                                                                                

















































Hello Developers, we are excited to introduce a highly flexible and efficient Flexbox layout snippet, expertly crafted with HTML and CSS. This snippet allows you to create dynamic and responsive layouts for your website, offering an adaptable way to arrange content in a clean and organized manner. The Flexbox layout is perfect for designing user interfaces that require complex alignment, spacing, and distribution of items, making it a powerful tool for modern web design. The Flexbox layout snippet is fully responsive, ensuring your content looks great on any device, from desktops to smartphones. The layout is designed to be highly customizable, allowing you to control the alignment, direction, order, and size of items within a container. By utilizing CSS Flexbox properties, you can create flexible and unique designs that adapt seamlessly to different screen sizes and orientations, enhancing the overall user experience. Incorporating this HTML and CSS Flexbox layout snippet into your website not only improves its visual appeal but also enhances its functionality. This snippet demonstrates your commitment to quality web design, providing a robust framework for organizing content. Whether you are creating a navigation menu, a gallery, or a complex webpage layout, this Flexbox layout will help you present your content in a professional and aesthetically pleasing manner. Experiment with different configurations and styles to create a layout that perfectly matches your vision and requirements.

How to make Pricing Card using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <title>Responsive Pricing card Using HTML & CSS</title> <meta name="description" content="Responsive Profile card Using HTML & CSSt. Made by learningrobo.com"/> <meta name="author" content="learningrobo.com" /> <meta name="keywords" content="form,responsive,learningrobo.com,html & css projects,project,pricing card"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css" /> <meta charset="UTF-8" /> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="main"> <div class="s1"> <div class="header"> <div class="h1"> <button style="height: 80%; width: 90%; background-color: rgb(230, 175, 66);padding: 5%;border-style: ridge;font-size: small; border-radius: 8px;align-items: center;text-align: center;border-color: black;"> SPECIAL OFFER </button> </div> </div> <div class="gap"> <h2 style="color: aliceblue; padding-left: 6%">Premium Monthly</h2> <li style="padding-left: 20%">Ad free User experience<br /></li> <li style="padding-left: 20%">Include premium content</li> <li style="padding-left: 20%">Any 2 devices</li> <li style="padding-left: 20%">Upto 4k</li> <br /> </div> <div class="footer"> <div class="f1"> <butto id="butto" style="padding: 7%">1 Month</butto> </div> <div class="f2"> <div class="text"> <span style="top: 0">$29</span> </div>51%off </div> </div> </div> <div class="s1"> <div class="header"> <div class="h1"> <button style="height: 80%; width: 90%; background-color: rgb(230, 175, 66); padding: 5%; border-style: ridge; font-size: small; border-radius: 8px; align-items: center; text-align: center; border-color: black; "> SPECIAL OFFER </button> </div> </div> <div class="gap"> <h2 style="color: aliceblue; padding-left: 6%">Premium Annual</h2> <li style="padding-left: 10%"> You will get all premium content features <br />upto 12 months </li> </div> <div class="footer"> <div class="f1"> <butto id="butto" style="padding: 7%">10 Month</butto> </div> <div class="f2"> <div class="text"> <span style="top: 0">$299</span> </div>51%off </div> </div> </div> <div class="s1"> <div class="header"> <div class="h1"> <button style=" height: 80%; width: 90%; background-color: rgb(230, 175, 66); padding: 5%; border-style: ridge; font-size: small; border-radius: 8px; align-items: center; text-align: center; border-color: black; "> SPECIAL OFFER </button> </div> </div> <div class="gap"> <h2 style="color: aliceblue; padding-left: 6%">Family</h2> <li style="padding-left: 10%"> Enjoy all premiums upto 4 devices<br /> </li> </div> <div class="footer"> <div class="f1"> <butto id="butto" style="padding: 7%">1 Year</butto> </div> <div class="f2"> <div class="text"> <span style="top: 0">$2999</span> </div>51%off </div> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  margin: 0px;
}
.main {
  background-image: linear-gradient(to bottom right,rgb(80, 10, 80), rgb(219, 75, 224)); 
  height: 100vh;
  width: 100vw;
  display: flex;
  gap: 10px;
  padding-top:10% ;
  padding-left: 8%;
}
.s1 {
  display: flex;
  flex-direction: column;
  height: 55%;
  width: 30%;
  border-style: ridge;
  border-radius: 8px;
  border-color: goldenrod;
  background-image: linear-gradient(rgb(128, 16, 128), rgb(212, 45, 217));

}
.s1:hover{
  background-color: #000;
  border-color: gold;
  transform: scale(1.05);
  box-shadow: 0 0 20px gold;
}
.header {
  height: 20%;
  width: 100%;
}
.h1 {
  height: 70%;
  width: 33%;
  position: relative;
  right: 10;
  top: 15%;
  display: flex;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  left: 65%;
}
.gap {
  position: static;
  height: 60%;
  width: 100%;
}
.footer {
  height: 20%;
  display: flex;
}
.f1 {
  height: 70%;
  width: 23%;
  position: relative;
  right: 10;
  top: 15%;
  left: 10px;
  display: flex;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  border-style: ridge;
  border-color: goldenrod;
}
#butto {
  height: 80%;
  width: 90%;
  color: #252424;
}
.f2 {
  color: white;
  padding: 30px;
  padding-left: 40px;
  position: relative;
  left: 51%;
  top: -20px;
  height: 70%;
  align-items: center;
  text-align: center;
  width: 20%;
  font-size: large;
}
@media screen and (max-width:1024px) {
  .main{
    flex-direction: column;
  }
  .main .s1{
    width: 90%;
  }
}
.credit a {
  text-decoration: none;
  color: #121212;
  font-weight: 800;
}
.credit {
  color: #121212;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.credit span {
  color: #000;
  font-size: 20px;
}
We hope you would like this Pricing Card using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Pricing Card using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.












Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome