Weekly 8 – Pricing Page
Weekly 8 – Pricing Page
This is my weekly 8 submission, a pricing page! (Also yes it's posted kind of late because for some reason the
+ add a post button wasn't working at all).
Here's how it looks like:
It's also a responsive site, meaning that it can be viewed on any kind of device, like computer, tablet, or mobile.
- Company name
- Services link
- Plans link
- Call to action 'Start' button
- Description of plans
- Contact us link
- Icon and name of plan
- Number of domains
- Number of mailboxes
- Space size
- Up to how many multiplayers
- Level of security
- Type of support
- Purchase button
(Also I've kind of combined the code section with the style section).
The 3 plans are layered in a usual card layout, with the pro plan being a bit bigger than the others and in the center. This is the one the company – in this case, Ace (a placeholder name) – wants people to buy. It's bigger and in middle of the plans, and also has a darker shadow than the others, so a customer is immediately attracted to it.
In the beginning, when you first load the webpage, you can see each card fade in, starting from the left, then the right, and finally the center. This was made possible using
CSS animations and
opacity. At different percentages, or frames, each card had their opacity set from
0 meant the card was like invisible, and
1 completely showed it. You can check out lines
160 to find out more, or you also ask me any questions you have about it! :)
When you hover over each card, they get bigger (using
When you click on a button, it looks like you're clicking it. This is achieved using box shadows:
box-shadow: inset 0 -3px #aaa; as well as making the button go a bit down (
position: relative; top: 2px;).
The principle colors on this pricing page site are a lavender (
#ddecf2) for the page background color, a light blue for the navbar and top or header of the cards (
#b1d9f2), and a simple white (
#fdfdfd) for the background of the cards.
The text colors are also the same white (
#fdfdd) but there's also a black (
#121212) and a dimgray (
The main accent color is actually a gradient:
background: linear-gradient(180deg, rgba(60,148,186,1) 9%, rgba(2,155,223,1) 72%);, made with cssgradient.io.
This is what the gradient ressembles:
It's used for the center pricing card, which also helps make this plan attractive to the user.
The plans behind it have a lighter accent color as the background for their header, and a white background color to blend in more with background of the page.
The main font used is
'Nunito', sans-serif. There's also
'Alegreya Sans SC', sans-serif; a small caps font for certain headers and names of plans. Lastly,
'MuseoModerno', cursive is used for the prices. It looks especially good with numbers.
I chose these fonts for a modern and inviting look. The small caps font makes the plans look professional and business-like, and I feel like the font for the price looks futuristic and cool.
These fonts come from Google Fonts, a wonderful library of different fonts.
I used loads of icons for illustrating the different features each plan offers. For example, the email icon for the mailboxes, the checkmark on the shield for security, or the
i info icon for support.
The icons come from Ionicon, a really great site for beautiful icons in different formats and sizes, all for free.
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
Have a super day!!!
Hey I posted like two posts (one was a proper one) and only got a reply from ch1ck3n. When do you think I should post my posts on share? I don't think people ever see my posts.
Also the website looks... nice... Maybe make the buttons look better?