Skip to content
ā† Back to Community
App Product Page šŸ–„
Profile icon
Bookie0

App Product Page šŸ–„

Hiii! šŸ‘‹

Hope you you're doing well!

I made the product page of an app, in HTML, CSS, and a bit of JS. It's sort of a template; most of the content (name, media, text, etc.) is just fake placeholder stuff. You can of course use it for your own apps/software, but just be sure to credit me! :)

It has landing pages, feature pages, about pages, sign up/sign in pages, and much much more! It

Here's how a snippet of how it looks like:

howItLooksLike

It's also completely responsive, meaning that you can view it on any device; computer, tablet or phone!

responsive


Features āœØ

Navbar

navbar

  • Name of app on left
  • Links in middle
  • 2 buttons on right; 'Learn more' secondary button and 'Demo' call to action (CTA) button
  • Navbar 'hides' itself when you scroll, and 'shows' itself when you hover
  • On mobile, navbar has cool open/close animation and is fullscreen

Landing page

(View image at top of post)

  • Headline with name of app
  • Subtitle with slogan
  • 2 buttons; 'Learn more' secondary button and 'Demo' CTA button
  • Phone image

Features

features

  • Headline
  • 3 features; each with icon, title, and description
  • 'Learn more' CTA button

Demo

demo

  • Headline
  • Subtitle with short description
  • Computer image

About

about

  • Headline
  • Main text
  • Desktop computer image

Plans

plans

  • Headline
  • Subtitle with short description
  • 2 plans; starter and pro, each with:
    • Name of plan
    • Icon
    • Price
    • 1 or 2 word description
    • 'Select plan' CTA button
      • Features of plans, with check or cross icon depending on wether it includes it or not

Contact

contact

  • Headline
  • Subtitle with short description
  • Address with icon
  • Telephone number with icon
  • Form with:
    • First and last name
    • Email
    • Message
      • 'Submit' CTA button

Sign up/sign in

sign

  • Headline
  • Subtitle with short description
  • Form with:
    • First and last name
    • Email
    • 'Start demo'/'Sign in' CTA button
  • Link to sign up/sign in accordingly
  • Sign up/sign in options (Twitter, Facebook, Google)

Footer

footer

  • Headline with name of app
  • Subtitle with slogan
  • Social media icons
  • Useful links
  • Other links
  • Form to sign up for newsletter with:
    • Header of newsletter
    • Subtitle explaining what it's for
    • Email
    • 'I'm in!' CTA button

Style

General layout

The general layout of the site is simple, with the most important information (headers, buttons) standing out. Most of the sections start with a header in a big font so you know exactly what the section or page is for. Then, there's a subtitle that is smaller and lighter, and usually a CTA button. There's also some sort of media; either an image of a device (where pictures of the app could be placed, for example), or icons.

Font family

There are 3 font families that I've used in this website. The serif font family, used for headers and titles is 'Slabo 27px', serif. The sans serif font family is 'Nunito', sans-serif, used for most of the text. Finally, I use 'Oswald', sans-serif for the small caps font family, used for links and buttons, and titles.

Nunito is a round, modern font, which goes well with the themes of this site (app, technology, devices, etc.). I find that it contrasts very well with the serif font, Slabo. When they are combined, mostly with Slabo as a title, and Nunito as the main body text, it looks great. Oswald stands out, especially because it's a narrow and small caps font.

Here's an example where they're all together, with Slabo for the header, Oswald for the title of the feature and the button, and Nunito for the main text of the feature:

font

Colors

The main accent is a sort of pink/red/crimson accent color: #fa1d44. It looks like this:

crimson

You can check out the rest of the colors in the :root pseudoclass in style.css. All the colors and font families are kept in CSS variables.

Icons

The icons, as usual, come from Ionicons, a great library filled with beautiful icons that you can customize easily.

I used those icons to illustrate the features, plans, and contact information. They're also used for the social media links at bottom in the footer, and also in the sign up/sign in pages for the different options to sign up/sign in.

Backgrounds

Most of the site has a plain white (#fdfdfd) background, but some sections have an SVG as a background image. Those background images are 3 very light gray 'blobs' (sort of circles that aren't very perfect), and they're light enough to not grab the attention of the user, but can still be distinguished.

These background images are used in the landing page, demo page, plans page, and contact section, as well as in the sign up/sign in pages.

Device images

The device images on the landing, demo, and about us section come from Device Shots. It's a really great site where you can upload images inside a bunch of device frames (phones, computers, watches, TVs, etc.) to make them look cool and realistic.


Closing šŸšŖ

Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D

If there are any issues/bugs/things breaking, please comment them or DM me on Discord @ Bookie0#7538.

If you use this site, please keep in mind that I'd love if you gave credit, as I did put some effort into this! :)

Have an awesome day!!!

Bye! šŸ‘‹

Voters
Profile icon
19wintersp
Profile icon
SeaIT
Profile icon
tussiez
Profile icon
dudeactualdev
Profile icon
figglediggle
Profile icon
SleepySid
Profile icon
SilvermoonCat
Profile icon
AmoghTheCool
Profile icon
VihaanM1
Profile icon
Xshoury
Comments
hotnewtop
Profile icon
tussiez

These websites are so well-done, you could sell them!

Profile icon
Bookie0

Lol thanks! @tussiez

Profile icon
KaiPereira2021

So cool like incredible, I was looking at it responsively and at the footer the instagram icon is overflowing out the side of the website on the galaxy fold or 280px width and I just wanted to let you know.

Profile icon
Bookie0

@KaiPereira2021 Thanks! :)

Oh no the galaxy fold..lol

Profile icon
replitpiero

Bookie why are some of the images in the megabytes...how did you even get them that large???

Profile icon
ch1ck3n

@replitpiero pictures of your mom hidden in there, that's how

Profile icon
Bookie0

@replitpiero ĀÆ\_(惄)_/ĀÆ

Profile icon
QuickV

nice! It's pretty glitchy tho on some areas...

Profile icon
Bookie0

@QuickV Thanks! :)

What areas?

Profile icon
AmoghTheCool

@Bookie0 on the signup buttons

Profile icon
Bookie0

@AmoghTheCool Hm I think I see what you mean. Iā€™d it when you hover at a certain area of the button it kind of flickers?

Profile icon
AmoghTheCool
Profile icon
QuickV

it's kinda hard to explain. but it doesn't work properly on my chromebook. It is a school laptop tho so that might be the problem. School laptops break websites sometimes.

@Bookie0

Profile icon
Bookie0
Profile icon
QuickV

6902 .-.

cycles are getting closre to 6969

@Bookie0

Profile icon
Bookie0
Profile icon
QuickV

e

updoot+

@Bookie0

Profile icon
Bookie0

@QuickV lol thanks! :)

Profile icon
QuickV

reeeeeeeeeeeeeeeeee

@Bookie0

Profile icon
ANDREWVOSS

This pretty much professional quality, nice job.

Profile icon
Bookie0

Thank you! :D @ANDREWVOSS