finish layout and add links to buttons
Bruno Windels
parent
e1e364f7c7
commit
2411d5286b
|
|
@ -66,8 +66,12 @@ h1::after {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 10px;
|
border-radius: 4px;
|
||||||
width: 140px;
|
width: 150px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 10px center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #2e2f32 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_ButtonRow {
|
.mx_ButtonRow {
|
||||||
|
|
@ -75,8 +79,7 @@ h1::after {
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 600px;
|
width: 480px;
|
||||||
height: 120px;
|
|
||||||
-webkit-justify-content: space-around;
|
-webkit-justify-content: space-around;
|
||||||
-ms-flex-pack: distribute;
|
-ms-flex-pack: distribute;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
@ -84,27 +87,28 @@ h1::after {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 40px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 28px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_buttonheadline {
|
.mx_buttonheadline {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_buttonicon {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_buttonlabel {
|
.mx_buttonlabel {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_buttonwrappertext {
|
.mx_buttonwrappertext {
|
||||||
|
font-size: 13px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Header2 {
|
.mx_Header2 {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -115,20 +119,33 @@ h1::after {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_ButtonSignIn {
|
.mx_ButtonSignIn {
|
||||||
background: #368BD6;
|
background-color: #368BD6;
|
||||||
color: white;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_ButtonCreateAccount {
|
.mx_ButtonCreateAccount {
|
||||||
background: #03B381;
|
background-color: #03B381;
|
||||||
color: white;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_secondarybutton {
|
.mx_secondarybutton {
|
||||||
background: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
color: #2E2F32;
|
color: #2E2F32;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_Button_iconSignIn {
|
||||||
|
background-image: url('home/images/icon-sign-in.svg');
|
||||||
|
}
|
||||||
|
.mx_Button_iconCreateAccount {
|
||||||
|
background-image: url('home/images/icon-create-account.svg');
|
||||||
|
}
|
||||||
|
.mx_Button_iconHelp {
|
||||||
|
background-image: url('home/images/icon-help.svg');
|
||||||
|
}
|
||||||
|
.mx_Button_iconRoomDirectory {
|
||||||
|
background-image: url('home/images/icon-room-directory.svg');
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="mx_Parent">
|
<div class="mx_Parent">
|
||||||
|
|
@ -139,29 +156,25 @@ h1::after {
|
||||||
<h4 class="mx_Header22">_t("Decentralised, encrypted chat & collaboration powered by [matrix]")</h4>
|
<h4 class="mx_Header22">_t("Decentralised, encrypted chat & collaboration powered by [matrix]")</h4>
|
||||||
<div class="mx_Well">
|
<div class="mx_Well">
|
||||||
<div class="mx_ButtonRow">
|
<div class="mx_ButtonRow">
|
||||||
<div class="mx_ButtonParent mx_ButtonSignIn">
|
<a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
|
||||||
<img src="home/images/icon-sign-in.svg" alt="" class="mx_buttonicon"/>
|
<div class="mx_buttonlabel">_t("Sign In")</div>
|
||||||
<div class="mx_buttonlabel">Sign In</div>
|
</a>
|
||||||
</div>
|
<a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
|
||||||
<div class="mx_ButtonParent mx_ButtonCreateAccount">
|
<div class="mx_buttonlabel">_t("Create Account")</div>
|
||||||
<img src="home/images/icon-create-account.svg" alt="" class="mx_buttonicon"/>
|
</a>
|
||||||
<div class="mx_buttonlabel">Create Account</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mx_ButtonRow">
|
<div class="mx_ButtonRow">
|
||||||
<div class="mx_buttonwrapper">
|
<div class="mx_buttonwrapper">
|
||||||
<div class="mx_buttonwrappertext">Need help?</div>
|
<div class="mx_buttonwrappertext">_t("Need help?")</div>
|
||||||
<div class="mx_ButtonParent mx_secondarybutton">
|
<a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_secondarybutton mx_Button_iconHelp">
|
||||||
<img src="home/images/icon-help.svg" alt="" class="mx_buttonicon"/>
|
<div class="mx_buttonlabel">_t("Chat with Riot Bot")</div>
|
||||||
<div class="mx_buttonlabel">Chat with Riot Bot</div>
|
</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mx_buttonwrapper">
|
<div class="mx_buttonwrapper">
|
||||||
<div class="mx_buttonwrappertext">Explore rooms</div>
|
<div class="mx_buttonwrappertext">_t("Explore rooms")</div>
|
||||||
<div class="mx_ButtonParent mx_secondarybutton">
|
<a href="#/directory" class="mx_ButtonParent mx_secondarybutton mx_Button_iconRoomDirectory">
|
||||||
<img src="home/images/icon-room-directory.svg" alt="" class="mx_buttonicon"/>
|
<div class="mx_buttonlabel">_t("Room Directory")</div>
|
||||||
<div class="mx_buttonlabel">Room Directory</div>
|
</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue