Description:-

Hello everyone! In this video, you are going to learn "How to create Drag and drop upload form stylized ".

Let's see!

Result -

Drag and drop - Codexbaba

You Might Also Like ➝

• Authentic Weather Loader - Using HTML & CSS

• DROPMORPHISM UI DESIGN - Using HTML & CSS

• Profile card hover effect - Using HTML & CSS

• About us page with pop effect - Using HTML & CSS

• Social Media Button Hover Effect - Using Html & CSS 

• Login in Page - Using HTML & CSS

• CardHover -Using HTML & CSS

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Drag and drop upload form stylized 

HTML 

<form action="upload.php" method="POST"> <input type="file" multiple> <p>Drag your files here or click in this area.</p> <button type="submit">Upload</button> </form>

CSS

body{ background: rgba(0,0,0,0.9); } form{ position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -250px; width: 500px; height: 200px; border: 4px dashed #fff; } form p{ width: 100%; height: 100%; text-align: center; line-height: 170px; color: #ffffff; font-family: Arial; } form input{ position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; } form button{ margin: 0; color: #fff; background: #16a085; border: none; width: 508px; height: 35px; margin-top: -20px; margin-left: -4px; border-radius: 4px; border-bottom: 4px solid #117A60; transition: all .2s ease; outline: none; } form button:hover{ background: #149174; color: #0C5645; } form button:active{ border:0; }

Javascript

$(document).ready(function(){ $('form input').change(function () { $('form p').text(this.files.length + " file(s) selected"); }); });

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Follow us

Telegram

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

full-width

You Might Also Like ➝

• Authentic Weather Loader - Using HTML & CSS

• DROPMORPHISM UI DESIGN - Using HTML & CSS

• Profile card hover effect - Using HTML & CSS

• About us page with pop effect - Using HTML & CSS

• Social Media Button Hover Effect - Using Html & CSS 

• Login in Page - Using HTML & CSS

Thanks for reading our article.