Tabulation of Cards

Asked

Viewed 27 times

0

well I’m hard to align cards (Not made with bostS4), I have 6 cards and I want to align in two rows with 3 columns.

    body{
    
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #FF7E0D;
    display: flex;
    justify-content: center;
    align-items: center;   
    font-family: cursive;
}

.cont_Card{
    width: 1000px ;
    position:relative;
    display: flex;
    justify-content: space-between;
}

.cont_Card .Card_Projet{
    position: center;  
}

.cont_Card .Card_Projet .face{
    width: 300px;
    height: 200px;
    transition: 0.5s;
    
    
}
.cont_Card .Card_Projet .face.face1{
    position: relative; 
    background: #333;
    display: flex;
    align-items:center;
    justify-content: center;
    z-index: 1;
    transform:  translateY(110px);
}
.cont_Card .Card_Projet:hover .face.face1{
    transform:  translateY(0);
    
}

.cont_Card .Card_Projet .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8); 
    
}

.cont_Card .Card_Projet .face.face2 .Content p{
    margin: 0;
    padding: 0;
}

.cont_Card .Card_Projet .face.face2 .Content a{
    margin: 15px 0 0;
    display: inline-block;
    text-decoration:  none;
    color:#333;
    padding: 5px;
    border: 1px solid #333;
}

.cont_Card .Card_Projet .face.face2 .Content a:hover{
    background: #333;
    color: #fff;
}

.cont_Card .Card_Projet .face.face1 .Content{
    opacity: 0.1;
    transition: 0.5s;
} 

.cont_Card .Card_Projet:hover .face.face1 .Content{
    opacity: 1;    
} 

.cont_Card .Card_Projet .face.face1 .Content img{
    max-width: 100px; 

} 

.cont_Card .Card_Projet .face.face1 .Content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align:center;
    font-size:  1.5em;
    
}

.cont_Card .Card_Projet .face.face2 .Content .Cadast:hover{
    background: #4CD500;
    color: #fff;
}
 

.cont_Card .Card_Projet .face.face2 .Content .Pesq:hover{
    background: #FFCC00;
    color: #fff;
}
<html>
    <head>
            <link rel="stylesheet" href="Style.css">
    
    </head>
    
    <body>
        
      
            <div class="cont_Card">
                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/data.png">
                            <h3>Informática</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>
                
                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/hotel.png">
                            <h3>hospedagem</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>
                
                
                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/chip(1).png">
                            <h3>Eletrônica</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>
                
                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/baker(1).png">
                            <h3>Alimentos</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>
                
                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/tractor.png">
                            <h3>Agro</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>
                
                 <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/flash.png">
                            <h3>Eletrotécnica</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>
              
        </div>
 
    </body> 


</html>

html

1 answer

0

Yuri, follow the solution.

In case I used the structure flexbox do CSS3, I saw that in your code you were also using, I added a class flex where I used the property flex-wrap: wrap;

The wrap value specifies that flexible items will be grouped together if necessary.

Follows solution according to your code:

<html>
    <head>
            <link rel="stylesheet" href="Style.css">

    </head>
    <style>
        body{    
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: #FF7E0D;
            font-family: cursive;
        }

        .cont_Card{
            width: 80% ;
            position:relative;
            margin:0 auto;

        }

        .cont_Card .Card_Projet{
            position: center;  
        }

        .cont_Card .Card_Projet .face{
            width: 300px;
            height: 200px;
            transition: 0.5s;


        }
        .cont_Card .Card_Projet .face.face1{
            position: relative; 
            background: #333;
            display: flex;
            align-items:center;
            justify-content: center;
            z-index: 1;
            transform:  translateY(110px);
        }
        .cont_Card .Card_Projet:hover .face.face1{
            transform:  translateY(0);

        }

        .cont_Card .Card_Projet .face.face2{
            position: relative;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            box-shadow: 0 20px 50px rgba(0,0,0,0.8); 
        }

        .cont_Card .Card_Projet .face.face2 .Content p{
            margin: 0;
            padding: 0;
        }

        .cont_Card .Card_Projet .face.face2 .Content a{
            margin: 15px 0 0;
            display: inline-block;
            text-decoration:  none;
            color:#333;
            padding: 5px;
            border: 1px solid #333;
        }

        .cont_Card .Card_Projet .face.face2 .Content a:hover{
            background: #333;
            color: #fff;
        }

        .cont_Card .Card_Projet .face.face1 .Content{
            opacity: 0.1;
            transition: 0.5s;
        } 

        .cont_Card .Card_Projet:hover .face.face1 .Content{
            opacity: 1;    
        } 

        .cont_Card .Card_Projet .face.face1 .Content img{
            max-width: 100px; 

        } 

        .cont_Card .Card_Projet .face.face1 .Content h3{
            margin: 10px 0 0;
            padding: 0;
            color: #fff;
            text-align:center;
            font-size:  1.5em;

        }

        .cont_Card .Card_Projet .face.face2 .Content .Cadast:hover{
            background: #4CD500;
            color: #fff;
        }


        .cont_Card .Card_Projet .face.face2 .Content .Pesq:hover{
            background: #FFCC00;
            color: #fff;
        }

        .flex {
            display:flex;
            flex-wrap: wrap;                
        }
    </style>
    <body>


            <div class="cont_Card">

                <div class="flex">

                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/data.png">
                            <h3>Informática</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>

                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/hotel.png">
                            <h3>hospedagem</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>


                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/chip(1).png">
                            <h3>Eletrônica</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>

                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/baker(1).png">
                            <h3>Alimentos</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>

                <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/tractor.png">
                            <h3>Agro</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>

                 <div class="Card_Projet">
                    <div class="face face1">
                        <div class="Content">
                            <img src="imgs/flash.png">
                            <h3>Eletrotécnica</h3>
                        </div>
                    </div>
                    <div class="face face2">
                        <div class="Content">
                            <p> Aqui vai um texto sobre o curso, mais estou escrevdo esse texto para preencher espaço</p>
                            <a class="Cadast" href="#">Cadastrar</a>
                            <a class="Pesq" href="#">Pesquisar</a>
                        </div>
                    </div>
                </div>
              </div>
        </div>

    </body> 


</html>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.