Share your repls and programming experiences

← Back to all posts
Style Gallery 🎨 🖼
h
Bookie0

Style Gallery 🎨 🖼

Hello!

Welcome to a ✨ Style Gallery!

What is it?

Basically, it's a website with many different styles for different types of sections of a website, like about pages, product pages, and much more! Each section has several contrasting styles. You can use them for your own sites and products (though make sure to credit, please).

Also, any content you see on the site is not real; all the names, features, products are merely placeholders.


Links 🔗


Features ✨

Landing Pages

Landing pages are most of the time one of the first things a user will see when coming upon a webpage.

Here's one of the landing pages:

  • Landing page 1 – Urban
    • Blue, simple, modern
    • 2 buttons (including 1 CTA)
    • 1 image
    • Wavy transition SVG
  • Landing page 2 – Acme Solutions
    • Pink, black wavy, fluid
    • 1 button in thought bubble (that grows)
    • Layered wavy transition SVG
  • Landing page 3 – Advent Corporation
    • Light blue, bold, square-ish
      * 2 buttons
    • Layered wave background SVG
  • Landing page 4 – John Doe
    • Blue, purple, organic, round
    • Name, description, 3 buttons, contact link
  • Landing page 5 – Jane Doe
    • Red, white, yellow, modern, simple
    • Name, occupation, contact buttons, image
  • Landing page 6 – Style. Is. In.
    • Blue, red, tilted, round
    • 2 buttons, 2 images

Feature Pages

A features page shows your most important features and the things your product can do. They show the key points and help make the user understand what you offer exactly.

Here's one of the feature pages:

  • Feature page 1 – Simple Light
    • Black on white, simple, modern
    • 3 feature cards with title and description
  • Feature page 2 – Simple Dark
    • White on black, simple, modern
    • 3 feature cards with title and description
  • Feature page 3 – Tech Features
    • Purple, light gray, clean, diagonal, tilted
    • Image with description
    • 4 features
  • Feature page 4 - Banking Assets

    • Black, red, white, bold, informative
    • Circles as background SVG
    • 3 points as features
    • CTA button
  • Feature page 5 – Replit

    • Blue, gray, shadowy, gradient, futuristic
    • 8 feature cards

Pricing Pages

Pricing pages are used to display the different kinds of plans for a service. Kind of like feature pages, they list the features and benefits for each set as well as the pricing options.

Here's one of the pricing pages:

  • Pricing page 1 – Honey
    • Orange, pink, white, inviting, warm, gradient
    • 3 pricing cards, each with name of plan, features, price, and 'Get Started' button
    • Middle one as the CTA (bigger, orange/pink gradient as background, white button)
  • Pricing page 2 – Atlantic
    • Blue, dark blue, cyan, modern, shadows
    • 3 pricing cards, each with name of plan, price, features, and 'Get Started Now' button
    • Right one as CTA (darker card background, cyan button)
  • Pricing page 3 – Cloud
    • Light purple, purple, green, fluid, gradient, round diagonal corner rectangle
    • 4 pricing cards, each with price, name of plan, features, and 'Free Trial' button
    • 2nd one as CTA (banner on top, green button)
  • Pricing page 4 – Sky
    • Green, blue, white, gradient, round, growing
    • 3 pricing cards, each with name of plan, price (or original price), when to pay, features, and 'Get...' button
    • Middle one as CTA (card grows bigger and smaller, blue button)

About Pages

About pages are a section on a website where a user can learn more about you and/or the team who works there. They can see what is your kind of personality, what you work as, and how to contact or hire you.

Here's one of the about pages:

  • About page 1 – Paper
    • White, black, dark gray, paper, square-ish, stacks
    • 3 about cards, each with name, picture, position, contact icons, and 'Hire me' button
  • About page 2 – Sea
    • Dark blue, light blue, white, free, fluid, round
    • 3 about cards, each with name, picture, position, and 'Hire me' button
  • About page 3 – Single Gray
    • Light gray, white, black, single, simple, modern
    • 1 about card, with picture, name, position, contact icons, and 'Get in touch' button
  • About page 4 – Beige Strips
    • Light beige, white, black, strips of paper, several
    • 4 about cards, with picture, name, position, and about me

Product Pages

Finally, product pages show, well, the product! They usually are in wireframes so the user can know more exactly how they look like in real life. There's also sometimes a description to help the user understand what you're offering.

