How to create Plans list using Html and Css?
Question
I'm trying to make this kind of Plan list .
But somehow I'm still not able to achieve this I have created basic structure of this don't know how to make this complicated design as show in this picture? Don't know how to create cross-borders after INFINITY I want create same type of structure using HTML OR CSS .
Here is my code
<!doctype html> <html lang="en"> <head> <title>Price List</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS v5.0.2 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <style> .col-lg-2 { border: 1px solid black; background-color: red; } .col-lg-1 { background-color: red; border: 1px solid black; } div>.tx>p { margin-top: 19px; } </style> <div class="container"> <div class="row justify-content-center text-center"> <div class="col-lg-2 bg-dark"> <div> <h4>Random</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> Speed</span></p> <p> <span class="text-light"> Unlimited Data</span></p> <p> <span class="text-light"> Monthly rental</span></p> <p><span class="text-light">Who is it for?</span></p> </div> </div> <div class="col-lg-2 bg-danger"> <div> <h5>INFINITY</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 1 Gbps</span></p> <p> <span class="text-light"> ✅ </span></p> <p> <span class="text-light"> ₹3999</span></p> <p><span class="text-light">Experts like <br>gamers,traders,<br>live streamers</span></p> </div> </div> <div class="col-lg-2 bg-danger"> <div> <h4>PROFESSIONAL</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 300 Mbps</span></p> <p> <span class="text-light">✅ </span></p> <p> <span class="text-light">₹1499 </span></p> <p><span class="text-light">Professionals <br>Working <br>from home</span></p> </div> </div> <div class="col-lg-2 bg-light "> <div> <h4>ENTERTAINMENT</h4> <br> </div> <div class="tx "> <p> <span class="text-dark"> 200 Mbps</span></p> <p> <span class="text-dark">✅ </span></p> <p> <span class="text-dark">₹999 </span></p> <p><span class="text-dark">Non-stop binge<br>watchers</span></p> </div> </div> <div class="col-lg-2" style="background-color: grey;"> <div> <h4>STANDARD</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 100 Mbps</span></p> <p> <span class="text-light">✅ </span></p> <p> <span class="text-light">₹799 </span></p> <p><span class="text-light">Small family with <br>light usage </span></p> </div> </div> <div class="col-lg-2" style="background-color: grey;"> <div> <h4>BASIC</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 40 Mbps</span></p> <p> <span class="text-light">✅ </span></p> <p> <span class="text-light">₹499 </span></p> <p><span class="text-light">Individuals<br>with light usage </span></p> </div> </div> <div class="col-2 text-light" style="background-color: grey;"> <br> <div> Streaing <br>apps</div> <br> </div> <div class="col-6 text-light" style="background-color: rgb(49, 49, 49);"> <br> <div>Amazon-prime + Disnep hotstar</div> <br> </div> <div class="col-2 text-light" style="background-color: rgb(49, 49, 49);"> <br> <span style="font-size: 21px;">X</span> <br> </div> <div class="col-2 text-light" style="background-color: rgb(49, 49, 49);"> <br> <span style="font-size: 21px;">X</span> <br> </div> </div> </div> <!-- Bootstrap JavaScript Libraries --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html>
Someone please help me out with Source Code .
Thank you.
1 answers
solution1
2 2021-11-10 18:29:00
Here could be a good start... Toggle to full-page to show result
INFO: It use Bootstrap icons and BS grid system only and clip-path to get the "special border"
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css"); .h-20 { height: 20%; } .shadow-lg { box-shadow: inset 0 1rem 3rem rgba(0, 0, 0, 1)!important } .path { clip-path: polygon(100% 0, 100% 100%, 27% 68%, 0 100%, 0 0); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 1)!important; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container-fluid bg-dark vh-100 text-center"> <div class="row h-75"> <div class="col-2 text-white"> <div class="row h-20"></div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-speedometer2"></i> Speed </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-bar-chart-fill"></i> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-currency-exchange"></i> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-people-fill"></i> Who is <br> it for ? </div> </div> </div> <div class="col-2 bg-danger shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> INFINTY </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 bg-danger shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> PROFESSIONAL </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 bg-white shadow-lg"> <div class="row h-20 align-items-center bg-danger path"> <div class="col-12 text-white"> ENTERTAINMENT </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> STANDARD </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> BASICS </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> </div> <div class="row h-25"> <div class="col-2 bg-secondary"></div> <div class="col-6 shadow-lg"></div> <div class="col-2 shadow-lg"></div> <div class="col-2 shdaow-lg"></div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to Create Toggleable Button using HTML and CSS
create link for each outer list item using HTML CSS JS
how to create HTML List templates using handlebarjs
Create tree using html and css
how to create vertical scroll effect for slider using js ,html,css
How to create a new temp image using html,css, and javascript?
How to create a circular countdown timer using HTML, CSS or JavaScript?
How to create an interactive navigation, in a circular design, using HTML, CSS, and JQuery
How to create a time delay modal (preferably using HTML, JQuery, CSS)
How can I create a modal using Semantic UI in HTML/CSS?
Related Tags