├── style.css ├── public ├── banner.png └── vite.svg ├── postcss.config.cjs ├── tailwind.config.js ├── .gitignore ├── package.json ├── index.html ├── javascript.svg └── README.md /style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yazdun/mini-projects/HEAD/public/banner.png -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./**/*.{html,js}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "responsive-cards-1", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "autoprefixer": "^10.4.14", 13 | "postcss": "^8.4.25", 14 | "tailwindcss": "^3.3.2", 15 | "vite": "^4.4.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | Vanilla 16 | 17 | 18 |
19 |

hello world

20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 |
6 | 7 |

Mini Projects

8 | 9 |

10 | 🔥 Collection of COOL mini-projects for beginners 🔥 11 |
12 | Join Our Discord Server » 13 |
14 |
15 | Request Feature 16 | · 17 | Report Bug 18 |

19 | 20 | [![Discord](https://img.shields.io/badge/-Discord-7289DA?logo=Discord&logoColor=white&color=7289DA)](https://discord.gg/hBsnN9dQ) 21 | [![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?logo=Tailwind%20CSS&logoColor=white&color=38B2AC)](https://tailwindcss.com/) 22 | [![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?logo=JavaScript&logoColor=black&color=F7DF1E)](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 23 | [![HTML](https://img.shields.io/badge/-HTML-E34F26?logo=html5&logoColor=white&color=E34F26)](https://developer.mozilla.org/en-US/docs/Web/HTML) 24 | [![Vite](https://img.shields.io/badge/-Vite-646CFF?logo=Vite&logoColor=white&color=646CFF)](https://vitejs.dev/) 25 | 26 | 27 | divsplash 28 | 29 | 30 |
31 | 32 | ## About The Project 33 | 34 | This repository contains a collection of mini-projects for beginners. The main purpose of this repository is to help beginners to learn and practice their skills. All the projects are built using HTML, TailwindCSS and JavaScript. 35 | 36 | Created with ❤️ by [Yazdun](https://twitter.com/Yazdun) and [Velp](https://twitter.com/velpcode) 37 | 38 | ## Getting started 39 | 40 | To run the project locally, you need to have 41 | [Node.js](https://nodejs.org/en/download) installed on your machine. Then, you 42 | can follow the below steps: 43 | 44 | 1. Clone the project by running the following command on the terminal 🔽 45 | ```sh 46 | git clone git@github.com:Yazdun/mini-projects.git 47 | ``` 48 | 2. Go into the project directory 🔽 49 | 50 | ```sh 51 | cd mini-projects 52 | ``` 53 | 54 | 3. Install all the dependencies ✅ 55 | ```sh 56 | npm install 57 | ``` 58 | 4. Start the application development server 🚀 59 | 60 | ```sh 61 | npm run dev 62 | ``` 63 | 64 | ## How this repository works? 65 | 66 | This repository contains a collection of mini-projects. Each project is in a separate branch. You can view the list of projects below. To view a project, you need to checkout to the respective branch. For example, if you want to view the `Responsive Bioshock Card 1` project, you need to checkout to the `card-component_bioshock_1` branch. 67 | 68 | ```sh 69 | git checkout card-component_bioshock_1 70 | ``` 71 | 72 | ## List of Projects 73 | 74 | | Number | Title | Git branch | 75 | | ------ | -------------------------------------------- | ---------------------------------------------------------------------------------------- | 76 | | 1 | Responsive Bioshock Card 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_bioshock_1) | 77 | | 2 | Responsive Bloodborne Card 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_bloodborne_1) | 78 | | 3 | Responsive Bloodborne Card 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_bloodborne_2) | 79 | | 4 | Responsive Bloodborne Card 3 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_bloodborne_3) | 80 | | 5 | Responsive Bloodborne Card 4 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_bloodborne_4) | 81 | | 6 | Responsive Bloodborne Card 5 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_bloodborne_5) | 82 | | 7 | Responsive DarkSouls Card 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_1) | 83 | | 8 | Responsive DarkSouls Card 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_2) | 84 | | 9 | Responsive DarkSouls Card 3 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_3) | 85 | | 10 | Responsive DarkSouls Card 4 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_4) | 86 | | 11 | Responsive DarkSouls Card 5 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_5) | 87 | | 12 | Responsive DarkSouls Card 6 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_6) | 88 | | 13 | Responsive DarkSouls Card 7 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_7) | 89 | | 14 | Responsive DarkSouls Card 8 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_8) | 90 | | 15 | Responsive DarkSouls Card 9 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_darksouls_9) | 91 | | 16 | Responsive Elden Ring Card 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_eldenring_1) | 92 | | 17 | Responsive Mario Card 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_1) | 93 | | 18 | Responsive Mario Card 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_2) | 94 | | 19 | Responsive Mario Card 3 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_3) | 95 | | 20 | Responsive Mario Card 4 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_4) | 96 | | 21 | Responsive Mario Card 5 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_5) | 97 | | 22 | Responsive Mario Card 6 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_6) | 98 | | 23 | Responsive Mario Card 7 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_7) | 99 | | 24 | Responsive Mario Card 8 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_8) | 100 | | 25 | Responsive Mario Card 9 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_9) | 101 | | 26 | Responsive Mario Card 10 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_10) | 102 | | 27 | Responsive Mario Card 11 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_11) | 103 | | 28 | Responsive Mario Card 12 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_mario_12) | 104 | | 29 | Responsive SpongeBob Card 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_spongebob_1) | 105 | | 30 | Responsive SpongeBob Card 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_spongebob_2) | 106 | | 31 | Responsive SpongeBob Card 3 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_spongebob_3) | 107 | | 32 | Responsive SpongeBob Card 4 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_spongebob_4) | 108 | | 33 | Responsive SpongeBob Card 5 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_spongebob_5) | 109 | | 34 | Responsive Zelda Card 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/card-component_zelda_1) | 110 | | 35 | Responsive Shadow of Colossus Hero Section 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_colossus_1) | 111 | | 36 | Responsive John Wick Hero Section 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_johnwick_1) | 112 | | 37 | Responsive John Wick Hero Section 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_johnwick_2) | 113 | | 38 | Responsive John Wick Hero Section 3 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_johnwick_3) | 114 | | 39 | Responsive John Wick Hero Section 4 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_johnwick_4) | 115 | | 40 | Responsive John Wick Hero Section 5 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_johnwick_5) | 116 | | 41 | Responsive Kill Bill Hero Section 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_killbill_1) | 117 | | 42 | Responsive Kill Bill Hero Section 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_killbill_2) | 118 | | 43 | Responsive Mario Hero Section 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_mario_1) | 119 | | 44 | Responsive Mario Hero Section 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_mario_2) | 120 | | 45 | Responsive Openheimer Hero Section 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_oppenheimer_1) | 121 | | 46 | Responsive Spiderverse Hero Section 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_spider_1) | 122 | | 47 | Responsive Spiderverse Hero Section 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_spider_2) | 123 | | 48 | Responsive Spiderverse Hero Section 3 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_spider_3) | 124 | | 49 | Responsive Spiderverse Hero Section 4 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_spider_4) | 125 | | 50 | Responsive Spiderverse Hero Section 5 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_spider_5) | 126 | | 51 | Responsive Venom Hero Section 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_venom_1) | 127 | | 52 | Responsive Venom Hero Section 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_venom_2) | 128 | | 53 | Responsive Venom Hero Section 3 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_venom_3) | 129 | | 54 | Responsive Venom Hero Section 4 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_venom_4) | 130 | | 55 | Responsive Venom Hero Section 5 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_venom_5) | 131 | | 56 | Responsive Venom Hero Section 6 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_venom_6) | 132 | | 57 | Responsive Venom Hero Section 7 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_venom_7) | 133 | | 58 | Responsive Zelda Hero Section 1 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_zelda_2) | 134 | | 59 | Responsive Zelda Hero Section 2 | [View Branch](https://github.com/Yazdun/mini-projects/tree/hero-component_zelda_2) | 135 | 136 | ## Join Our Community On Discord 💥 137 | 138 | DivSplash is a community of developers, designers, creators and self improvers. We are a community of like-minded people who want to help each other and grow together. We have a dedicated tech channel where you can ask questions and get help. We also have channels for other topics like programming, design, self-improvement, etc. 139 | 140 | [Join DivSplash Discord Server 🚀](https://discord.gg/hBsnN9dQ) 141 | 142 | 143 | divsplash 144 | 145 | --------------------------------------------------------------------------------