Guest User

Untitled

a guest
Feb 15th, 2018
407
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.35 KB | None | 0 0
  1. <!-- Main Content -->
  2. <div class="main-content">
  3.  
  4. <!-- Top bar -->
  5. <div class="top-bar">
  6.  
  7. <div class="logo">
  8. <h1>LastPass<i class="fas fa-ellipsis-h"></i></h1>
  9. </div>
  10.  
  11. <div class="vault-search">
  12. <form>
  13. <input type="search" class="search-input" placeholder="search my vault">
  14. <i class="fas fa-search search-icon"></i>
  15. </form>
  16. </div>
  17.  
  18. <div class="user-settings">
  19. <div class="user-image">
  20. <i class="fas fa-user-circle"></i>
  21. </div>
  22. <ul class="user-info">
  23. <li class="user-email">email@example.com</li>
  24. <li class="user-type">Premium User</li>
  25. </ul>
  26. <div class="user-arrow-btn">
  27. <i class="fas fa-caret-down"></i>
  28. </div>
  29. </div>
  30.  
  31. </div>
  32. <!-- End of top bar -->
  33.  
  34. <!-- Vault items controls-->
  35. <div class="vault-items-controls">
  36.  
  37. <h2>All items</h2>
  38.  
  39. <div class="vault-items-controls-btn btn">
  40. <i class="fas fa-caret-up"></i>
  41. </div>
  42.  
  43. <div class="vault-items-controls-btn btn">
  44. <i class="fas fa-search-minus"></i>
  45. </div>
  46.  
  47. <div class="vault-items-controls-group">
  48.  
  49. <div class="vault-items-controls-btn btn current">
  50. <i class="fas fa-th-large"></i>
  51. </div>
  52.  
  53. <div class="vault-items-controls-btn btn">
  54. <i class="fas fa-list"></i>
  55. </div>
  56.  
  57. </div>
  58.  
  59. <div class="vault-items-controls-btn btn">
  60. <i class="fas fa-sort"></i>
  61. </div>
  62.  
  63. </div>
  64. <!-- End of vault items controls-->
  65.  
  66. <!-- Vault items container -->
  67. <div class="vault-items-container">
  68.  
  69. <div class="vault-item password-item">
  70. <div class="vault-item-thumbnail">
  71. <i class="fab fa-amazon"></i>
  72. </div>
  73. <div class="vault-item-info">
  74. <h3 class="vault-item-name">Amazon</h3>
  75. <h4 class="vault-item-summary">email@example.com</h4>
  76. </div>
  77. </div>
  78.  
  79. <div class="vault-item password-item">
  80. <div class="vault-item-thumbnail">
  81. <i class="fab fa-apple"></i>
  82. </div>
  83. <div class="vault-item-info">
  84. <h3 class="vault-item-name">Apple ID</h3>
  85. <h4 class="vault-item-summary">email@example.com</h4>
  86. </div>
  87. </div>
  88.  
  89. <div class="vault-item bank-account-item">
  90. <div class="vault-item-thumbnail">
  91. <i class="fas fa-building"></i>
  92. </div>
  93. <div class="vault-item-info">
  94. <h3 class="vault-item-name">Bank Account</h3>
  95. <h4 class="vault-item-summary">Ending in 1234</h4>
  96. </div>
  97. </div>
  98.  
  99. <div class="vault-item password-item">
  100. <div class="vault-item-thumbnail">
  101. <i class="fab fa-behance-square"></i>
  102. </div>
  103. <div class="vault-item-info">
  104. <h3 class="vault-item-name">Behance</h3>
  105. <h4 class="vault-item-summary">email@example.com</h4>
  106. </div>
  107. </div>
  108.  
  109. <div class="vault-item password-item">
  110. <div class="vault-item-thumbnail">
  111. <i class="fab fa-codepen"></i>
  112. </div>
  113. <div class="vault-item-info">
  114. <h3 class="vault-item-name">CodePen</h3>
  115. <h4 class="vault-item-summary">email@example.com</h4>
  116. </div>
  117. </div>
  118.  
  119. <div class="vault-item password-item">
  120. <div class="vault-item-thumbnail">
  121. <i class="fab fa-bitcoin"></i>
  122. </div>
  123. <div class="vault-item-info">
  124. <h3 class="vault-item-name">Coinbase</h3>
  125. <h4 class="vault-item-summary">email@example.com</h4>
  126. </div>
  127. </div>
  128.  
  129. <div class="vault-item payment-card-item">
  130. <div class="vault-item-thumbnail">
  131. <i class="fas fa-credit-card"></i>
  132. </div>
  133. <div class="vault-item-info">
  134. <h3 class="vault-item-name">Credit Card</h3>
  135. <h4 class="vault-item-summary">Ending in 1234</h4>
  136. </div>
  137. </div>
  138.  
  139. <div class="vault-item password-item">
  140. <div class="vault-item-thumbnail">
  141. <i class="fab fa-digital-ocean"></i>
  142. </div>
  143. <div class="vault-item-info">
  144. <h3 class="vault-item-name">Digital Ocean</h3>
  145. <h4 class="vault-item-summary">email@example.com</h4>
  146. </div>
  147. </div>
  148.  
  149. <div class="vault-item password-item">
  150. <div class="vault-item-thumbnail">
  151. <i class="fab fa-discord"></i>
  152. </div>
  153. <div class="vault-item-info">
  154. <h3 class="vault-item-name">Discord</h3>
  155. <h4 class="vault-item-summary">email@example.com</h4>
  156. </div>
  157. </div>
  158.  
  159. <div class="vault-item drivers-licence-item">
  160. <div class="vault-item-thumbnail">
  161. <i class="fas fa-car"></i>
  162. </div>
  163. <div class="vault-item-info">
  164. <h3 class="vault-item-name">Drivers Licence</h3>
  165. </div>
  166. </div>
  167.  
  168. <div class="vault-item password-item">
  169. <div class="vault-item-thumbnail">
  170. <i class="fab fa-dropbox"></i>
  171. </div>
  172. <div class="vault-item-info">
  173. <h3 class="vault-item-name">Dropbox</h3>
  174. <h4 class="vault-item-summary">email@example.com</h4>
  175. </div>
  176. </div>
  177.  
  178. <div class="vault-item password-item">
  179. <div class="vault-item-thumbnail">
  180. <i class="fab fa-facebook"></i>
  181. </div>
  182. <div class="vault-item-info">
  183. <h3 class="vault-item-name">Facebook</h3>
  184. <h4 class="vault-item-summary">email@example.com</h4>
  185. </div>
  186. </div>
  187.  
  188. <div class="vault-item password-item">
  189. <div class="vault-item-thumbnail">
  190. <i class="fab fa-github"></i>
  191. </div>
  192. <div class="vault-item-info">
  193. <h3 class="vault-item-name">Github</h3>
  194. <h4 class="vault-item-summary">email@example.com</h4>
  195. </div>
  196. </div>
  197.  
  198. <div class="vault-item password-item">
  199. <div class="vault-item-thumbnail">
  200. <i class="fab fa-google"></i>
  201. </div>
  202. <div class="vault-item-info">
  203. <h3 class="vault-item-name">Google</h3>
  204. <h4 class="vault-item-summary">email@example.com</h4>
  205. </div>
  206. </div>
  207.  
  208. <div class="vault-item address-item">
  209. <div class="vault-item-thumbnail">
  210. <i class="fas fa-address-book"></i>
  211. </div>
  212. <div class="vault-item-info">
  213. <h3 class="vault-item-name">Home Address</h3>
  214. <h4 class="vault-item-summary">123 Main Street</h4>
  215. </div>
  216. </div>
  217.  
  218. <div class="vault-item wifi-item">
  219. <div class="vault-item-thumbnail">
  220. <i class="fas fa-wifi"></i>
  221. </div>
  222. <div class="vault-item-info">
  223. <h3 class="vault-item-name">Home Wi-fi</h3>
  224. <h4 class="vault-item-summary">SSID12345</h4>
  225. </div>
  226. </div>
  227.  
  228. <div class="vault-item password-item">
  229. <div class="vault-item-thumbnail">
  230. <i class="fab fa-instagram"></i>
  231. </div>
  232. <div class="vault-item-info">
  233. <h3 class="vault-item-name">Instagram</h3>
  234. <h4 class="vault-item-summary">email@example.com</h4>
  235. </div>
  236. </div>
  237.  
  238. <div class="vault-item password-item">
  239. <div class="vault-item-thumbnail">
  240. <i class="fab fa-linkedin"></i>
  241. </div>
  242. <div class="vault-item-info">
  243. <h3 class="vault-item-name">LinkedIn</h3>
  244. <h4 class="vault-item-summary">email@example.com</h4>
  245. </div>
  246. </div>
  247.  
  248. <div class="vault-item medical-item">
  249. <div class="vault-item-thumbnail">
  250. <i class="fas fa-heartbeat"></i>
  251. </div>
  252. <div class="vault-item-info">
  253. <h3 class="vault-item-name">Medical Insurance</h3>
  254. </div>
  255. </div>
  256.  
  257. <div class="vault-item password-item">
  258. <div class="vault-item-thumbnail">
  259. <i class="fab fa-microsoft"></i>
  260. </div>
  261. <div class="vault-item-info">
  262. <h3 class="vault-item-name">Microsoft</h3>
  263. <h4 class="vault-item-summary">email@example.com</h4>
  264. </div>
  265. </div>
  266.  
  267. <div class="vault-item note-item">
  268. <div class="vault-item-thumbnail">
  269. <i class="fas fa-sticky-note"></i>
  270. </div>
  271. <div class="vault-item-info">
  272. <h3 class="vault-item-name">Online Recovery Codes</h3>
  273. </div>
  274. </div>
  275.  
  276. <div class="vault-item passport-item">
  277. <div class="vault-item-thumbnail">
  278. <i class="fas fa-globe"></i>
  279. </div>
  280. <div class="vault-item-info">
  281. <h3 class="vault-item-name">Passport</h3>
  282. </div>
  283. </div>
  284.  
  285. <div class="vault-item password-item">
  286. <div class="vault-item-thumbnail">
  287. <i class="fab fa-patreon"></i>
  288. </div>
  289. <div class="vault-item-info">
  290. <h3 class="vault-item-name">Patreon</h3>
  291. <h4 class="vault-item-summary">email@example.com</h4>
  292. </div>
  293. </div>
  294.  
  295. <div class="vault-item password-item">
  296. <div class="vault-item-thumbnail">
  297. <i class="fab fa-paypal"></i>
  298. </div>
  299. <div class="vault-item-info">
  300. <h3 class="vault-item-name">PayPal</h3>
  301. <h4 class="vault-item-summary">email@example.com</h4>
  302. </div>
  303. </div>
  304.  
  305. <div class="vault-item password-item">
  306. <div class="vault-item-thumbnail">
  307. <i class="fab fa-pinterest"></i>
  308. </div>
  309. <div class="vault-item-info">
  310. <h3 class="vault-item-name">Pinterest</h3>
  311. <h4 class="vault-item-summary">email@example.com</h4>
  312. </div>
  313. </div>
  314.  
  315. <div class="vault-item password-item">
  316. <div class="vault-item-thumbnail">
  317. <i class="fab fa-reddit"></i>
  318. </div>
  319. <div class="vault-item-info">
  320. <h3 class="vault-item-name">Reddit</h3>
  321. <h4 class="vault-item-summary">email@example.com</h4>
  322. </div>
  323. </div>
  324.  
  325. <div class="vault-item password-item">
  326. <div class="vault-item-thumbnail">
  327. <i class="fab fa-snapchat"></i>
  328. </div>
  329. <div class="vault-item-info">
  330. <h3 class="vault-item-name">Snapchat</h3>
  331. <h4 class="vault-item-summary">email@example.com</h4>
  332. </div>
  333. </div>
  334.  
  335. <div class="vault-item social-security-item">
  336. <div class="vault-item-thumbnail">
  337. <i class="fas fa-balance-scale"></i>
  338. </div>
  339. <div class="vault-item-info">
  340. <h3 class="vault-item-name">Social Security</h3>
  341. <h4 class="vault-item-summary">Ending in 1234</h4>
  342. </div>
  343. </div>
  344.  
  345. <div class="vault-item password-item">
  346. <div class="vault-item-thumbnail">
  347. <i class="fab fa-spotify"></i>
  348. </div>
  349. <div class="vault-item-info">
  350. <h3 class="vault-item-name">Spotify</h3>
  351. <h4 class="vault-item-summary">email@example.com</h4>
  352. </div>
  353. </div>
  354.  
  355. <div class="vault-item password-item">
  356. <div class="vault-item-thumbnail">
  357. <i class="fab fa-stack-overflow"></i>
  358. </div>
  359. <div class="vault-item-info">
  360. <h3 class="vault-item-name">Stack Overflow</h3>
  361. <h4 class="vault-item-summary">email@example.com</h4>
  362. </div>
  363. </div>
  364.  
  365. <div class="vault-item password-item">
  366. <div class="vault-item-thumbnail">
  367. <i class="fab fa-steam"></i>
  368. </div>
  369. <div class="vault-item-info">
  370. <h3 class="vault-item-name">Steam</h3>
  371. <h4 class="vault-item-summary">email@example.com</h4>
  372. </div>
  373. </div>
  374.  
  375. <div class="vault-item password-item">
  376. <div class="vault-item-thumbnail">
  377. <i class="fab fa-trello"></i>
  378. </div>
  379. <div class="vault-item-info">
  380. <h3 class="vault-item-name">Trello</h3>
  381. <h4 class="vault-item-summary">email@example.com</h4>
  382. </div>
  383. </div>
  384.  
  385. <div class="vault-item password-item">
  386. <div class="vault-item-thumbnail">
  387. <i class="fab fa-twitch"></i>
  388. </div>
  389. <div class="vault-item-info">
  390. <h3 class="vault-item-name">Twitch</h3>
  391. <h4 class="vault-item-summary">email@example.com</h4>
  392. </div>
  393. </div>
  394.  
  395. <div class="vault-item password-item">
  396. <div class="vault-item-thumbnail">
  397. <i class="fab fa-twitter"></i>
  398. </div>
  399. <div class="vault-item-info">
  400. <h3 class="vault-item-name">Twitter</h3>
  401. <h4 class="vault-item-summary">email@example.com</h4>
  402. </div>
  403. </div>
  404.  
  405. <div class="vault-item password-item">
  406. <div class="vault-item-thumbnail">
  407. <i class="fab fa-uber"></i>
  408. </div>
  409. <div class="vault-item-info">
  410. <h3 class="vault-item-name">Uber</h3>
  411. <h4 class="vault-item-summary">email@example.com</h4>
  412. </div>
  413. </div>
  414.  
  415. <div class="vault-item password-item">
  416. <div class="vault-item-thumbnail">
  417. <i class="fab fa-vimeo"></i>
  418. </div>
  419. <div class="vault-item-info">
  420. <h3 class="vault-item-name">Vimeo</h3>
  421. <h4 class="vault-item-summary">email@example.com</h4>
  422. </div>
  423. </div>
  424.  
  425. <div class="vault-item address-item">
  426. <div class="vault-item-thumbnail">
  427. <i class="fas fa-address-book"></i>
  428. </div>
  429. <div class="vault-item-info">
  430. <h3 class="vault-item-name">Work Address</h3>
  431. <h4 class="vault-item-summary">321 Main Street</h4>
  432. </div>
  433. </div>
  434.  
  435. <div class="vault-item note-item">
  436. <div class="vault-item-thumbnail">
  437. <i class="fas fa-sticky-note"></i>
  438. </div>
  439. <div class="vault-item-info">
  440. <h3 class="vault-item-name">Work Door Access Codes</h3>
  441. </div>
  442. </div>
  443.  
  444. <div class="vault-item wifi-item">
  445. <div class="vault-item-thumbnail">
  446. <i class="fas fa-wifi"></i>
  447. </div>
  448. <div class="vault-item-info">
  449. <h3 class="vault-item-name">Work Wi-fi</h3>
  450. <h4 class="vault-item-summary">SSID54321</h4>
  451. </div>
  452. </div>
  453.  
  454. <div class="add-vault-item-btn btn">+</div>
  455.  
  456. </div>
  457. <!-- End of vault items container -->
  458.  
  459. </div>
  460. <!-- End of main content -->
  461.  
  462. <!-- Side-bar -->
  463. <div class="side-bar">
  464.  
  465. <div class="collapse-btn menu-btn btn">
  466. <i class="fas fa-arrow-right"></i>
  467. </div>
  468.  
  469. <div class="vault-controls-menu">
  470.  
  471. <div class="menu-btn btn current">
  472. <i class="fas fa-home"></i>
  473. </div>
  474.  
  475. <div class="vault-menu-group">
  476.  
  477. <div class="menu-btn btn">
  478. <i class="fas fa-lock"></i>
  479. </div>
  480.  
  481. <div class="menu-btn btn">
  482. <i class="fas fa-sticky-note"></i>
  483. </div>
  484.  
  485. <div class=" menu-btn btn">
  486. <i class="fas fa-address-book"></i>
  487. </div>
  488.  
  489. </div>
  490.  
  491. <div class="vault-menu-group">
  492.  
  493. <div class="menu-btn btn">
  494. <i class="fas fa-credit-card"></i>
  495. </div>
  496.  
  497. <div class="menu-btn btn">
  498. <i class="fas fa-building"></i>
  499. </div>
  500.  
  501. </div>
  502.  
  503. <div class="vault-menu-group">
  504.  
  505. <div class="menu-btn btn">
  506. <i class="fas fa-globe"></i>
  507. </div>
  508.  
  509. <div class="menu-btn btn">
  510. <i class="fas fa-balance-scale"></i>
  511. </div>
  512.  
  513. </div>
  514.  
  515. </div>
  516.  
  517. <div class="vault-settings-menu">
  518.  
  519. <div class="menu-btn btn">
  520. <i class="fas fa-shield-alt"></i>
  521. </div>
  522.  
  523. <div class="menu-btn btn">
  524. <i class="fas fa-users"></i>
  525. </div>
  526.  
  527. <div class="menu-btn btn">
  528. <i class="fas fa-life-ring"></i>
  529. </div>
  530.  
  531. <div class="menu-btn btn">
  532. <i class="fas fa-cog"></i>
  533. </div>
  534.  
  535. <div class="menu-btn btn">
  536. <i class="fas fa-ellipsis-h"></i>
  537. </div>
  538.  
  539. </div>
  540.  
  541. </div>
  542. <!-- End of side-bar -->
Add Comment
Please, Sign In to add comment