├── .github └── ISSUE_TEMPLATE │ └── bug-feature-docs.md ├── .gitignore ├── Flipkart ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── assets │ │ └── style.css │ ├── cart.html │ ├── index.html │ ├── login.html │ ├── orders.html │ ├── product.html │ ├── profile.html │ ├── script.js │ ├── signup.html │ └── wishlist.html ├── src │ └── style.css └── tailwind.config.js ├── Instagram ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── assets │ │ ├── images │ │ │ ├── favicon.ico │ │ │ ├── hero.png │ │ │ ├── logo.png │ │ │ └── posts │ │ │ │ ├── 1.jpg │ │ │ │ ├── 10.jpg │ │ │ │ ├── 11.jpg │ │ │ │ ├── 12.jpg │ │ │ │ ├── 13.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.jpg │ │ │ │ ├── 8.jpg │ │ │ │ └── 9.jpg │ │ ├── posts.json │ │ ├── script.js │ │ └── style.css │ └── index.html ├── src │ └── style.css └── tailwind.config.js ├── README.md ├── Sololearn ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── assets │ │ ├── courses.json │ │ ├── images │ │ │ ├── courses │ │ │ │ ├── 1.png │ │ │ │ ├── 10.png │ │ │ │ ├── 11.png │ │ │ │ ├── 12.png │ │ │ │ ├── 13.png │ │ │ │ ├── 14.png │ │ │ │ ├── 15.png │ │ │ │ ├── 16.png │ │ │ │ ├── 17.png │ │ │ │ ├── 18.png │ │ │ │ ├── 19.png │ │ │ │ ├── 2.png │ │ │ │ ├── 20.png │ │ │ │ ├── 21.png │ │ │ │ ├── 22.png │ │ │ │ ├── 23.png │ │ │ │ ├── 24.png │ │ │ │ ├── 25.png │ │ │ │ ├── 3.png │ │ │ │ ├── 4.png │ │ │ │ ├── 5.png │ │ │ │ ├── 6.png │ │ │ │ ├── 7.png │ │ │ │ ├── 8.png │ │ │ │ └── 9.png │ │ │ ├── favicon.svg │ │ │ └── hero.png │ │ ├── script.js │ │ └── style.css │ └── index.html ├── src │ └── style.css └── tailwind.config.js ├── WhatsApp ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── assets │ │ ├── images │ │ │ ├── favicon.ico │ │ │ └── profile.jpg │ │ ├── script.js │ │ └── style.css │ └── index.html ├── src │ └── style.css └── tailwind.config.js └── YouTube ├── README.md ├── package-lock.json ├── package.json ├── public ├── assets │ ├── images │ │ ├── favicon1.ico │ │ ├── ganesh.jpg │ │ ├── hero.png │ │ └── profile.jpg │ ├── script.js │ ├── style.css │ └── videos.json └── index.html ├── src └── style.css └── tailwind.config.js /.github/ISSUE_TEMPLATE/bug-feature-docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug-Feature-Docs 3 | about: Suggest new project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Issue Type: 11 | 12 | - [ ] Bug Report 13 | - [ ] Feature Request 14 | - [ ] Documentation 15 | 16 | ## **Describe the bug or feature** 17 | 18 | - A clear and concise description of what the bug or feature is. 19 | 20 | ## **Possible solution** 21 | 22 | - Describe the solution you thought of. 23 | 24 | ## **Screenshots** 25 | 26 | - If applicable, add screenshots to help explain your problem. 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /Flipkart/README.md: -------------------------------------------------------------------------------- 1 | ## Flipkart UI Clone 2 | Flipkart All Pages UI Clones using TailwindCSS ⚡ 3 | 4 | ### **Visit Now 🚀** 5 | 6 | ## Tech Stack : 7 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/jigar-sable/Web-UI-Clones/search?l=html) 8 | ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 9 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/jigar-sable/Web-UI-Clones/search?l=javascript) 10 | ![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white) 11 | ![jquery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) 12 | [![web](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://instagramwebui.netlify.app) 13 | 14 | ## Sneak Peek of Site 🙈 : 15 | ![home](https://user-images.githubusercontent.com/64949957/136542646-b883165d-fed0-4f4f-b031-ceba3db4e8ae.PNG) 16 | 17 | 18 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) 19 | -------------------------------------------------------------------------------- /Flipkart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flipkart", 3 | "version": "1.0.0", 4 | "description": "Flipkart Web UI Clone", 5 | "main": "index.js", 6 | "dependencies": { 7 | "tailwindcss": "^2.2.15", 8 | "win-node-env": "^0.4.0" 9 | }, 10 | "devDependencies": {}, 11 | "scripts": { 12 | "build:css": "tailwind build -i src/style.css -o public/assets/style.css", 13 | "prod": "NODE_ENV=production tailwind build -i src/style.css -o public/assets/style.css" 14 | }, 15 | "author": "Jigar Sable", 16 | "license": "ISC" 17 | } 18 | -------------------------------------------------------------------------------- /Flipkart/public/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flipkart 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 43 | 44 |
45 | 46 | 47 | 48 |
49 | 52 | 53 | Login 54 | 55 | 56 | 101 | 102 | 103 | 106 | 107 | 108 | 133 | 134 | 135 | 136 | shopping_cart 137 | 138 |
139 | 1 140 |
141 | 142 | Cart 143 | 144 |
145 | 146 | 147 |
148 | 149 |
150 | 151 | 152 | 153 | 173 | 174 | 175 | 176 |
177 | 178 | 179 |
180 | 181 | 185 | 186 | 187 | 188 |
189 | 190 | 191 |
192 | 193 | 194 |
195 |
196 | 197 | 198 |
199 |

Enter Email/Mobile Number

200 | 201 | 202 |
203 | 204 | 205 | 206 |
207 |

Enter Password

208 | 209 | 210 |
211 | 212 | 213 | 214 |
215 |

By continuing, you agree to Flipkart's Terms of Use and Privacy Policy.

