Tabla de precios

HTML <section class="landing-page-section"> <h2>Become <span class="gradient-text">Atheros Member</span></h2> <p> The price for each plan represents a one-time payment. <!--? more text here --> </p> <div class="pricing-container"> <article class="pricing-card pricing-card--primary"> <img src="assets/complete-package.svg" alt="Complete Package" class="plan-icon" > <h3>The Complete Package</h3> <div class="pricing-card__price"> <img alt="Price" src="assets/price.svg" > $94.00 <s>$174</s> </div> <a class="enroll" title="Enroll Now" target="_blank" rel="noopener" href="https://learning.atheros.ai/course-detail/ux-design-process" > Enroll Now </a> <div class="divider"></div> <ul> <li> The Complete Package includes all the benefits mentioned in the next two packages 👇🏼 </li> <li> Online Video Course </li> <li> E-book in PDF format </li> <li> Design resources + special deals on design assets </li> <li> Access to the Slack mentoring channel </li> </ul> </article> <article class="pricing-card"> <img src="assets/video.svg" alt="Video Course" class="plan-icon" > <h3>Video Course</h3> <div class="pricing-card__price"> <img alt="Price" src="assets/price.svg" > $86.00 <s>$49</s> </div> <a class="enroll" title="Enroll Now" target="_blank" rel="noopener" href="https://learning.atheros.ai/course-detail/ux-design-process" > Enroll Now </a> <div class="divider"></div> <ul> <li> More than 4.5 hours of videos (theory explained on practical examples + designing real app design in Figma) </li> <li> 10 Modules, 31 Chapters, 30 Quizzes + Certificate </li> <li> Get feedback and mentoring directly from Jan Mraz and other members in a private Slack channel </li> <li> Database with useful design freebies, tools, and other links </li> </ul> </article> <article class="pricing-card"> <img src="assets/ebook.svg" alt="E-book Package" class="plan-icon" > <h3>E-book</h3> <div class="pricing-card__price"> <img alt="Price" src="assets/price.svg" > $27.00 <s>$29</s> </div> <a class="enroll" title="Enroll Now" target="_blank" rel="noopener" href="https://learning.atheros.ai/course-detail/ux-design-process" > Enroll Now </a> <div class="divider"></div> <ul> <li> 150+ pages of design knowledge in PDF format </li> <li> Design explained on practical examples + components cheatsheet </li> <li> Database with useful design freebies, tools, and other useful links </li> <li> Special deals on design assets and tools that are available only for the Atheros students! </li> </ul> </article> </div> </section>

CSShtml { font-size: 16px; font-family: Manrope; letter-spacing: 0.75px; } * { box-sizing: border-box; } body { background: white; padding: 0; margin: 0; } :root { --primary-blue: #5DA8FF; --primary-blue-violet: #605DFF; --primary-violet: #AD63F6; --text-color: #303651; --text-color-neutral: #697089; --background-blue: #E5F1FF; } .gradient-text { background-image: linear-gradient( 90.65deg, #605DFF 41.17%, #AD63F6 92.13% ); background-size: 100%; background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } .landing-page-section { display: flex; padding: 2rem 0.5rem; flex-direction: column; align-items: center; background: linear-gradient( to top, rgba(96, 93, 255, 0.1) 0%, rgba(96, 93, 255, 0) 100% ); padding-top: 12rem; min-height: 100vh; height: 100%; } .landing-page-section > h2 { color: var(--text-color); text-align: center; font-size: 2.5rem; margin: 0; } .landing-page-section > p { max-width: 32rem; width: 100%; text-align: center; } .landing-page-section > p > strong { color: var(--primary-violet); } .pricing-container { margin-top: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: 1rem; } .pricing-card { display: flex; flex-direction: column; position: relative; gap: 1rem; width: 100%; max-width: 23rem; min-height: 35rem; border-radius: 0.5rem; padding: 3rem 2rem; cursor: pointer; border: 1px solid var(--primary-blue); background: #F7FAFF; } .pricing-card--primary { background: white; } .pricing-card__price { background: var(--background-blue); width: 100%; min-height: 3.5rem; padding: 0.4rem 1rem; display: flex; gap: 0.4rem; align-items: center; border-radius: 0.5rem; font-weight: 700; flex-wrap: wrap; } .pricing-card__price > s { color: var(--text-color-neutral); font-size: 0.875rem; } .pricing-card > h3 { margin: 0; font-size: 1.125rem; font-weight: 700; text-align: left; } .pricing-card > .divider { border: 1px solid #E6E8F0; } .pricing-card > .enroll { display: block; width: 100%; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 3rem; border-radius: 0.5rem; background: #605DFF1A; color: var(--primary-blue-violet); text-decoration: none; letter-spacing: 0.75px; border: 0px solid var(--primary-blue-violet); } .pricing-card > .enroll:hover { border: 1px solid var(--primary-blue-violet); transition: border-width 0.2s linear; } .pricing-card--primary > .enroll { background: linear-gradient( 90deg, #605DFF, #AD63F6 50%, #AD63F6 50%, #605DFF 80%, #5DA8FF 100% ); background-size: 200% 200%; background-position: 0% 0%; transition: background-position 1s; color: white; } .pricing-card--primary > .enroll:hover, .enroll:focus { border: none; background-position: 100% 100%; transition: background-position 1s; } .pricing-card > ul { width: 100%; display: flex; flex-direction: column; gap: 1rem; } .pricing-card > ul > li { position: relative; font-weight: 500; list-style-type: none; font-size: 0.875rem; } .pricing-card > ul > li:before { content: ""; position: absolute; top: -0.125rem; left: -2rem; width: 1.6rem; height: 1.6rem; background-image: url('assets/benefit.svg'); background-repeat: no-repeat; } .pricing-card > .plan-icon { position: absolute; left: -1.25rem; top: -1.875rem; }

JavaScript

Puede cambiar código para ver el resultado

Resultado ↓