mudar posição do card

gabrielpaiva2 · Novembro 3, 2022

Gostaria de centralizar o card 1,2 e 3 e colocar o 4 e 5 em baixo, que tipo de alteração faço

algo como na img Cards Projeto (codepen.io)

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
  <script defer src="js/jquery.js"></script>
  <script defer src="js/script.js"></script>
  <script defer src="js/script-form-list.js"></script>
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/style.css">
  <title>TITULO</title>
</head>

<body>
  <!--cabeçalho:logo,menu,login-->
  <header>
    <div class="logo">
      <i><img src="" alt="Image" height="460" width="520"></i>
    </div>

    <div>
      <nav id='menu'>
        <nav class="cabeçalho-link">
          <a href='item1.html'><button>Base</button></a>
          <a href='item1.html'><button>Sobre</button></a>
          <a href='item1.html'><button>Contatos</button></a>
          <a href='item1.html'><button>Planos</button></a>

          <div class="icones">
            <a id='iconLogin' class="fa-sharp fa-solid fa-users-line"></a>
          </div>
          <section id='login'>
            campo login
            <a id='fecharLogin'>X</a>
          </section>
        </nav>
    </div>
  </header>
<main>
  <section class="main-content">
    <div class="container">
      <h1 class="page-title text-center">Equipe<b></b></h1>
      <div class="row">

        <div class="col-md-3 col-sm-4">
          <div class="card">
            <div class="card_cover">
            </div>
            <div class="card_padding">
              <div class="card_image">
                <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg"
                  alt="">
              </div>
              <div class="card_details">
                <h3>NOME1</h3>
                <p class="text">Função</p>
              </div>
              <div class="card_social">
                <a href=#!>
                  <img src="./imagens/card/social/linkedin.png" alt="Linkedin">
                </a>
                <a href=>
                  <img src="./imagens/card/social/github.png" alt="Twitter">
                </a>

              </div>
            </div>
          </div>
        </div>



        <div class="col-md-3 col-sm-4">
          <div class="card">
            <div class="card_cover">
            </div>
            <div class="card_padding">
              <div class="card_image">
                <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg"
                  alt="">
              </div>
              <div class="card_details">
                <h3>NOME2</h3>
                <p class="text">Função</p>
              </div>
              <div class="card_social">
                <a href=#!>
                  <img src="./imagens/card/social/linkedin.png" alt="Linkedin">
                </a>
                <a href=>
                  <img src="./imagens/card/social/github.png" alt="Twitter">
                </a>
              </div>
            </div>
          </div>
        </div>


        <div class="col-md-3 col-sm-4">
          <div class="card">
            <div class="card_cover">
            </div>
            <div class="card_padding">
              <div class="card_image">
                <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg"
                  alt="">
              </div>
              <div class="card_details">
                <h3>NOME3</h3>
                <p class="text">Função</p>
              </div>
              <div class="card_social">
                <a href=#!>
                  <img src="./imagens/card/social/linkedin.png" alt="Linkedin">
                </a>
                <a href=>
                  <img src="./imagens/card/social/github.png" alt="Twitter">
                </a>
              </div>
            </div>
          </div>
        </div>



 <div class="col-md-3 col-sm-4">
          <div class="card">
            <div class="card_cover">
            </div>
            <div class="card_padding">
              <div class="card_image">
                <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg"
                  alt="">
              </div>
              <div class="card_details">
                <h3>NOME4</h3>
                <p class="text">Função</p>
              </div>
              <div class="card_social">

                <a href=#!>
                  <img src="./imagens/card/social/linkedin.png" alt="Linkedin">
                </a>
                <a href=>
                  <img src="./imagens/card/social/github.png" alt="Twitter">
                </a>

              </div>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-4">
          <div class="card">
            <div class="card_cover">
            </div>
            <div class="card_padding">
              <div class="card_image">
                <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg"
                  alt="">
              </div>
              <div class="card_details">
                <h3>NOME5</h3>
                <p class="text">Função</p>
              </div>
              <div class="card_social">

                <a href=#!>
                  <img src="./imagens/card/social/linkedin.png" alt="Linkedin">
                </a>
                <a href=>
                  <img src="./imagens/card/social/github.png" alt="Twitter">
                </a>

              </div>
            </div>
          </div>
        
        </div>
  </section>


</main>


  <div id='muleta'></div>

  <footer class="w-100 py-4 flex-shrink-0">
    <div class="container py-4">
      <div class="row gy-4 gx-5">
        <div class="col-lg-4 col-md-6">
          <h5 class="h1 text-white">PS</h5>
          <p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt.</p>
          <p class="small text-muted mb-0">&copy; Copyrights. All rights reserved. <a class="text-primary"
              href="#">Bootstrap</a></p>
        </div>
        <div class="col-lg-2 col-md-6">
          <h5 class="text-white mb-3">Informações</h5>
          <ul class="list-unstyled text-muted">
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">Planos</a></li>
          </ul>
        </div>
        <div class="col-lg-2 col-md-6">
          <h5 class="text-white mb-3">Categorias</h5>
          <ul class="list-unstyled text-muted">
            <li><a href="#">Home</a></li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">#</a></li>
          </ul>
        </div>
        <div class="col-lg-4 col-md-6">
          <h5 class="text-white mb-3">Newsletter</h5>
          <p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt.</p>
          <form action="#">
            <div class="input-group mb-3">
              <input class="form-control" type="text" placeholder="Email" aria-label="Recipient's username"
                aria-describedby="button-addon2">
              <button class="btn btn-primary" id="button-addon2" type="button"><i
                  class="fas fa-paper-plane"></i></button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </footer>
  </div>

</body>

</html>

* {
    padding: 0;
    margin: 0;
}

header {
    width: 100%;
    height: 120px;
    background-color: #010138;
    position: absolute;
}

header .logo {
    color: black;
    font-size: 1px;
    font-weight: bolder;

}

header .logo i {
    color: black;

}

header div {
    width: 70%;
    left: 0;
    right: 0;
    margin: auto;

}

/* este é o cabeçalho todas as configurações de posições das opções para os usuarios estão aqui*/

header .logo {
    color: black;
    font-size: 1px;
    font-weight: bolder;
}

header .logo i {
    color: black;
}

header .cabeçalho-link {
    padding-left: 100px;
    cursor: pointer;
    gap: 3rem;
    display: flex;
    padding-top: 20px;
    font-weight: 500;
    border-radius: 5rem;
    color: aliceblue;

}

header .cabeçalho-link a {
    color: rgb(255, 255, 255);
    font-size: 20px;
    border-radius: 4rem;
    font-size: 1.7rem;
}

button {
    background-color: #FFCC15;
    color: rgb(0, 0, 0);
    padding: 5px;
    width: 150px;
    border-radius: 15px;
    font-size: 15px;
    cursor: pointer;
}

/* margem e bordas modificadas, para possuir um formato mais oval, incluindo aqui também a cor preta para as letras*/

button:hover {
    background-color: rgb(99, 78, 0);
    color: #FFCC15;
}

/* quando o usuario passar o cursor em cima de cada opção, ele mudará de cor*/

.logo {
    /*para pode adicionar a logo do meu site*/

    height: 100px;
    width: 60px;
    padding-top: 49px;
    padding-left: 720px;
    padding-right: 220px;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    cursor: pointer;

}

.icones {
    height: 100px;
    cursor: pointer;
    gap: 1rem;
    display: flex;
    border-radius: 5rem;

}

header .icones i,
header .icones a {

    cursor: pointer;
    height: 4.5rem;
    width: 4.5rem;
    text-align: center;
    font-size: 40px;
    border-radius: 50%;
    padding: 5rem, 1.5rem;
    line-height: 4.5rem;


}

header .icones i:hover,
header .icones a:hover {
    transform: rotate(360deg);
    border-radius: 20px;
    transition: 0.5s all;

}



.sobre .row .content .icones-container .icones span {
    font-size: 1.5rem;
    color: var(black);
}

#iconLogin {
    float: right;
    color: white;
    background: #0D0A97;
}

#login {
    display: none;
    position: fixed;
    background: white;
    top: 70px;
    right: 15%;
    width: 100px;
    height: 100px;
}


/*  CARDS   */

.main-content {
    margin: 50px auto;
    margin-top: 0;
    padding: 80px;
    max-width: 1350px;
    background: #fff;
    -webkit-box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1);
}

.page-title {
    font-size: 45px;
    margin: 0 auto 80px auto;
    margin-top: 150px;
}

.page-title:after {
    content: "";
    width: 110px;
    height: 4px;
    background: #F39745;
    display: block;
    margin: 15px auto 0 auto;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card {
    background: #fff;
    -webkit-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 30px;
    border-radius: 10px;
}

.card .card_cover {
    height: 130px;
    overflow: hidden;
    background-color: #27408B;
}

.card .card_padding {
    padding: 25px;
    position: relative;
    margin-top: -85px;
}

.card .card_image {
    width: 125px;
    height: 125px;
    border-radius: 125px;
    overflow: hidden;
    border: 4px solid #FFCC15;
    margin: 0 auto 15px auto;
    -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.card .card_image img {
    width: 125px;
    height: 125px;
    -o-object-fit: cover;
    object-fit: cover;
}

.card .card_details h3 {
    font-size: 21px;
}

.card .card_details p {
    font-size: 16px;
    margin-bottom: 15px;
}

.card .card_social {
    text-align: center;
}

.card .card_social a {
    display: inline-block;
}

.card .card_social img {
    width: 33px;
    margin: 5px 10px;
}


/* SLIDE CARD */




/*  FOOTER */

#muleta {
    clear: both;
}

footer {
    background-color: #010138;
}

footer a {
    color: black;
    text-decoration: none;
    transition: all 0.3s;

}

.form-control {
    background: #212529;
    border-color: #545454;
}

.form-control:focus {
    background: #212529;
}



@media (max-width:768px) {

    header .cabeçalho-link {
        display: list-item;
    }

    header .icones {
        display: list-item;

    }

    header .logo {
        display: auto;
        max-width: 200px;
        margin: auto;
    }

    header .backgroundFoto {
        max-width: 200px;
        margin: auto;
    }

}