216 | 217 |
218 | 219 | 220 |
221 |
222 | 223 | 224 | New to Flipkart? Create an account 225 |
226 | 227 | 228 |
229 | 230 |
231 | 232 | 233 |
234 | 235 | 236 | 237 | 322 | 323 | 324 | 325 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | -------------------------------------------------------------------------------- /Flipkart/public/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | $('#banner.owl-carousel').owlCarousel({ 4 | loop: true, 5 | nav: true, 6 | navText: ["", ""], 7 | dots: false, 8 | items: 1, 9 | autoplay:true, 10 | autoplayTimeout:2000, 11 | autoplayHoverPause:false 12 | }); 13 | 14 | $('#topSelection .owl-carousel').owlCarousel({ 15 | loop: false, 16 | nav: true, 17 | navText: ["", ""], 18 | dots: false, 19 | mouseDrag: false, 20 | touchDrag: false, 21 | responsiveClass:true, 22 | responsive:{ 23 | 0:{ 24 | items:2, 25 | }, 26 | 600:{ 27 | items:3, 28 | }, 29 | 768:{ 30 | items:4, 31 | }, 32 | 1000:{ 33 | items:7, 34 | } 35 | } 36 | }); 37 | 38 | $('#recommended .owl-carousel').owlCarousel({ 39 | loop: false, 40 | nav: true, 41 | navText: ["", ""], 42 | dots: false, 43 | mouseDrag: false, 44 | touchDrag: false, 45 | responsiveClass:true, 46 | responsive:{ 47 | 0:{ 48 | items:2, 49 | }, 50 | 600:{ 51 | items:3, 52 | }, 53 | 768:{ 54 | items:4, 55 | }, 56 | 1000:{ 57 | items:6, 58 | } 59 | } 60 | }); 61 | 62 | $(window).scroll(function(){ 63 | if(scrollY > 150) { 64 | $('header').addClass('shadow-lg'); 65 | } else { 66 | $('header').removeClass('shadow-lg'); 67 | } 68 | }); 69 | 70 | // arrow dropdown rotate on hover 71 | $('.userDropDown').hover(function() { 72 | $('.userDropDown span').toggleClass('rotateDropDown'); 73 | }, function() { 74 | $('.userDropDown span').toggleClass('rotateDropDown'); 75 | }); 76 | 77 | $('.moreDropDown').hover(function() { 78 | $('.moreDropDown span').toggleClass('rotateDropDown'); 79 | }, function() { 80 | $('.moreDropDown span').toggleClass('rotateDropDown'); 81 | }); 82 | 83 | // dropdown hovers 84 | $('.userDropDown').hover(function(){ 85 | $('.userDropDownMenu').toggleClass('active'); 86 | }, function() { 87 | $('.userDropDownMenu').toggleClass('active'); 88 | }); 89 | 90 | $('.moreDropDown').hover(function(){ 91 | $('.moreDropDownMenu').toggleClass('active'); 92 | }, function() { 93 | $('.moreDropDownMenu').toggleClass('active'); 94 | }); 95 | 96 | $('.userDropDownMenu').hover(function(){ 97 | $(this).addClass('active'); 98 | }, function() { 99 | $(this).toggleClass('active'); 100 | }); 101 | 102 | $('.moreDropDownMenu').hover(function(){ 103 | $(this).addClass('active'); 104 | }, function() { 105 | $(this).toggleClass('active'); 106 | }); 107 | // dropdown hovers 108 | 109 | // js-image-zoom effect 110 | // var zoom_img = document.querySelector('.zoomimg'); 111 | // var options = { 112 | // width: 300, 113 | // zoomWidth: 600, 114 | // // scale: 0.5, 115 | // // zoomStyle: 'height:500px;width:12000px;border-radius:2px;', 116 | // // zoomLensStyle: 'opacity: 0.3;height: 10px;width: 20px;background-color: black;', 117 | // offset: {vertical: 20, horizontal: 30} 118 | // // zoomPosition: 'right', 119 | // // zoomContainer: document.querySelector('.zoomimg') 120 | // }; 121 | // new ImageZoom(document.querySelector('.image-box'), options); 122 | 123 | $('#qtyUp').on('click',function(e){ 124 | if($('#qtyInput').val()>=1 && $('#qtyInput').val()<=10){ 125 | $('#qtyInput').val(function(i, oldval){ 126 | return ++oldval; 127 | }); 128 | } 129 | }); 130 | 131 | $('#qtyDown').on('click',function(){ 132 | if($('#qtyInput').val()>=2 && $('#qtyInput').val()<=11){ 133 | $('#qtyInput').val(function(i, qtynos){ 134 | return --qtynos; 135 | }) 136 | } 137 | }); 138 | 139 | 140 | // personal info edit buttons 141 | $('#editPersonalBtn').click(function() { 142 | // change button text 143 | $(this).text() == 'Edit' ? $(this).text('Cancel') : $(this).text('Edit') 144 | 145 | $('#personalSaveBtn').toggleClass('hidden'); 146 | $('#personalInputs .inputs').toggleClass('bg-gray-100').toggleClass('cursor-not-allowed'); 147 | toggleInputs('#personalInputs'); 148 | $('#radioInput .inputs').toggleClass('text-gray-500').toggleClass('cursor-not-allowed'); 149 | $('#radioInput label').toggleClass('cursor-not-allowed'); 150 | toggleInputs('#radioInput'); 151 | 152 | }); 153 | // personal info edit buttons 154 | 155 | const toggleEdit = (editBtn,saveBtn,inputs) => { 156 | $(editBtn).click(function() { 157 | $(this).text() == 'Edit' ? $(this).text('Cancel') : $(this).text('Edit') 158 | $(saveBtn).toggleClass('hidden'); 159 | $(inputs).toggleClass('bg-gray-100').toggleClass('cursor-not-allowed'); 160 | toggleInputs(inputs); 161 | }); 162 | } 163 | 164 | const toggleInputs = (inputs) => { 165 | $(`${inputs} input`).toggleClass('cursor-not-allowed').toggleClass('text-gray-500'); 166 | $(`${inputs} input`).prop("disabled") ? 167 | $(`${inputs} input`).prop('disabled', false) : 168 | $(`${inputs} input`).prop('disabled',true) 169 | } 170 | 171 | toggleEdit('#emailEditBtn','#emailSaveBtn','#emailInputs'); 172 | toggleEdit('#mobEditBtn','#mobSaveBtn','#mobInputs'); 173 | }); -------------------------------------------------------------------------------- /Flipkart/src/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); 2 | 3 | 4 | @tailwind base; 5 | @tailwind components; 6 | @tailwind utilities; 7 | 8 | body { 9 | font-family: 'Roboto', sans-serif; 10 | } 11 | 12 | /* owl carousel customization */ 13 | .owl-carousel .owl-nav button { 14 | position: absolute; 15 | top: 30%; 16 | outline: none; 17 | } 18 | #topSelection .owl-carousel .owl-nav button { 19 | top: 20%; 20 | } 21 | #recommended .owl-carousel .owl-nav button { 22 | top: 25%; 23 | } 24 | .owl-carousel .owl-nav button.owl-prev { 25 | left: 2.5rem; 26 | } 27 | .owl-carousel .owl-nav button.owl-prev i, 28 | .owl-carousel .owl-nav button.owl-next i { 29 | font-size: 1.7rem; 30 | color: #000; 31 | margin-left: -3.5rem; 32 | padding: 2.5rem 1rem; 33 | padding-left: 1.5rem; 34 | box-shadow: 0 8px 12px rgba(0,0,0,.2); 35 | background: #fff; 36 | border-radius: 5px; 37 | } 38 | .owl-carousel .owl-nav button.owl-next { 39 | right: 2rem; 40 | } 41 | .owl-carousel .owl-nav button.owl-next i { 42 | margin-right: -5.5rem; 43 | padding: 2.5rem 1.5rem; 44 | padding-left: 1rem; 45 | } 46 | .owl-next.disabled, .owl-prev.disabled { 47 | display: none !important; 48 | } 49 | /* owl carousel customization */ 50 | 51 | /* material icons sizing */ 52 | .md-12 { 53 | font-size: 12px; 54 | transform: rotate(0.03deg); 55 | } 56 | .md-14 { 57 | font-size: 14px; 58 | transform: rotate(0.03deg); 59 | } 60 | .md-16 { 61 | font-size: 16px; 62 | transform: rotate(0.03deg); 63 | } 64 | .md-18 { 65 | font-size: 18px; 66 | transform: rotate(0.03deg); 67 | } 68 | .md-20 { 69 | font-size: 20px; 70 | transform: rotate(0.03deg); 71 | } 72 | .md-22 { 73 | font-size: 22px; 74 | } 75 | /* material icons sizing */ 76 | 77 | /* hover navbar dropdown arrow */ 78 | .arrow_down { 79 | border-left: 11px solid transparent; 80 | border-right: 11px solid transparent; 81 | border-bottom: 11px solid #fff; 82 | } 83 | /* hover navbar dropdown arrow */ 84 | 85 | /* hover navbar dropdown toggle */ 86 | .active { 87 | display: flex; 88 | } 89 | /* hover navbar dropdown toggle */ 90 | 91 | /* rotate dropdown arrows */ 92 | .rotateDropDown { 93 | transform: rotate(-180deg); 94 | } 95 | /* rotate dropdown arrows */ 96 | 97 | 98 | /* login signup sidebar bg image */ 99 | .loginSidebar { 100 | background-image: url("https://static-assets-web.flixcart.com/www/linchpin/fk-cp-zion/img/login_img_c4a81e.png"); 101 | background-position: center 85%; 102 | background-repeat: no-repeat; 103 | } 104 | /* login signup sidebar bg image */ -------------------------------------------------------------------------------- /Instagram/README.md: -------------------------------------------------------------------------------- 1 | ## Instagram UI Clone 2 | Instagram UI Clones using TailwindCSS ⚡ 3 | 4 | ### **Visit Now 🚀** 5 | 6 | ## Tech Stack : 7 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/jigar-sable/Web-UI-Clones/search?l=html) 8 | ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 9 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/jigar-sable/Web-UI-Clones/search?l=javascript) 10 | ![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white) 11 | ![jquery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) 12 | [![web](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://instagramwebui.netlify.app) 13 | 14 | ## Sneak Peek of Site 🙈 : 15 | ![ig1](https://user-images.githubusercontent.com/64949957/130317404-eecb0e02-6a60-494b-b328-6a9b7831ae59.png) 16 | 17 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) 18 | 19 | 20 | -------------------------------------------------------------------------------- /Instagram/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instagran-web-ui", 3 | "version": "1.0.0", 4 | "description": "Clone of Instagram Web UI", 5 | "main": "index.js", 6 | "dependencies": { 7 | "tailwindcss": "^2.2.7", 8 | "win-node-env": "^0.4.0" 9 | }, 10 | "devDependencies": { 11 | "tailwind-scrollbar": "^1.3.1" 12 | }, 13 | "scripts": { 14 | "build:css": "tailwind build -i src/style.css -o public/assets/style.css", 15 | "prod": "NODE_ENV=production tailwind build -i src/style.css -o public/assets/style.css" 16 | }, 17 | "author": "Jigar Sable", 18 | "license": "ISC" 19 | } 20 | -------------------------------------------------------------------------------- /Instagram/public/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/favicon.ico -------------------------------------------------------------------------------- /Instagram/public/assets/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/hero.png -------------------------------------------------------------------------------- /Instagram/public/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/logo.png -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/1.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/10.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/11.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/12.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/13.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/2.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/3.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/4.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/5.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/6.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/7.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/8.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/images/posts/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Instagram/public/assets/images/posts/9.jpg -------------------------------------------------------------------------------- /Instagram/public/assets/posts.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "image": "1" 4 | }, 5 | { 6 | "image": "2" 7 | }, 8 | { 9 | "image": "3" 10 | }, 11 | { 12 | "image": "4" 13 | }, 14 | { 15 | "image": "5" 16 | }, 17 | { 18 | "image": "6" 19 | }, 20 | { 21 | "image": "7" 22 | }, 23 | { 24 | "image": "8" 25 | }, 26 | { 27 | "image": "9" 28 | }, 29 | { 30 | "image": "10" 31 | }, 32 | { 33 | "image": "11" 34 | }, 35 | { 36 | "image": "12" 37 | }, 38 | { 39 | "image": "13" 40 | } 41 | ] -------------------------------------------------------------------------------- /Instagram/public/assets/script.js: -------------------------------------------------------------------------------- 1 | let postsContainer = document.getElementById('post-container'); 2 | let postCard = ""; 3 | 4 | fetch("assets/posts.json") 5 | .then(response => response.json()) 6 | .then(posts => { 7 | console.log(posts); 8 | 9 | posts.forEach(post => { 10 | postCard += ` 11 |
12 | 13 | 14 |
15 | 16 |
17 |
18 | 19 |
20 | jhon_doe 21 |
22 | 23 |
24 | 25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 |
41 | 42 | 43 |
44 | 45 | 46 | 200 likes 47 | 48 | 49 |
50 | james07 51 | Lorem ipsum dolor sit amet consectetur 52 |
53 | 54 | 55 | 2 HOURS AGO 56 |
57 | 58 | 59 |
60 | 61 | 62 | Post 63 |
64 | 65 |
` 66 | }); 67 | postsContainer.innerHTML = postCard; 68 | }) -------------------------------------------------------------------------------- /Instagram/public/assets/style.css: -------------------------------------------------------------------------------- 1 | /*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */ 2 | 3 | /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ 4 | 5 | /* 6 | Document 7 | ======== 8 | */ 9 | 10 | /** 11 | Use a better box model (opinionated). 12 | */ 13 | 14 | *, 15 | ::before, 16 | ::after { 17 | box-sizing: border-box; 18 | } 19 | 20 | /** 21 | Use a more readable tab size (opinionated). 22 | */ 23 | 24 | html { 25 | -moz-tab-size: 4; 26 | -o-tab-size: 4; 27 | tab-size: 4; 28 | } 29 | 30 | /** 31 | 1. Correct the line height in all browsers. 32 | 2. Prevent adjustments of font size after orientation changes in iOS. 33 | */ 34 | 35 | html { 36 | line-height: 1.15; 37 | /* 1 */ 38 | -webkit-text-size-adjust: 100%; 39 | /* 2 */ 40 | } 41 | 42 | /* 43 | Sections 44 | ======== 45 | */ 46 | 47 | /** 48 | Remove the margin in all browsers. 49 | */ 50 | 51 | body { 52 | margin: 0; 53 | } 54 | 55 | /** 56 | Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 57 | */ 58 | 59 | body { 60 | font-family: 61 | system-ui, 62 | -apple-system, /* Firefox supports this but not yet `system-ui` */ 63 | 'Segoe UI', 64 | Roboto, 65 | Helvetica, 66 | Arial, 67 | sans-serif, 68 | 'Apple Color Emoji', 69 | 'Segoe UI Emoji'; 70 | } 71 | 72 | /* 73 | Grouping content 74 | ================ 75 | */ 76 | 77 | /** 78 | 1. Add the correct height in Firefox. 79 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 80 | */ 81 | 82 | hr { 83 | height: 0; 84 | /* 1 */ 85 | color: inherit; 86 | /* 2 */ 87 | } 88 | 89 | /* 90 | Text-level semantics 91 | ==================== 92 | */ 93 | 94 | /** 95 | Add the correct text decoration in Chrome, Edge, and Safari. 96 | */ 97 | 98 | abbr[title] { 99 | -webkit-text-decoration: underline dotted; 100 | text-decoration: underline dotted; 101 | } 102 | 103 | /** 104 | Add the correct font weight in Edge and Safari. 105 | */ 106 | 107 | b, 108 | strong { 109 | font-weight: bolder; 110 | } 111 | 112 | /** 113 | 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 114 | 2. Correct the odd 'em' font sizing in all browsers. 115 | */ 116 | 117 | code, 118 | kbd, 119 | samp, 120 | pre { 121 | font-family: 122 | ui-monospace, 123 | SFMono-Regular, 124 | Consolas, 125 | 'Liberation Mono', 126 | Menlo, 127 | monospace; 128 | /* 1 */ 129 | font-size: 1em; 130 | /* 2 */ 131 | } 132 | 133 | /** 134 | Add the correct font size in all browsers. 135 | */ 136 | 137 | small { 138 | font-size: 80%; 139 | } 140 | 141 | /** 142 | Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. 143 | */ 144 | 145 | sub, 146 | sup { 147 | font-size: 75%; 148 | line-height: 0; 149 | position: relative; 150 | vertical-align: baseline; 151 | } 152 | 153 | sub { 154 | bottom: -0.25em; 155 | } 156 | 157 | sup { 158 | top: -0.5em; 159 | } 160 | 161 | /* 162 | Tabular data 163 | ============ 164 | */ 165 | 166 | /** 167 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 168 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 169 | */ 170 | 171 | table { 172 | text-indent: 0; 173 | /* 1 */ 174 | border-color: inherit; 175 | /* 2 */ 176 | } 177 | 178 | /* 179 | Forms 180 | ===== 181 | */ 182 | 183 | /** 184 | 1. Change the font styles in all browsers. 185 | 2. Remove the margin in Firefox and Safari. 186 | */ 187 | 188 | button, 189 | input, 190 | optgroup, 191 | select, 192 | textarea { 193 | font-family: inherit; 194 | /* 1 */ 195 | font-size: 100%; 196 | /* 1 */ 197 | line-height: 1.15; 198 | /* 1 */ 199 | margin: 0; 200 | /* 2 */ 201 | } 202 | 203 | /** 204 | Remove the inheritance of text transform in Edge and Firefox. 205 | 1. Remove the inheritance of text transform in Firefox. 206 | */ 207 | 208 | button, 209 | select { 210 | /* 1 */ 211 | text-transform: none; 212 | } 213 | 214 | /** 215 | Correct the inability to style clickable types in iOS and Safari. 216 | */ 217 | 218 | button, 219 | [type='button'] { 220 | -webkit-appearance: button; 221 | } 222 | 223 | /** 224 | Remove the inner border and padding in Firefox. 225 | */ 226 | 227 | /** 228 | Restore the focus styles unset by the previous rule. 229 | */ 230 | 231 | /** 232 | Remove the additional ':invalid' styles in Firefox. 233 | See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 234 | */ 235 | 236 | /** 237 | Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. 238 | */ 239 | 240 | legend { 241 | padding: 0; 242 | } 243 | 244 | /** 245 | Add the correct vertical alignment in Chrome and Firefox. 246 | */ 247 | 248 | progress { 249 | vertical-align: baseline; 250 | } 251 | 252 | /** 253 | Correct the cursor style of increment and decrement buttons in Safari. 254 | */ 255 | 256 | /** 257 | 1. Correct the odd appearance in Chrome and Safari. 258 | 2. Correct the outline style in Safari. 259 | */ 260 | 261 | [type='search'] { 262 | -webkit-appearance: textfield; 263 | /* 1 */ 264 | outline-offset: -2px; 265 | /* 2 */ 266 | } 267 | 268 | /** 269 | Remove the inner padding in Chrome and Safari on macOS. 270 | */ 271 | 272 | /** 273 | 1. Correct the inability to style clickable types in iOS and Safari. 274 | 2. Change font properties to 'inherit' in Safari. 275 | */ 276 | 277 | /* 278 | Interactive 279 | =========== 280 | */ 281 | 282 | /* 283 | Add the correct display in Chrome and Safari. 284 | */ 285 | 286 | summary { 287 | display: list-item; 288 | } 289 | 290 | /** 291 | * Manually forked from SUIT CSS Base: https://github.com/suitcss/base 292 | * A thin layer on top of normalize.css that provides a starting point more 293 | * suitable for web applications. 294 | */ 295 | 296 | /** 297 | * Removes the default spacing and border for appropriate elements. 298 | */ 299 | 300 | blockquote, 301 | dl, 302 | dd, 303 | h1, 304 | h2, 305 | h3, 306 | h4, 307 | h5, 308 | h6, 309 | hr, 310 | figure, 311 | p, 312 | pre { 313 | margin: 0; 314 | } 315 | 316 | button { 317 | background-color: transparent; 318 | background-image: none; 319 | } 320 | 321 | fieldset { 322 | margin: 0; 323 | padding: 0; 324 | } 325 | 326 | ol, 327 | ul { 328 | list-style: none; 329 | margin: 0; 330 | padding: 0; 331 | } 332 | 333 | /** 334 | * Tailwind custom reset styles 335 | */ 336 | 337 | /** 338 | * 1. Use the user's configured `sans` font-family (with Tailwind's default 339 | * sans-serif font stack as a fallback) as a sane default. 340 | * 2. Use Tailwind's default "normal" line-height so the user isn't forced 341 | * to override it to ensure consistency even when using the default theme. 342 | */ 343 | 344 | html { 345 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 346 | /* 1 */ 347 | line-height: 1.5; 348 | /* 2 */ 349 | } 350 | 351 | /** 352 | * Inherit font-family and line-height from `html` so users can set them as 353 | * a class directly on the `html` element. 354 | */ 355 | 356 | body { 357 | font-family: inherit; 358 | line-height: inherit; 359 | } 360 | 361 | /** 362 | * 1. Prevent padding and border from affecting element width. 363 | * 364 | * We used to set this in the html element and inherit from 365 | * the parent element for everything else. This caused issues 366 | * in shadow-dom-enhanced elements like
where the content 367 | * is wrapped by a div with box-sizing set to `content-box`. 368 | * 369 | * https://github.com/mozdevs/cssremedy/issues/4 370 | * 371 | * 372 | * 2. Allow adding a border to an element by just adding a border-width. 373 | * 374 | * By default, the way the browser specifies that an element should have no 375 | * border is by setting it's border-style to `none` in the user-agent 376 | * stylesheet. 377 | * 378 | * In order to easily add borders to elements by just setting the `border-width` 379 | * property, we change the default border-style for all elements to `solid`, and 380 | * use border-width to hide them instead. This way our `border` utilities only 381 | * need to set the `border-width` property instead of the entire `border` 382 | * shorthand, making our border utilities much more straightforward to compose. 383 | * 384 | * https://github.com/tailwindcss/tailwindcss/pull/116 385 | */ 386 | 387 | *, 388 | ::before, 389 | ::after { 390 | box-sizing: border-box; 391 | /* 1 */ 392 | border-width: 0; 393 | /* 2 */ 394 | border-style: solid; 395 | /* 2 */ 396 | border-color: currentColor; 397 | /* 2 */ 398 | } 399 | 400 | /* 401 | * Ensure horizontal rules are visible by default 402 | */ 403 | 404 | hr { 405 | border-top-width: 1px; 406 | } 407 | 408 | /** 409 | * Undo the `border-style: none` reset that Normalize applies to images so that 410 | * our `border-{width}` utilities have the expected effect. 411 | * 412 | * The Normalize reset is unnecessary for us since we default the border-width 413 | * to 0 on all elements. 414 | * 415 | * https://github.com/tailwindcss/tailwindcss/issues/362 416 | */ 417 | 418 | img { 419 | border-style: solid; 420 | } 421 | 422 | textarea { 423 | resize: vertical; 424 | } 425 | 426 | input::-moz-placeholder, textarea::-moz-placeholder { 427 | opacity: 1; 428 | color: #9ca3af; 429 | } 430 | 431 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 432 | opacity: 1; 433 | color: #9ca3af; 434 | } 435 | 436 | input::placeholder, 437 | textarea::placeholder { 438 | opacity: 1; 439 | color: #9ca3af; 440 | } 441 | 442 | button, 443 | [role="button"] { 444 | cursor: pointer; 445 | } 446 | 447 | table { 448 | border-collapse: collapse; 449 | } 450 | 451 | h1, 452 | h2, 453 | h3, 454 | h4, 455 | h5, 456 | h6 { 457 | font-size: inherit; 458 | font-weight: inherit; 459 | } 460 | 461 | /** 462 | * Reset links to optimize for opt-in styling instead of 463 | * opt-out. 464 | */ 465 | 466 | a { 467 | color: inherit; 468 | text-decoration: inherit; 469 | } 470 | 471 | /** 472 | * Reset form element properties that are easy to forget to 473 | * style explicitly so you don't inadvertently introduce 474 | * styles that deviate from your design system. These styles 475 | * supplement a partial reset that is already applied by 476 | * normalize.css. 477 | */ 478 | 479 | button, 480 | input, 481 | optgroup, 482 | select, 483 | textarea { 484 | padding: 0; 485 | line-height: inherit; 486 | color: inherit; 487 | } 488 | 489 | /** 490 | * Use the configured 'mono' font family for elements that 491 | * are expected to be rendered with a monospace font, falling 492 | * back to the system monospace stack if there is no configured 493 | * 'mono' font family. 494 | */ 495 | 496 | pre, 497 | code, 498 | kbd, 499 | samp { 500 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 501 | } 502 | 503 | /** 504 | * 1. Make replaced elements `display: block` by default as that's 505 | * the behavior you want almost all of the time. Inspired by 506 | * CSS Remedy, with `svg` added as well. 507 | * 508 | * https://github.com/mozdevs/cssremedy/issues/14 509 | * 510 | * 2. Add `vertical-align: middle` to align replaced elements more 511 | * sensibly by default when overriding `display` by adding a 512 | * utility like `inline`. 513 | * 514 | * This can trigger a poorly considered linting error in some 515 | * tools but is included by design. 516 | * 517 | * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 518 | */ 519 | 520 | img, 521 | svg, 522 | video, 523 | canvas, 524 | audio, 525 | iframe, 526 | embed, 527 | object { 528 | display: block; 529 | /* 1 */ 530 | vertical-align: middle; 531 | /* 2 */ 532 | } 533 | 534 | /** 535 | * Constrain images and videos to the parent width and preserve 536 | * their intrinsic aspect ratio. 537 | * 538 | * https://github.com/mozdevs/cssremedy/issues/14 539 | */ 540 | 541 | img, 542 | video { 543 | max-width: 100%; 544 | height: auto; 545 | } 546 | 547 | /** 548 | * Ensure the default browser behavior of the `hidden` attribute. 549 | */ 550 | 551 | [hidden] { 552 | display: none; 553 | } 554 | 555 | *, ::before, ::after { 556 | --tw-border-opacity: 1; 557 | border-color: rgba(229, 231, 235, var(--tw-border-opacity)); 558 | } 559 | 560 | * { 561 | scrollbar-color: initial; 562 | scrollbar-width: initial; 563 | } 564 | 565 | .container { 566 | width: 100%; 567 | } 568 | 569 | @media (min-width: 640px) { 570 | .container { 571 | max-width: 640px; 572 | } 573 | } 574 | 575 | @media (min-width: 768px) { 576 | .container { 577 | max-width: 768px; 578 | } 579 | } 580 | 581 | @media (min-width: 1024px) { 582 | .container { 583 | max-width: 1024px; 584 | } 585 | } 586 | 587 | @media (min-width: 1280px) { 588 | .container { 589 | max-width: 1280px; 590 | } 591 | } 592 | 593 | @media (min-width: 1536px) { 594 | .container { 595 | max-width: 1536px; 596 | } 597 | } 598 | 599 | .fixed { 600 | position: fixed; 601 | } 602 | 603 | .sticky { 604 | position: sticky; 605 | } 606 | 607 | .top-0 { 608 | top: 0px; 609 | } 610 | 611 | .z-10 { 612 | z-index: 10; 613 | } 614 | 615 | .mx-auto { 616 | margin-left: auto; 617 | margin-right: auto; 618 | } 619 | 620 | .mt-1 { 621 | margin-top: 0.25rem; 622 | } 623 | 624 | .mt-3 { 625 | margin-top: 0.75rem; 626 | } 627 | 628 | .mt-5 { 629 | margin-top: 1.25rem; 630 | } 631 | 632 | .mt-8 { 633 | margin-top: 2rem; 634 | } 635 | 636 | .mt-14 { 637 | margin-top: 3.5rem; 638 | } 639 | 640 | .mt-1\.5 { 641 | margin-top: 0.375rem; 642 | } 643 | 644 | .mr-3 { 645 | margin-right: 0.75rem; 646 | } 647 | 648 | .mb-8 { 649 | margin-bottom: 2rem; 650 | } 651 | 652 | .ml-2 { 653 | margin-left: 0.5rem; 654 | } 655 | 656 | .ml-6 { 657 | margin-left: 1.5rem; 658 | } 659 | 660 | .ml-16 { 661 | margin-left: 4rem; 662 | } 663 | 664 | .flex { 665 | display: flex; 666 | } 667 | 668 | .table { 669 | display: table; 670 | } 671 | 672 | .hidden { 673 | display: none; 674 | } 675 | 676 | .h-3 { 677 | height: 0.75rem; 678 | } 679 | 680 | .h-6 { 681 | height: 1.5rem; 682 | } 683 | 684 | .h-9 { 685 | height: 2.25rem; 686 | } 687 | 688 | .h-11 { 689 | height: 2.75rem; 690 | } 691 | 692 | .h-14 { 693 | height: 3.5rem; 694 | } 695 | 696 | .h-3\.5 { 697 | height: 0.875rem; 698 | } 699 | 700 | .h-full { 701 | height: 100%; 702 | } 703 | 704 | .w-3 { 705 | width: 0.75rem; 706 | } 707 | 708 | .w-6 { 709 | width: 1.5rem; 710 | } 711 | 712 | .w-9 { 713 | width: 2.25rem; 714 | } 715 | 716 | .w-11 { 717 | width: 2.75rem; 718 | } 719 | 720 | .w-14 { 721 | width: 3.5rem; 722 | } 723 | 724 | .w-16 { 725 | width: 4rem; 726 | } 727 | 728 | .w-3\.5 { 729 | width: 0.875rem; 730 | } 731 | 732 | .w-3\/12 { 733 | width: 25%; 734 | } 735 | 736 | .w-full { 737 | width: 100%; 738 | } 739 | 740 | .flex-auto { 741 | flex: 1 1 auto; 742 | } 743 | 744 | @-webkit-keyframes spin { 745 | to { 746 | transform: rotate(360deg); 747 | } 748 | } 749 | 750 | @keyframes spin { 751 | to { 752 | transform: rotate(360deg); 753 | } 754 | } 755 | 756 | @-webkit-keyframes ping { 757 | 75%, 100% { 758 | transform: scale(2); 759 | opacity: 0; 760 | } 761 | } 762 | 763 | @keyframes ping { 764 | 75%, 100% { 765 | transform: scale(2); 766 | opacity: 0; 767 | } 768 | } 769 | 770 | @-webkit-keyframes pulse { 771 | 50% { 772 | opacity: .5; 773 | } 774 | } 775 | 776 | @keyframes pulse { 777 | 50% { 778 | opacity: .5; 779 | } 780 | } 781 | 782 | @-webkit-keyframes bounce { 783 | 0%, 100% { 784 | transform: translateY(-25%); 785 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 786 | animation-timing-function: cubic-bezier(0.8,0,1,1); 787 | } 788 | 789 | 50% { 790 | transform: none; 791 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 792 | animation-timing-function: cubic-bezier(0,0,0.2,1); 793 | } 794 | } 795 | 796 | @keyframes bounce { 797 | 0%, 100% { 798 | transform: translateY(-25%); 799 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 800 | animation-timing-function: cubic-bezier(0.8,0,1,1); 801 | } 802 | 803 | 50% { 804 | transform: none; 805 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 806 | animation-timing-function: cubic-bezier(0,0,0.2,1); 807 | } 808 | } 809 | 810 | .cursor-pointer { 811 | cursor: pointer; 812 | } 813 | 814 | .flex-row { 815 | flex-direction: row; 816 | } 817 | 818 | .flex-col { 819 | flex-direction: column; 820 | } 821 | 822 | .items-center { 823 | align-items: center; 824 | } 825 | 826 | .justify-center { 827 | justify-content: center; 828 | } 829 | 830 | .justify-between { 831 | justify-content: space-between; 832 | } 833 | 834 | .space-x-1 > :not([hidden]) ~ :not([hidden]) { 835 | --tw-space-x-reverse: 0; 836 | margin-right: calc(0.25rem * var(--tw-space-x-reverse)); 837 | margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); 838 | } 839 | 840 | .space-x-3 > :not([hidden]) ~ :not([hidden]) { 841 | --tw-space-x-reverse: 0; 842 | margin-right: calc(0.75rem * var(--tw-space-x-reverse)); 843 | margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); 844 | } 845 | 846 | .space-x-4 > :not([hidden]) ~ :not([hidden]) { 847 | --tw-space-x-reverse: 0; 848 | margin-right: calc(1rem * var(--tw-space-x-reverse)); 849 | margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); 850 | } 851 | 852 | .space-x-5 > :not([hidden]) ~ :not([hidden]) { 853 | --tw-space-x-reverse: 0; 854 | margin-right: calc(1.25rem * var(--tw-space-x-reverse)); 855 | margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse))); 856 | } 857 | 858 | .space-x-1\.5 > :not([hidden]) ~ :not([hidden]) { 859 | --tw-space-x-reverse: 0; 860 | margin-right: calc(0.375rem * var(--tw-space-x-reverse)); 861 | margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse))); 862 | } 863 | 864 | .space-y-0 > :not([hidden]) ~ :not([hidden]) { 865 | --tw-space-y-reverse: 0; 866 | margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); 867 | margin-bottom: calc(0px * var(--tw-space-y-reverse)); 868 | } 869 | 870 | .space-y-1 > :not([hidden]) ~ :not([hidden]) { 871 | --tw-space-y-reverse: 0; 872 | margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); 873 | margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); 874 | } 875 | 876 | .space-y-3 > :not([hidden]) ~ :not([hidden]) { 877 | --tw-space-y-reverse: 0; 878 | margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); 879 | margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); 880 | } 881 | 882 | .space-y-6 > :not([hidden]) ~ :not([hidden]) { 883 | --tw-space-y-reverse: 0; 884 | margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); 885 | margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); 886 | } 887 | 888 | .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { 889 | --tw-space-y-reverse: 0; 890 | margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); 891 | margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); 892 | } 893 | 894 | .space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { 895 | --tw-space-y-reverse: 0; 896 | margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse))); 897 | margin-bottom: calc(0.875rem * var(--tw-space-y-reverse)); 898 | } 899 | 900 | .rounded { 901 | border-radius: 0.25rem; 902 | } 903 | 904 | .rounded-full { 905 | border-radius: 9999px; 906 | } 907 | 908 | .border-2 { 909 | border-width: 2px; 910 | } 911 | 912 | .border { 913 | border-width: 1px; 914 | } 915 | 916 | .border-b { 917 | border-bottom-width: 1px; 918 | } 919 | 920 | .border-none { 921 | border-style: none; 922 | } 923 | 924 | .border-gray-300 { 925 | --tw-border-opacity: 1; 926 | border-color: rgba(209, 213, 219, var(--tw-border-opacity)); 927 | } 928 | 929 | .border-red-500 { 930 | --tw-border-opacity: 1; 931 | border-color: rgba(239, 68, 68, var(--tw-border-opacity)); 932 | } 933 | 934 | .border-red-600 { 935 | --tw-border-opacity: 1; 936 | border-color: rgba(220, 38, 38, var(--tw-border-opacity)); 937 | } 938 | 939 | .bg-transparent { 940 | background-color: transparent; 941 | } 942 | 943 | .bg-white { 944 | --tw-bg-opacity: 1; 945 | background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); 946 | } 947 | 948 | .bg-gray-50 { 949 | --tw-bg-opacity: 1; 950 | background-color: rgba(249, 250, 251, var(--tw-bg-opacity)); 951 | } 952 | 953 | .bg-gray-100 { 954 | --tw-bg-opacity: 1; 955 | background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); 956 | } 957 | 958 | .object-contain { 959 | -o-object-fit: contain; 960 | object-fit: contain; 961 | } 962 | 963 | .object-cover { 964 | -o-object-fit: cover; 965 | object-fit: cover; 966 | } 967 | 968 | .object-center { 969 | -o-object-position: center; 970 | object-position: center; 971 | } 972 | 973 | .p-0 { 974 | padding: 0px; 975 | } 976 | 977 | .p-2 { 978 | padding: 0.5rem; 979 | } 980 | 981 | .p-3 { 982 | padding: 0.75rem; 983 | } 984 | 985 | .p-0\.5 { 986 | padding: 0.125rem; 987 | } 988 | 989 | .px-3 { 990 | padding-left: 0.75rem; 991 | padding-right: 0.75rem; 992 | } 993 | 994 | .px-3\.5 { 995 | padding-left: 0.875rem; 996 | padding-right: 0.875rem; 997 | } 998 | 999 | .py-1 { 1000 | padding-top: 0.25rem; 1001 | padding-bottom: 0.25rem; 1002 | } 1003 | 1004 | .py-2 { 1005 | padding-top: 0.5rem; 1006 | padding-bottom: 0.5rem; 1007 | } 1008 | 1009 | .pb-2 { 1010 | padding-bottom: 0.5rem; 1011 | } 1012 | 1013 | .text-xs { 1014 | font-size: 0.75rem; 1015 | line-height: 1rem; 1016 | } 1017 | 1018 | .text-sm { 1019 | font-size: 0.875rem; 1020 | line-height: 1.25rem; 1021 | } 1022 | 1023 | .font-semibold { 1024 | font-weight: 600; 1025 | } 1026 | 1027 | .text-black { 1028 | --tw-text-opacity: 1; 1029 | color: rgba(0, 0, 0, var(--tw-text-opacity)); 1030 | } 1031 | 1032 | .text-gray-400 { 1033 | --tw-text-opacity: 1; 1034 | color: rgba(156, 163, 175, var(--tw-text-opacity)); 1035 | } 1036 | 1037 | .text-gray-500 { 1038 | --tw-text-opacity: 1; 1039 | color: rgba(107, 114, 128, var(--tw-text-opacity)); 1040 | } 1041 | 1042 | .text-blue-500 { 1043 | --tw-text-opacity: 1; 1044 | color: rgba(59, 130, 246, var(--tw-text-opacity)); 1045 | } 1046 | 1047 | .text-blue-600 { 1048 | --tw-text-opacity: 1; 1049 | color: rgba(37, 99, 235, var(--tw-text-opacity)); 1050 | } 1051 | 1052 | .hover\:underline:hover { 1053 | text-decoration: underline; 1054 | } 1055 | 1056 | *, ::before, ::after { 1057 | --tw-shadow: 0 0 #0000; 1058 | } 1059 | 1060 | .outline-none { 1061 | outline: 2px solid transparent; 1062 | outline-offset: 2px; 1063 | } 1064 | 1065 | *, ::before, ::after { 1066 | --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); 1067 | --tw-ring-offset-width: 0px; 1068 | --tw-ring-offset-color: #fff; 1069 | --tw-ring-color: rgba(59, 130, 246, 0.5); 1070 | --tw-ring-offset-shadow: 0 0 #0000; 1071 | --tw-ring-shadow: 0 0 #0000; 1072 | } 1073 | 1074 | .stories-container { 1075 | display: flex; 1076 | width: 100%; 1077 | flex: 1 1 auto; 1078 | overflow-x: auto; 1079 | border-radius: 0.25rem; 1080 | border-width: 1px; 1081 | --tw-bg-opacity: 1; 1082 | background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); 1083 | padding-left: 0.5rem; 1084 | padding-right: 0.5rem; 1085 | padding-top: 1rem; 1086 | padding-bottom: 1rem; 1087 | scrollbar-width: none; 1088 | } 1089 | 1090 | .stories-container::-webkit-scrollbar { 1091 | display: none; 1092 | } 1093 | 1094 | .sidebar { 1095 | position: fixed; 1096 | margin: 2rem; 1097 | display: none; 1098 | height: 100%; 1099 | width: 25%; 1100 | flex: 1 1 auto; 1101 | flex-direction: column; 1102 | } 1103 | 1104 | @media (min-width: 1024px) { 1105 | .sidebar { 1106 | right: 8rem; 1107 | display: flex; 1108 | } 1109 | } 1110 | 1111 | @media (min-width: 1280px) { 1112 | .sidebar { 1113 | right: 10rem; 1114 | } 1115 | } 1116 | 1117 | .posts-container { 1118 | margin-top: 0.25rem; 1119 | display: flex; 1120 | height: 100%; 1121 | width: 100%; 1122 | flex-direction: column; 1123 | } 1124 | 1125 | .posts-container > :not([hidden]) ~ :not([hidden]) { 1126 | --tw-space-y-reverse: 0; 1127 | margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); 1128 | margin-bottom: calc(1rem * var(--tw-space-y-reverse)); 1129 | } 1130 | 1131 | @media (min-width: 640px) { 1132 | .posts-container { 1133 | margin-top: 1.5rem; 1134 | } 1135 | } 1136 | 1137 | @media (min-width: 640px) { 1138 | .sm\:mt-6 { 1139 | margin-top: 1.5rem; 1140 | } 1141 | 1142 | .sm\:flex { 1143 | display: flex; 1144 | } 1145 | 1146 | .sm\:w-full { 1147 | width: 100%; 1148 | } 1149 | 1150 | .sm\:px-4 { 1151 | padding-left: 1rem; 1152 | padding-right: 1rem; 1153 | } 1154 | 1155 | .sm\:px-8 { 1156 | padding-left: 2rem; 1157 | padding-right: 2rem; 1158 | } 1159 | 1160 | .sm\:py-2 { 1161 | padding-top: 0.5rem; 1162 | padding-bottom: 0.5rem; 1163 | } 1164 | } 1165 | 1166 | @media (min-width: 768px) { 1167 | .md\:w-4\/5 { 1168 | width: 80%; 1169 | } 1170 | 1171 | .md\:w-full { 1172 | width: 100%; 1173 | } 1174 | 1175 | .md\:px-6 { 1176 | padding-left: 1.5rem; 1177 | padding-right: 1.5rem; 1178 | } 1179 | 1180 | .md\:py-2 { 1181 | padding-top: 0.5rem; 1182 | padding-bottom: 0.5rem; 1183 | } 1184 | } 1185 | 1186 | @media (min-width: 1024px) { 1187 | .lg\:w-2\/3 { 1188 | width: 66.666667%; 1189 | } 1190 | 1191 | .lg\:w-3\/4 { 1192 | width: 75%; 1193 | } 1194 | } 1195 | 1196 | @media (min-width: 1280px) { 1197 | .xl\:w-9\/12 { 1198 | width: 75%; 1199 | } 1200 | 1201 | .xl\:px-8 { 1202 | padding-left: 2rem; 1203 | padding-right: 2rem; 1204 | } 1205 | 1206 | .xl\:py-2 { 1207 | padding-top: 0.5rem; 1208 | padding-bottom: 0.5rem; 1209 | } 1210 | 1211 | .xl\:py-2\.5 { 1212 | padding-top: 0.625rem; 1213 | padding-bottom: 0.625rem; 1214 | } 1215 | } 1216 | 1217 | @media (min-width: 1536px) { 1218 | } -------------------------------------------------------------------------------- /Instagram/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Instagram 9 | 10 | 11 | 12 | 13 | 14 | 15 | 43 | 44 | 45 |
46 |
47 | 48 | 49 |
50 | 51 | 52 |
53 |
54 | 55 |
56 | jhon_doe 57 |
58 | 59 | 60 |
61 |
62 | 63 |
64 | jhon_doe 65 |
66 | 67 | 68 |
69 |
70 | 71 |
72 | jhon_doe 73 |
74 | 75 | 76 |
77 |
78 | 79 |
80 | jhon_doe 81 |
82 | 83 | 84 |
85 |
86 | 87 |
88 | jhon_doe 89 |
90 | 91 | 92 |
93 |
94 | 95 |
96 | jhon_doe 97 |
98 | 99 | 100 |
101 |
102 | 103 |
104 | jhon_doe 105 |
106 | 107 | 108 |
109 |
110 | 111 |
112 | jhon_doe 113 |
114 | 115 | 116 |
117 |
118 | 119 |
120 | jhon_doe 121 |
122 | 123 | 124 |
125 |
126 | 127 |
128 | jhon_doe 129 |
130 | 131 | 132 |
133 |
134 | 135 |
136 | jhon_doe 137 |
138 | 139 | 140 |
141 |
142 | 143 |
144 | jhon_doe 145 |
146 | 147 | 148 |
149 |
150 | 151 |
152 | jhon_doe 153 |
154 | 155 | 156 |
157 |
158 | 159 |
160 | jhon_doe 161 |
162 | 163 | 164 |
165 |
166 | 167 |
168 | jhon_doe 169 |
170 | 171 | 172 |
173 |
174 | 175 |
176 | jhon_doe 177 |
178 | 179 | 180 |
181 | 182 | 183 |
184 | 185 | 186 | 241 | 242 |
243 | 244 |
245 | 246 | 247 |
248 | 249 | 250 |
251 | 252 | 253 |
254 |
255 |
256 | 257 |
258 |
259 | jhon_doe 260 | Jhon Doe 261 |
262 |
263 |
264 | Switch 265 |
266 |
267 | 268 | 269 |
270 |

Suggestions For You

271 | See All 272 |
273 | 274 | 275 |
276 | 277 | 278 |
279 |
280 |
281 | 282 |
283 |
284 | jhon_doe 285 | New to Instagram 286 |
287 |
288 |
289 | Follow 290 |
291 |
292 | 293 | 294 |
295 |
296 |
297 | 298 |
299 |
300 | jhon_doe 301 | New to Instagram 302 |
303 |
304 |
305 | Follow 306 |
307 |
308 | 309 | 310 |
311 |
312 |
313 | 314 |
315 |
316 | jhon_doe 317 | New to Instagram 318 |
319 |
320 |
321 | Follow 322 |
323 |
324 | 325 | 326 |
327 |
328 |
329 | 330 |
331 |
332 | jhon_doe 333 | New to Instagram 334 |
335 |
336 |
337 | Follow 338 |
339 |
340 | 341 | 342 |
343 |
344 |
345 | 346 |
347 |
348 | jhon_doe 349 | New to Instagram 350 |
351 |
352 |
353 | Follow 354 |
355 |
356 | 357 |
358 | 359 | 360 | 361 |
362 |
363 |
364 | About 365 | Help 366 | Press 367 | API 368 | Jobs 369 | Privacy 370 | Terms 371 | Locations 372 |
373 |
374 | Top Accounts 375 | Hashtags 376 | Language 377 |
378 |
379 | © 2021 INSTAGRAM FROM FACEBOOK 380 |
381 |
382 |
383 | 384 |
385 | 386 | 387 | 388 | 389 | -------------------------------------------------------------------------------- /Instagram/src/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .stories-container { 6 | @apply w-full bg-white py-4 px-2 flex flex-auto overflow-x-auto scrollbar-none border rounded; 7 | } 8 | .sidebar { 9 | @apply fixed lg:right-32 xl:right-40 w-3/12 h-full hidden lg:flex flex-col flex-auto m-8; 10 | } 11 | .posts-container { 12 | @apply w-full h-full mt-1 sm:mt-6 flex flex-col space-y-4; 13 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 🚀 Web UI Clones 2 | 3 | Email Banners-Dark 4 | 5 | Website UI Clones using TailwindCSS 6 | 7 | - [x] **WhatsApp Web** 8 | - [x] **YouTube** 9 | - [x] **Instagram** 10 | - [x] **Sololearn** 11 | - [x] **Flipkart** 12 | - [ ] Telegram 13 | - [ ] Netflix 14 | 15 | ## 🧑‍💻 Tech Stack 16 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/jigar-sable/Web-UI-Clones/search?l=html) 17 | ![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) 18 | ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 19 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/jigar-sable/Web-UI-Clones/search?l=javascript) 20 | ![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white) 21 | ![jquery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) 22 | [![web](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://youtubewebui.netlify.app) 23 | 24 | 25 | 26 | ## 📌Contributing Guidelines : 27 | 28 | **1.** Fork [this](https://github.com/jigar-sable/web-ui-clones) repository. 29 | 30 | **2.** Clone your forked copy of the project. 31 | 32 | ``` 33 | git clone https://github.com//web-ui-clones.git 34 | ``` 35 | 36 | **3.** Add a reference(remote) to the original repository. 37 | 38 | ``` 39 | git remote add upstream https://github.com/jigar-sable/web-ui-clones.git 40 | ``` 41 | 42 | **4.** Check the remotes for this repository. 43 | 44 | ``` 45 | git remote -v 46 | ``` 47 | 48 | **5.** Always take a pull from the upstream repository to your master branch to keep it as per with the main project(updated repository). 49 | 50 | ``` 51 | git pull upstream main 52 | ``` 53 | 54 | **6.** Create a new branch. 55 | 56 | ``` 57 | git checkout -b 58 | ``` 59 | 60 | **7.** Perfom your desired changes to the code base. 61 | 62 |

