Mẫu đăng ký html

#CSS

@import url["//fonts.googleapis.com/css?family=Montserrat:300,400,600&display=swap"];
:root {
  --red: #ee596f;
  --yellow: #feb800;
  --green: #07a787;
  --purple: #c765d0;
  --gray: #787878;
  --gray-light: #eee;
  --gray-dark: #2e3c54;
  --font: "Montserrat", sans-serif;
}

a {
  text-decoration: none;
}

a,
button {
  cursor: pointer;
  outline: none;
}

.sign-up {
  font-family: var[--font];
  width: 100%;
  max-width: 800px;
  height: 600px;
  background-color: var[--gray-light];
  margin: 25px auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign-up__form {
  background-color: white;
  width: 80%;
  height: 70%;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 20px 10px rgba[0,0,0,.15];
}
.sign-up__content {
  padding: 40px;
  display: flex;
  flex-flow: column nowrap;
}
.sign-up__title {
  color: var[--gray-dark];
  font-weight: 400;
  text-transform: uppercase;
  font-size: 25px;
  margin-bottom: 30px;
}
.sign-up__inp {
  outline: none;
  margin-bottom: 15px;
  padding: 20px 20px 20px 0;
  border: 0;
  border-bottom: 1px solid var[--gray-light];
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  font-family: var[--font];
}
.sign-up__buttons {
  display: flex;
  justify-content: space-between;
}
.sign-up__buttons > * {
  width: 50%;
  padding: 20px 15px;
  border: 0;
  text-transform: uppercase;
  font-size: 16px;
}

.circle {
  position: absolute;
  border-radius: 50%;
}
.circle--red {
  width: 250px;
  height: 250px;
  background-color: var[--red];
  top: 25px;
  left: 25px;
  z-index: 1;
}
.circle--yellow {
  width: 100px;
  height: 100px;
  background-color: var[--yellow];
  top: 50px;
  left: 230px;
}
.circle--green {
  width: 300px;
  height: 300px;
  background-color: var[--green];
  bottom: 50px;
  left: 200px;
  z-index: 2;
}
.circle--purple {
  width: 300px;
  height: 300px;
  background-color: var[--purple];
  bottom: -50px;
  right: -50px;
  -webkit-transform: scale[1.8];
          transform: scale[1.8];
}

.forgot__password {
  text-align: center;
  text-transform: uppercase;
  color: var[--gray];
  display: inline-block;
  margin-top: 20px;
}

.btn--register {
  background-color: var[--gray-light];
  color: var[--gray];
}

.btn--signin {
  background-color: var[--gray-dark];
  color: white;
  text-align: right;
}

# Phản ứng nhanh nhẹn

Với các đoạn mã như trên thì mình thấy rằng khi xuống di động thì giao diện vẫn nhìn được và không bị gì cả. Cho nên ở UI này phần Responsive mình không code gì thêm nữa. Như vậy là đã hoàn thành. Các bạn có thể tham khảo kết quả dưới đây nhé. Nếu codepen bị lỗi không hiển thị trên blog mình thì các bạn có thể nhấn vào đây để xem trực tiếp trên codepen nhé


Xem giao diện người dùng Pen hàng tuần – Biểu mẫu đăng ký đơn giản của EvonDev
[@evondev] trên CodePen.

# Kết luận

Như vậy là đã hoàn thành một bài viết về giao diện người dùng đầu tiên sau hơn 6 tháng bỏ viết Blog =]]. Hi vọng với những đoạn code mà mình viết sẽ giúp ích cho các bạn phần nào trong quá trình học tập và làm việc. Chúc các bạn một ngày tốt lành