Manual Cards

Manual de Cards
//Dentro del archivo que crearemos: index.html//

1: Se escribe dentro html:5 y TAB y de inmediato le agregamos el archivo .min
de Bootstrap y Js (son opcionales – pero para trabajar con las clases de
Bootstrap yo los agrego).
Bootstrap: (Dentro del Head)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.
1/css/bootstrap.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin=
"anonymous">
2: Agregamos dentro de la etiqueta <body> este código el cual:


<div class="container-l">

<div class="row">

<div class="card card-1" style="width: 14rem; ">

<div class="imgbx">
<img src="img/python.png" class="card-img-top" alt="...">
<h6 class="text-center pt-5 font-weight-bold">Hosting Sencillo</h6>
</div>

<div class="content-l">
<h5 class="card-title font-weight-bold">Hosting Sencillo</h5>
<p class="card-text">Esencial para empezar tu nuevo proyecto. Lorem ipsum, dolor

sit amet consectetur adipisicing elit. Nulla vel, repudiandae inventore vero ullam et
unde eos fugiat magnam repellendus! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Velit, minus?</p>
</div>
</div>
</div>
</div>
JavaScript:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.m
in.js" integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin=
"anonymous"></script>
3: Luego creamos nuestro archivo .CSS y lo agregamos dentro del Head de

nuestro documento .HTML donde agregaremos el siguiente código
/*Modificamos el BODY*/
body
display: flex; /*Flexibilizamos*/
justify-content: center; /*Contenido justificado central*/
align-items: center; /*Alineamos los items centralmente*/
background-color: rgb(9, 9, 58);
/*Modificamos el contenedor; posicionando, alineando, tamaños y margenes */
.container
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /*Envoltura de elementos flexibles*/
padding: 15px;
/*Agregamos la Card y modificamos; su tamaño, alineación, posición, márgenes, transiciones, fondos,

transparencia de texto con el color, quitar bordes*/
.container .card
max-width: 100%;
width: 40%;
position: relative;
height: 340px;
margin: 18px 18px;
padding: -15px -15px;
display: flex;
flex-direction: column;
transition: 0.2s ease-in-out;
box-shadow: 15px 10px 18px 10px #91c4ff;
color: transparent;
border: none;
/*Ahora creamos el hover de la card; agregando visibilidad siendo collapse o hidden, borde al hacer el
toque, cambio de radio del borde, margenes y espacios, aquí modificamos la forma que tomará el card*/
.container .card:hover
visibility: collapse;
border: 1px solid white;
border-radius: 18px;
margin: 39px;
padding: -30px;
/*Posición de imagenes en la card; aquí estaremos dandole posición al contenedor de la imagen, el cual
le damos tamaño, espacio superior (top), z-index: orden de pila siendo mayor, fondos*/
.card .imgbx
position: relative;
width: 100%;
top: 15px;
z-index: 1;
padding: 10px;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 2);
/*Card llamando para la imagen su maximo tamaño y un borde readio*/
.card .imgbx img
max-width: 100%;
border-radius: 7px;
/*Contenido de la card visualizada al rozar con el mouse; editamos el bloque del contenido donde
encontraremos los textos el cual no son visibles hasta que hace el efecto hover, aquí encontramos la
posición, margen superior, espaciados internos, texto alineado, colores de texto, visibilizarían como none
o ya sea visible pero con una opacidad de 0 el cual no lo veríamos, transición de ciertos segundos */
.card .content
position: relative;
margin-top: -140px;
padding: 30px;
text-align: center;
color: black;
visibility: none;
opacity: 0;
transition: 0.3s ease-in-out;
/*Aquí la card junto con el hover mostrará nuestro contenido; se le coloca la visibilidad con una opacidad
de 10, implementando un fondo a gusto, un margen superior para darle esa posición por encima del card
sin hover o si bien quiere puede ser menos cantidad y le saldrá por la parte inferior, una transición, box-
shadow que sería el fondo de color a los lados con efecto hover, puedes modificar el color*/
.card:hover .content
visibility: visible;
opacity: 10;
background: white;
margin-top: -340px;
transition-delay: 0.3s;
box-shadow: 5px 10px 8px #90b4f7;

Manual Cards

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Cards

Cargado por

Copyright:

Formatos disponibles

Manual de Cards

//Dentro del archivo que crearemos: index.html//

2: Agregamos dentro de la etiqueta <body> este código el cual:

<div class="card card-1" style="width: 14rem; ">

<img src="img/python.png" class="card-img-top" alt="...">

<h6 class="text-center pt-5 font-weight-bold">Hosting Sencillo</h6>

<!-- ESTO ES COMO NUESTRA CARDS CON EFECTO HOVER

<h5 class="card-title font-weight-bold">Hosting Sencillo</h5>

<p class="card-text">Esencial para empezar tu nuevo proyecto. Lorem ipsum, dolor

3: Luego creamos nuestro archivo .CSS y lo agregamos dentro del Head de

display: flex; /*Flexibilizamos*/

justify-content: center; /*Contenido justificado central*/

align-items: center; /*Alineamos los items centralmente*/

background-color: rgb(9, 9, 58);

/*Modificamos el contenedor; posicionando, alineando, tamaños y margenes */

flex-wrap: wrap; /*Envoltura de elementos flexibles*/

/*Agregamos la Card y modificamos; su tamaño, alineación, posición, márgenes, transiciones, fondos,

margin: 18px 18px;

padding: -15px -15px;

transition: 0.2s ease-in-out;

box-shadow: 15px 10px 18px 10px #91c4ff;

border: 1px solid white;

/*Card llamando para la imagen su maximo tamaño y un borde readio*/

.card .imgbx img

transition: 0.3s ease-in-out;

box-shadow: 5px 10px 8px #90b4f7;

También podría gustarte

display: flex; /Flexibilizamos/

justify-content: center; /Contenido justificado central/

align-items: center; /Alineamos los items centralmente/

/Modificamos el contenedor; posicionando, alineando, tamaños y margenes /

flex-wrap: wrap; /Envoltura de elementos flexibles/

/Card llamando para la imagen su maximo tamaño y un borde readio/