Login Page like APEX Builder Login

the question has been posted in Oracle Apex community (https://community.oracle.com/thread/4117496) and Maxime give here a easy way to do that.
I'm just doing a blog here to show it. This trick allows you to have the Login Page as in apex builder Login page

1- create the header region

Here's the text so that you can copy paste:

Source:

1. <a href="&LOGIN_URL." class="a-Header-logo" title="Oracle Application Express">  
2.   <span class="a-Header-apexLogo"></span>  
3. </a>  

CSS Classes:

1. a-Header a-Header--login  

2- Second, we'll need to reuse the same CSS as the APEX Builder Login page and copy that in your login page inline CSS.

1. .t-PageBody--login {  
2.     background-color: #DEE1E3;  
3.     background-image: linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);  
4.     background-size: 96px 96px,96px 96px,24px 24px,24px 24px;  
5.     background-position: -1px -1px;  
6.     min-width: 0;  
7. }  
8.   
9. .a-Header--login {  
10.     background-color: rgba(255,255,255,.25);  
11.     box-shadow: none;  
12.     position: absolute;  
13.     left: 0;  
14.     right: 0;  
15.     top: 0;  
16.     transition: background-color .2s;  
17.     z-index: 800;  
18. }  
19.   
20. .a-Header--login:hover {  
21.     background-color: rgba(255,255,255,.95);  
22. }  
23.   
24. .a-Header {  
25.     min-height: 40px; /* Change this to match your logo's height and padding */  
26. }  
27.   
28. .a-Header-logo {  
29.     color: #404040;  
30.     padding: 10px 12px;  
31.     font-size: 14px;  
32.     line-height: 20px; /* Change this to match your image height */  
33. }  
34.   
35. .a-Header-apexLogo {  
36.     background-image: url('#IMAGE_PREFIX#apex_ui/img/apex-logo.svg'); /* Change this to use your logo */  
37.     background-position: 0 0;  
38.     background-repeat: no-repeat;  
39.     font-weight: 700;  
40.     width: 212px; /* Change this to match your image width */  
41.     height: 20px; /* Change this to match your image height */  
42.     margin: 0;  
43. }  
44.   
45. .a-Header-apexLogo, .a-Header-logo {  
46.     display: inline-block;  
47.     vertical-align: top;  
48. }  

Demo
https://apex.oracle.com/pls/apex/f?p=61549:101