How to customize modern pages in sharepoint

I am using modern page in online sharepoint as my home page(first page of the project). However they asked me to customize it, they need to be a header for navigators and the color of header should be grey. The text of the header should be with white color. Under the header I should add my logo with fixed width and height(I should change them by css and it should be in the right of the page). Under the logo I have to put news web part , world clock web part and and a web part that takes a details of attendance time from sql database. Then I should add the image of the institution,The Events web part, Instagram page of the institution(that takes the last post), the Google map web part and finally the count down timer for the coming celebration or event. Also, I have to hide the site contents for if the user is not admin.
How to do that all in modern pages? since I read that it's not possible to edit the css code of modern page. But it's important for me to create my project. And If I used the normal aspx page, those web parts will not be ready there. Any suggestion?
You can see what I need to do exactly in the following image:

https://ibb.co/4V7YFWb

And this default header I want to remove it or hide it for if the user is not admin:https://ibb.co/ftkwLVx

Can any one help me? How to customize the page using css ? How to put the logo with the size that I want? How to add my header and customize it with the colors that I want and with navigation's that I need? How to connect with a database to get the time that user attend to be visible for him only?