Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- font-family: 'oswald', sans-serif;
- box-sizing: border-box;
- }
- body {
- height: 100vh;
- margin: 0px;
- display: grid;
- grid-template-rows: 120px 1fr 60px;
- grid-template-columns: 1fr;
- grid-template-areas:
- "cabecalho"
- "principal"
- "rodape";
- }
- .cabecalho{
- grid-area: cabecalho;
- background-color: blue;
- color: white;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding-bottom: 10px;
- z-index: 1;
- box-shadow: 0px 4px 9px -2px rgba(0,0,0,0.75);
- }
- .cabecalho > h2 {
- margin: 0px;
- font-weight: 200;
- font-size: 1.6rem;
- }
- .principal{
- grid-area: rodape;
- height: calc(100vh - 180px);
- background-color: #f0f0f0;
- padding: 20px ;
- }
- .conteudo{
- position: relative;
- height: 100%;
- overflow-y: scroll;
- background-color: whitesmoke;
- padding: 20px;
- box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75)
- }
- .rodape{
- grid-area: rodape;
- background-color: #ffffff;
- display: flex ;
- justify-content: center; /*alinha no meio*/
- align-items: center;
- font-size: 1.2rem;
- padding-right: 20px;
- color: #444444;
- position: sticky;
- bottom: 0px,
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement