lemansky

Untitled

Dec 9th, 2021
814
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 mt-2">
  16.             <div class="row">
  17.                 <div class="col-12 col-xl-3 card py-3 align-self-start mb-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.                                 Settings
  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 mb-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.                                                 <div class="fw-bold">Keeping in Touch</div>
  104.                                                 <label for="">Email Notifications</label>
  105.                                                 <div class="form-check">
  106.                                                     <input type="checkbox" class="form-check-input">
  107.                                                     <label for="" class="form-check-label">Blog posts</label>
  108.                                                 </div>
  109.                                                 <div class="form-check">
  110.                                                     <input type="checkbox" class="form-check-input">
  111.                                                     <label for="" class="form-check-label">Newsletter</label>
  112.                                                 </div>
  113.                                                 <div class="form-check">
  114.                                                     <input type="checkbox" class="form-check-input">
  115.                                                     <label for="" class="form-check-label">Personal offers</label>
  116.                                                 </div>
  117.                                             </div>
  118.                                         </div>
  119.                                         <div class="row mt-4">
  120.                                             <div class="col text-start text-lg-end">
  121.                                                 <a href="#" class="btn btn-primary bi-check-circle-fill">
  122.                                                     <i class=" "></i>
  123.                                                     Save Changes
  124.                                                 </a>
  125.                                             </div> 
  126.                                         </div>
  127.                                     </form>
  128.                                 </div>
  129.                             </div>
  130.                         </div>
  131.                     </div>
  132.  
  133.                 </div>
  134.                 <!-- right column -->
  135.                 <div class="col-12 col-lg p-0">
  136.                     <div class="card mb-3">
  137.                         <div class="card-body d-grid">
  138.                             <button class="btn btn-secondary">
  139.                                 <i class="bi-arrow-right-square-fill"></i>
  140.                                 Logout
  141.                             </button>
  142.                         </div>
  143.                     </div>
  144.                     <div class="card">
  145.                         <div class="card-body">
  146.                             <div class="fw-bold">
  147.                                 Support
  148.                             </div>
  149.                             <p>Get fast, free help from our friendly assistants.</p>
  150.                             <a href="#" class="btn btn-primary">Contact Us</a>
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.             </div>
  155.         </div>                     
  156.     </body>
  157. </html>
RAW Paste Data