| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pricing Panel</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="panel"> | |
| <div class="one1"> | |
| <img src="https://img.freepik.com/free-vector/employees-cv-candidates-resume-corporate-workers-students-id-isolate-flat-design-element-job-applications-avatars-personal-information_335657-145.jpg?size=338&ext=jpg&uid=R34134199&ga=GA1.2.301994707.1610099029" alt="first image"> | |
| <figcaption>personal</figcaption> | |
| <ul> | |
| <li class="pricing-item">custom domain</li> | |
| <li class="pricing-item">sleeps after 30 mins of inactivity</li> | |
| <li class="pricing-item" id="ullu1">free</li> | |
| </ul> | |
| <button class="a">sign up</button> | |
| </div> | |
| <div class="one2"> | |
| <img src="https://image.freepik.com/free-vector/psychology-success_272892-30.jpg" alt="second image"> | |
| <figcaption>small team</figcaption> | |
| <ul> | |
| <li class="pricing-item">never sleeps</li> | |
| <li class="pricing-item">multiple workers for more powerful apps</li> | |
| <li class="pricing-item" id="ullu2">$150</li> | |
| </ul> | |
| <button class="b">free trial</button> | |
| </div> | |
| <div class="one3"> | |
| <img src="https://image.freepik.com/free-vector/personal-growth-motivation-career-ambitions-proactive-mindset-goals-setting-man-planning-high-achievements-boosting-leadership-skills_335657-2112.jpg"> | |
| <figcaption>enterprice</figcaption> | |
| <ul> | |
| <li class="pricing-item">dedicated</li> | |
| <li class="pricing-item">simple horizontal scalability</li> | |
| <li class="pricing-item" id="ullu3">$400</li> | |
| </ul> | |
| <button class="c">free trial</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Built a static cum responsive pricing panel demo using only HTML5 and CSS3. Any suggestions are welcome. I would love it if anyone could just point out the mistakes. Definitely not the best ;( . Looking forward to learn. The work is inspired by Travis Williamson
A Pen by Shivendu Mishra on CodePen.
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| background-color: #60a9ff; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .panel { | |
| background-color: white; | |
| border-radius: 10px; | |
| max-width: 100%; | |
| width: 960px; | |
| height: 580px; | |
| display: flex; | |
| justify-content: center; | |
| padding: 15px 25px; | |
| } | |
| .one1 , button{ | |
| text-transform: uppercase; | |
| text-align: center; | |
| } | |
| .pricing-item { | |
| color: #016ff9; | |
| font-size: 12px; | |
| line-height: 2; | |
| font-weight: 700; | |
| border-top: 1px solid #e1f1ff; | |
| padding: 15px 0px; | |
| } | |
| .one1 button { | |
| border: 1px solid #9dd1ff; | |
| color: #348efe; | |
| padding: 15px 35px; | |
| border-radius: 10px; | |
| background-color: white; | |
| } | |
| .one2 , button{ | |
| text-transform: uppercase; | |
| text-align: center; | |
| } | |
| .one2 button { | |
| color: white; | |
| background-color: #48aaff; | |
| padding: 15px 35px; | |
| border: none; | |
| border-radius: 10px; | |
| } | |
| .one3 , button{ | |
| text-transform: uppercase; | |
| text-align: center; | |
| } | |
| .one3 button { | |
| border: 1px solid #9dd1ff; | |
| color: #348efe; | |
| padding: 15px 35px; | |
| border-radius: 10px; | |
| background-color: white; | |
| } | |
| .one1 ul { | |
| list-style-type: none; | |
| padding: 0px; | |
| } | |
| .one2 ul { | |
| list-style-type: none; | |
| padding: 0px; | |
| } | |
| .one3 ul { | |
| list-style-type: none; | |
| padding: 0px; | |
| } | |
| .one1 { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-evenly; | |
| padding: 25px 50px; | |
| border-right: 1px solid #e1f1ff; | |
| } | |
| .one1 img { | |
| max-width: 100%; | |
| width: 200px; | |
| padding-bottom: 20px; | |
| } | |
| .one2 { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-evenly; | |
| padding: 25px 50px; | |
| border-right: 1px solid #e1f1ff; | |
| } | |
| .one2 img { | |
| max-width: 100%; | |
| width: 200px; | |
| padding-bottom: 20px; | |
| } | |
| .one3 { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-evenly; | |
| padding: 25px 50px; | |
| margin: 10px 0px; | |
| } | |
| .one3 img { | |
| max-width: 100%; | |
| width: 200px; | |
| padding-bottom: 20px; | |
| } | |
| figcaption { | |
| color: #888; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| padding-bottom: 25px; | |
| } | |
| #ullu1 , #ullu2 , #ullu3 { | |
| font-weight: 700; | |
| font-size: 32px; | |
| } | |
| @media (max-width: 960px) { | |
| .panel { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| background-color: white; | |
| } | |
| .one1 { | |
| border: none; | |
| } | |
| .one2 { | |
| border: none; | |
| } | |
| .one3 { | |
| border: none; | |
| } | |
| } |