Pricing Card design using html css







<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Plans</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="navbar">
        <div class="logo">
            <h1>Tech krish</h1>
        </div>

        <div class="navbar_items">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Services</li>
                <li>Contacts</li>
            </ul>
        </div>
    </div>

   

    <div class="container">
        <button class="gradient-button">Pricing</button>

        <h1>Choose the plan that fits <br> your needs</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo porro, sunt dolor quam velit nulla rerum reprehenderit fuga architecto, itaque temporibus neque vitae provident iste quod voluptate! Reiciendis, placeat aspernatur!</span>

        <div class="card-container">
            <!-- Card Data -->
            <div class="gradient-card">
                <div class="card-header">
                    <h2 class="card-title">Free</h2>
                    <p class="card-subtitle">To discover our product and its features</p>
                </div>
                <ul class="item-list">
                    <li>Unlimited projects</li>
                    <li>Share with 5 team members</li>
                    <li>Sync across devices</li>
                    <li>200GB individual data per user</li>
                </ul>
                <button class="card-button">Learn More</button>
            </div>

            <div class="gradient-card ">
                <div class="card-header">
                    <h2 class="card-title">$20</h2>
                    <p class="card-subtitle">Advanced features for teams</p>
                </div>
                <ul class="item-list">
                    <li>All Free features</li>
                    <li>Share with unlimited team members</li>
                    <li>Priority support</li>
                    <li>500GB individual data per user</li>
                </ul>
                <button class="card-button">Try for Free</button>
            </div>

            <div class="gradient-card">
                <div class="card-header">
                    <h2 class="card-title">Premium</h2>
                    <p class="card-subtitle">For enterprises and large teams</p>
                </div>
                <ul class="item-list">
                    <li>All Pro features</li>
                    <li>Dedicated account manager</li>
                    <li>Custom integrations</li>
                    <li>1TB individual data per user</li>
                </ul>
                <button class="card-button">Try for Free</button>
            </div>


         
        </div>
    </div>
</body>
</html>



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Headlines-Bold';
    src: url("headlines/Headlines-Bold.otf");
}

@font-face {
    font-family: 'Headlines-Light';
    src: url("headlines/Headlines-Light.otf");
}

@font-face {
    font-family: 'Headlines-Medium';
    src: url("headlines/Headlines-Medium.otf");
}

@font-face {
    font-family: 'Headlines-Thin';
    src: url("headlines/Headlines-Thin.otf");
}

body {
    background-color: #1e293b;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.navbar{
    width: 90%;
    display: flex;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    justify-content: space-between;
    align-items: center;
}

.navbar_items ul{
    display: flex;
}

.navbar_items ul li{
    list-style-type: none;
    color: white;
    margin: 20px;
    font-size: 14px;
    letter-spacing: 2px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-transform: capitalize;
}



.container {
    width: 80%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70vh;
    text-align: center;
}

.gradient-button {
    padding: 0.3rem 2rem;
    font-family: 'Headlines-Medium';
    letter-spacing: 2px;
    color: white;
    border: none;
    background-color: transparent;
        box-shadow: #404040, #6b7280, #334155 0px 1px 0px inset;
    cursor: pointer;
}

h1 {
    color: white;
    font-family: 'Headlines-Medium';
    margin: 10px 0 30px;
    letter-spacing: 2px;
}

.container span {
    color: #f1f1f1;
    margin-bottom: 40px;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.gradient-card {
    /* background: linear-gradient(135deg,#374151, #0f172a); */
    border-radius: 15px;
    width: 300px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    padding: 1rem;
    transition: transform 0.3s;
    text-align: left;
    position: relative;
}

.gradient-card:hover {
    transform: scale(1.05);
}

.card-header {
    margin-bottom: 15px;
}

.card-title {
    font-family: 'Headlines-Bold';
    color: white;
    letter-spacing: 3px;
    font-size: 2em;
}

.card-subtitle {
    color: #f1f1f1e8;
    margin: 10px 0 20px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1rem;
}

.item-list {
    margin: 10px 0 20px;
    color: aliceblue;
}

.item-list li {
    list-style: none;
    font-family: monospace;
    font-size: 13px;
    margin: 3px 0;
}

.card-button {
    padding: 10px 20px;
    width: calc(100% - 20px);
    border: none;
    border-radius: 5px;
    background-color: #3f3f46;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: #404040, #6b7280, #334155 0px 1px 0px inset;
}

.card-button:hover {
    background-color: #5a5a5f;
}





 

Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

How To Make Working Email Subscription Form With Google Sheets Using HTML CSS & JavaScript

Image
  https://github.com/jamiewilson/form-to-google-sheets https://docs.google.com/spreadsheets/u/0/ create index.html file <! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > < link rel = " stylesheet " href = " style.css " > < link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css " > </ head > < body > < div class = " container " > < div class = " content " > < span > Coming Soon </ span > < h1 > Our Brand new website < br /> is on it's way </ h1 > < span > Subscribe for more details </ span ...
Read more

Create Modern Landing Page with HTML CSS JS | Shery.js

 Create Modern Landing Page with HTML CSS JS | Shery.js   here is the links: https://www.npmjs.com/package/sheryjs index.html file contain these code: <! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > < link rel = " stylesheet " href = " https://unpkg.com/sheryjs/dist/Shery.css " /> <!-- Recommended --> < link rel = " stylesheet " href = " https://cdn.jsdelivr.net/npm/sheryjs/dist/Shery.css " /> < link rel = " stylesheet " href = " style.css " > </ head > < body > < div id = " main " > < div id = " back " > < img src = " image/IMG_7564.JPG " alt = "...
Read more