63 | 64 | **8.** Track your changes:heavy_check_mark: 65 | 66 | ``` 67 | git add . 68 | ``` 69 | 70 | **9.** Commit your changes . 71 | 72 | ``` 73 | git commit -m "Relevant message" 74 | ``` 75 | 76 | **10.** Push the committed changes in your feature branch to your remote repo. 77 | 78 | ``` 79 | git push -u origin 80 | ``` 81 | 82 | **11.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repo you are suppose to make a PR to. 83 | 84 | **12.** Add appropriate title and description to your pull request explaining your changes and efforts done. Always make sure you have pulled the latest code from the master branch before making a PR. 85 | 86 | **13.** Click on `Create Pull Request`. 87 | 88 | **14.** Hurray❗You have created a PR to Web UI Clones Website💥 Sit back patiently and relax till then the project maintainers will review your PR. Please understand, there will be some time taken to review a PR and can vary from a few hours to a few days too so be Patient and keep contributing. 89 | 90 | Hurray! You successfully made a contribution! 91 | 92 | ## 😎 Maintainer 93 | 94 | 95 | 96 | 104 | 105 |
97 | profile 98 |
99 | Jigar Sable 100 |
101 | LinkedIn    102 | Github 103 |
106 | 107 | ## ✨ Our Valuable Contributors 108 | 109 | 110 | 111 | 112 | 113 |

