Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html><html lang='en' dir='ltr'> <head> <meta charset='utf-8'> <title>Volt Box - Gaming Community</title> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js' charset='utf-8'></script> <style>*{ margin: 0; padding: 0; text-decoration: none; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; box-sizing: border-box;}body{ min-height: 100vh; background-color: #4A4A4A;}body, html { height: 100%;}/* The hero image */.hero-image { /* Use 'linear-gradient' to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../resources/img/PS4DualShock.jpg'); /* Set a specific height */ height: 50%; /* Position and center the image to scale nicely on all screens */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; filter: blur(2px);}/* Place text in the middle of the image */.hero-text { text-align: center; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); color: white; filter: none;}.hero-text h1 { font-size: 50px; padding-bottom: 20px; filter: none;}.hero-text button{ display: block; width: 100%; height: 50px; border: none; background: linear-gradient(120deg,#36bcf1,#156dd1,#176bca); background-size: 200%; color: #fff; font-size: 20px; font: 'Roboto', 'Arial', sans-serif; outline: none; cursor: pointer; transition: .5s;}.hero-text button:hover{ background-position: right;}/* Navbar *//* Style the navbar */#navbar { overflow: hidden; background-color: #333; max-height: 73px;}.navlogo img { max-width: 60px; max-height: 60px; margin-top: -20px; margin-left: 40px;}.navdivider { width: 2px; height: 40px; background-color: #ffffff; margin-top: -10px; margin-left: 10px; margin-right: 10px;}/* Navbar links */#navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px; text-decoration: none; margin-top: 15px;}.login-div{ display: block; width: 80px; height: 40px; border: none; background: linear-gradient(120deg,#36bcf1,#156dd1,#176bca); background-size: 200%; color: #fff; outline: none; cursor: pointer; transition: .5s; border-radius: 10px; float: right; display: block; text-align: right; margin-top: 20px; margin-right: 45px;}.login-div:hover{ background-position: right;}.navlogin{ margin-left: 5px; margin-top: -20px;}.content { padding: 16px;}/* Navigation Stick */.sticky { position: fixed; top: 0; width: 100%;}.sticky + .content { padding-top: 60px;}/* Edit Profile Form */.editprofile-form{ width: 550px; background: #777777; height: 650px; padding: 80px 40px; border-radius: 10px; margin: auto; margin-top: 20px;}.editprofile-form h1{ text-align: center; margin-top: -20px; margin-bottom: 10px; color: #ffffff;}.txtb{ border-bottom: 2px solid #adadad; position: relative; margin: 30px 0;}.txtb input{ font-size: 15px; color: #333; border: none; width: 100%; outline: none; background: none; padding: 0 5px; height: 40px;}.txtb span::before{ content: attr(data-placeholder); position: absolute; top: 50%; left: 5px; color: #adadad; transform: translateY(-50%); z-index: -1; transition: .5s;}.txtb span::after{ content: ''; position: absolute; margin-top: 39px; margin-left: -470px; width: 0%; height: 3px; background: linear-gradient(120deg,#36bcf1,#176bca); transition: .5s;}.focus + span::before{ top: -5px;}.focus + span::after{ width: 100%;}.logbtn{ display: block; width: 100%; height: 50px; border: none; background: linear-gradient(120deg,#36bcf1,#156dd1,#176bca); background-size: 200%; color: #fff; outline: none; cursor: pointer; transition: .5s;}.logbtn:hover{ background-position: right;} </style> </head> <body> <div class='hero-image'></div> <div class='hero-text'> <h1><?=$username?></h1> <div><?=$button?></div> </div> <div id='navbar'> <div class='navlogo'><a href='../../index.php'><img src='../../resources/img/logotransparent.png'></div> <div class='navdivider'></div> <a href='../../index.php'>Home</a> <a href='#currentlyunavailable'>Dashboard</a> <a href='#currentlyunavailable'>Chat</a> <a href='#currentlyunavailable'>Friends</a> <a href='#currentlyunavailable'>Contact</a> <div class='login-div'><?=$html?></div> </div> <!-- Only to show when the user has clicked 'edit profile' --> <form action='' method='POST' class='editprofile-form'> <h1>Edit Profile</h1> <div class='txtb'> <input type='text' name='username'> <span data-placeholder='Change Username'></span> </div> <div class='txtb'> <input type='text' name='fullname'> <span data-placeholder='Change Full Name'></span> </div> <div class='txtb'> <input type='text' name='nickname'> <span data-placeholder='Change Nickname'></span> </div> <div class="txtb"> <input type='email' name='email'> <span data-placeholder='Change Email'></span> </div> <div class='txtb'> <input type='password' name='password'> <span data-placeholder='Change Password'></span> </div> <div class='txtb'> <input type='password' name='password2'> <span data-placeholder='Confirm Change Password'></span> </div> <input type='submit' class='logbtn' value='Confirm Changes'> <script> //var w = window.open(''); // w.document.writeln('<!DOCTYPE html><html><head> <title>User | Volt Box</title> </head><body> </body></html>') </script> <div class='bottom-text'> <a>Exit</a>. <!-- When clicked, the form disappears again. --> </div> </form> <script type='text/javascript'> $('.txtb input').on('focus',function(){ $(this).addClass('focus'); }); $('.txtb input').on('blur',function(){ if($(this).val() == '') $(this).removeClass('focus'); }); </script> <script>window.onscroll = function() {myFunction()};var navbar = document.getElementById('navbar');var sticky = navbar.offsetTop;function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add('sticky') } else { navbar.classList.remove('sticky'); }}</script> </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
