rodriguesabner 16 de jul. de 2021 2 likes
Cria uma div central pra colocar as outras coisas dentro dela. Então:
<div class= "hero" >
<div>
</div>
<div>
</div>
</div>
Aí no CSS vc faz
.hero {
display: flex ;
justify-content: center ;
align-items: center ;
}
Dps só aplicar a estilização pra os outros componentes
guilhermebhte 16 de jul. de 2021 1 like
Está ficando assim: https://prnt.sc/1bshryu
html
< div class = "principal" >
< mat - card fxLayout = "row" style = "padding-top: 50px" >
< mat - card style = "margin-left: 120px"
>< img src = "../../../assets/img/logo_degrade.png"
/></ mat - card >
< mat - card style = "margin-left: 1150px; margin-right: 20px; margin-top: 5px"
>< a href = "#" > Crie sua conta </ a ></ mat - card
>
< mat - card
>< img src = "../../../assets/img/login_pagina_inicial.png"
/></ mat - card >
</ mat - card >
< mat - card fxLayout = "row" style = "padding-top: 235px" >
< mat - card
style = "
margin - left : 110 px ;
font - family : Gotham ;
font - size : 56 px ;
line - height : 120 % ;
letter - spacing : 0.05 em ;
color : # ffffff ;
"
>
PROGRAMA < br /> REWARDS OPENEEM
</ mat - card >
< mat - card style = "margin-left: 600px" class = "imgRetangulo" >
< div
style = "
text - align : center ;
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 50 px 0 px 25 px ;
"
>
< img src = "../../../assets/img/rewards.png" width = "32" height = "32" />
Rewards
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 px 0 px 50 px 30 px ;
"
>
Convallis rutrum < br />
dapibus in lectus < br />
eleifend risus nisi .
</ div >
</ mat - card >
< mat - card style = "margin-left: 50px" class = "imgRetangulo" >
< div
style = "
text - align : center ;
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 150 px 0 px 25 px ;
"
>
< img src = "../../../assets/img/quiz.png" width = "32" height = "32" />
Quiz
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 px 0 px 50 px 30 px ;
"
>
Convallis rutrum < br />
dapibus in lectus < br />
eleifend risus nisi .
</ div >
</ mat - card >
</ mat - card >
< mat - card fxLayout = "row" >
< mat - card
style = "
margin - left : 110 px ;
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 18 px ;
line - height : 150 % ;
letter - spacing : 0.05 em ;
color : # ffffff ;
"
>
Cadastre - se agora e aproveite todos os beneficios que só uma < br />
empresa referência em inovação e no compartilhamento do < br />
conhecimento pode oferecer .
</ mat - card >
< mat - card style = "margin-left: 695px" class = "imgRetangulo" >
< div
style = "
text - align : center ;
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 50 px 0 px 25 px ;
"
>
< img
src = "../../../assets/img/minuto_sabedoria.png"
width = "32"
height = "32"
/>
Minutos de < br />& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; sabedoria
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 px 0 px 50 px 30 px ;
"
>
Convallis rutrum < br />
dapibus in lectus < br />
eleifend risus nisi .
</ div >
</ mat - card >
< mat - card style = "margin-left: 30px" class = "imgRetangulo" >
< div
style = "
text - align : center ;
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 50 px 0 px 25 px ;
"
>
< img src = "../../../assets/img/biblioteca.png" width = "32" height = "32" />
Biblioteca
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 px 0 px 50 px 30 px ;
"
>
Convallis rutrum < br />
dapibus in lectus < br />
eleifend risus nisi .
</ div >
</ mat - card >
</ mat - card >
< mat - card fxLayout = "row" style = "padding-top: 20px" >
< mat - card style = "margin-left: 110px" >
< img
src = "../../../assets/img/quero_fazer_parte.png"
width = "200"
height = "40"
/>
</ mat - card >
</ mat - card >
< main class = "main mt-4" >
< div class = "container-fluid" >
< router - outlet ></ router - outlet >
< ng - http - loader
spinner = "sk-three-bounce"
backgroundColor = "#fb3"
[ minDuration ] = "1000"
>
</ ng - http - loader >
</ div >
</ main >
</ div >
< app - footer >
< div class = "container" >
< div class = "row" >
< div class = "col" > TODOS DIREITOS RESERVADOS . OPENEEM @{ { getDate () }} </ div >
< div class = "col" style = "text-align: center" > OPENEEM . LIFE SOCIAL </ div >
< div
class = "col"
style = "text-align: right; float: right; margin-right: -200px"
>
([ telefone removido ] / ( 11 ) [ telefone removido ]
</ div >
</ div >
</ div >
</ app - footer >
css
.> principal {
background-image: url ( " .. / assets / img / tela_login.png " ) ;
background-size: cover ;
background-repeat: no-repeat ;
width: 1423 ;
height: 949 ;
}
.botaoCriarConta {
padding-top: 50 px ;
}
.fraseCriarConta {
padding-top: 58 px ;
padding-left: 350 px ;
color: #cc6939;
}
a: hover ,
a: active ,
a {
color: #cc6939;
}
.imgRetangulo {
border-radius: 10 px ;
background-image: url ( " .. / assets / img / retangulo.png " ) ;
background-repeat: no-repeat ;
}
A imagem não está 100% height .
Não sei se a codificação é o melhor jeito, acho que não é.
rodriguesabner 16 de jul. de 2021 2 likes
Se liga nesse exemplo q fiz:
Html:
<!DOCTYPE html>
< html lang = "pt-br" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "main.css" >
< title > Casa Própria</ title >
</ head >
< body >
< div id = "root" >
< div class = "app" >
< header >
< h1 >
Abner
</ h1 >
< nav >
< ul >
< li >
< a href = "#" > Botao 1</ a >
< a href = "#" > Botao 2</ a >
< a href = "#" > Botao 3</ a >
< a href = "#" > Botao 4</ a >
</ li >
</ ul >
</ nav >
</ header >
< div class = "bg-image" ></ div >
< div class = "hero" >
< div class = "content-hero" >
< div class = "left" >
< h1 >
Você pode realizar os seus sonhos
</ h1 >
< p >
Entre em nossa lista de espera e garanta sua casa própria.
</ p >
< button >
Botão maneiro
</ button >
</ div >
< div class = "right" >
< div class = "wrapper" >
< div class = "row" >
< div class = "item" >
Item 1
</ div >
< div class = "item" >
Item 2
</ div >
</ div >
< div class = "row" >
< div class = "item" >
Item 1
</ div >
< div class = "item" >
Item 2
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< div class = "about-us" >
< h1 >
Sobre Nós
</ h1 >
< p >
lkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksalkjd klwqjkldjlksalk djaksjd
sasklajdl sajdkljasldjlksa
</ p >
</ div >
< footer >
</ footer >
</ div >
</ div >
</ body >
</ html >
Css:
@import url ( "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" );
* {
margin : 0 ;
padding : 0 ;
box - sizing : border - box ;
font - family : "Inter" , sans - serif ;
}
#root {
display : flex ;
justify - content : center ;
width : 100 % ;
height : 100 % ;
}
. app {
display : flex ;
min - height : 100 vh ;
width : 100 % ;
flex - direction : column ;
position : relative ;
}
header {
display : flex ;
align - items : center ;
justify - content : space - between ;
height : 68 px ;
max - width : 1440 px ;
width : 100 % ;
margin : 0 auto ;
padding : 0 2 em ;
}
header ul {
list - style - type : none ;
}
header h1 {
color : #fff;
}
header ul li a {
text - decoration : none ;
color : #fff;
font - weight : 500 ;
padding : 10 px ;
margin - left : 10 px ;
}
. hero {
width : 100 % ;
height : 100 vh ;
display : flex ;
justify - content : center ;
padding : 2 em ;
}
. bg - image {
position : absolute ;
top : 0 ;
background - image : url ( "https://images.pexels.com/photos/943899/pexels-photo-943899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" );
z - index : - 1 ;
width : 100 % ;
height : 100 vh ;
}
. content - hero {
color : #fff;
max - width : 1440 px ;
width : 100 % ;
height : auto ;
display : flex ;
align - items : center ;
justify - content : center ;
align - items : center ;
margin - left : auto ;
margin - right : auto ;
}
. content - hero . left {
width : 50 % ;
}
. content - hero . left h1 {
font - size : 48 px ;
}
. content - hero . left button {
padding : 10 px ;
margin - top : 15 px ;
background : #fff;
border - radius : 8 px ;
height : 48 px ;
padding : 0 2 em ;
cursor : pointer ;
outline : 0 ;
border : 0 ;
}
. content - hero . right {
display : flex ;
flex - wrap : wrap ;
width : 40 % ;
}
. content - hero . right . wrapper {
display : flex ;
flex - direction : row ;
flex - wrap : wrap ;
width : 100 % ;
list - style - type : none ;
}
. content - hero . right . wrapper . row {
display : flex ;
justify - content : center ;
align - items : center ;
border - radius : 8 px ;
margin : 10 px ;
width : 100 % ;
}
. content - hero . right . wrapper . row . item {
display : flex ;
justify - content : center ;
align - items : center ;
flex - basis : 100 % ;
flex : 1 ;
margin : 10 px ;
background : #000;
width : 100 % ;
height : 100 % ;
padding : 2 em ;
}
. about - us {
max - width : 1440 px ;
width : 100 % ;
display : flex ;
flex - direction : column ;
margin - left : auto ;
margin - right : auto ;
padding : 2 em ;
}
rodriguesabner 16 de jul. de 2021 2 likes
Vou colocar algumas obs nessa outra resposta pra n ficar muito gigante.
Seguinte:
Ao invés de usar o <br/>, vc pode usar o
display : flex ;
flex-direction : column ;
/*isso permite que as coisas fiquem uma abaixo da outra*/
Evite passar um tamanho absoluto pra as coisas, nem todo mundo pode ter o mesmo tamanho de tela que vc, principalmente os usuários mobile.
Tô indo mexer num outro projeto agora, qualquer duvida manda aí
Outra coisa, usando o 100vh ao inves de 100%, possibilita que o hero fique do tamanho da tela do cliente. Seja mobile, tv, desktop, monitor pequeno… Dá uma olhada no vídeo abaixo pra vc entender
guilhermebhte 19 de jul. de 2021
Não ficou 100 %
Captured with Lightshot
rodriguesabner 19 de jul. de 2021 1 like
Mas aí foi algo que vc implementou diferente kkkkkkk. Coloca seu código no codepen e envia o link aqui dps
guilhermebhte 19 de jul. de 2021
O que vi é que a imagem de fundo é diferente.
Vou colocar o código
guilhermebhte 19 de jul. de 2021
Mudei algumas coisas, mas para tentar adptar ao meu código.
html
< div id = "root" >
< div class = "app" >
< header >
< h1 ></ h1 >
< nav >
< ul >
< li >
< a ( click ) = "cadastrar()" style = "cursor: pointer" > Crie sua conta </ a >
< a ( click ) = "login()" style = "cursor: pointer"
>< img src = "../../../assets/img/login_pagina_inicial.png"
/></ a >
</ li >
</ ul >
</ nav >
</ header >
< div class = "bg-image" ></ div >
< div class = "hero" >
< div class = "content-hero" >
< div class = "left" >
< h1
style = "
font - family : Gotham ;
font - size : 56 px ;
line - height : 120 % ;
letter - spacing : 0.05 em ;
color : # ffffff ;
"
>
PROGRAMA REWARDS OPENEEM
</ h1 >
< p >
Cadastre - se agora e aproveite todos os beneficios que só uma empresa
referência em inovação e no compartilhamento do conhecimento pode
oferecer .
</ p >
< button
( click ) = "cadastrar()"
style = "
font - family : Gotham ;
font - size : 12 px ;
line - height : 120 % ;
letter - spacing : 0.1 em ;
color : # ffffff ;
"
>
QUERO FAZER PARTE
</ button >
</ div >
< div class = "right" >
< div class = "wrapper" >
< div class = "row" style = "padding-left: 100px" >
< div class = "item" >
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 0 0 10 px ;
"
>
< img
src = "../../../assets/img/rewards.png"
width = "32"
height = "32"
/>
Rewards
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 60 px 40 px 10 px ;
"
>
Convallis rutrum dapibus in lectus eleifend risus nisi .
</ div >
</ div >
< div class = "item" >
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 0 0 10 px ;
"
>
< img
src = "../../../assets/img/quiz.png"
width = "32"
height = "32"
/>
Quiz
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 60 px 40 px 10 px ;
"
>
Convallis rutrum dapibus in lectus eleifend risus nisi .
</ div >
</ div >
</ div >
< div class = "row" style = "padding-left: 100px" >
< div class = "item" >
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 0 0 10 px ;
"
>
< img
src = "../../../assets/img/minuto_sabedoria.png"
width = "32"
height = "32"
/>
Minutos de
< br />& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ;
sabedoria
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 60 px 40 px 10 px ;
"
>
Convallis rutrum dapibus in lectus eleifend risus nisi .
</ div >
</ div >
< div class = "item" >
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 16 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 10 px 0 0 10 px ;
"
>
< img
src = "../../../assets/img/biblioteca.png"
width = "32"
height = "32"
/>
Biblioteca
</ div >
< br />
< div
style = "
font - family : Gotham ;
font - style : normal ;
font - weight : normal ;
font - size : 14 px ;
line - height : 120 % ;
color : # ffffff ;
padding : 0 60 px 60 px 10 px ;
"
>
Convallis rutrum dapibus in lectus eleifend risus nisi .
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< app - footer >
< div class = "container" >
< div class = "row" >
< div class = "col" >
TODOS DIREITOS RESERVADOS . OPENEEM @{ { getDate () }}
</ div >
< div class = "col" style = "text-align: center" > OPENEEM . LIFE SOCIAL </ div >
< div
class = "col"
style = "text-align: right; float: right; margin-right: -200px"
>
([ telefone removido ] / ( 11 ) [ telefone removido ]
</ div >
</ div >
</ div >
</ app - footer >
</ div >
</ div >
css
# root {
display : flex ;
justify-content : center ;
width : 100 % ;
height : 100 % ;
}
. app {
display : flex ;
min-height : 100 vh ;
width : 100 % ;
flex-direction : column ;
position : relative ;
}
header {
display : flex ;
align-items : center ;
justify-content : space-between ;
height : 68 px ;
max-width : 1440 px ;
width : 100 % ;
margin : 0 auto ;
padding : 0 2 em ;
}
header ul {
list-style-type : none ;
}
header h1 {
color : #fff ;
}
header ul li a {
text-decoration : none ;
color : #fff ;
font-weight : 500 ;
padding : 10 px ;
margin-left : 10 px ;
}
. hero {
width : 100 % ;
height : 100 vh ;
display : flex ;
justify-content : center ;
padding : 2 em ;
}
. bg-image {
position : absolute ;
top : 0 ;
background-image : url ( "/assets/img/tela_login.png" );
background-repeat : no-repeat ;
z-index : -1 ;
width : 100 % ;
height : 100 vh ;
}
. content-hero {
color : #fff ;
max-width : 1440 px ;
width : 100 % ;
height : auto ;
display : flex ;
align-items : center ;
justify-content : center ;
align-items : center ;
margin-left : auto ;
margin-right : auto ;
}
. content-hero . left {
width : 50 % ;
}
. content-hero . left h1 {
font-size : 48 px ;
}
. content-hero . left button {
border-radius : 50 px ;
padding : 10 px ;
margin-top : 15 px ;
background : #cc6939 ;
height : 48 px ;
padding : 0 2 em ;
cursor : pointer ;
outline : 0 ;
border : 0 ;
}
. content-hero . right {
display : flex ;
flex-wrap : wrap ;
width : 40 % ;
}
. content-hero . right . wrapper {
display : flex ;
flex-direction : row ;
flex-wrap : wrap ;
width : 100 % ;
list-style-type : none ;
}
. content-hero . right . wrapper . row {
display : flex ;
justify-content : center ;
align-items : center ;
border-radius : 8 px ;
margin : 5 px ;
width : 100 % ;
}
. content-hero . right . wrapper . row . item {
// display : flex ;
// justify-content : center ;
// align-items : center ;
// flex-basis : 100 % ;
flex : 1 ;
// margin : 0 px ;
// background : #000 ;
background-image : url ( "/assets/img/retangulo.png" );
background-repeat : no-repeat ;
border-radius : 10 px ;
// width : 100 % ;
// height : 100 % ;
// padding : 2 em ;
}
guilhermebhte 20 de jul. de 2021
Solucao aceita
rodriguesabner 21 de jul. de 2021 1 like
{ margin: 0; padding: 0; box-sizing: border-box; font-family: “Inter”, sans-serif; }
é importante vc manter esse trecho do código. A fonte não é necessário, mas o restante sim.
coloca o seu .bg-image assim:
.bg-image {
position: absolute ;
top: 0 ;
background-image: url ( " ... " ) ;
/* background-repeat: no-repeat; */
background-size: cover ;
z-index: -1 ;
width: 100% ;
height: 100 vh ;
}
Tem um col lá em baixo que vc usou float: right;, não faça isso, use o justify-content;
deixa seu app-footer assim:
< footer class = "footer-container" >
< p >
TODOS DIREITOS RESERVADOS . OPENEEM @{ { getDate () }}
< b > OPENEEM . LIFE SOCIAL </ b >
</ p >
< p >
([ telefone removido ] / ( 11 ) [ telefone removido ]
</ p >
</ footer >
E lá no CSS:
.footer-container {
width: 100% ;
display: flex ;
justify-content: space-between ;
align-items: center ;
}
E sem apressar, pq o amiguinho aqui também trabalha.
guilhermebhte 21 de jul. de 2021 1 like
Eu imagino. Sem pressão.
Vou testar e obrigado
guilhermebhte 21 de jul. de 2021 2 likes
Todas as respostas do @rodriguesabner foram de excelente ajuda.
grato
rodriguesabner 21 de jul. de 2021 1 like
mostra ai como ficou! To curisoso kkkkkk
guilhermebhte 21 de jul. de 2021 2 likes
rodriguesabner 21 de jul. de 2021 1 like
guilhermebhte 21 de jul. de 2021
