Share your repls and programming experiences

← Back to all posts
App Product Page 🖥
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:

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

Links 🔗


Features ✨

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

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

Demo

  • Headline
  • Subtitle with short description
  • Computer image

About

  • Headline
  • Main text
  • Desktop computer image

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

  • 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

  • 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

  • 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:

Colors

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

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
SeaIT
tussiez
dudeactualdev
figglediggle
SudhanshuMishra
SilvermoonCat
AmoghTheCool
VihaanM1
Xshoury
CodingGoose
Comments
hotnewtop
tussiez

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

Bookie0

Lol thanks! @tussiez

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.

Bookie0

@KaiPereira2021 Thanks! :)

Oh no the galaxy fold..lol

replitpiero

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

ch1ck3n

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

Bookie0

@replitpiero ¯\_(ツ)_/¯

QuickV

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

Bookie0

@QuickV Thanks! :)

What areas?

AmoghTheCool

@Bookie0 on the signup buttons

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?

AmoghTheCool
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

Bookie0
QuickV

6902 .-.

cycles are getting closre to 6969

@Bookie0

Bookie0

lol @QuickV

QuickV

e

updoot+

@Bookie0

Bookie0

@QuickV lol thanks! :)

QuickV

reeeeeeeeeeeeeeeeee

@Bookie0

ANDREWVOSS

This pretty much professional quality, nice job.

Bookie0

Thank you! :D @ANDREWVOSS