lemansky

Untitled

Dec 9th, 2021
805
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  8.  
  9.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
  10.         <style>
  11.             body{ background:whitesmoke;}
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <div class="container">
  16.             <div class="row">
  17.                 <div class="col-12 col-xl-3 card py-3">
  18.                     <div class="nav flex-row flex-xl-column align-self-center align-self-md-start">
  19.                         <li class="nav-item">
  20.                             <a href="" class="nav-link">
  21.                                 <i class="bi-bar-chart"></i>
  22.                                 Overview
  23.                             </a>
  24.                         </li>
  25.                         <li class="nav-item">
  26.                             <a href="" class="nav-link">
  27.                                 <i class="bi-grid-3x3-gap"></i>
  28.                                 CRUD
  29.                             </a>
  30.                         </li>
  31.                         <li class="nav-item">
  32.                             <a href="" class="nav-link">
  33.                                 <i class="bi-gear"></i>
  34.                                 CRUD
  35.                             </a>
  36.                         </li>
  37.                     </div>
  38.                 </div>
  39.                 <div class="card col-12 col-lg-9 col-xl-6 mx-xl-3 py-3">
  40.                     <div class="row">
  41.                         <div class="col-12 col-md-auto text-center text-md-start">
  42.                             <img src="http://placehold.it/140x140" alt="">
  43.                         </div>
  44.                         <div class="col-12 col-md text-center text-md-start">
  45.                             <h4>John Smith</h4>
  46.                             <div>
  47.                                 @johnny.s
  48.                             </div>
  49.                             <div class="text-muted small">
  50.                                 Last seen 2 hours ago
  51.                             </div>
  52.                             <a href="" class="btn btn-primary"> Change photo </a>
  53.                         </div>
  54.                         <div class="col-12 col-md text-center text-md-end">
  55.                             <div class="badge bg-secondary">administrator </div>
  56.                             <div class="text-muted small">Joined 09 Dec 2017</div>
  57.                         </div>
  58.                     </div>
  59.  
  60.                     <div class="row mt-4 p-1">
  61.                         <div class="col">
  62.                             <ul class="nav nav-tabs">
  63.                                 <li class="nav-item">
  64.                                     <a href="#" class="nav-link active">Settings</a>
  65.                                 </li>
  66.                             </ul>
  67.                             <div class="tab-content">
  68.                                 <div class="tab-pane active px-2">
  69.                                     <form action="" class="mt-3">
  70.                                         <div class="row ">
  71.                                             <div class="col">
  72.                                                 <label >Full Name</label>
  73.                                                 <input type="text" class="form-control" value="John Smith">
  74.                                             </div>
  75.                                             <div class="col">
  76.                                                 <label for="">Username</label>
  77.                                                 <input type="text" class="form-control" value="johnny.s">
  78.                                             </div>
  79.                                         </div>
  80.     <div class="row">
  81.         <div class="col">
  82.             <label for="">Email</label>
  83.             <input type="text" class="form-control" value="user@example.com">
  84.         </div>
  85.     </div>
  86.     <div class="row">
  87.         <div class="col">
  88.             <label for="">About</label>
  89.             <textarea name="" id="" cols="30" rows="5" class="form-control">My Bio</textarea>
  90.         </div>
  91.     </div>
  92.     <div class="row mt-2">
  93.         <div class="col">
  94.             <div class="fw-bold">Change Password</div>
  95.             <label for="">Current Password</label>
  96.             <input type="password" class="form-control" value="******">
  97.             <label for="">New Password</label>
  98.             <input type="password" class="form-control" value="******">
  99.             <label for="">Confirm Password</label>
  100.             <input type="password" class="form-control" value="******">
  101.         </div>
  102.         <div class="col">
  103.            
  104.         </div>
  105.     </div>
  106.                                     </form>
  107.                                 </div>
  108.                             </div>
  109.                         </div>
  110.                     </div>
  111.  
  112.                 </div>
  113.  
  114.  
  115.             </div>
  116.         </div>                     
  117.     </body>
  118. </html>
RAW Paste Data