File Transfer Interface - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>File Transfer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/4.7.0/css/font awesome.min.css"> <style> body { font family: Arial, sans serif; margin: 0; padding: 0; background color: #f9f9f9; display: flex; flex direction: column; align items: center; } .header { display: flex; justify content: space between; align items: center; background color: white; padding: 20px; box shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); width: 100%; } .header img { height: 40px; } .header nav { display: flex; gap: 15px; } .header nav a { text decoration: none; color: #000; font size: 16px; } .header .auth buttons a { padding: 8px 20px; border: 1px solid #007bff; border radius: 5px; color: #007bff; text decoration: none; margin left: 10px; } .header .auth buttons a:first child { background color: #007bff; color: white; } .main container { display: flex; justify content: center; align items: center; width: 100%; max width: 7000px; margin top: 30px; } .side image { width: 20%; text align: center; } .side image img { max width: 100%; border radius: 10px; box shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } .container_form { flex grow: 1; max width: 60%; margin: 0 20px; padding: 40px; background color: white; box shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border radius: 9px; display: flex; flex direction: column; align items: center; animation: lammo 1s ease in out; } .container_form h1 { font size: 28px; margin bottom: 10px; text align: center; } .container_form p { color: #666; font size: 16px; text align: center; } .transfer options { display: flex; justify content: center; margin bottom: 20px; gap: 10px; } .transfer options .option { padding: 10px 20px; border bottom: 2px solid transparent; cursor: pointer; color: #007bff; font weight: bold; display: flex; align items: center; transition: border color 0.3s; } .transfer options .option.active { border bottom: 2px solid #007bff; } form.active { display: flex; flex direction: column; gap: 15px; } form input, form textarea, form button { width: 100%; padding: 10px; font size: 16px; border: 1px solid #ccc; border radius: 5px; } form textarea { height: 100px; resize: none; } form button { background color: #007bff; color: white; border: none; cursor: pointer; } .icon { margin right: 8px; } @keyframes lammo { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body> <header class="header"> <img src="https://w7.pngwing.com/pngs/56/376/png transparent file sharing computer icons file transfer protocol world wide web text logo sharing.png" alt="FileTransfer Logo"> <nav> <a href="/infor">Solutions</a> <a href="/feature">Features</a> <a href="/sent files">File manager</a> <a href="/help">Help</a> </nav> <div class="auth buttons"> <a href="/download">Download</a> </div> </header> <div class="main container"> <div class="container_img" style="display: flex;justify content: flex end;"> <img src="https://www.filemail.com/images/homepage/send large files.svg" alt=""> </div> <div class="container_form"> <h1>Send Large Files Free Fast Secure File Transfer</h1> <p>Share large files up to 5 GB free using email or a secure link</p> <div class="transfer options"> <div class="option active" id="email option" onclick="switchForm('email')"> <span class="icon">📧</span> Send as email </div> </div> <! Email Form > <form id="email form" action="/upload" method="POST" enctype="multipart/form data"> <input type="email" name="to" placeholder="To (email)" required> <input type="email" name="from" placeholder="From (email)" required> <input type="text" name="subject" placeholder="Subject"> <input type="file" name="file" required> <button type="submit">Send Email</button> </form> </div> <div class="container_img"> <img src="https://www.filemail.com/images/homepage/send big files.svg" alt=""> </div> </body> </html>
