Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Main Content -->
- <div class="main-content">
- <!-- Top bar -->
- <div class="top-bar">
- <div class="logo">
- <h1>LastPass<i class="fas fa-ellipsis-h"></i></h1>
- </div>
- <div class="vault-search">
- <form>
- <input type="search" class="search-input" placeholder="search my vault">
- <i class="fas fa-search search-icon"></i>
- </form>
- </div>
- <div class="user-settings">
- <div class="user-image">
- <i class="fas fa-user-circle"></i>
- </div>
- <ul class="user-info">
- <li class="user-email">email@example.com</li>
- <li class="user-type">Premium User</li>
- </ul>
- <div class="user-arrow-btn">
- <i class="fas fa-caret-down"></i>
- </div>
- </div>
- </div>
- <!-- End of top bar -->
- <!-- Vault items controls-->
- <div class="vault-items-controls">
- <h2>All items</h2>
- <div class="vault-items-controls-btn btn">
- <i class="fas fa-caret-up"></i>
- </div>
- <div class="vault-items-controls-btn btn">
- <i class="fas fa-search-minus"></i>
- </div>
- <div class="vault-items-controls-group">
- <div class="vault-items-controls-btn btn current">
- <i class="fas fa-th-large"></i>
- </div>
- <div class="vault-items-controls-btn btn">
- <i class="fas fa-list"></i>
- </div>
- </div>
- <div class="vault-items-controls-btn btn">
- <i class="fas fa-sort"></i>
- </div>
- </div>
- <!-- End of vault items controls-->
- <!-- Vault items container -->
- <div class="vault-items-container">
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-amazon"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Amazon</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-apple"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Apple ID</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item bank-account-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-building"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Bank Account</h3>
- <h4 class="vault-item-summary">Ending in 1234</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-behance-square"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Behance</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-codepen"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">CodePen</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-bitcoin"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Coinbase</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item payment-card-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-credit-card"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Credit Card</h3>
- <h4 class="vault-item-summary">Ending in 1234</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-digital-ocean"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Digital Ocean</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-discord"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Discord</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item drivers-licence-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-car"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Drivers Licence</h3>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-dropbox"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Dropbox</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-facebook"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Facebook</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-github"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Github</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-google"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Google</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item address-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-address-book"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Home Address</h3>
- <h4 class="vault-item-summary">123 Main Street</h4>
- </div>
- </div>
- <div class="vault-item wifi-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-wifi"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Home Wi-fi</h3>
- <h4 class="vault-item-summary">SSID12345</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-instagram"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Instagram</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-linkedin"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">LinkedIn</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item medical-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-heartbeat"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Medical Insurance</h3>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-microsoft"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Microsoft</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item note-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-sticky-note"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Online Recovery Codes</h3>
- </div>
- </div>
- <div class="vault-item passport-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-globe"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Passport</h3>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-patreon"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Patreon</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-paypal"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">PayPal</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-pinterest"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Pinterest</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-reddit"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Reddit</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-snapchat"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Snapchat</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item social-security-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-balance-scale"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Social Security</h3>
- <h4 class="vault-item-summary">Ending in 1234</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-spotify"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Spotify</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-stack-overflow"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Stack Overflow</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-steam"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Steam</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-trello"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Trello</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-twitch"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Twitch</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-twitter"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Twitter</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-uber"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Uber</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item password-item">
- <div class="vault-item-thumbnail">
- <i class="fab fa-vimeo"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Vimeo</h3>
- <h4 class="vault-item-summary">email@example.com</h4>
- </div>
- </div>
- <div class="vault-item address-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-address-book"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Work Address</h3>
- <h4 class="vault-item-summary">321 Main Street</h4>
- </div>
- </div>
- <div class="vault-item note-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-sticky-note"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Work Door Access Codes</h3>
- </div>
- </div>
- <div class="vault-item wifi-item">
- <div class="vault-item-thumbnail">
- <i class="fas fa-wifi"></i>
- </div>
- <div class="vault-item-info">
- <h3 class="vault-item-name">Work Wi-fi</h3>
- <h4 class="vault-item-summary">SSID54321</h4>
- </div>
- </div>
- <div class="add-vault-item-btn btn">+</div>
- </div>
- <!-- End of vault items container -->
- </div>
- <!-- End of main content -->
- <!-- Side-bar -->
- <div class="side-bar">
- <div class="collapse-btn menu-btn btn">
- <i class="fas fa-arrow-right"></i>
- </div>
- <div class="vault-controls-menu">
- <div class="menu-btn btn current">
- <i class="fas fa-home"></i>
- </div>
- <div class="vault-menu-group">
- <div class="menu-btn btn">
- <i class="fas fa-lock"></i>
- </div>
- <div class="menu-btn btn">
- <i class="fas fa-sticky-note"></i>
- </div>
- <div class=" menu-btn btn">
- <i class="fas fa-address-book"></i>
- </div>
- </div>
- <div class="vault-menu-group">
- <div class="menu-btn btn">
- <i class="fas fa-credit-card"></i>
- </div>
- <div class="menu-btn btn">
- <i class="fas fa-building"></i>
- </div>
- </div>
- <div class="vault-menu-group">
- <div class="menu-btn btn">
- <i class="fas fa-globe"></i>
- </div>
- <div class="menu-btn btn">
- <i class="fas fa-balance-scale"></i>
- </div>
- </div>
- </div>
- <div class="vault-settings-menu">
- <div class="menu-btn btn">
- <i class="fas fa-shield-alt"></i>
- </div>
- <div class="menu-btn btn">
- <i class="fas fa-users"></i>
- </div>
- <div class="menu-btn btn">
- <i class="fas fa-life-ring"></i>
- </div>
- <div class="menu-btn btn">
- <i class="fas fa-cog"></i>
- </div>
- <div class="menu-btn btn">
- <i class="fas fa-ellipsis-h"></i>
- </div>
- </div>
- </div>
- <!-- End of side-bar -->
Add Comment
Please, Sign In to add comment