This content originally appeared on DEV Community and was authored by manish srivastava
What I learnt in making login screen of Habit-O-Circle.
Below are some dynamically created login screens.
Everytime you try to login or refresh page:-
(1)Background picture is changed . There are more than 1000+ pics to come randomly and not a single picture is stored in the app.
(2) Doodles are changed dynamically and adjust itself according to screen size.
(3) Login div is glassmorphic.
(4) Responsive Topography in login div.
(5) Exact center alignment of login div: H & V
None of the pictures are stored by app.
Let's see some login screen shots:
How I achieved this:
(1)Background picture is changed :
Answer: look at my post
(2) Doodles are changed dynamically and adjust itself according to screen size.
Answer: Created an array of Doodles url. Then, randomly selected one from array.
(3) Login div is glassmorphic.
Answer:
https://glassmorphism.com/
(4) Responsive Topography in login div.
Answer:
(5) Exact center alignment of login div: H & V
Answer
https://www.w3schools.com/css/css_align.asp
You can find all codes mentioned in link below.
I am not a professional programmer. I just do all this in my free time. In case you are good in UI , please contact me.
This content originally appeared on DEV Community and was authored by manish srivastava
manish srivastava | Sciencx (2021-06-29T17:01:28+00:00) How to create Beautiful ❤️ Dynamic Login Screen. Retrieved from https://www.scien.cx/2021/06/29/how-to-create-beautiful-%e2%9d%a4%ef%b8%8f-dynamic-login-screen/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.