InicioCurso de Frontend Developer
Curso de Frontend Developer
1

COMO USAR EL CODIGO CSS Y HTML PARA CREAR UNA CARD

Hernan Ramiro
ne.marpo
7187
  1. Abrimos un editor de código configuramos el archivo html => html:5

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

  1. Agregamos contenido a la card insertamos una imagen un p y un href que lo podemos usar para ir a un sitio web en este caso a GITHUB

<body>
<section>
<div class=“card”>
<img src="https://media.istockphoto.com/id/1452604857/es/foto/empresario-tocando-el-cerebro-trabajando-de-la-inteligencia-artificial- automatizaci%C3%B3n-an%C3%A1lisis.jpg?b=1&s=612x612&w=0&k=20&c=y3lRX4v5C1WibCTEXp1FEZjiH5zYnC2ulh-Z_-n1_aQ="
alt=“robot”>
<p>MEDICAL ANALISIS ING</p>
<p>ING HOSPITAL</p>
<a href=“https://github.com/INGPORTILLA/HOSPITAL_ING.github.io”>Go github ING</a>

    </div>

</body>

3.Ahora creamos el estilo en css
<style>
section {
display: flex;
width:100%;
justify-content: center;
}
.card {
display: grid;
justify-items: center;
margin-top:50px;
width:450px;
height:600px;
background-color: #5f7989;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 10px 0 #000000;

    }
    .card img {
        margin-top: 40px;
        box-shadow: 0px 0px 10px goldenrod;
        width: 60%;
        border-radius: 50%;
        object-fit: scale-down;   
    
    }
    .card p {
        color: rgb(20, 10, 10);
        text-align: center;
        font-weight: 600;
        font-size: 30px; 
        margin-top: 20px;

    }

    .card p:nth-child(3){
        color: rgb(14, 13, 21);
        font-size: 20px;
        margin-top:-50px;
    }
    .card #boton {
         margin-top: 20px;
         font-size: 30px;
         width: 80%;
         background-color: #d5c2e8;
         text-align: center;
         padding-top: 40px;
         box-shadow: 0 0 10px 0 #000000;
         border-radius:20px 80%;
         margin-bottom: 30px;
    }
         
   
</style>
0
hace 7 meses
Escribe tu comentario
+ 2

Entradas relacionadas

1

Cómo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando haga
carozamb
carozamb
9

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos
robledocorrea
robledocorrea
4

Domina la creación de tarjetas HTML y CSS: ¡Conviértete en un maestro de las 🃏 Cards en Frontend! 🚀

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creación de tarjetas HTML y CSS. Si eres como yo, un apasiona
cpedrozamesa
cpedrozamesa
1

Chat entre amigos

Bueno, para crear una figura de chat con html y CSS primero debes saber de que se tratará el mensaje. Haz un borrador de lo que el mensaj
malexandrecrespo
malexandrecrespo