HTML
CSS
JS
Run
Browse files
File name
x
body{ font-family: 'Roboto', sans-serif; } .file-upload { max-width: 300px; background-color: #f8fafd; border: 2px dashed rgba(231,234,243,.7); padding: 60px; border-radius: 12px; margin: 60px auto; } .file-upload .input-group{ text-align: center; } .file-upload .input-group input[type="file"]{ display: none; } .file-upload .input-group .browse-btn{ background-color: #fff; border: 1px solid rgba(231,234,243,.7); display: inline-block; padding: 12px 25px; border-radius: 8px; cursor: pointer; margin-top: 15px; transition: .5s; } .file-upload .input-group .browse-btn:hover{ padding: 12px 35px; background-color: rgba(231,234,243,.7); } .file-upload .preview-image{ position: relative; background-color: #fff; border-radius: 10px; padding: 20px 30px 20px 20px; box-shadow: 0 0.375rem 0.75rem rgba(140,152,164,.075); margin-top: 25px; gap: 12px; align-items: center; display: none; } .file-upload .preview-image .img{ display: inline-flex; min-width: 50px; min-height: 50px; max-width: 50px; max-height: 50px; background: #f8fafd; border-radius: 6px; overflow: hidden; } .file-upload .preview-image .img img{ width: 100%; } .file-upload .preview-image .img-details{ width: calc(100% - 60px); } .file-upload .preview-image .file-progress-bar{ background: #00c9a7; width: 100%; height: 5px; border-radius: 20px; margin-top: 10px; } .file-upload .preview-image .img-details h6{ margin: 0px 0px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-upload .preview-image .img-details .btn-delete{ position: absolute; right: 8px; top: 8px; border: unset; background: unset; cursor: pointer; }
Press Ctrl+Space Key for Auto complete and Intelli Sense