Welcome to CSS Project 9 - Pricing Table

This project will guide you through creating a pricing table using HTML and CSS. It's designed for beginners with basic knowledge of HTML and CSS.

Hardware Setup

Ensure you have the following hardware components:

A computer with internet access.
A keyboard and mouse for typing and navigation.

Software Requirements

Here are the software tools you'll need for this project:

Any code editor (e.g., Visual Studio Code, Sublime Text).
A web browser (e.g., Chrome, Firefox).

Knowledge Prerequisites

To successfully complete this project, you should be familiar with the following concepts:

Basic understanding of HTML and CSS.

Difficulty Rating

Easy Difficulty

Project Time!!!

“The secret of getting ahead is getting started.” - Mark Twain

Project Steps:

Done

Download and install Visual Studio Code or your preferred code editor.
Open your code editor and create a new folder for your project.
Inside the folder, create a new file named index.html and another file named styles.css.

Done

Open index.html and add the following basic HTML structure:





    
    
    Pricing Table
    


    
        
            Basic Plan
            $10/month
            
                10GB Storage
                100 Emails
                24/7 Support
            
            
        
        
            Pro Plan
            $20/month
            
                50GB Storage
                500 Emails
                24/7 Support
            
            
        
        
            Enterprise Plan
            $50/month
            
                Unlimited Storage
                Unlimited Emails
                24/7 Support

Done

Open styles.css and add the following CSS to style your pricing table:


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

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.pricing-table {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 2em auto;
}

.pricing-card {
    background-color: #fff;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 30%;
}

.pricing-card h2 {
    margin-bottom: 1em;
}

.price {
    font-size: 2em;
    margin: 1em 0;
}

ul {
    list-style: none;
    margin: 1em 0;
}

li {
    margin-bottom: 0.5em;
}

.cta-button {
    background-color: #28a745;
    color: #fff;
    padding: 0.75em 1.5em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #218838;
}

Save the file and open index.html in your web browser to see your styled pricing table.

Welcome to CSS Project 9 - Pricing Table

Hardware Setup

Software Requirements

Knowledge Prerequisites

Difficulty Rating

Easy Difficulty

Project Time!!!

Project Steps:

Basic Plan

Pro Plan

Enterprise Plan

Congratulations! You've created a pricing table using HTML and CSS. Now you're ready to tackle more complex projects.