Pricing Card design using HTML and SCSS

Hello, learner In this article, we are going to create a Pricing Card design using HTML and SCSS. In the past post, we have created a Footer design using HTML and CSS. Now it is time to create a Pricing Card design.

A pricing card is a design needed element on a commercial website to display the various pricing plans, subscriptions, or price comparisons For their products and services.

In our design, there is a single card as you can see in the preview image above. In this card, We have used SCSS code it updated the version of CSS3 It has more features than CSS. At first, we have put the price at the top of the card after that there is a service version and some basic details of the card. There is some feature you will get in the card with the beautiful list design.

This pricing card design is responsive to any browser and device. if don’t know about the SCSS code just search in the internet. This design is taken from codepen.io

Pricing Card design using HTML and SCSS [Source code]

To create a Pricing Card design using HTML and SCSS you have to create two HTML and SCSS files named index.html and style.scss in the same folder and you have to link the SCSS file to HTML. after that paste the HTML code in index.html and paste the SCSS code in style.scss that’s all after pasting the code. You have to convert the SCSS file into CSS by using an extension on VScode.

At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<html>
    <head>
        <title> Hover effect</title>
        <link rel="Stylesheet" href="style.css">
    </head>
    <body>
<div class="price-section">
	<article class="price-table">
		<div class="price"><small>$</small>249</div>
		<h2 class="title">Solo Version</h2>
		<p class="description">A single license for solo designers, developers and freelancers.
		</p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1904381440953809"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-hx-k+g-bj+nx"
     data-ad-client="ca-pub-1904381440953809"
     data-ad-slot="6788407307"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

		<div class="features">
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
						</svg>
					</i>
					<span class="name">Single user licence</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" />
						</svg>
					</i>
				</summary>
				<div class="answer">
					One user access.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
						</svg>
					</i>
					<span class="name">Lifetime access</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" />
						</svg>
					</i>
				</summary>
				<div class="answer">
					One fee. One time. Yours forever.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
						</svg>
					</i>
					<span class="name">Free updates</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" />
						</svg>
					</i>
				</summary>
				<div class="answer">
					You will gain access to every future update.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
						</svg>
					</i>
					<span class="name">Use on unlimited projects</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" />
						</svg>
					</i>
				</summary>
				<div class="answer">
					Create as many projects as you want.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
						</svg>
					</i>
					<span class="name">Asset Hosting</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" />
						</svg>
					</i>
				</summary>
				<div class="answer">
					Keep your files for easy access and management. 5GB space included. Scale when necessary.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
						</svg>
					</i>
					<span class="name">Community support</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" />
						</svg>
					</i>
				</summary>
				<div class="answer">
					Get help and learn new things in our community Slack with over 5,000 contributors.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
						</svg>
					</i>
					<span class="name">Version control</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z" />
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" />
						</svg>
					</i>
				</summary>
				<div class="answer">
					Instant rollbacks to any version
				</div>
			</details>
		</div>
	</article>
</div>
    </body>
</html>

After pasting the HTML code the second you have to create an SCSS file named style.scss. Paste the below code on it and save it. Again remember to give .scss extension to SCSS file.

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap");

*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--c-blue-900: #081030;
	--c-blue-800: #111b40;
	--c-blue-700: #152148;
	--c-blue-500: #1d7bdb;
	--c-blue-300: #293359;
	--c-blue-200: #4e5985;
	--c-blue-100: #dfe8ff;

	--c-green-400: #4ade80;
}

/* Some basic CSS overrides */
body {
	line-height: 1.5;
	// min-height: 100vh;
	font-family: "Outfit", sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c-blue-900);
	color: var(--c-blue-100);
	padding: 10vh 12px;
}

button,
input,
select,
textarea {
	font: inherit;
}

a {
	color: inherit;
}
/* End basic CSS override */

.price-table {
	background-color: var(--c-blue-700);
	border-radius: 16px;
	max-width: 375px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 15px 45px 0 rgba(#000, 0.15);
	position: relative;
	background-image: linear-gradient(
		135deg,
		rgba(#4ade80, 0.15),
		rgba(#1d7bdb, 0.1) 20%,
		var(--c-blue-700) 40%,
		var(--c-blue-700) 100%
	);
	&:after {
		content: "";
		display: block;
		top: -3px;
		left: -3px;
		bottom: -3px;
		right: -3px;
		z-index: -1;
		position: absolute;
		border-radius: 16px;
		background-image: linear-gradient(
			135deg,
			var(--c-green-400),
			var(--c-blue-500) 40%,
			var(--c-blue-300) 60%,
			var(--c-blue-700) 100%
		);
	}

	.price {
		font-size: 3rem;
		line-height: 1;
		font-weight: 700;
		display: inline-flex;
		align-self: center;
		align-items: center;
		gap: 4px;
		position: relative;
		color: #fff;
		small {
			font-size: 1.25rem;
			font-weight: 400;
			position: absolute;
			left: -1.5ch;
		}
	}

	.title {
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.25;
		text-align: center;
		margin-top: 16px;
		color: #fff;
	}

	.description {
		font-size: 1rem;
		text-align: center;
		margin-top: 4px;
	}
}

.features {
	margin-top: 32px;
}

.feature {
	position: relative;
	& + & {
		margin-top: 16px;
	}
	summary {
		display: inline-flex;
		align-items: center;
		list-style: none; // Remove arrow
		&::-webkit-details-marker {
			display: none; // Remove arrow
		}
	}

	&[open] summary:after {
		content: "";
		display: block;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		z-index: 50;
	}

	&[open] {
		div {
			animation: scale 0.15s ease;
		}
	}

	.checkmark {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: var(--c-green-400);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		svg {
			width: 18px;
			height: 18px;
			color: #fff;
		}
	}

	.question-icon {
		display: flex;
		align-items: center;
		margin-left: 6px;
		cursor: pointer;
	}

	.answer {
		padding: 12px;
		background-color: var(--c-blue-800);
		border-radius: 6px;
		position: absolute;
		top: -12px;
		z-index: 100;
		transform: translatey(-100%) translatex(-50%);
		transform-origin: bottom center;
		width: 80%;
		left: 50%;
		border: 1px solid var(--c-blue-300);
		box-shadow: 0 15px 30px 0 rgba(#000, 0.1);
	}
}

@keyframes scale {
	0% {
		transform: translatey(-100%) translatex(-50%) scale(0);
	}
	100% {
		transform: translatey(-100%) translatex(-50%) scale(1);
	}
}

That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

Pricing Card design using HTML and SCSS

Pricing Card design using HTML and SCSS [Source code]

You might like this

Leave a Comment Cancel reply

Quick Link