Advertisement
victorumeh

neumorph form

Feb 15th, 2022
150
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.03 KB | None | 0 0
  1. @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;700&display=swap");
  2.  
  3. body {
  4.   margin: 0;
  5.   width: 100vw;
  6.   height: 100vh;
  7.   background: #ecf0f3;
  8.   display: flex;
  9.   align-items: center;
  10.   text-align: center;
  11.   justify-content: center;
  12.   place-items: center;
  13.   overflow: hidden;
  14.   font-family: poppins;
  15. }
  16.  
  17. .container {
  18.   position: relative;
  19.   width: 350px;
  20.   height: 500px;
  21.   border-radius: 20px;
  22.   padding: 40px;
  23.   box-sizing: border-box;
  24.   background: #ecf0f3;
  25.   box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
  26. }
  27.  
  28. .brand-logo {
  29.   height: 100px;
  30.   width: 100px;
  31.   background: url("https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg?compress=1&resize=100x120");
  32.   margin: auto;
  33.   border-radius: 50%;
  34.   box-sizing: border-box;
  35.   box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px white;
  36. }
  37.  
  38. .brand-title {
  39.   margin-top: 10px;
  40.   font-weight: 900;
  41.   font-size: 1.8rem;
  42.   color: #1da1f2;
  43.   letter-spacing: 1px;
  44. }
  45.  
  46. .inputs {
  47.   text-align: left;
  48.   margin-top: 30px;
  49. }
  50.  
  51. label,
  52. input,
  53. button {
  54.   display: block;
  55.   width: 100%;
  56.   padding: 0;
  57.   border: none;
  58.   outline: none;
  59.   box-sizing: border-box;
  60. }
  61.  
  62. label {
  63.   margin-bottom: 4px;
  64. }
  65.  
  66. label:nth-of-type(2) {
  67.   margin-top: 12px;
  68. }
  69.  
  70. input::placeholder {
  71.   color: gray;
  72. }
  73.  
  74. input {
  75.   background: #ecf0f3;
  76.   padding: 10px;
  77.   padding-left: 20px;
  78.   height: 50px;
  79.   font-size: 14px;
  80.   border-radius: 50px;
  81.   box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
  82. }
  83.  
  84. button {
  85.   margin-top: 20px;
  86.   background: #1da1f2;
  87.   height: 40px;
  88.   border-radius: 20px;
  89.   cursor: pointer;
  90.   font-weight: 900;
  91.   box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
  92.   transition: 0.5s;
  93. }
  94.  
  95. button:hover {
  96.   box-shadow: none;
  97. }
  98.  
  99. a {
  100.   position: absolute;
  101.   font-size: 8px;
  102.   bottom: 4px;
  103.   right: 4px;
  104.   text-decoration: none;
  105.   color: black;
  106.   background: lightcoral;
  107.   border-radius: 10px;
  108.   padding: 2px;
  109. }
  110.  
  111. h1 {
  112.   position: absolute;
  113.   top: 0;
  114.   left: 0;
  115. }
  116.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement