Layout de sistema - resolvido

Front-end
#1

preciso deixar o sistema assim: https://prnt.sc/1bm5kc6

mas está ficando assim: https://prnt.sc/1bm5xic

Código

html

<div class="principal">

  <div class="row">

    <div class="col-md-6">

      <img

        class="logoPaginaPrincipal"

        src="../../../assets/img/logo_degrade.png"

      />

    </div>

    <div class="col-md-3">

      <div class="fraseCriarConta"><a href="#">Crie sua conta</a></div>

    </div>

    <div class="col-md-1">

      <img

        class="botaoCriarConta"

        src="../../../assets/img/login_pagina_inicial.png"

      />

    </div>

  </div>

  <div class="row">

    <div class="col-md-8">&nbsp;</div>

    <div class="col-md-2 imgRetangulo">

      Rewards <br />

      Convallis rutrum dapibus in <br />lectus eleifend risus nisi.

    </div>

    <div class="col-2 imgRetangulo">

      Quiz Convallis rutrum dapibus<br />

      in lectus eleifend risus nisi.

    </div>

  </div>

  <div class="row">

    <div class="col-md-8">&nbsp;</div>

  </div>

  <div class="row">

    <div class="col-md-8">&nbsp;</div>

    <div class="col-md-2 imgRetangulo">

      <div>

        Minutos de sabedoria Convallis rutrum <br />dapibus in lectus eleifend

        risus nisi.

      </div>

    </div>

    <div class="col-2 imgRetangulo">

      <div>

        Biblioteca Convallis rutrum dapibus<br />

        in lectus eleifend risus nisi.

      </div>

    </div>

  </div>

  <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"

      >

        (11) 3666-1510 / (11) 998800-1049

      </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;

}

.logoPaginaPrincipal {

  padding-top: 33px;

  padding-left: 114px;

}

.botaoCriarConta {

  padding-top: 50px;

}

.fraseCriarConta {

  padding-top: 58px;

  padding-left: 350px;

  color: #cc6939;

}

a:hover,

a:active,

a {

  color: #cc6939;

}

.imgRetangulo {

  padding-top: 0px;

  background-image: url("../assets/img/retangulo.png");

  background-repeat: no-repeat;

  font-family: Gotham;

  font-style: normal;

  font-weight: normal;

  font-size: 16px;

  line-height: 120%;

  color: #ffffff;

}

O quer falta ?

A imagem do meu sistemna só está aparecendo, porque estou colocando um monte de < br >, o que é errado. Mas ela deve aparecer 100% em witdt e height, a que está no css principal

1 curtida
#2

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

2 curtidas
#3

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: 110px;

        font-family: Gotham;

        font-size: 56px;

        line-height: 120%;

        letter-spacing: 0.05em;

        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: 16px;

          line-height: 120%;

          color: #ffffff;

          padding: 10px 50px 0px 25px;

        "

      >

        <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: 14px;

          line-height: 120%;

          color: #ffffff;

          padding: 0px 0px 50px 30px;

        "

      >

        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: 16px;

          line-height: 120%;

          color: #ffffff;

          padding: 10px 150px 0px 25px;

        "

      >

        <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: 14px;

          line-height: 120%;

          color: #ffffff;

          padding: 0px 0px 50px 30px;

        "

      >

        Convallis rutrum <br />

        dapibus in lectus <br />

        eleifend risus nisi.

      </div>

    </mat-card>

  </mat-card>

  <mat-card fxLayout="row">

    <mat-card

      style="

        margin-left: 110px;

        font-family: Gotham;

        font-style: normal;

        font-weight: normal;

        font-size: 18px;

        line-height: 150%;

        letter-spacing: 0.05em;

        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: 16px;

          line-height: 120%;

          color: #ffffff;

          padding: 10px 50px 0px 25px;

        "

      >

        <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: 14px;

          line-height: 120%;

          color: #ffffff;

          padding: 0px 0px 50px 30px;

        "

      >

        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: 16px;

          line-height: 120%;

          color: #ffffff;

          padding: 10px 50px 0px 25px;

        "

      >

        <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: 14px;

          line-height: 120%;

          color: #ffffff;

          padding: 0px 0px 50px 30px;

        "

      >

        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"

      >

        (11) 3666-1510 / (11) 998800-1049

      </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: 50px;

}

.fraseCriarConta {

  padding-top: 58px;

  padding-left: 350px;

  color: #cc6939;

}

a:hover,

a:active,

a {

  color: #cc6939;

}

.imgRetangulo {

  border-radius: 10px;

  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 é.

1 curtida
#4

Se liga nesse exemplo q fiz:

image
125974583-5065c1c9-cf9a-4386-8ac1-4bfd84454230.png1600×797

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: 100vh;
  width: 100%;

  flex-direction: column;
  position: relative;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 68px;
  max-width: 1440px;
  width: 100%;

  margin: 0 auto;
  padding: 0 2em;
}

header ul {
  list-style-type: none;
}

header h1 {
  color: #fff;
}

header ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  padding: 10px;
  margin-left: 10px;
}

.hero {
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  padding: 2em;
}

.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: 100vh;
}

.content-hero {
  color: #fff;
  
  max-width: 1440px;
  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: 48px;
}

.content-hero .left button {
    padding: 10px;
    margin-top: 15px;
    background: #fff;
    border-radius: 8px;
    height: 48px;
    padding: 0 2em;
    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: 8px;
    margin: 10px;

    width: 100%;
}

.content-hero .right .wrapper .row .item {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-basis: 100%;
    flex: 1;
    margin: 10px;
    background: #000;

    width:  100%;
    height: 100%;

    padding: 2em;
}

.about-us {  
    max-width: 1440px;
    width: 100%;
   
    display: flex;
    flex-direction: column;
  
    margin-left: auto;
    margin-right: auto;   

    padding: 2em;
}
2 curtidas
#5

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

2 curtidas
#6

Não ficou 100 %

#7

Mas aí foi algo que vc implementou diferente kkkkkkk. Coloca seu código no codepen e envia o link aqui dps

1 curtida
#8

O que vi é que a imagem de fundo é diferente.

Vou colocar o código

#9

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: 56px;

              line-height: 120%;

              letter-spacing: 0.05em;

              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: 12px;

              line-height: 120%;

              letter-spacing: 0.1em;

              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: 16px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 10px 0 0 10px;

                  "

                >

                  <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: 14px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 0 60px 40px 10px;

                  "

                >

                  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: 16px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 10px 0 0 10px;

                  "

                >

                  <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: 14px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 0 60px 40px 10px;

                  "

                >

                  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: 16px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 10px 0 0 10px;

                  "

                >

                  <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: 14px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 0 60px 40px 10px;

                  "

                >

                  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: 16px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 10px 0 0 10px;

                  "

                >

                  <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: 14px;

                    line-height: 120%;

                    color: #ffffff;

                    padding: 0 60px 60px 10px;

                  "

                >

                  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"

          >

            (11) 3666-1510 / (11) 998800-1049

          </div>

        </div>

      </div>

    </app-footer>

  </div>

</div>

css

#root {

  display: flex;

  justify-content: center;

  width: 100%;

  height: 100%;

}

.app {

  display: flex;

  min-height: 100vh;

  width: 100%;

  flex-direction: column;

  position: relative;

}

header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 68px;

  max-width: 1440px;

  width: 100%;

  margin: 0 auto;

  padding: 0 2em;

}

header ul {

  list-style-type: none;

}

header h1 {

  color: #fff;

}

header ul li a {

  text-decoration: none;

  color: #fff;

  font-weight: 500;

  padding: 10px;

  margin-left: 10px;

}

.hero {

  width: 100%;

  height: 100vh;

  display: flex;

  justify-content: center;

  padding: 2em;

}

.bg-image {

  position: absolute;

  top: 0;

  background-image: url("/assets/img/tela_login.png");

  background-repeat: no-repeat;

  z-index: -1;

  width: 100%;

  height: 100vh;

}

.content-hero {

  color: #fff;

  max-width: 1440px;

  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: 48px;

}

.content-hero .left button {

  border-radius: 50px;

  padding: 10px;

  margin-top: 15px;

  background: #cc6939;

  height: 48px;

  padding: 0 2em;

  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: 8px;

  margin: 5px;

  width: 100%;

}

.content-hero .right .wrapper .row .item {

  //display: flex;

  //justify-content: center;

  //align-items: center;

  //flex-basis: 100%;

  flex: 1;

  //margin: 0px;

  //background: #000;

  background-image: url("/assets/img/retangulo.png");

  background-repeat: no-repeat;

  border-radius: 10px;

  //width: 100%;

  //height: 100%;

  //padding: 2em;

}
#10

Alguma novidade ?

#11

  • é 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: 100vh;
}

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>
                    (11) 3666-1510 / (11) 998800-1049
                </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.

1 curtida
#12

Eu imagino. Sem pressão.

Vou testar e obrigado

1 curtida
#13

Todas as respostas do @rodriguesabner foram de excelente ajuda.

grato

2 curtidas
#14

mostra ai como ficou! To curisoso kkkkkk

1 curtida
#15

https://prnt.sc/1e4fsw9 - resultado final

2 curtidas
#16

Ficou show, parabéns!

1 curtida
#17

Obrigado @rodriguesabner