Here's one of the product pages:

  • Product page 1 – Montaga Studios App
    • Pink, purple, rose, calming, waves
    • Title, description
    • 2 buttons (including 1 CTA)
    • Product (with iPhone wireframe)
  • Product page 2 – Umbrella & Co.
    • Orange, yellow, red, brown, warm, fire, geometry
    • Logo and title
    • 3 buttons (including 1 CTA)
    • Background geometrical shapes SVG
  • Product page 3 – Inter
    • Black, light blue, gray, shadow, modern, tech, futuristic
    • Title, description
    • 1 CTA button
    • Product (with Chrome, Mac wireframe)
  • Product page 4 – PlayIt
    • Pink, red, dark red, warm, cozy
    • Title, logo that rotates (acting as button)
    • Sign up CTA button
    • Prodyct (with Chrome, Mac wireframe)

Styles 🎨

All these different sections have completely different styles; from colors, fonts, layout, etc.

To make them, here are the different tools that I've used:

Backgrounds

For the backgrounds like the organic shapes, or the smooth waves, I used this site called haikei.app. It's a wonderful tool where you can generate plenty of SVGs and tweak them to your preference.

Font families

All the fonts come from Google Fonts, which has an impressive collection of font families for every kind of use.

Illustrations

The illustrations that you can see (umbrella, cartoon-ish figures) come from Icons8. It has a lot of media and content you can use for your own sites.

Icons

The icons come from Font Awesome, a whole gallery of icons and symbols.

Wireframes

In the product pages, you can see examples of the (fake) product with a wireframe. This makes it look more like reality. I used Browser Wireframes, which has many different browsers (Chrome, Safari, Edge, etc.) as well as OS' which you can also edit to make your products even better.


Re-creations and inspiration 🖌

Some of the sections my site are recreations of things already out there. For example, feature page 5's styles come from Replit's features sections. Others, like landing page 5, feature page 3, or pricing page 1 come from a simple Google search ("pricing page ideas", "landing page css design", etc.)

However, I always wrote the code myself.


Code 💻

The design of these sections may look pretty cool, but the code is actually quite simple. I usually start with the HTML <section> tag with the id attribute as the type of section I'm defining (landing page, feature page, etc.) and the number. Then, I have a <div>; the container. Next, if it's a section that holds several cards (like feature pages 1 and 2, or the pricing pages and about pages), there'll be another <div> with id cardContainer. This will hold several .cards, each with their own content.

This is how it could look like:

Then for the CSS, I make #featurePageX (or whatever it's called) have display: flex; and justify-content: center;, which centers the content horizontally. There's also height: 100%; to make it have the full screen height. Then, in #container, I use margin-top: auto; and margin-bottom: auto; to center the content inside vertically. Next, #cardContainer also has display: flex; to align the items (the feature cards), and usually a gap of 30px. Each .card also has a width and height, as well as some padding to space out the items from the border. Finally, there's some shadow to make the card look like it's floating.

Here's how it could be, with a few added pieces of code (the Xs you can see are just placeholdes; they change accordingly to the section):

Feel free to check out the rest of the code to know exactly how each section is built, and of course let me know if you have any questions :).


Closing 🚪

Well, that's about all! Please let me know any feedback/suggestions/comments!

Disclaimer: the site is not responsive, as it's a lot of stuff and I prefer to start working on some newer projects. It looks best viewed on at least 1300 x 800.
Voters
ruiwenge2
isaiah08
FloCal35
a-repl-user
didasat
SilvermoonCat
maxina
sojs
sn236
Dunce
Comments
hotnewtop
PixiGem

OMG KEWL. and guess what? today is my BDAY!!

Bookie0

@PixiGem Thanks! And happy birthday! :)

Cooli

@PixiGem Happy late birthday!

firefish

i see what you did there...

Bookie0

? Just random names like
John doe lol @firefish

firefish

@Bookie0 swap the first names of both

Bookie0

..? I don’t understand lol @firefish

firefish

@Bookie0 nvm forget it
bob ross will smith

Aivoybia

@firefish bro i just noticed that

firefish
goalkenhighligh

I really enjoyed this site. This is such a Great resource that you are providing and you give it away for free. [ link redacted by moderators for advertising ]

Bookie0

@goalkenhighligh Lol thanks! :)

JBloves27

Eyyy, ur becoming a css god xd

Bookie0

@JBloves27 lol thanks! :)

JBloves27

np :> @Bookie0

GhostKing007

Looks like you got over your obsession for saying 'Upvoting is caring', haven't seen the iconic bookie line in the quite a few posts now lol. This is pretty kewl though. I'm not gonna participate in this month's weeklies just knowing you're participating lmao

Bookie0

@GhostKing007 lmfao yeah I stopped quite a while ago lol

Thanks tho! :)

FlaminHotValdez

@GhostKing007 bookie too gud at frontend

Bookie0
JWZ6

@Bookie0 how do u get the fullscreen effect?

Bookie0

@JWZ6 Which fullscreen effect?

JWZ6

@Bookie0 full width in divs

