167 lines
2.9 KiB
CSS
167 lines
2.9 KiB
CSS
@font-face {
|
|
font-family: righteous;
|
|
src: url(../font/Righteous-Regular.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: monsterrat_regular;
|
|
src: url(../font/Montserrat-Regular.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: monsterrat_bold;
|
|
src: url(../font/Montserrat-Bold.ttf);
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: monsterrat_regular;
|
|
font-size: 24px;
|
|
background-color: #283e3e;
|
|
color: white;
|
|
}
|
|
|
|
.root_div{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.root_div > .side_panel_div{
|
|
width: 100%;
|
|
}
|
|
|
|
.title_div{
|
|
margin-left: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
align-content: center;
|
|
}
|
|
.title_div > img {
|
|
width:150px;
|
|
height: 150px;
|
|
margin-right: 50px;
|
|
}
|
|
.title_div > h1 {
|
|
font-family: righteous;
|
|
font-size: 120px;
|
|
}
|
|
|
|
.apps_title_div {
|
|
margin-top: 100px;
|
|
}
|
|
.apps_title_div > h2 {
|
|
font-family: monsterrat_bold;
|
|
font-size: 48px;
|
|
text-align: center;
|
|
}
|
|
.apps_title_div > hr {
|
|
height: 6px;
|
|
width:75%;
|
|
background-color: white;
|
|
border-width: 0px;
|
|
border-radius: 3px;
|
|
align-self: center;
|
|
}
|
|
|
|
.app_option_div {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 25px;
|
|
border-radius: 25px;
|
|
background-color: #304b4bFF;
|
|
}
|
|
.app_option_div > img {
|
|
height: 200px;
|
|
width: 200px;
|
|
margin: 25px;
|
|
}
|
|
.app_option_div > div > h3 {
|
|
font-family: monsterrat_bold;
|
|
font-size: 36px;
|
|
}
|
|
.app_option_div > div > p {
|
|
font-family: monsterrat_regular;
|
|
font-size: 24px;
|
|
}
|
|
.app_option_div > div > p > a {
|
|
color: #6dde99;
|
|
font-family: monsterrat_bold;
|
|
}
|
|
.app_option_div > a {
|
|
position: absolute;
|
|
height: 50px;
|
|
width: 125px;
|
|
bottom: 25px;
|
|
right: 25px;
|
|
align-self: flex-end;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
border: none;
|
|
background-color: #6dde99;
|
|
}
|
|
.app_option_div > a > p {
|
|
font-family: monsterrat_bold;
|
|
font-size: 18px;
|
|
width: 100%;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
a {
|
|
font-family: monsterrat_regular;
|
|
color: white;
|
|
text-decoration:none;
|
|
cursor: pointer;
|
|
}
|
|
.menu_option_a {
|
|
font-family: monsterrat_bold;
|
|
font-size: 48px;
|
|
|
|
border: none;
|
|
border-radius: 20px;
|
|
background-color: transparent;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin-left: 50px;
|
|
padding-left: 50px;
|
|
padding-right: 50px;
|
|
}
|
|
.menu_option_a:hover{
|
|
background-color: #304b4bFF;;
|
|
}
|
|
.menu_option_a > img {
|
|
width:100px;
|
|
height:75px;
|
|
margin-right: 50px;
|
|
}
|
|
.menu_option_a > p > span {
|
|
color: #88d4d4;
|
|
}
|
|
|
|
|
|
@media (min-width: 1300px) {
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.root_div{
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.root_div > .side_panel_div{
|
|
width: 50%;
|
|
}
|
|
|
|
.apps_selection_div {
|
|
max-height: 75vh;
|
|
overflow-y: auto;
|
|
}
|
|
} |