element-web/res/home-status.html

<style type="text/css">

/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
 * voodoo where we have to set display: none by default
 */

.mx_HomePage_container {
    text-align: center;
    display: block ! important;
    width: 690px;
    margin: 20px;
}

.mx_HomePage_header {
    margin-top: 37px;
    margin-left: 10px;
    width: 670px;
    box-sizing: border-box;
    font-size: 18px;
    background-color: #fff;
    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
    border-radius: 5px;
    padding: 20px 80px 20px 80px;
    align-items: center;
}

.mx_HomePage_header h1 {
    font-size: 29px;
    margin-bottom: 10px;
}

.mx_HomePage_intro h2 {
    margin-top: 32px;
    font-size: 25px;
    color: #49555F;
}

.mx_HomePage_intro {
    margin: auto;
    width: 600px;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 18px;
}

.mx_HomePage_coc {
    font-size: 16px;
}

.mx_HomePage_coc a {
    color: #4360DF;
}

.mx_HomePage_room, .mx_HomePage_telegram {
    float: left;
    background-color: #fff;
    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
    border-radius: 5px;
    margin: 10px;
    width: 210px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mx_HomePage_telegram {
    background-color: transparent;
    border: 1px solid rgba(113, 129, 142, 0.2);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 16px;
    line-height: 25px;
    box-sizing: border-box;
}

.mx_HomePage_telegram a {
    text-transform: uppercase;
    color: #4360DF;
    font-size: 13px;
    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
    font-weight: 600;
}

.mx_HomePage_room .mx_HomePage_icon {
    margin-top: 24px;
    margin-bottom: 16px;
    width: 50px;
    height: 50px;
}

.mx_HomePage_room .mx_HomePage_name {
    display: block;
    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
    font-weight: 600;
    font-size: 15px;
    color: #49555F;
    line-height: 25px;
    margin: 0px 12px 0px 12px;
}

.mx_HomePage_room .mx_HomePage_desc {
    flex: 1;
    display: block;
    margin: 0px 12px 0px 12px;
    font-size: 14px;
    line-height: 20px;
}

.mx_HomePage_button {
    align-self: normal;
    margin: 12px;
    border-radius: 8px;
    border: 1px solid rgba(199, 206, 209, 0.12);
    background-color: #6CC1F6;
    font-size: 13px;
    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff ! important;
    cursor: pointer;
    outline: none;
    padding: 14px;
    box-sizing: border-box;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

</style>

<div class="mx_HomePage_container">
    <div class="mx_HomePage_header">
        <div>
            <h1>Welcome to Status Community Chat, powered by Riot.</h1>
            <p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p>
        </div>
    </div>

    <div class="mx_HomePage_intro">
        <h2>Our rooms</h2>
        <p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p>
        <p class="mx_HomePage_coc">Before posting please refer to our <a href="#">Code of Conduct</a></p>
    </div>


    <div class="mx_HomePage_room">
        <img class="mx_HomePage_icon" src="themes/status/img/a.png">
        <span class="mx_HomePage_name">#announcements</span>
        <span class="mx_HomePage_desc">Company wide announcements.</span>
        <a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a>
    </div>
    <div class="mx_HomePage_room">
        <img class="mx_HomePage_icon" src="themes/status/img/i.png">
        <span class="mx_HomePage_name">#introductions</span>
        <span class="mx_HomePage_desc">Newcomer introductions.</span>
        <a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a>
    </div>
    <div class="mx_HomePage_room">
        <img class="mx_HomePage_icon" src="themes/status/img/g.png">
        <span class="mx_HomePage_name">#general</span>
        <span class="mx_HomePage_desc">General discussions of Status.</span>
        <a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a>
    </div>
    <div class="mx_HomePage_room">
        <img class="mx_HomePage_icon" src="themes/status/img/d.png">
        <span class="mx_HomePage_name">#dev-status</span>
        <span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span>
        <a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a>
    </div>
    <div class="mx_HomePage_room">
        <img class="mx_HomePage_icon" src="themes/status/img/n.png">
        <span class="mx_HomePage_name">#news-articles</span>
        <span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span>
        <a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a>
    </div>
    <div class="mx_HomePage_telegram">
        <p>
            Interested in market and cryptocurrency type discussions?
        </p>
        <a href="#">Join Telegram</a>
    </div>
</div>