/Pricing-Example

Primary LanguageHTML

Certainly! Let's go through the HTML code step by step and explain each section in detail.

  1. Document Structure and Meta Tags:
    • The document begins with the <!DOCTYPE html> declaration, indicating that it is an HTML5 document.
    • <html lang="en"> sets the language attribute to English.
    • <head> section contains meta tags for character set (UTF-8) and viewport settings (width=device-width, initial-scale=1.0).
    • Links to Bootstrap CSS and JavaScript files from a CDN (Content Delivery Network) are included. These files are essential for styling and functionality.
<!-- Document Structure and Meta Tags -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags for character set and viewport -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <!-- Bootstrap JS script -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <!-- Document title -->
    <title>Pricing Example</title>
</head>
  1. Custom Styling with CSS:
    • The <style> section includes custom styling for specific elements.
    • .c1 class is used for a flex container with space between items.
    • Custom styling for the header, including an image and a border.
    • Styling for Bootstrap card headers.
<!-- Custom Styling with CSS -->
<style>
    .c1 {
        display: flex;
        justify-content: space-between;
    }
    .c1 div {
        display: flex;
        align-items: center;
    }
    header img {
        width: 40px;
        height: 40px;
    }
    header {
        border-bottom: 1px solid rgb(158, 154, 154);
        margin: 0px 10px;
    }
    .card-header {
        background-color: rgb(205, 224, 224);
    }
</style>
  1. Header Section:
    • The header contains a Bootstrap navigation bar with links to different sections.
<!-- Header Section -->
<body>
    <header>
        <div class="container-fluid p-1 c1">
            <div>
                <!-- Bootstrap icon and header text -->
                <img src="bootstrap_icon_195906.ico" alt="bootstrap">
                <h4>Pricing Example</h4>
            </div>
            <!-- Navigation links -->
            <nav class="navbar navbar-expand-sm bg-light justify-content-end">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Company</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Support</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
                </ul>
            </nav>
        </div>
    </header>
  1. Pricing Information Section:
    • A simple section with a title and placeholder text.
<!-- Pricing Information Section -->
    <div class="container mt-5 text-center">
        <h1>Pricing</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia tenetur animi suscipit corporis dolorum itaque soluta eaque? Id officia et quasi ex ea voluptates similique quibusdam praesentium provident! Reiciendis, in!</p>
    </div>
  1. Pricing Cards Section:
    • Bootstrap grid system is used to create three pricing cards (Free, Pro, Enterprise) with details and buttons.
<!-- Pricing Cards Section -->
    <div class="container-fluid mt-3">
        <div class="row">
            <!-- Pricing Card - Free -->
            <!-- Pricing Card - Pro -->
            <!-- Pricing Card - Enterprise -->
        </div>
    </div>
  1. Comparison Table Section:
    • A table is created to compare different plans with checkboxes for each feature.
<!-- Comparison Table Section -->
    <h1 class="text-secondary text-center m-3">Compare Plans</h1>
    <!-- Table with pricing options -->
    <table class="table m-3 border-secondary">
        <thead>
            <tr>
                <th></th>
                <th class="text-center">Free</th>
                <th class="text-center">Pro</th>
                <th class="text-center">Enterprise</th>
            </tr>
        </thead>
        <tbody>
            <!-- Rows with feature checkboxes -->
        </tbody>
    </table>
</body>
</html>
  1. Comparison Table Rows:
    • Rows are added for different features with checkboxes indicating the availability of each feature in the corresponding plan.
<!-- Comparison Table Rows -->
<tr>
    <th>Public</th>
    <!-- Checkbox for Free Plan -->
    <!-- Checkbox for Pro Plan -->
    <!-- Checkbox for Enterprise Plan -->
</tr>
<!-- (similar structure for other rows) -->

This code is a template for a pricing page, featuring a header, pricing information, pricing cards, and a comparison table. The use of Bootstrap helps in creating a responsive and visually appealing layout.