Layout content

Hello,

On my landing page (here : https://www.thejewellerycorner.com/), I am looking for having the logo at the top, the “coming soon’ block at the middle, and the contact block at the bottom. And always with a display on 100% height/width of the screen size (desktop, ipad, mobile…).

I have tried this code, but it does not work very well (by example, contact block does not stay at the bottom according to desktop/tablet/mobile and it is not centered)

#kad-banner, #pageheader, .footerclass {
    display: none;
}
html, .home.page, .container, .contentclass, .row, .main, .homecontent, #pl-5, .panel-grid, .panel-row-style, .panel-grid-cell { /*Content container*/
    height: 100% !important;
    max-height: 900px;
    position: relative;
}
#panel-5-0-0-0 { /*logo*/
    margin-top: 0px;
    margin-bottom: 0px !important;
}
#panel-5-0-0-1 { /*coming soon*/
    border-top: 1px solid rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(0,0,0,0.15);
    position: relative;
    top: 25%;
}
#panel-5-0-0-2 { /*contact*/
    position: absolute;
    bottom: 30px;
}

Is it possible to do this ?

Thanks very much for your help