API tools faq
paste
Advertisement
metalx1000

CSS HTML Mobile App with Menu Sidebar

metalx1000
Oct 7th, 2024
135
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {
  7.   font-family: "Lato", sans-serif;
  8.     margin:0px;
  9. }
  10.  
  11. .sidenav {
  12.   height: 100%;
  13.   width: 0;
  14.   position: fixed;
  15.   z-index: 1;
  16.   top: 0;
  17.   left: 0;
  18.   background-color: #15a0f2;
  19.   overflow-x: hidden;
  20.   transition: 0.5s;
  21.   padding-top: 60px;
  22. }
  23.  
  24. .sidenav a {
  25.   padding: 8px 8px 8px 32px;
  26.   text-decoration: none;
  27.   font-size: 25px;
  28.   color: white;
  29.   display: block;
  30.   transition: 0.3s;
  31. }
  32.  
  33. .sidenav a:hover {
  34.   color: #555;
  35. }
  36.  
  37. .sidenav .closebtn {
  38.   position: absolute;
  39.   top: 0;
  40.   right: 25px;
  41.   font-size: 36px;
  42.   margin-left: 50px;
  43. }
  44.  
  45. #navbar {
  46.   position: sticky;
  47.   top: 0;
  48.   overflow: hidden;
  49.     color: white;
  50.   background-color: #20a5f7;
  51. }
  52. @media screen and (max-height: 450px) {
  53.   .sidenav {padding-top: 15px;}
  54.   .sidenav a {font-size: 18px;}
  55. }
  56.  
  57.     .center {
  58.       text-align: center;
  59.       margin: auto;
  60.       padding: 10px;
  61.     }
  62.    
  63.     form {
  64.       border: 3px solid #f1f1f1;
  65.     }
  66.  
  67.     input[type=text],
  68.     input[type=password] {
  69.       width: 100%;
  70.       padding: 12px 20px;
  71.       margin: 8px 0;
  72.       display: inline-block;
  73.       border: 1px solid #ccc;
  74.       box-sizing: border-box;
  75.     }
  76.  
  77.     button {
  78.       background-color: #20a5f7;
  79.       color: white;
  80.       padding: 14px 20px;
  81.       margin: 8px 0;
  82.       border: none;
  83.       cursor: pointer;
  84.       width: 100%;
  85.     }
  86.  
  87.     button:hover {
  88.       opacity: 0.8;
  89.     }
  90.  
  91.     .cancelbtn {
  92.       width: auto;
  93.       padding: 10px 18px;
  94.       background-color: #f44336;
  95.     }
  96.  
  97.     #menubtn{
  98.       margin-left:8px;
  99.     }
  100.     .imgcontainer {
  101.       text-align: center;
  102.       margin: 24px 0 12px 0;
  103.     }
  104.  
  105.     img.avatar {
  106.       width: 40%;
  107.       border-radius: 50%;
  108.     }
  109.  
  110.     .container {
  111.       padding: 16px;
  112.     }
  113.  
  114.     span.psw {
  115.       float: right;
  116.       padding-top: 16px;
  117.     }
  118.  
  119.  
  120.       .cancelbtn {
  121.         width: 100%;
  122.       }
  123.     }
  124. </style>
  125. </head>
  126. <body>
  127.  
  128. <div id="mySidenav" class="sidenav">
  129.   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  130.   <a href="#">About</a>
  131.   <a href="#">Services</a>
  132.   <a href="#">Clients</a>
  133.   <a href="#">Contact</a>
  134. </div>
  135. <div id="navbar">
  136. <span id="menubtn" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; <div class="center">Welcome</div></span>
  137.     </div>
  138.  
  139.     <div class="center">
  140. <!DOCTYPE html>
  141. <html>
  142.  
  143. <head>
  144.   <meta name="viewport" content="width=device-width, initial-scale=1">
  145.   <style>
  146.  
  147.   </style>
  148. </head>
  149.  
  150. <body>
  151.  
  152.   <h2>Login Form</h2>
  153.  
  154.   <form action="" method="post">
  155.     <!-- <div class="imgcontainer"> -->
  156.     <!--   <img src="" alt="Avatar" class="avatar"> -->
  157.     <!-- </div> -->
  158.  
  159.     <div class="container">
  160.       <label for="uname"><b>Username</b></label>
  161.       <input type="text" placeholder="Enter Username" name="uname" required>
  162.  
  163.       <label for="psw"><b>Password</b></label>
  164.       <input type="password" placeholder="Enter Password" name="psw" required>
  165.  
  166.       <button type="submit">Login</button>
  167.       <!--
  168. <label>
  169. <input type="checkbox" checked="checked" name="remember"> Remember me
  170. </label>
  171. </div>
  172.  
  173. <div class="container" style="background-color:#f1f1f1">
  174. <button type="button" class="cancelbtn">Cancel</button>
  175. <span class="psw">Forgot <a href="#">password?</a></span>
  176. </div>
  177. -->
  178.   </form>
  179.  
  180. </body>
  181.  
  182. </html>
  183.     </div>  
  184. <script>
  185. function openNav() {
  186.   document.getElementById("mySidenav").style.width = "250px";
  187. }
  188.  
  189. function closeNav() {
  190.   document.getElementById("mySidenav").style.width = "0";
  191. }
  192. </script>
  193.    
  194. </body>
  195. </html>
  196.  
  197.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!