diff --git a/jsx-version.html b/jsx-version.html index c31d822..a30a108 100644 --- a/jsx-version.html +++ b/jsx-version.html @@ -24,13 +24,18 @@ // Same card UI, written as a JSX component (HTML-like syntax inside JavaScript) // This component is reusable - we can create multiple cards by passing different data - function PricingCard({ title, price, includesText, features, buttonText, buttonVariant }) { + function PricingCard({ title, price, pricePeriod, includesText, features, buttonText, buttonVariant }) { return ( // JSX uses "className" instead of "class" because "class" is a reserved word in JavaScript
{/* Curly braces { } let you insert JavaScript expressions into JSX */}

{title}

-

{price}

+

+ {price} + {pricePeriod != null && ( + {pricePeriod} + )} +

{includesText}

); diff --git a/styles.css b/styles.css index ee9220a..869bb57 100644 --- a/styles.css +++ b/styles.css @@ -147,6 +147,24 @@ body { background-color: #333; } +.download-button.tertiary { + background-color: transparent; + color: #333; + border: 1px solid #a1a19d; +} + +.download-button.tertiary:hover { + background-color: #e6e5e0; + color: #333; + border: 1px solid #a1a19d; +} + +.download-button.tertiary:active { + background-color: #a1a19d; + color: #333; + border: 1px solid #a1a19d; +} + /* Fixed pill label that sits at the top center of the viewport */ .page-label { position: fixed;