# BUILDING A PRICING PAGE USING HTML and CSS; WHAT I LEARNT

**1.0:INTRODUCTION**

Just like all projects and jobs in all aspects of work; each an everyone has a specific challenge, rhythm and or feel about them. Web developing projects all have a different feel and this particular one was no different. I will walk you through some of the challenges and experiences I had while building this project.

**2.0:BUILDING AND LEARNING PROCESS**

**2.1 What is a pricing page?**
To understand what a pricing page is we first have to understand what a pricing sheet is; A pricing sheet compiles a list of prices for products tailored to a specific set of buyers. It’s a tangible visual for companies and customers to map out pricing and purchases.

A pricing page is a specific landing page that lists different pricing plans available for your products and services on a company's website. This pricing page can be defined to be a pricing sheet that has been developed into a web page.

**2.2 Features of a pricing page:**
A pricing page comprises of several features of which some of them are; pricing tiers, call to action buttons, frequent asked questions(FAQs), billing frequency, plan options, trust element among others. These features all built into the pricing page of a company website.

**3.0: CHALLENGES AND SOLUTIONS LEARNT**
Building this particular website I came across some challenges and derived solutions to some of them of which they are:

**3.1 Toggle switch button:**
Creating a toggle switch was one of the hurdles I faced in building this website. A toggle switch button describes the state of the UI, this helps users to know the state in which they are reacting with the website. In this project I worked with the circle toggle button and not the square one. One thing to note is that there are several ways to create a toggle switch button and this method which I used allowed me to use a simple HTML structure using just a `<div>` and `<input>` element with a type of checkbox.

HTML:

<div id="toggleSwitch">
<input type="checkbox">
</div>

This minimal structure also allowed for easy and simple styling using CSS. The `<input> `element was targeted in my code to style the initial state of the button and also styled and given an after state dictated the behavior and response of the switch when a user interacts with it.

CSS styling:

input {
    cursor: pointer;
    margin: 1rem auto;
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 25px;
    outline: none;
    background-color: #ccc;
    -webkit-appearance: none;
    transition: 0.3s;
    background-color: #00b289;
}

input::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
    background-color: white;
    transition: left .3s;
}

input:checked {
    background-color: #4c4d5f;
}

input:checked::after {
    left: 70%;
}

3.2. Creating accordions for a FAQs section:
We all know accordions are commonly used when an interface has large groups of sectioned content, but all of the content doesn’t need to be available at the same time. To achieve a simple accordion I made use of the `<details>` and `<summary>` elements with minimal structuring and styling.

HTML:

<details>
	<summary id="questions">The Question</summary>
	<p>The Answer to the question</p>
</details>

CSS styling:

#questions {
    display: flex;
    font-size: larger;
    padding-top: 10px;
}

In my styling I only targeted and styled the `<summary>` which I gave it and ID of "questions". Much styling can be applied to the `<summary>` and `<p>` elements to give it a more appealing look and response when a user interacts with it like giving it a transition component and multiple shades of colors to differentiate them.

**4.0:CONCLUSION**
From my codes and styling you can see that I tried to use as much less lines of code as possible, both in the HTML structure and the CSS styling. Complex styles and more properties can be added to the codes to make the web page more user interactive. For example different states and behaviors can be added to the price cards when a user is hovering over them.
Overall this project allows for better mastering of structuring and control of our structured HTML elements.

**GitHub Repo**: [[e-mail]:HellblazerXXL/bonsai_pricing_page.git](https://)