📬 Contact

114 | 115 | If you want to contact me, you can reach me through below handles. 116 | 117 | [![linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/jigar-sable) 118 | 119 | ## 👨‍💻 Happy Coding! 120 | 121 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) 122 | [![forthebadge](https://forthebadge.com/images/badges/built-by-developers.svg)](https://forthebadge.com) 123 | -------------------------------------------------------------------------------- /Sololearn/README.md: -------------------------------------------------------------------------------- 1 | ## Sololearn UI Clone 2 | Sololearn UI Clones using TailwindCSS ⚡ 3 | 4 | ### **Visit Now 🚀** 5 | 6 | ## Tech Stack : 7 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/jigar-sable/Web-UI-Clones/search?l=html) 8 | ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 9 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/jigar-sable/Web-UI-Clones/search?l=javascript) 10 | ![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white) 11 | [![web](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://instagramwebui.netlify.app) 12 | 13 | ## Sneak Peek of Site 🙈 : 14 | ![sololearn](https://user-images.githubusercontent.com/64949957/130730792-0a2243c5-5e20-4216-9631-5e37646a3ee3.PNG) 15 | 16 | 17 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) 18 | 19 | 20 | -------------------------------------------------------------------------------- /Sololearn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sololearn-ui-clone", 3 | "version": "1.0.0", 4 | "description": "Sololearn UI Clone", 5 | "main": "index.js", 6 | "dependencies": { 7 | "tailwindcss": "^2.2.7", 8 | "win-node-env": "^0.4.0" 9 | }, 10 | "devDependencies": {}, 11 | "scripts": { 12 | "build:css": "tailwind build -i src/style.css -o public/assets/style.css", 13 | "prod": "NODE_ENV=production tailwind build -i src/style.css -o public/assets/style.css" 14 | }, 15 | "author": "Jigar Sable", 16 | "license": "ISC" 17 | } 18 | -------------------------------------------------------------------------------- /Sololearn/public/assets/courses.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Python Core", 5 | "learners": "7.3M" 6 | }, 7 | { 8 | "id": 2, 9 | "title": "C++", 10 | "learners": "6.1M" 11 | }, 12 | { 13 | "id": 3, 14 | "title": "Java", 15 | "learners": "4.8M" 16 | }, 17 | { 18 | "id": 4, 19 | "title": "C#", 20 | "learners": "2.7M" 21 | }, 22 | { 23 | "id": 5, 24 | "title": "JavaScript", 25 | "learners": "3.6M" 26 | }, 27 | { 28 | "id": 6, 29 | "title": "HTML", 30 | "learners": "7.8M" 31 | }, 32 | { 33 | "id": 7, 34 | "title": "CSS", 35 | "learners": "1.9M" 36 | }, 37 | { 38 | "id": 8, 39 | "title": "Responsive Web Design", 40 | "learners": "77.3K" 41 | }, 42 | { 43 | "id": 9, 44 | "title": "Python for Beginners", 45 | "learners": "423.7K" 46 | }, 47 | { 48 | "id": 10, 49 | "title": "Python for Data Science", 50 | "learners": "63.1K" 51 | }, 52 | { 53 | "id": 11, 54 | "title": "SQL", 55 | "learners": "2.6M" 56 | }, 57 | { 58 | "id": 12, 59 | "title": "Data Science", 60 | "learners": "633.9K" 61 | }, 62 | { 63 | "id": 13, 64 | "title": "Machine Learning", 65 | "learners": "764.6K" 66 | }, 67 | { 68 | "id": 14, 69 | "title": "React + Redux", 70 | "learners": "152.9K" 71 | }, 72 | { 73 | "id": 15, 74 | "title": "Angular + NestJS", 75 | "learners": "112.6K" 76 | }, 77 | { 78 | "id": 16, 79 | "title": "Intermediate Python", 80 | "learners": "141.6K" 81 | }, 82 | { 83 | "id": 17, 84 | "title": "Kotlin", 85 | "learners": "58.7K" 86 | }, 87 | { 88 | "id": 18, 89 | "title": "Go", 90 | "learners": "32.1K" 91 | }, 92 | { 93 | "id": 19, 94 | "title": "C", 95 | "learners": "917.0K" 96 | }, 97 | { 98 | "id": 20, 99 | "title": "Python Data Structures", 100 | "learners": "124.5K" 101 | }, 102 | { 103 | "id": 21, 104 | "title": "PHP", 105 | "learners": "1.9M" 106 | }, 107 | { 108 | "id": 22, 109 | "title": "Ruby", 110 | "learners": "599.0K" 111 | }, 112 | { 113 | "id": 23, 114 | "title": "Swift 4", 115 | "learners": "621.7K" 116 | }, 117 | { 118 | "id": 24, 119 | "title": "jQuery", 120 | "learners": "616.0K" 121 | }, 122 | { 123 | "id": 25, 124 | "title": "Coding for Marketers", 125 | "learners": "20.2K" 126 | } 127 | ] -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/1.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/10.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/11.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/12.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/13.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/14.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/15.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/16.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/17.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/18.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/19.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/2.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/20.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/21.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/22.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/23.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/24.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/25.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/3.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/4.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/5.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/6.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/7.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/8.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/courses/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/courses/9.png -------------------------------------------------------------------------------- /Sololearn/public/assets/images/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sololearn/public/assets/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/Sololearn/public/assets/images/hero.png -------------------------------------------------------------------------------- /Sololearn/public/assets/script.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.getElementById('menuBtn'); 2 | const mobMenu = document.getElementById('mobMenu'); 3 | menuBtn.addEventListener('click', () => { 4 | mobMenu.classList.toggle("hidden"); 5 | }) 6 | 7 | 8 | let coursesContainer = document.getElementById('course-container'); 9 | let courseCard = ""; 10 | 11 | fetch("assets/courses.json") 12 | .then(response => response.json()) 13 | .then(courses => { 14 | console.log(courses); 15 | 16 | courses.forEach(course => { 17 | courseCard += ` 18 |
19 |
20 | 21 |
22 |

${course.title}

23 | ${course.learners} Learners 24 |
` 25 | }); 26 | coursesContainer.innerHTML = courseCard; 27 | }) -------------------------------------------------------------------------------- /Sololearn/public/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300;400;500;600;700&display=swap'); 2 | 3 | /*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */ 4 | 5 | /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ 6 | 7 | /* 8 | Document 9 | ======== 10 | */ 11 | 12 | /** 13 | Use a better box model (opinionated). 14 | */ 15 | 16 | *, 17 | ::before, 18 | ::after { 19 | box-sizing: border-box; 20 | } 21 | 22 | /** 23 | Use a more readable tab size (opinionated). 24 | */ 25 | 26 | html { 27 | -moz-tab-size: 4; 28 | -o-tab-size: 4; 29 | tab-size: 4; 30 | } 31 | 32 | /** 33 | 1. Correct the line height in all browsers. 34 | 2. Prevent adjustments of font size after orientation changes in iOS. 35 | */ 36 | 37 | html { 38 | line-height: 1.15; 39 | /* 1 */ 40 | -webkit-text-size-adjust: 100%; 41 | /* 2 */ 42 | } 43 | 44 | /* 45 | Sections 46 | ======== 47 | */ 48 | 49 | /** 50 | Remove the margin in all browsers. 51 | */ 52 | 53 | body { 54 | margin: 0; 55 | } 56 | 57 | /** 58 | Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 59 | */ 60 | 61 | body { 62 | font-family: 63 | system-ui, 64 | -apple-system, /* Firefox supports this but not yet `system-ui` */ 65 | 'Segoe UI', 66 | Roboto, 67 | Helvetica, 68 | Arial, 69 | sans-serif, 70 | 'Apple Color Emoji', 71 | 'Segoe UI Emoji'; 72 | } 73 | 74 | /* 75 | Grouping content 76 | ================ 77 | */ 78 | 79 | /** 80 | 1. Add the correct height in Firefox. 81 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 82 | */ 83 | 84 | hr { 85 | height: 0; 86 | /* 1 */ 87 | color: inherit; 88 | /* 2 */ 89 | } 90 | 91 | /* 92 | Text-level semantics 93 | ==================== 94 | */ 95 | 96 | /** 97 | Add the correct text decoration in Chrome, Edge, and Safari. 98 | */ 99 | 100 | abbr[title] { 101 | -webkit-text-decoration: underline dotted; 102 | text-decoration: underline dotted; 103 | } 104 | 105 | /** 106 | Add the correct font weight in Edge and Safari. 107 | */ 108 | 109 | b, 110 | strong { 111 | font-weight: bolder; 112 | } 113 | 114 | /** 115 | 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 116 | 2. Correct the odd 'em' font sizing in all browsers. 117 | */ 118 | 119 | code, 120 | kbd, 121 | samp, 122 | pre { 123 | font-family: 124 | ui-monospace, 125 | SFMono-Regular, 126 | Consolas, 127 | 'Liberation Mono', 128 | Menlo, 129 | monospace; 130 | /* 1 */ 131 | font-size: 1em; 132 | /* 2 */ 133 | } 134 | 135 | /** 136 | Add the correct font size in all browsers. 137 | */ 138 | 139 | small { 140 | font-size: 80%; 141 | } 142 | 143 | /** 144 | Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. 145 | */ 146 | 147 | sub, 148 | sup { 149 | font-size: 75%; 150 | line-height: 0; 151 | position: relative; 152 | vertical-align: baseline; 153 | } 154 | 155 | sub { 156 | bottom: -0.25em; 157 | } 158 | 159 | sup { 160 | top: -0.5em; 161 | } 162 | 163 | /* 164 | Tabular data 165 | ============ 166 | */ 167 | 168 | /** 169 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 170 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 171 | */ 172 | 173 | table { 174 | text-indent: 0; 175 | /* 1 */ 176 | border-color: inherit; 177 | /* 2 */ 178 | } 179 | 180 | /* 181 | Forms 182 | ===== 183 | */ 184 | 185 | /** 186 | 1. Change the font styles in all browsers. 187 | 2. Remove the margin in Firefox and Safari. 188 | */ 189 | 190 | button, 191 | input, 192 | optgroup, 193 | select, 194 | textarea { 195 | font-family: inherit; 196 | /* 1 */ 197 | font-size: 100%; 198 | /* 1 */ 199 | line-height: 1.15; 200 | /* 1 */ 201 | margin: 0; 202 | /* 2 */ 203 | } 204 | 205 | /** 206 | Remove the inheritance of text transform in Edge and Firefox. 207 | 1. Remove the inheritance of text transform in Firefox. 208 | */ 209 | 210 | button, 211 | select { 212 | /* 1 */ 213 | text-transform: none; 214 | } 215 | 216 | /** 217 | Correct the inability to style clickable types in iOS and Safari. 218 | */ 219 | 220 | button, 221 | [type='button'] { 222 | -webkit-appearance: button; 223 | } 224 | 225 | /** 226 | Remove the inner border and padding in Firefox. 227 | */ 228 | 229 | /** 230 | Restore the focus styles unset by the previous rule. 231 | */ 232 | 233 | /** 234 | Remove the additional ':invalid' styles in Firefox. 235 | See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 236 | */ 237 | 238 | /** 239 | Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. 240 | */ 241 | 242 | legend { 243 | padding: 0; 244 | } 245 | 246 | /** 247 | Add the correct vertical alignment in Chrome and Firefox. 248 | */ 249 | 250 | progress { 251 | vertical-align: baseline; 252 | } 253 | 254 | /** 255 | Correct the cursor style of increment and decrement buttons in Safari. 256 | */ 257 | 258 | /** 259 | 1. Correct the odd appearance in Chrome and Safari. 260 | 2. Correct the outline style in Safari. 261 | */ 262 | 263 | /** 264 | Remove the inner padding in Chrome and Safari on macOS. 265 | */ 266 | 267 | /** 268 | 1. Correct the inability to style clickable types in iOS and Safari. 269 | 2. Change font properties to 'inherit' in Safari. 270 | */ 271 | 272 | /* 273 | Interactive 274 | =========== 275 | */ 276 | 277 | /* 278 | Add the correct display in Chrome and Safari. 279 | */ 280 | 281 | summary { 282 | display: list-item; 283 | } 284 | 285 | /** 286 | * Manually forked from SUIT CSS Base: https://github.com/suitcss/base 287 | * A thin layer on top of normalize.css that provides a starting point more 288 | * suitable for web applications. 289 | */ 290 | 291 | /** 292 | * Removes the default spacing and border for appropriate elements. 293 | */ 294 | 295 | blockquote, 296 | dl, 297 | dd, 298 | h1, 299 | h2, 300 | h3, 301 | h4, 302 | h5, 303 | h6, 304 | hr, 305 | figure, 306 | p, 307 | pre { 308 | margin: 0; 309 | } 310 | 311 | button { 312 | background-color: transparent; 313 | background-image: none; 314 | } 315 | 316 | fieldset { 317 | margin: 0; 318 | padding: 0; 319 | } 320 | 321 | ol, 322 | ul { 323 | list-style: none; 324 | margin: 0; 325 | padding: 0; 326 | } 327 | 328 | /** 329 | * Tailwind custom reset styles 330 | */ 331 | 332 | /** 333 | * 1. Use the user's configured `sans` font-family (with Tailwind's default 334 | * sans-serif font stack as a fallback) as a sane default. 335 | * 2. Use Tailwind's default "normal" line-height so the user isn't forced 336 | * to override it to ensure consistency even when using the default theme. 337 | */ 338 | 339 | html { 340 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 341 | /* 1 */ 342 | line-height: 1.5; 343 | /* 2 */ 344 | } 345 | 346 | /** 347 | * Inherit font-family and line-height from `html` so users can set them as 348 | * a class directly on the `html` element. 349 | */ 350 | 351 | body { 352 | font-family: inherit; 353 | line-height: inherit; 354 | } 355 | 356 | /** 357 | * 1. Prevent padding and border from affecting element width. 358 | * 359 | * We used to set this in the html element and inherit from 360 | * the parent element for everything else. This caused issues 361 | * in shadow-dom-enhanced elements like
where the content 362 | * is wrapped by a div with box-sizing set to `content-box`. 363 | * 364 | * https://github.com/mozdevs/cssremedy/issues/4 365 | * 366 | * 367 | * 2. Allow adding a border to an element by just adding a border-width. 368 | * 369 | * By default, the way the browser specifies that an element should have no 370 | * border is by setting it's border-style to `none` in the user-agent 371 | * stylesheet. 372 | * 373 | * In order to easily add borders to elements by just setting the `border-width` 374 | * property, we change the default border-style for all elements to `solid`, and 375 | * use border-width to hide them instead. This way our `border` utilities only 376 | * need to set the `border-width` property instead of the entire `border` 377 | * shorthand, making our border utilities much more straightforward to compose. 378 | * 379 | * https://github.com/tailwindcss/tailwindcss/pull/116 380 | */ 381 | 382 | *, 383 | ::before, 384 | ::after { 385 | box-sizing: border-box; 386 | /* 1 */ 387 | border-width: 0; 388 | /* 2 */ 389 | border-style: solid; 390 | /* 2 */ 391 | border-color: currentColor; 392 | /* 2 */ 393 | } 394 | 395 | /* 396 | * Ensure horizontal rules are visible by default 397 | */ 398 | 399 | hr { 400 | border-top-width: 1px; 401 | } 402 | 403 | /** 404 | * Undo the `border-style: none` reset that Normalize applies to images so that 405 | * our `border-{width}` utilities have the expected effect. 406 | * 407 | * The Normalize reset is unnecessary for us since we default the border-width 408 | * to 0 on all elements. 409 | * 410 | * https://github.com/tailwindcss/tailwindcss/issues/362 411 | */ 412 | 413 | img { 414 | border-style: solid; 415 | } 416 | 417 | textarea { 418 | resize: vertical; 419 | } 420 | 421 | input::-moz-placeholder, textarea::-moz-placeholder { 422 | opacity: 1; 423 | color: #9ca3af; 424 | } 425 | 426 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 427 | opacity: 1; 428 | color: #9ca3af; 429 | } 430 | 431 | input::placeholder, 432 | textarea::placeholder { 433 | opacity: 1; 434 | color: #9ca3af; 435 | } 436 | 437 | button { 438 | cursor: pointer; 439 | } 440 | 441 | table { 442 | border-collapse: collapse; 443 | } 444 | 445 | h1, 446 | h2, 447 | h3, 448 | h4, 449 | h5, 450 | h6 { 451 | font-size: inherit; 452 | font-weight: inherit; 453 | } 454 | 455 | /** 456 | * Reset links to optimize for opt-in styling instead of 457 | * opt-out. 458 | */ 459 | 460 | a { 461 | color: inherit; 462 | text-decoration: inherit; 463 | } 464 | 465 | /** 466 | * Reset form element properties that are easy to forget to 467 | * style explicitly so you don't inadvertently introduce 468 | * styles that deviate from your design system. These styles 469 | * supplement a partial reset that is already applied by 470 | * normalize.css. 471 | */ 472 | 473 | button, 474 | input, 475 | optgroup, 476 | select, 477 | textarea { 478 | padding: 0; 479 | line-height: inherit; 480 | color: inherit; 481 | } 482 | 483 | /** 484 | * Use the configured 'mono' font family for elements that 485 | * are expected to be rendered with a monospace font, falling 486 | * back to the system monospace stack if there is no configured 487 | * 'mono' font family. 488 | */ 489 | 490 | pre, 491 | code, 492 | kbd, 493 | samp { 494 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 495 | } 496 | 497 | /** 498 | * 1. Make replaced elements `display: block` by default as that's 499 | * the behavior you want almost all of the time. Inspired by 500 | * CSS Remedy, with `svg` added as well. 501 | * 502 | * https://github.com/mozdevs/cssremedy/issues/14 503 | * 504 | * 2. Add `vertical-align: middle` to align replaced elements more 505 | * sensibly by default when overriding `display` by adding a 506 | * utility like `inline`. 507 | * 508 | * This can trigger a poorly considered linting error in some 509 | * tools but is included by design. 510 | * 511 | * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 512 | */ 513 | 514 | img, 515 | svg, 516 | video, 517 | canvas, 518 | audio, 519 | iframe, 520 | embed, 521 | object { 522 | display: block; 523 | /* 1 */ 524 | vertical-align: middle; 525 | /* 2 */ 526 | } 527 | 528 | /** 529 | * Constrain images and videos to the parent width and preserve 530 | * their intrinsic aspect ratio. 531 | * 532 | * https://github.com/mozdevs/cssremedy/issues/14 533 | */ 534 | 535 | img, 536 | video { 537 | max-width: 100%; 538 | height: auto; 539 | } 540 | 541 | /** 542 | * Ensure the default browser behavior of the `hidden` attribute. 543 | */ 544 | 545 | [hidden] { 546 | display: none; 547 | } 548 | 549 | *, ::before, ::after{ 550 | --tw-border-opacity: 1; 551 | border-color: rgba(229, 231, 235, var(--tw-border-opacity)); 552 | } 553 | 554 | .container{ 555 | width: 100%; 556 | } 557 | 558 | @media (min-width: 640px){ 559 | .container{ 560 | max-width: 640px; 561 | } 562 | } 563 | 564 | @media (min-width: 768px){ 565 | .container{ 566 | max-width: 768px; 567 | } 568 | } 569 | 570 | @media (min-width: 1024px){ 571 | .container{ 572 | max-width: 1024px; 573 | } 574 | } 575 | 576 | @media (min-width: 1280px){ 577 | .container{ 578 | max-width: 1280px; 579 | } 580 | } 581 | 582 | @media (min-width: 1536px){ 583 | .container{ 584 | max-width: 1536px; 585 | } 586 | } 587 | 588 | .relative{ 589 | position: relative; 590 | } 591 | 592 | .mx-auto{ 593 | margin-left: auto; 594 | margin-right: auto; 595 | } 596 | 597 | .mt-8{ 598 | margin-top: 2rem; 599 | } 600 | 601 | .flex{ 602 | display: flex; 603 | } 604 | 605 | .table{ 606 | display: table; 607 | } 608 | 609 | .hidden{ 610 | display: none; 611 | } 612 | 613 | .h-5{ 614 | height: 1.25rem; 615 | } 616 | 617 | .h-6{ 618 | height: 1.5rem; 619 | } 620 | 621 | .h-8{ 622 | height: 2rem; 623 | } 624 | 625 | .h-20{ 626 | height: 5rem; 627 | } 628 | 629 | .h-full{ 630 | height: 100%; 631 | } 632 | 633 | .w-5{ 634 | width: 1.25rem; 635 | } 636 | 637 | .w-6{ 638 | width: 1.5rem; 639 | } 640 | 641 | .w-8{ 642 | width: 2rem; 643 | } 644 | 645 | .w-20{ 646 | width: 5rem; 647 | } 648 | 649 | .w-2\/6{ 650 | width: 33.333333%; 651 | } 652 | 653 | .w-full{ 654 | width: 100%; 655 | } 656 | 657 | .flex-auto{ 658 | flex: 1 1 auto; 659 | } 660 | 661 | .flex-grow-0{ 662 | flex-grow: 0; 663 | } 664 | 665 | .transform{ 666 | --tw-translate-x: 0; 667 | --tw-translate-y: 0; 668 | --tw-rotate: 0; 669 | --tw-skew-x: 0; 670 | --tw-skew-y: 0; 671 | --tw-scale-x: 1; 672 | --tw-scale-y: 1; 673 | transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 674 | } 675 | 676 | .hover\:-translate-y-1:hover{ 677 | --tw-translate-y: -0.25rem; 678 | } 679 | 680 | @-webkit-keyframes spin{ 681 | to{ 682 | transform: rotate(360deg); 683 | } 684 | } 685 | 686 | @keyframes spin{ 687 | to{ 688 | transform: rotate(360deg); 689 | } 690 | } 691 | 692 | @-webkit-keyframes ping{ 693 | 75%, 100%{ 694 | transform: scale(2); 695 | opacity: 0; 696 | } 697 | } 698 | 699 | @keyframes ping{ 700 | 75%, 100%{ 701 | transform: scale(2); 702 | opacity: 0; 703 | } 704 | } 705 | 706 | @-webkit-keyframes pulse{ 707 | 50%{ 708 | opacity: .5; 709 | } 710 | } 711 | 712 | @keyframes pulse{ 713 | 50%{ 714 | opacity: .5; 715 | } 716 | } 717 | 718 | @-webkit-keyframes bounce{ 719 | 0%, 100%{ 720 | transform: translateY(-25%); 721 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 722 | animation-timing-function: cubic-bezier(0.8,0,1,1); 723 | } 724 | 725 | 50%{ 726 | transform: none; 727 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 728 | animation-timing-function: cubic-bezier(0,0,0.2,1); 729 | } 730 | } 731 | 732 | @keyframes bounce{ 733 | 0%, 100%{ 734 | transform: translateY(-25%); 735 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 736 | animation-timing-function: cubic-bezier(0.8,0,1,1); 737 | } 738 | 739 | 50%{ 740 | transform: none; 741 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 742 | animation-timing-function: cubic-bezier(0,0,0.2,1); 743 | } 744 | } 745 | 746 | .cursor-pointer{ 747 | cursor: pointer; 748 | } 749 | 750 | .flex-col{ 751 | flex-direction: column; 752 | } 753 | 754 | .items-center{ 755 | align-items: center; 756 | } 757 | 758 | .justify-center{ 759 | justify-content: center; 760 | } 761 | 762 | .justify-between{ 763 | justify-content: space-between; 764 | } 765 | 766 | .justify-items-start{ 767 | justify-items: start; 768 | } 769 | 770 | .space-x-4 > :not([hidden]) ~ :not([hidden]){ 771 | --tw-space-x-reverse: 0; 772 | margin-right: calc(1rem * var(--tw-space-x-reverse)); 773 | margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); 774 | } 775 | 776 | .space-x-6 > :not([hidden]) ~ :not([hidden]){ 777 | --tw-space-x-reverse: 0; 778 | margin-right: calc(1.5rem * var(--tw-space-x-reverse)); 779 | margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); 780 | } 781 | 782 | .space-y-3 > :not([hidden]) ~ :not([hidden]){ 783 | --tw-space-y-reverse: 0; 784 | margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); 785 | margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); 786 | } 787 | 788 | .rounded-md{ 789 | border-radius: 0.375rem; 790 | } 791 | 792 | .rounded-full{ 793 | border-radius: 9999px; 794 | } 795 | 796 | .border-4{ 797 | border-width: 3px; 798 | } 799 | 800 | .border{ 801 | border-width: 1px; 802 | } 803 | 804 | .border-b-4{ 805 | border-bottom-width: 3px; 806 | } 807 | 808 | .border-gray-300{ 809 | --tw-border-opacity: 1; 810 | border-color: rgba(209, 213, 219, var(--tw-border-opacity)); 811 | } 812 | 813 | .bg-white{ 814 | --tw-bg-opacity: 1; 815 | background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); 816 | } 817 | 818 | .bg-gray-100{ 819 | --tw-bg-opacity: 1; 820 | background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); 821 | } 822 | 823 | .bg-yellow-400{ 824 | --tw-bg-opacity: 1; 825 | background-color: rgba(251, 191, 36, var(--tw-bg-opacity)); 826 | } 827 | 828 | .hover\:bg-yellow-300:hover{ 829 | --tw-bg-opacity: 1; 830 | background-color: rgba(252, 211, 77, var(--tw-bg-opacity)); 831 | } 832 | 833 | .hover\:bg-blue-100:hover{ 834 | --tw-bg-opacity: 1; 835 | background-color: rgba(219, 234, 254, var(--tw-bg-opacity)); 836 | } 837 | 838 | .object-cover{ 839 | -o-object-fit: cover; 840 | object-fit: cover; 841 | } 842 | 843 | .p-0{ 844 | padding: 0px; 845 | } 846 | 847 | .p-2{ 848 | padding: 0.5rem; 849 | } 850 | 851 | .p-3{ 852 | padding: 0.75rem; 853 | } 854 | 855 | .p-4{ 856 | padding: 1rem; 857 | } 858 | 859 | .p-0\.5{ 860 | padding: 0.125rem; 861 | } 862 | 863 | .px-2{ 864 | padding-left: 0.5rem; 865 | padding-right: 0.5rem; 866 | } 867 | 868 | .px-3{ 869 | padding-left: 0.75rem; 870 | padding-right: 0.75rem; 871 | } 872 | 873 | .px-6{ 874 | padding-left: 1.5rem; 875 | padding-right: 1.5rem; 876 | } 877 | 878 | .px-8{ 879 | padding-left: 2rem; 880 | padding-right: 2rem; 881 | } 882 | 883 | .py-2{ 884 | padding-top: 0.5rem; 885 | padding-bottom: 0.5rem; 886 | } 887 | 888 | .py-3{ 889 | padding-top: 0.75rem; 890 | padding-bottom: 0.75rem; 891 | } 892 | 893 | .py-4{ 894 | padding-top: 1rem; 895 | padding-bottom: 1rem; 896 | } 897 | 898 | .py-6{ 899 | padding-top: 1.5rem; 900 | padding-bottom: 1.5rem; 901 | } 902 | 903 | .py-2\.5{ 904 | padding-top: 0.625rem; 905 | padding-bottom: 0.625rem; 906 | } 907 | 908 | .pr-6{ 909 | padding-right: 1.5rem; 910 | } 911 | 912 | .text-center{ 913 | text-align: center; 914 | } 915 | 916 | .font-firasans{ 917 | font-family: Fira Sans, sans-serif; 918 | } 919 | 920 | .text-sm{ 921 | font-size: 0.875rem; 922 | line-height: 1.25rem; 923 | } 924 | 925 | .text-lg{ 926 | font-size: 1.125rem; 927 | line-height: 1.75rem; 928 | } 929 | 930 | .text-xl{ 931 | font-size: 1.25rem; 932 | line-height: 1.75rem; 933 | } 934 | 935 | .text-2xl{ 936 | font-size: 1.5rem; 937 | line-height: 2rem; 938 | } 939 | 940 | .font-semibold{ 941 | font-weight: 600; 942 | } 943 | 944 | .font-bold{ 945 | font-weight: 700; 946 | } 947 | 948 | .text-gray-400{ 949 | --tw-text-opacity: 1; 950 | color: rgba(156, 163, 175, var(--tw-text-opacity)); 951 | } 952 | 953 | .text-gray-600{ 954 | --tw-text-opacity: 1; 955 | color: rgba(75, 85, 99, var(--tw-text-opacity)); 956 | } 957 | 958 | .text-gray-700{ 959 | --tw-text-opacity: 1; 960 | color: rgba(55, 65, 81, var(--tw-text-opacity)); 961 | } 962 | 963 | .text-gray-800{ 964 | --tw-text-opacity: 1; 965 | color: rgba(31, 41, 55, var(--tw-text-opacity)); 966 | } 967 | 968 | .text-yellow-800{ 969 | --tw-text-opacity: 1; 970 | color: rgba(146, 64, 14, var(--tw-text-opacity)); 971 | } 972 | 973 | .text-blue-900{ 974 | --tw-text-opacity: 1; 975 | color: rgba(30, 58, 138, var(--tw-text-opacity)); 976 | } 977 | 978 | *, ::before, ::after{ 979 | --tw-shadow: 0 0 #0000; 980 | } 981 | 982 | .shadow{ 983 | --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 984 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 985 | } 986 | 987 | .shadow-md{ 988 | --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 989 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 990 | } 991 | 992 | *, ::before, ::after{ 993 | --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); 994 | --tw-ring-offset-width: 0px; 995 | --tw-ring-offset-color: #fff; 996 | --tw-ring-color: rgba(59, 130, 246, 0.5); 997 | --tw-ring-offset-shadow: 0 0 #0000; 998 | --tw-ring-shadow: 0 0 #0000; 999 | } 1000 | 1001 | .transition{ 1002 | transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; 1003 | transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; 1004 | transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; 1005 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 1006 | transition-duration: 150ms; 1007 | } 1008 | 1009 | .duration-75{ 1010 | transition-duration: 75ms; 1011 | } 1012 | 1013 | .ease-linear{ 1014 | transition-timing-function: linear; 1015 | } 1016 | 1017 | .course-container { 1018 | margin-top: 1.5rem; 1019 | display: grid; 1020 | grid-template-columns: repeat(2, minmax(0, 1fr)); 1021 | -moz-column-gap: 2rem; 1022 | column-gap: 2rem; 1023 | row-gap: 1rem; 1024 | padding-left: 0.75rem; 1025 | padding-right: 0.75rem; 1026 | padding-top: 1rem; 1027 | padding-bottom: 1rem; 1028 | } 1029 | 1030 | @media (min-width: 640px){ 1031 | .course-container{ 1032 | padding-left: 2rem; 1033 | padding-right: 2rem; 1034 | } 1035 | } 1036 | 1037 | @media (min-width: 768px){ 1038 | .course-container{ 1039 | grid-template-columns: repeat(3, minmax(0, 1fr)); 1040 | } 1041 | } 1042 | 1043 | @media (min-width: 1024px){ 1044 | .course-container{ 1045 | grid-template-columns: repeat(4, minmax(0, 1fr)); 1046 | } 1047 | } 1048 | 1049 | @media (min-width: 640px){ 1050 | .sm\:absolute{ 1051 | position: absolute; 1052 | } 1053 | 1054 | .sm\:right-0{ 1055 | right: 0px; 1056 | } 1057 | 1058 | .sm\:z-10{ 1059 | z-index: 10; 1060 | } 1061 | 1062 | .sm\:w-2\/5{ 1063 | width: 40%; 1064 | } 1065 | 1066 | .sm\:w-full{ 1067 | width: 100%; 1068 | } 1069 | } 1070 | 1071 | @media (min-width: 768px){ 1072 | .md\:w-4\/5{ 1073 | width: 80%; 1074 | } 1075 | 1076 | .md\:w-3\/12{ 1077 | width: 25%; 1078 | } 1079 | 1080 | .md\:p-6{ 1081 | padding: 1.5rem; 1082 | } 1083 | } 1084 | 1085 | @media (min-width: 1024px){ 1086 | .lg\:flex{ 1087 | display: flex; 1088 | } 1089 | 1090 | .lg\:hidden{ 1091 | display: none; 1092 | } 1093 | 1094 | .lg\:w-2\/3{ 1095 | width: 66.666667%; 1096 | } 1097 | 1098 | .lg\:w-1\/6{ 1099 | width: 16.666667%; 1100 | } 1101 | } 1102 | 1103 | @media (min-width: 1280px){ 1104 | } 1105 | 1106 | @media (min-width: 1536px){ 1107 | } -------------------------------------------------------------------------------- /Sololearn/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sololearn: Learn to Code 9 | 10 | 11 | 12 | 13 | 14 | 15 | 53 | 54 | 55 | 94 | 95 | 96 |
97 | 98 |

What would you like to learn?

99 | 100 | 101 | 102 |
103 | 104 | 105 | 112 | 113 | 114 |
115 |
116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /Sololearn/src/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300;400;500;600;700&display=swap'); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | .course-container { 8 | @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-4 mt-6 px-3 sm:px-8 py-4; 9 | } -------------------------------------------------------------------------------- /WhatsApp/README.md: -------------------------------------------------------------------------------- 1 | ## WhatsApp UI Clone 2 | WhatsApp UI Clones using TailwindCSS ⚡ 3 | 4 | ### **Visit Now 🚀** 5 | 6 | ## Tech Stack : 7 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/jigar-sable/Web-UI-Clones/search?l=html) 8 | ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 9 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/jigar-sable/Web-UI-Clones/search?l=javascript) 10 | ![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white) 11 | ![jquery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) 12 | [![web](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://instagramwebui.netlify.app) 13 | 14 | ## Sneak Peek of Site 🙈 : 15 | ![whatsapp](https://user-images.githubusercontent.com/64949957/130730909-2dbb73fb-9157-41e3-89ac-740237b083b5.PNG) 16 | 17 | 18 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) 19 | 20 | 21 | -------------------------------------------------------------------------------- /WhatsApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "whatsapp-web-ui", 3 | "version": "1.0.0", 4 | "description": "UI Clone of WhatsApp Web", 5 | "main": "index.js", 6 | "scripts": { 7 | "build:css": "tailwind build -i src/style.css -o public/assets/style.css", 8 | "prod": "NODE_ENV=production tailwind build -i src/style.css -o public/assets/style.css" 9 | }, 10 | "author": "Jigar", 11 | "license": "ISC", 12 | "dependencies": { 13 | "tailwindcss": "^2.2.7", 14 | "win-node-env": "^0.4.0" 15 | }, 16 | "devDependencies": { 17 | "tailwindcss-pseudo-elements": "^2.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /WhatsApp/public/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/WhatsApp/public/assets/images/favicon.ico -------------------------------------------------------------------------------- /WhatsApp/public/assets/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/WhatsApp/public/assets/images/profile.jpg -------------------------------------------------------------------------------- /WhatsApp/public/assets/script.js: -------------------------------------------------------------------------------- 1 | const navMenuBtn = document.getElementById('menuBtn'); 2 | const navMenuItems = document.getElementById('menuItems'); 3 | 4 | navMenuBtn.addEventListener('click', () => { 5 | navMenuItems.classList.toggle('hidden'); 6 | }) 7 | 8 | const navMenuBtn2 = document.getElementById('menuBtn2'); 9 | const navMenuItems2 = document.getElementById('menuItems2'); 10 | 11 | navMenuBtn2.addEventListener('click', () => { 12 | navMenuItems2.classList.toggle('hidden'); 13 | }) 14 | 15 | function scrollDown() { 16 | $('#chats-container').scrollTop($('#chats-container')[0].scrollHeight); 17 | } 18 | scrollDown(); 19 | 20 | // chat feature 21 | const chatBoxInput = document.getElementById('chatBoxInput'); 22 | const msgContainer = document.getElementById('msgContainer'); 23 | 24 | chatBoxInput.addEventListener("keyup", function(e) { 25 | if (e.keyCode === 13) { 26 | e.preventDefault(); 27 | if (chatBoxInput.value == ''){ 28 | alert("Can't send empty message!") 29 | } else { 30 | sendMsg(); 31 | } 32 | }}); 33 | 34 | function sendMsg() { 35 | const message = chatBoxInput.value; 36 | const today = new Date(); 37 | const time = today.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }); 38 | let newMsg = `
39 |

${message} 

40 | ${time} 41 | 43 |
`; 44 | msgContainer.innerHTML+=newMsg; 45 | chatBoxInput.value=''; 46 | scrollDown(); 47 | } -------------------------------------------------------------------------------- /WhatsApp/src/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); 3 | 4 | 5 | @tailwind base; 6 | @tailwind components; 7 | @tailwind utilities; 8 | 9 | .left-msg { 10 | @apply relative clear-both p-2 px-3 mt-0.5 float-left bg-leftMsgBg rounded-lg text-white shadow; 11 | } 12 | .right-msg { 13 | @apply relative clear-both p-2 px-3 mt-0.5 float-right bg-rightMsgBg rounded-lg shadow; 14 | } 15 | 16 | #contact-list::-webkit-scrollbar{ 17 | width: .3rem; 18 | } 19 | #contact-list::-webkit-scrollbar-track{ 20 | background: rgba(0, 0, 0, .2); 21 | 22 | } 23 | #contact-list::-webkit-scrollbar-thumb{ 24 | background: rgba(255, 255, 255, .16); 25 | } 26 | 27 | #chats-container::-webkit-scrollbar{ 28 | width: .4rem; 29 | } 30 | #chats-container::-webkit-scrollbar-track{ 31 | background: transparent; 32 | } 33 | #chats-container::-webkit-scrollbar-thumb{ 34 | background: rgba(255, 255, 255, .2); 35 | } 36 | #contact-list-item:hover .arrow { 37 | display: block; 38 | } -------------------------------------------------------------------------------- /YouTube/README.md: -------------------------------------------------------------------------------- 1 | ## YouTube UI Clone 2 | YouTube UI Clones using TailwindCSS ⚡ 3 | 4 | ### **Visit Now 🚀** 5 | 6 | ## Tech Stack : 7 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/jigar-sable/Web-UI-Clones/search?l=html) 8 | ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 9 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/jigar-sable/Web-UI-Clones/search?l=javascript) 10 | ![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white) 11 | [![web](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://youtubewebui.netlify.app) 12 | 13 | ## Sneak Peek of Site 🙈 : 14 | ![yt](https://user-images.githubusercontent.com/64949957/130904281-073b7a9b-2a88-4e29-a5d2-551f97465f33.PNG) 15 | 16 | 17 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) 18 | 19 | 20 | -------------------------------------------------------------------------------- /YouTube/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "youtube-ui-clone", 3 | "version": "1.0.0", 4 | "description": "YouTube Web UI Clone", 5 | "main": "index.js", 6 | "scripts": { 7 | "build:css": "tailwind build -i src/style.css -o public/assets/style.css", 8 | "prod": "NODE_ENV=production tailwind build -i src/style.css -o public/assets/style.css" 9 | }, 10 | "author": "Jigar Sable", 11 | "license": "ISC", 12 | "dependencies": { 13 | "tailwindcss": "^2.2.7", 14 | "win-node-env": "^0.4.0" 15 | }, 16 | "devDependencies": { 17 | "tailwind-scrollbar": "^1.3.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /YouTube/public/assets/images/favicon1.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/YouTube/public/assets/images/favicon1.ico -------------------------------------------------------------------------------- /YouTube/public/assets/images/ganesh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/YouTube/public/assets/images/ganesh.jpg -------------------------------------------------------------------------------- /YouTube/public/assets/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/YouTube/public/assets/images/hero.png -------------------------------------------------------------------------------- /YouTube/public/assets/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/web-ui-clones/565c70e9727babdafb715e8a87625c756bf7f5de/YouTube/public/assets/images/profile.jpg -------------------------------------------------------------------------------- /YouTube/public/assets/script.js: -------------------------------------------------------------------------------- 1 | let videosContainer = document.getElementById('videos-container'); 2 | let videoCard = ""; 3 | 4 | fetch("assets/videos.json") 5 | .then(response => response.json()) 6 | .then(videos => { 7 | // console.log(videos); 8 | 9 | videos.forEach(video => { 10 | videoCard += ` 11 |
12 | 13 | 14 |
15 | 16 | ${video.duration} 17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 | ${video.desc.title} 27 | more_vert 28 |
29 |
30 | 31 | 32 |
33 | ${video.desc.channelName} 34 |
35 | ${video.desc.views} views 36 | • ${video.desc.published} ago 37 |
38 |
39 |
40 |
` 41 | }); 42 | videosContainer.innerHTML = videoCard; 43 | }) -------------------------------------------------------------------------------- /YouTube/public/assets/videos.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "thumbnail": "assets/images/ganesh.jpg", 4 | "videoURL": "#", 5 | "duration": "16:25", 6 | "desc": { 7 | "channelLogo": "assets/images/hero.png", 8 | "channelName": "Jhon Doe", 9 | "channelURL": "#", 10 | "title": "This is YouTube Web UI Clone using TailwindCSS", 11 | "views": "51k", 12 | "published": "1 week" 13 | } 14 | }, 15 | { 16 | "thumbnail": "https://cdn.pixabay.com/photo/2021/05/22/10/11/fishing-boat-6273132_960_720.jpg", 17 | "videoURL": "#", 18 | "duration": "16:25", 19 | "desc": { 20 | "channelLogo": "assets/images/hero.png", 21 | "channelName": "Jhon Doe", 22 | "channelURL": "#", 23 | "title": "This is YouTube Web UI Clone using TailwindCSS", 24 | "views": "51k", 25 | "published": "1 week" 26 | } 27 | }, 28 | { 29 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/14/14/51/alps-6545561_960_720.jpg", 30 | "videoURL": "#", 31 | "duration": "16:25", 32 | "desc": { 33 | "channelLogo": "assets/images/hero.png", 34 | "channelName": "Jhon Doe", 35 | "channelURL": "#", 36 | "title": "This is YouTube Web UI Clone using TailwindCSS", 37 | "views": "51k", 38 | "published": "1 week" 39 | } 40 | }, 41 | { 42 | "thumbnail": "https://cdn.pixabay.com/photo/2018/01/24/17/33/light-bulb-3104355_960_720.jpg", 43 | "videoURL": "#", 44 | "duration": "16:25", 45 | "desc": { 46 | "channelLogo": "assets/images/hero.png", 47 | "channelName": "Jhon Doe", 48 | "channelURL": "#", 49 | "title": "This is YouTube Web UI Clone using TailwindCSS", 50 | "views": "51k", 51 | "published": "1 week" 52 | } 53 | }, 54 | { 55 | "thumbnail": "https://cdn.pixabay.com/photo/2020/05/18/16/17/social-media-5187243_960_720.png", 56 | "videoURL": "#", 57 | "duration": "16:25", 58 | "desc": { 59 | "channelLogo": "assets/images/hero.png", 60 | "channelName": "Jhon Doe", 61 | "channelURL": "#", 62 | "title": "This is YouTube Web UI Clone using TailwindCSS", 63 | "views": "51k", 64 | "published": "1 week" 65 | } 66 | }, 67 | { 68 | "thumbnail": "https://cdn.pixabay.com/photo/2016/03/09/09/22/meeting-1245776_960_720.jpg", 69 | "videoURL": "#", 70 | "duration": "16:25", 71 | "desc": { 72 | "channelLogo": "assets/images/hero.png", 73 | "channelName": "Jhon Doe", 74 | "channelURL": "#", 75 | "title": "This is YouTube Web UI Clone using TailwindCSS", 76 | "views": "51k", 77 | "published": "1 week" 78 | } 79 | }, 80 | { 81 | "thumbnail": "https://cdn.pixabay.com/photo/2021/07/31/18/25/flower-6512726_960_720.jpg", 82 | "videoURL": "#", 83 | "duration": "16:25", 84 | "desc": { 85 | "channelLogo": "assets/images/hero.png", 86 | "channelName": "Jhon Doe", 87 | "channelURL": "#", 88 | "title": "This is YouTube Web UI Clone using TailwindCSS", 89 | "views": "51k", 90 | "published": "1 week" 91 | } 92 | }, 93 | { 94 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/15/07/35/ferris-wheel-6547089_960_720.jpg", 95 | "videoURL": "#", 96 | "duration": "16:25", 97 | "desc": { 98 | "channelLogo": "assets/images/hero.png", 99 | "channelName": "Jhon Doe", 100 | "channelURL": "#", 101 | "title": "This is YouTube Web UI Clone using TailwindCSS", 102 | "views": "51k", 103 | "published": "1 week" 104 | } 105 | }, 106 | { 107 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/06/18/51/lake-6526995_960_720.jpg", 108 | "videoURL": "#", 109 | "duration": "16:25", 110 | "desc": { 111 | "channelLogo": "assets/images/hero.png", 112 | "channelName": "Jhon Doe", 113 | "channelURL": "#", 114 | "title": "This is YouTube Web UI Clone using TailwindCSS", 115 | "views": "51k", 116 | "published": "1 week" 117 | } 118 | }, 119 | { 120 | "thumbnail": "https://cdn.pixabay.com/photo/2021/07/16/09/54/travel-6470467_960_720.jpg", 121 | "videoURL": "#", 122 | "duration": "16:25", 123 | "desc": { 124 | "channelLogo": "assets/images/hero.png", 125 | "channelName": "Jhon Doe", 126 | "channelURL": "#", 127 | "title": "This is YouTube Web UI Clone using TailwindCSS", 128 | "views": "51k", 129 | "published": "1 week" 130 | } 131 | }, 132 | { 133 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/12/20/04/barn-6541665_960_720.jpg", 134 | "videoURL": "#", 135 | "duration": "16:25", 136 | "desc": { 137 | "channelLogo": "assets/images/hero.png", 138 | "channelName": "Jhon Doe", 139 | "channelURL": "#", 140 | "title": "This is YouTube Web UI Clone using TailwindCSS", 141 | "views": "51k", 142 | "published": "1 week" 143 | } 144 | }, 145 | { 146 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/16/15/18/beach-6550551_960_720.jpg", 147 | "videoURL": "#", 148 | "duration": "16:25", 149 | "desc": { 150 | "channelLogo": "assets/images/hero.png", 151 | "channelName": "Jhon Doe", 152 | "channelURL": "#", 153 | "title": "This is YouTube Web UI Clone using TailwindCSS", 154 | "views": "51k", 155 | "published": "1 week" 156 | } 157 | }, 158 | { 159 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/09/00/05/castle-6532247_960_720.jpg", 160 | "videoURL": "#", 161 | "duration": "16:25", 162 | "desc": { 163 | "channelLogo": "assets/images/hero.png", 164 | "channelName": "Jhon Doe", 165 | "channelURL": "#", 166 | "title": "This is YouTube Web UI Clone using TailwindCSS", 167 | "views": "51k", 168 | "published": "1 week" 169 | } 170 | }, 171 | { 172 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/17/10/32/city-6552638_960_720.jpg", 173 | "videoURL": "#", 174 | "duration": "16:25", 175 | "desc": { 176 | "channelLogo": "assets/images/hero.png", 177 | "channelName": "Jhon Doe", 178 | "channelURL": "#", 179 | "title": "This is YouTube Web UI Clone using TailwindCSS", 180 | "views": "51k", 181 | "published": "1 week" 182 | } 183 | }, 184 | { 185 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/09/17/17/half-timbered-houses-6533888_960_720.jpg", 186 | "videoURL": "#", 187 | "duration": "16:25", 188 | "desc": { 189 | "channelLogo": "assets/images/hero.png", 190 | "channelName": "Jhon Doe", 191 | "channelURL": "#", 192 | "title": "This is YouTube Web UI Clone using TailwindCSS", 193 | "views": "51k", 194 | "published": "1 week" 195 | } 196 | }, 197 | { 198 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/19/17/51/italy-6349105_960_720.jpg", 199 | "videoURL": "#", 200 | "duration": "16:25", 201 | "desc": { 202 | "channelLogo": "assets/images/hero.png", 203 | "channelName": "Jhon Doe", 204 | "channelURL": "#", 205 | "title": "This is YouTube Web UI Clone using TailwindCSS", 206 | "views": "51k", 207 | "published": "1 week" 208 | } 209 | }, 210 | { 211 | "thumbnail": "https://cdn.pixabay.com/photo/2020/10/02/21/06/dome-5622133_960_720.jpg", 212 | "videoURL": "#", 213 | "duration": "16:25", 214 | "desc": { 215 | "channelLogo": "assets/images/hero.png", 216 | "channelName": "Jhon Doe", 217 | "channelURL": "#", 218 | "title": "This is YouTube Web UI Clone using TailwindCSS", 219 | "views": "51k", 220 | "published": "1 week" 221 | } 222 | }, 223 | { 224 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/16/09/28/lychee-6549902_960_720.jpg", 225 | "videoURL": "#", 226 | "duration": "16:25", 227 | "desc": { 228 | "channelLogo": "assets/images/hero.png", 229 | "channelName": "Jhon Doe", 230 | "channelURL": "#", 231 | "title": "This is YouTube Web UI Clone using TailwindCSS", 232 | "views": "51k", 233 | "published": "1 week" 234 | } 235 | }, 236 | { 237 | "thumbnail": "https://cdn.pixabay.com/photo/2020/07/08/04/12/work-5382501_960_720.jpg", 238 | "videoURL": "#", 239 | "duration": "16:25", 240 | "desc": { 241 | "channelLogo": "assets/images/hero.png", 242 | "channelName": "Jhon Doe", 243 | "channelURL": "#", 244 | "title": "This is YouTube Web UI Clone using TailwindCSS", 245 | "views": "51k", 246 | "published": "1 week" 247 | } 248 | }, 249 | { 250 | "thumbnail": "https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_960_720.jpg", 251 | "videoURL": "#", 252 | "duration": "16:25", 253 | "desc": { 254 | "channelLogo": "assets/images/hero.png", 255 | "channelName": "Jhon Doe", 256 | "channelURL": "#", 257 | "title": "This is YouTube Web UI Clone using TailwindCSS", 258 | "views": "51k", 259 | "published": "1 week" 260 | } 261 | }, 262 | { 263 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/01/21/06/shwezigon-pagoda-6515356_960_720.jpg", 264 | "videoURL": "#", 265 | "duration": "16:25", 266 | "desc": { 267 | "channelLogo": "assets/images/hero.png", 268 | "channelName": "Jhon Doe", 269 | "channelURL": "#", 270 | "title": "This is YouTube Web UI Clone using TailwindCSS", 271 | "views": "51k", 272 | "published": "1 week" 273 | } 274 | }, 275 | { 276 | "thumbnail": "https://cdn.pixabay.com/photo/2021/08/06/18/49/czech-republic-6526993_960_720.jpg", 277 | "videoURL": "#", 278 | "duration": "16:25", 279 | "desc": { 280 | "channelLogo": "assets/images/hero.png", 281 | "channelName": "Jhon Doe", 282 | "channelURL": "#", 283 | "title": "This is YouTube Web UI Clone using TailwindCSS", 284 | "views": "51k", 285 | "published": "1 week" 286 | } 287 | }, 288 | { 289 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 290 | "videoURL": "#", 291 | "duration": "16:25", 292 | "desc": { 293 | "channelLogo": "assets/images/hero.png", 294 | "channelName": "Jhon Doe", 295 | "channelURL": "#", 296 | "title": "This is YouTube Web UI Clone using TailwindCSS", 297 | "views": "51k", 298 | "published": "1 week" 299 | } 300 | }, 301 | { 302 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 303 | "videoURL": "#", 304 | "duration": "16:25", 305 | "desc": { 306 | "channelLogo": "assets/images/hero.png", 307 | "channelName": "Jhon Doe", 308 | "channelURL": "#", 309 | "title": "This is YouTube Web UI Clone using TailwindCSS", 310 | "views": "51k", 311 | "published": "1 week" 312 | } 313 | }, 314 | { 315 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 316 | "videoURL": "#", 317 | "duration": "16:25", 318 | "desc": { 319 | "channelLogo": "assets/images/hero.png", 320 | "channelName": "Jhon Doe", 321 | "channelURL": "#", 322 | "title": "This is YouTube Web UI Clone using TailwindCSS", 323 | "views": "51k", 324 | "published": "1 week" 325 | } 326 | }, 327 | { 328 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 329 | "videoURL": "#", 330 | "duration": "16:25", 331 | "desc": { 332 | "channelLogo": "assets/images/hero.png", 333 | "channelName": "Jhon Doe", 334 | "channelURL": "#", 335 | "title": "This is YouTube Web UI Clone using TailwindCSS", 336 | "views": "51k", 337 | "published": "1 week" 338 | } 339 | }, 340 | { 341 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 342 | "videoURL": "#", 343 | "duration": "16:25", 344 | "desc": { 345 | "channelLogo": "assets/images/hero.png", 346 | "channelName": "Jhon Doe", 347 | "channelURL": "#", 348 | "title": "This is YouTube Web UI Clone using TailwindCSS", 349 | "views": "51k", 350 | "published": "1 week" 351 | } 352 | }, 353 | { 354 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 355 | "videoURL": "#", 356 | "duration": "16:25", 357 | "desc": { 358 | "channelLogo": "assets/images/hero.png", 359 | "channelName": "Jhon Doe", 360 | "channelURL": "#", 361 | "title": "This is YouTube Web UI Clone using TailwindCSS", 362 | "views": "51k", 363 | "published": "1 week" 364 | } 365 | }, 366 | { 367 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 368 | "videoURL": "#", 369 | "duration": "16:25", 370 | "desc": { 371 | "channelLogo": "assets/images/hero.png", 372 | "channelName": "Jhon Doe", 373 | "channelURL": "#", 374 | "title": "This is YouTube Web UI Clone using TailwindCSS", 375 | "views": "51k", 376 | "published": "1 week" 377 | } 378 | }, 379 | { 380 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 381 | "videoURL": "#", 382 | "duration": "16:25", 383 | "desc": { 384 | "channelLogo": "assets/images/hero.png", 385 | "channelName": "Jhon Doe", 386 | "channelURL": "#", 387 | "title": "This is YouTube Web UI Clone using TailwindCSS", 388 | "views": "51k", 389 | "published": "1 week" 390 | } 391 | }, 392 | { 393 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 394 | "videoURL": "#", 395 | "duration": "16:25", 396 | "desc": { 397 | "channelLogo": "assets/images/hero.png", 398 | "channelName": "Jhon Doe", 399 | "channelURL": "#", 400 | "title": "This is YouTube Web UI Clone using TailwindCSS", 401 | "views": "51k", 402 | "published": "1 week" 403 | } 404 | }, 405 | { 406 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 407 | "videoURL": "#", 408 | "duration": "16:25", 409 | "desc": { 410 | "channelLogo": "assets/images/hero.png", 411 | "channelName": "Jhon Doe", 412 | "channelURL": "#", 413 | "title": "This is YouTube Web UI Clone using TailwindCSS", 414 | "views": "51k", 415 | "published": "1 week" 416 | } 417 | }, 418 | { 419 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 420 | "videoURL": "#", 421 | "duration": "16:25", 422 | "desc": { 423 | "channelLogo": "assets/images/hero.png", 424 | "channelName": "Jhon Doe", 425 | "channelURL": "#", 426 | "title": "This is YouTube Web UI Clone using TailwindCSS", 427 | "views": "51k", 428 | "published": "1 week" 429 | } 430 | }, 431 | { 432 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 433 | "videoURL": "#", 434 | "duration": "16:25", 435 | "desc": { 436 | "channelLogo": "assets/images/hero.png", 437 | "channelName": "Jhon Doe", 438 | "channelURL": "#", 439 | "title": "This is YouTube Web UI Clone using TailwindCSS", 440 | "views": "51k", 441 | "published": "1 week" 442 | } 443 | }, 444 | { 445 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 446 | "videoURL": "#", 447 | "duration": "16:25", 448 | "desc": { 449 | "channelLogo": "assets/images/hero.png", 450 | "channelName": "Jhon Doe", 451 | "channelURL": "#", 452 | "title": "This is YouTube Web UI Clone using TailwindCSS", 453 | "views": "51k", 454 | "published": "1 week" 455 | } 456 | }, 457 | { 458 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 459 | "videoURL": "#", 460 | "duration": "16:25", 461 | "desc": { 462 | "channelLogo": "assets/images/hero.png", 463 | "channelName": "Jhon Doe", 464 | "channelURL": "#", 465 | "title": "This is YouTube Web UI Clone using TailwindCSS", 466 | "views": "51k", 467 | "published": "1 week" 468 | } 469 | }, 470 | { 471 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 472 | "videoURL": "#", 473 | "duration": "16:25", 474 | "desc": { 475 | "channelLogo": "assets/images/hero.png", 476 | "channelName": "Jhon Doe", 477 | "channelURL": "#", 478 | "title": "This is YouTube Web UI Clone using TailwindCSS", 479 | "views": "51k", 480 | "published": "1 week" 481 | } 482 | }, 483 | { 484 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 485 | "videoURL": "#", 486 | "duration": "16:25", 487 | "desc": { 488 | "channelLogo": "assets/images/hero.png", 489 | "channelName": "Jhon Doe", 490 | "channelURL": "#", 491 | "title": "This is YouTube Web UI Clone using TailwindCSS", 492 | "views": "51k", 493 | "published": "1 week" 494 | } 495 | }, 496 | { 497 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 498 | "videoURL": "#", 499 | "duration": "16:25", 500 | "desc": { 501 | "channelLogo": "assets/images/hero.png", 502 | "channelName": "Jhon Doe", 503 | "channelURL": "#", 504 | "title": "This is YouTube Web UI Clone using TailwindCSS", 505 | "views": "51k", 506 | "published": "1 week" 507 | } 508 | }, 509 | { 510 | "thumbnail": "https://cdn.pixabay.com/photo/2021/06/27/03/06/supreme-administrative-court-6367607_960_720.jpg", 511 | "videoURL": "#", 512 | "duration": "16:25", 513 | "desc": { 514 | "channelLogo": "assets/images/hero.png", 515 | "channelName": "Jhon Doe", 516 | "channelURL": "#", 517 | "title": "This is YouTube Web UI Clone using TailwindCSS", 518 | "views": "51k", 519 | "published": "1 week" 520 | } 521 | } 522 | ] -------------------------------------------------------------------------------- /YouTube/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | YouTube 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 51 | 52 | 53 | 54 |
55 | 56 | 209 | 210 | 211 | 212 | 213 | 214 | 231 | 232 | 233 | 258 | 259 | 283 | 284 | 285 | 286 | 287 | 288 |
289 | 290 | 291 |
292 | 293 | 294 | All 295 | CSS 296 | Tailwind 297 | HTML 298 | Programs 299 | Design 300 | Website 301 | ReactJS 302 | UI 303 | Android 304 | Jetpack 305 | Bootstrap 306 | JavaScript 307 | PHP 308 | Git 309 | SQL 310 | React 311 | Flutter 312 | Tech 313 | Java 314 |
315 | 316 | 317 |
318 | 319 |
320 | 321 | 322 |
323 | 324 | 38:38 325 |
326 | 327 | 328 |
329 | 330 |
331 | 332 | 333 |
334 | Lorem ipsum dolor sit amet consectetur adipisicing. 335 | more_vert 336 |
337 |
338 | 339 | 340 |
341 | Jhon Doe 342 |
343 | 74K views 344 | • 1 month ago 345 |
346 |
347 |
348 |
349 |
350 | 351 |
352 |
353 | 354 | 355 | 356 | -------------------------------------------------------------------------------- /YouTube/src/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | .body { 8 | @apply font-roboto scrollbar-thin scrollbar-thumb-gray-400 hover:scrollbar-thumb-gray-500 scrollbar-thumb-rounded-full scrollbar-track-mainBg bg-topNavBg; 9 | } 10 | .sidebar { 11 | @apply hidden fixed w-60 bg-sideBarBg h-full lg:flex flex-col mt-12 pb-16 pr-4 pt-2 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-thumb-rounded-full scrollbar-track-sideBarBg; 12 | } 13 | .tags-container { 14 | @apply relative sticky top-14 flex flex-auto items-center space-x-3 px-5 py-2.5 border-t border-b border-sideBarHoverBg bg-topNavBg bg-opacity-95 z-20 overflow-x-scroll overflow-y-hidden scrollbar-none; 15 | } 16 | .videos-container { 17 | @apply grid grid-cols-1 gap-y-6 p-2 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6 sm:p-4 md:grid-cols-3 md:gap-x-2 md:gap-y-6 md:p-4 lg:grid-cols-3 lg:gap-x-2 lg:gap-y-6 lg:p-4 xl:grid-cols-4 xl:gap-x-4 xl:gap-y-10 xl:p-6 h-full bg-mainBg mt-14 sm:mt-12; 18 | } 19 | 20 | .material-icons.md-18 { font-size: 18px; } 21 | .material-icons.md-21 { font-size: 21px; } 22 | .material-icons.md-24 { font-size: 24px; } 23 | .material-icons.md-36 { font-size: 36px; } 24 | .material-icons.md-48 { font-size: 48px; } 25 | #sideBar { 26 | overflow: hidden; 27 | } 28 | #sideBar:hover { 29 | overflow-y: auto; 30 | } --------------------------------------------------------------------------------