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>