Share your repls and programming experiences

← Back to all posts
Weekly 8 – Pricing Page
h
Bookie0

Weekly 8 – Pricing Page

Hello! 👋

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.

It's the final challenge out of a series of 4; the first one was a product page, next was a chat app, afterwards it was a clock, and this is the final one!


Links 🔗


Features ✨

Navbar

  • Logo
  • Company name
  • Services link
  • Plans link
  • Call to action 'Start' button

Pricing page

  • Introduction

    • Description of plans
    • Contact us link
  • Plan types

    • Starter
    • Pro
    • Business
  • Each with

    • Icon and name of plan
    • Number of domains
    • Number of mailboxes
    • Space size
    • Up to how many multiplayers
    • Level of security
    • Type of support
    • Price
    • Purchase button

Style 🎨

(Also I've kind of combined the code section with the style section).

Layout

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.

Animations

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 @keyframes and opacity. At different percentages, or frames, each card had their opacity set from 0 to 1. 0 meant the card was like invisible, and 1 completely showed it. You can check out lines 145 to 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 transform: scale(1.05);).

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;).

Colors

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 (#545453).

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.

Fonts

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.

Icons

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.


Closing 🚪

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!!!

Bye! 👋

Voters
Alex731
maxina
CodeMaster007
maxor
SilvermoonCat
MarcusWeinberger
leafkn
RayhanADev
Whippingdot
STCollier
Comments
hotnewtop
PixiGem

I like how you always say LMAO.
LMFAoooo xdd

Bookie0
PixiGem

darkmode or I will go blind pls :(

Bookie0

Lmao @PixiGem

Whippingdot

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?

Bookie0

Idk, just post them when you want to lol. The most important thing is that you’re happy with that you’ve made lol. @Whippingdot
But thanks lol

Whippingdot

lots of lols in that message means you are probs uncomfortable lol sorry for asking a random question but thanks for the amazing reply! @Bookie0

Bookie0
leafkn

Nice responsiveness :)

Bookie0

Thank you! :D @leafkn

Yoplayer1py

Dark mode or I'll be blind Bookie0. Also nice page hope the next jam will be of making this working lol.

Bookie0

Lol thanks! Don’t know if next jam I’ll have much time to do stuff lol @Yoplayer1py

AmoghTheCool

noice.
me:
what's ace?
what does it offer?
oblivous to the fact that this is just CSS

Bookie0
IMayBeMe

Sometimes I forget that this is not an actual production page. That's how good these are!

Bookie0

@IMayBeMe Lmao, thanks! :D

RixTheTyrunt

Me too, after every opening such page

Bookie0
CodingElf66

I think you should change Mb to MB, that's real data. But nice job though!

Bookie0

Done, thanks lol! :D @CodingElf66

CodingElf66

@Bookie0 Np, the pricing plans for Replit are also MB, which made me thought of this! Btw, I think it should be 5000 or 5,000 instead of 5 000

Bookie0

@CodingElf66 Thanks lol, I was using 5 000 because of the french way of writing numbers xD

ruiwenge2

wow awesome!

Bookie0

Thanks! :) @ruiwenge2