Primero el código html
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"href="style.css">
<title>Documenttitle>
head>
<body>
<section>
<divclass="card sticky">
<divclass="image">
<imgsrc="leon.png"alt="">
div>
<h1>Postion Stickyh1>
<h2>animalh2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit nihil ab obcaecati possimus iure odit illum porro necessitatibus natus eum inventore, voluptatibus quibusdam explicabo numquam harum id reiciendis, enim optio.p>
div>
<divclass="card relative">
<divclass="image">
<imgsrc="leon.png"alt="">
div>
<h1>Postion Relativeh1>
<h2>animalh2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit nihil ab obcaecati possimus iure odit illum porro necessitatibus natus eum inventore, voluptatibus quibusdam explicabo numquam harum id reiciendis, enim optio.p>
div>
<divclass="card absolute">
<divclass="image">
<imgsrc="leon.png"alt="">
div>
<h1>Postion Absoluteh1>
<h2>animalh2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit nihil ab obcaecati possimus iure odit illum porro necessitatibus natus eum inventore, voluptatibus quibusdam explicabo numquam harum id reiciendis, enim optio.p>
div>
<divclass="card fixed">
<divclass="image">
<imgsrc="leon.png"alt="">
div>
<h1>Postion Fixedh1>
<h2>animalh2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit nihil ab obcaecati possimus iure odit illum porro necessitatibus natus eum inventore, voluptatibus quibusdam explicabo numquam harum id reiciendis, enim optio.p>
div>
section>
body>
html>
- Seguimos con el CSS
html{
font-size: 62.5%;
}
body{
font-family: sans-serif;
height: 200vh;
}
section{
border: 1px solid #000;
padding: 20px;
position:relative;
height: 100vh;
}
.card{
width: 300px;
border-radius: 20px;
background-color: #48e;
overflow: hidden;
box-shadow: 0px0px10px#000f;
text-align: center;
}
.relative{
background-color: rgb(63, 59, 54);
z-index: 100;
}
.absolute{
background-color: rgb(198, 116, 35);
position: absolute;
top: 100px;
left: 260px;
}
.fixed{
background-color: rgb(51, 29, 215);
position: fixed;
top: 0;
right: 0px;
z-index: 10;
}
.sticky{
width: 300px;
/* height: 300px; */
border-radius: 20px;
background-color: rgba(46, 166, 142);
overflow: hidden;
box-shadow: 0px0px10px#000f;
text-align: center;
position: sticky;
top: 0;
z-index: 20;
margin-left: 500px;
}
.image{
margin: 20px auto;
width: 100%;
/* overflow: hidden; */
}
img{
width: 100%;
height: auto;
clip-path: circle();
}
h1{
font-size: 2rem;
color: aliceblue;
margin:0;
text-align: center;
}
h2{
font-size: 1rem;
color: aliceblue;
margin:0;
font-weight: 100;
text-align: center;
}
.cardp{
text-align: center;
font-size: 1rem;
padding: 10px;
color: aliceblue;
}
y el resultado es
0 Comentarios
para escribir tu comentario
