0

Como crear tu card usando etiquetas de html?

Bueno aquí empezamos con los datos que ya han podido ver con la profesora en el curso , yo empecé creando código HTML distribuyendo con los

<div>, con los

y todas las etiquetas de html, y agregándole una clase a cada uno para poder darles unos estilos en el CSS , siempre es necesario acordarse de dale un nombre a la clase que este dentro de alguna etiqueta, para que así maquete o diseñe de manera correcta , a la hora de correr la pestaña que estamos creando.


<htmllang="en">

<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Una chikititle>
    <linkrel="stylesheet"href="EstiloCss-inicio.css">
head>

<body>
    <divclass="contenedor">
        <ahref="https://www.youtube.com/watch?v=7nzw6jahv0o&list=PLO51kaPTkxxTTt0fRwo4JUwynCMJPVFRg"class="batman">
            <imgsrc="https://www.dibujos-faciles.com/wp-content/uploads/2022/11/Dibujo-De-Batman-paso12.jpg"
                alt="Batman">
        a>
        <pclass="username">Isabel Garciap>
        <pclass="rol">Fullstack Developerp>
        <divclass="actions">
            <div>
                <p>Lima,Peru  p>
            div>
            <div>
                <p>[email protected]>
            div>
div>
        <divclass="influence">
            <div>
                <p>9000p>
                <p>Followersp>
            div>
            <div>
                <p>3000p>
                <p>Followingp>
            div>
div>
div>
    <divclass="portada">div>
    <section>
        <buttonclass="mi-boton">
            FOLLOW🐒
        button>

    section>
body>

html>


*   {
    padding:0;    margin:0;box-sizing: border-box;
    }
    .contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;justify-content: center;    height:100vh;/* Establece el contenedor a ocupar el 100% del alto de la ventana */
    }
    .container img:nth-child(1) {
    width:100%;    height:20rem;
    }
    .container img:nth-child(2) {
    position: relative;    top: -5rem;border-radius: 50%;    padding:0;    border:5px solid rgb(21, 21, 24);
    }
    body,
    html {
    font-size: 85%;    display: flex;justify-content: center;
    align-items: center;    background:bisque;
    position: relative;
    font-family: sans-serif;

}
.batman {
z-index: 1;height:150px;width:150px;border-radius: 50%;/* esto hace que la imagen sea circular _/
overflow: hidden;
/_ para ocultar cualquier parte de la imagen que se extienda más allá del radio _/
}
.batman img {
width: 100%;
/_ asegura que la imagen ocupe todo el espacio dentro del círculo _/
height: auto;
/_ permite que la altura se ajuste automáticamente manteniendo la proporción _/
flex-direction: center;
position:static ;
}
.portada {
width: 100%;
height: 170px;
background-image: url([https://images8.alphacoders.com/130/1306943.jpeg](https://images8.alphacoders.com/130/1306943.jpeg));
background-size: cover;
background-position: center;
position: fixed;
top: 0;
}
.contenedor .username {
margin-top: 20px;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0; /_ Quita el espacio después del párrafo */
}
.contenedor .rol {
margin-top: 20px;
font-size: 1.5rem;
}

.actions {
margin-top: 3rem;padding:2rem;width:100%;height:4.5rem;display: flex;justify-content: space-evenly;
font-size: 1.5rem;
font-weight: normal;
}
.actions div {
width:100%;
margin-left: 150px;display: flex;justify-content: center;
align-items: center;
}
.influence {
margin-top: 1rem;height:6.5rem;width:100%;display: flex;justify-content: center;
align-items: center;
}
.influence div {
width:50%;height:100%;display: flex;
flex-direction: column;justify-content: center;
align-items: center;
font-size: 1.5rem;
}
.influence div:nth-child(2) {
border-left: 1px solid rgb(32, 32, 32);
}
.influence div p:nth-child(1) {
font-weight: 600;
font-size: 1.7rem;
}

.mi-boton {
position: absolute;display: flex;bottom: 10px;left:0;padding:10px 30px;/* ajusta el relleno según sea necesario _/
font-size: 15px;
/_ ajusta el tamaño de la fuente según sea necesario _/
font-weight: bold;
/_ opcional, ajusta el grosor de la fuente */

color: white;
/* color del texto /
background-color: gray;
/
color de fondo del botón */

border: none;
border-radius: 5px;
/* ajusta el radio del borde según sea necesario /
cursor: pointer;
/
cambia el cursor al pasar sobre el botón */
width: 100%;
display: flex;
justify-content: center;


}

.mi-boton:active {
background-color: skyblue;
/* color de fondo del botón al hacer clic */
}

</div>
Escribe tu comentario
+ 2