Bookie0

@JWZ6 width: 100%;?

JWZ6
Bookie0

yep @JWZ6

JWZ6

@Bookie0 btw nice weekly 5 imac thingy

Bookie0

@JWZ6 haha thanks! :)

FlaminHotValdez

kewl

Bookie0

Thanks!! :) @FlaminHotValdez

sojs

this is really great

Bookie0

@sojs :D

sojs

wow this is good

Bookie0

Thanks! :) @sojs

Jessica0519

Hey! I can not click!

Bookie0

@Jessica0519 What do you mean you can't click?

Jessica0519

@Bookie0 I mean can't click the button in the program!

Bookie0

@Jessica0519 Well you can click the buttons, but nothing shall happen lol

Jessica0519

@Bookie0 I know...

Jessica0519

@Bookie0 Hey, but how can you get a hacker?

Bookie0

@Jessica0519 Hacker is a paid plan. See https://replit.com/site/pricing for more.

Bookie0

@Jessica0519 so what’s your question exactly?

Whippingdot

These look awesome!

Bookie0

Thank you! :D @Whippingdot

OldWizard209

Hey @Bookie0 I was wondering from where you got the svg bg images? I need to use them for ma projects. Thanks in advance.

Bookie0

@OldWizard209 On the README.md file, I detailed where they come from:

Backgrounds

For the backgrounds like the organic shapes, or the smooth waves, I used this site called haikei.app. It's a wonderful tool where you can generate plenty of SVGs and tweak them to your preference.

Have fun! :)

OldWizard209

THANKS a lot @Bookie0

OldWizard209

Hey. I have a few questions about CSS which are almost related to your project. Would you mind helping a little if I could invite you on multiplayer. I suck in CSS @Bookie0

Bookie0
Bookie0

sure, DM me the invite code @ Bookie#7538 (invites don't really work well) @OldWizard209

OldWizard209

ok imma do that @Bookie0

OldWizard209

It was actually Bookie0#7538 hehe @Bookie0

OldWizard209

i invited you on discord @Bookie0

Bookie0
XCode101

noice!

Bookie0

thanks! :) @XCode101

VulcanWM

Nice!

Bookie0

Thanks! :) @VulcanWM

VulcanWM

np! :D @Bookie0

RayhanADev

Bookie dude you keep getting better with each project! Awesome work :D. (Lily going to have competition next weekly lol).

ch1ck3n

@RayhanADev ok so next weekly is frontend

got it

RayhanADev

@ch1ck3n not necessarily next weekly just based on last year there will be one month of frontend (last month was general, there will also be one month of math/algos)

ch1ck3n
Bookie0

@RayhanADev yeeee thanks lol! Lmao if soon there'll be a month of frontend that'll be funner! :)

IMayBeMe

@RayhanADev meanwhile I’m here trying to center some text :(

Bookie0

@IMayBeMe text-align: center; :)

ch1ck3n

@Bookie0 ew text-align baf

IMayBeMe
Bookie0

@ch1ck3n sure you can also do that, and to center it vertically you could add another div inside and have margin-top and margin-bottom to auto.

ch1ck3n

@Bookie0
ew that baf too

Bookie0

@ch1ck3n that as well

GhostKing007

@RayhanADev Nayoar mentioned the math one, he said it'd probably be in September. I've challenged him saying that I'll win, but now I'm regretting that decision seeing how good he is at math lmao

RayhanADev

@GhostKing007 i'm placing my money on either flaminghotvaldez, dynamicsquid, or nayoar they're reallly good at math stuff.

FlaminHotValdez

@RayhanADev yeee math/algos i have to win lol

FlaminHotValdez

@RayhanADev Why thank you for severely overestimating me 😂

RayhanADev

@FlaminHotValdez

Why thank you for severely overestimating me 😂

xD no way you're awesome at math!

FlaminHotValdez

@RayhanADev Watch me flunk. (FYI I'm averaging a 75% in my calc tests rn) And who told you that I'm good at math?

JWZ6

amazing

Bookie0

@JWZ6 Thanks! :)

JWZ6
InvisibleOne

NIce, I like the styling

Bookie0

Thank you! :D @InvisibleOne

mollthecoder

Post ==> replit.com/talk/share/Style-Gallery/143466
Why would you post the post on the post?

Bookie0

@mollthecoder It's because I usually write the README file before posting. Then when I post, I just copy everything and paste it in the post description lol.

ruiwenge2

wow this is so cool!

Bookie0

Thank you! :D @ruiwenge2

RJohnson2

pretty i loved the black history month and the mothers day its amazing love t you could be an hit.

Bookie0

@RJohnson2 Lol thanks! :)

RJohnson2

@Bookie0 your welcome