HTML, CSS, JS templates of profile cards, review cards, testimonials, theme toggler, contact form and many more

  • By Mudit Mishra
  • Last update: Dec 10, 2022
  • Comments: 13

Templates

Collection of variety of reusable components of HTML, CSS and JavaScript.

What you can make:

  • Profile card template
  • Reviews card template
  • Contact section template
  • Theme toggle
  • Skills section template
  • Hero section template
  • Navigation Bar
  • Projects Section

... and many more

This project is perfect for people starting out with opensource and knows basics of frontend development. This doesn't mean this project is just for beginners, even if you are someone who is into development for a while and have done opensource before you can still make this project better.

For more experienced developers:

  • Animations with JavaScript
  • Page Loaders
  • Interactive Portfolio Templates
  • And other things that are complex for a beginner developers.

Here are few templates contributed by you folks

Want to contribute to the project? Read the Contribution Guidelines, Template Guidelines, and adhere to our Code of Conduct.

Github

https://github.com/mudit023/templates

Comments(13)

  • 1

    Website Build

    Hi,

    Have u any plan to create a static website? This website will preview all the templates.

    Also, can you checkout this repo, Because, there is a possibility to copy the templates. Make sure that there is no copy from open source template.

    https://github.com/learning-zone/website-templates

  • 2

    Addding Glassmorphism Loader

    Have an idea for a new HTML, CSS, or JS template? Describe it here.

    I made an animated Glassmorphism loader.

    Add a design file/ Screenshot of the template you want

    https://user-images.githubusercontent.com/98695632/195987229-a856e5e1-ddcb-4d9d-9ea5-2a0773548a37.mp4

  • 3

    Template not described well

    This template is not described well in its Readme file.

    What you have to do:

    • [ ] Use the template on your local machine.
    • [ ] Check what it does
    • [ ] And then improve the Readme file accordingly.
    • [ ] Make use of gifs in the readme file for better clarity.
  • 4

    Payment Gateway template

    Have an idea for a new HTML, CSS, or JS template? Describe it here.

    Payment gateway template

    Add a design file/ Screenshot of the template you want

    List all the functionalities/ animations it should have(if any)

  • 5

    Updated PR template

    What type of PR is this? (check all applicable)

    • [X] ♻️ Refactor
    • [ ] ✨ Feature
    • [ ] 🐛 Bug Fix
    • [X] 👷 Optimization
    • [X] 📝 Documentation Update
    • [ ] 🔖 Release
    • [X] 🚩 Other

    Description

    Updated the PR template.

    Related Tickets & Documents

    Mobile & Desktop Screenshots/Recordings (if there are UI changes)

    image

    Added to documentation?

    • [ ] 📜 readme
    • [X] 🙅 no documentation needed

    [optional] Are there any post-deployment tasks we need to perform?

    [optional] What gif best describes this PR or how it makes you feel?

  • 6

    Create a Template Guideline READE.md

    The README is for folks who want to contribute a new template to this project.

    README should have the following things in it:

    • [ ] Use of CSS variables
    • [ ] Use comments in your code to make it easier for people who want to use the templates.
    • [ ] Your template code should not affect any other element other than your components
    • [ ] Every template needs to have a README.md file.
    • [ ] Add this Template guideline README.md link in the project README.md.

    Template README should have the following things in it:

    • Screenshots of the component contributed.
    • Proper instructions to use the template.
    • Anything a user needs to know about the template that might affect the user's project.
    • Contributor's name and social media link.

    Note: Every contributor have to follow these guidelines and then only the PR will get merged.

  • 7

    Adding Profile Card

    Have an idea for a new HTML, CSS, or JS template? Describe it here.

    I have made a profile card.

    Add a design file/ Screenshot of the template you want

    https://user-images.githubusercontent.com/98695632/193603384-c143df99-1942-42c2-9648-91511d0b9c99.mp4

  • 8

    Portfolio Templates

    What type of PR is this? (check all applicable)

    • [ ] ♻️ Refactor
    • [ ] ✨ New Template
    • [ ] 🐛 Bug Fix
    • [ ] 👷 Optimization
    • [ ] 📝 Documentation Update
    • [ ] 🚩 Other

    Description

    Related Tickets & Documents

    Mobile & Desktop Screenshots or GIFs(If Template have animations)

    Added to documentation?

    • [ ] 📜 readme
    • [ ] 🙅 no documentation needed

    [optional] Are there any post-deployment tasks we need to perform?

    [optional] What gif best describes this PR or how it makes you feel?

  • 9

    New Project Structure

    What type of PR is this? (check all applicable)

    • [ ] ♻️ Refactor
    • [x] ✨ New Template
    • [ ] 🐛 Bug Fix
    • [ ] 👷 Optimization
    • [ ] 📝 Documentation Update
    • [x] 🚩 Other

    Description

    Related Tickets & Documents

    Mobile & Desktop Screenshots or GIFs(If Template have animations)

    Added to documentation?

    • [ ] 📜 readme
    • [ ] 🙅 no documentation needed

    [optional] Are there any post-deployment tasks we need to perform?

    [optional] What gif best describes this PR or how it makes you feel?

  • 10

    Improve the project readme

    As many new components templates are added, edit the project readme to add screenshots and gifs of other templates contributed.

    Note: No need to change other things.

    What you can do:

    • [ ] Add screenshots and gifs of the newly contributed tempates.
    • [ ] Add screenshots in proper categories like profile cards, login forms, timeline, navbar, etc.
  • 11

    Create a website

    Create a dynamic website where the visitor can see all the available templates in the repo.

    • [ ] Design UI
    • [ ] Website should be dynamic(i.e. it should automatically add new templates added in the repo)
    • [ ] Add search feature
    • [ ] Add feature to copy the code from website itself
  • 12

    Create New Templates

    You can contribute HTML, CSS, and JavaScript components which are often used in many websites like:

    There are many more such templates that you folks can contribute and enrich this repository. Note: Follow our Template Guidelines and Contribution Guidelines and we will merge your PR.

    How to start:

    • Create a new issue and use the new template format in the issues.
    • Describe your template in the issue.
    • Add screenshots/gifs of your new template.
    • You can start working on it after it gets assigned to you by one of the maintainers.
    • Follow our Template Guidelines and Contribution Guidelines while working on the template.
  • 13

    Add readme files and comments in existing templates

    • [ ] Add a proper readme file like this in all the template.
    • [ ] Add comments in the code example
    • [ ] Use CSS variables example
    • [ ] Make the templates compatible with our Template Guidelines

    Note: If you want to fix(add comments, readme file, or CSS variables) a component template or multiple components then first create an issue for it(if it's not already created). Or if you can just comment here with the link of the template you want to fix.