151 lines
2.6 KiB
CSS
151 lines
2.6 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
|
|
|
|
/* GLOBAL */
|
|
html, body {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
body{
|
|
background-color: #E0E5EC;
|
|
color: rgb(44,44,46)
|
|
}
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
}
|
|
.btn {
|
|
color: rgb(44,44,46);
|
|
padding: 2vh;
|
|
border-radius: 1vh;
|
|
text-decoration: none;
|
|
background-color:#E0E5EC;
|
|
box-shadow: 5px 5px 13px rgb(163,177,198,0.6), -5px -5px 16px rgba(255,255,255, 0.5);
|
|
}
|
|
ul, h1{
|
|
margin: 0px;
|
|
}
|
|
|
|
|
|
/* TYPOS */
|
|
.text-muted{
|
|
color: rgb(142, 142, 147);
|
|
}
|
|
|
|
|
|
/*
|
|
* NAVBAR
|
|
*/
|
|
.main-nav ul {
|
|
list-style-type: none;
|
|
padding: 2vh;
|
|
overflow: hidden;
|
|
background-color:#E0E5EC;
|
|
box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -5px -5px 16px rgba(255,255,255, 0.5);
|
|
}
|
|
|
|
.main-nav ul li {
|
|
float: left;
|
|
}
|
|
|
|
.main-nav ul li a {
|
|
display: block;
|
|
color: rgb(44,44,46);
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/*
|
|
* JUMBOTRON
|
|
*/
|
|
.jumbotron{
|
|
margin: 0px;
|
|
/*height: 95vh;*/
|
|
display: block;
|
|
margin: 10vh;
|
|
}
|
|
.jumbotron .text-lead{
|
|
width: 120vh;
|
|
display: float;
|
|
float: left;
|
|
}
|
|
.jumbotron h1{
|
|
font-size: 4em;
|
|
}
|
|
.lead-btn{
|
|
list-style: none;
|
|
padding: 0px;
|
|
display: block;
|
|
}
|
|
.lead-btn li{
|
|
float: left;
|
|
margin-left: 0px;
|
|
margin-right: 2vh;
|
|
margin-top: 4vh;
|
|
}
|
|
.image-lead img{
|
|
padding-top: 10%;
|
|
height: 40vh;
|
|
float: right;
|
|
display: float;
|
|
|
|
}
|
|
|
|
|
|
/*
|
|
* USERS PAGE
|
|
*/
|
|
.navbar-container{
|
|
margin: 0 auto;
|
|
width: 35%;
|
|
}
|
|
.navbar-container input{
|
|
width: 100%;
|
|
background-color:#E0E5EC;
|
|
box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -6px -6px 16px rgba(255,255,255, 0.5);
|
|
border: 0px solid black;
|
|
font-size: 1.5em;
|
|
padding: 1.5vh;
|
|
border-radius: 1vh;
|
|
margin-top: 5vh;
|
|
color: rgb(72, 72, 74);
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
|
|
/* CARD */
|
|
.card{
|
|
background-color:#E0E5EC;
|
|
box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -5px -5px 16px rgba(255,255,255, 0.5);
|
|
width: 50vh;
|
|
padding-bottom: 1vh;
|
|
margin: 5vh;
|
|
}
|
|
.card .avatar img{
|
|
width: 15vh;
|
|
border-radius: 50%;
|
|
margin: 2vh;
|
|
float: left;
|
|
box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -5px -5px 16px rgba(255,255,255, 0.5);
|
|
}
|
|
.card .avatar{
|
|
text-align: center;
|
|
}
|
|
.card .content{
|
|
float: right;
|
|
margin-right: 5vh;
|
|
margin-top: 2vh;
|
|
color: rgb(99, 99, 102);
|
|
}
|
|
.card-btn{
|
|
margin-top: 2vh;
|
|
margin-left: 0px;
|
|
text-align: center;
|
|
display: block;
|
|
} |