<html>
<body>
<div class="social-image-content">
<h1>
Thumbnail dinámico de ejemplo para CodePen
</h1>
<div class="social-image-footer">
<div class="social-image-footer-left">
<img src="https://xaconi.dev/xaconi.jpg" />
<span>Xaconi.dev · 29/03/2021 </span>
</div>
<div class="social-image-footer-right">
#CodePen #ejemplos
</div>
</div>
</div>
</body>
</html>html, body {
height : 100%;
}
body {
align-items : center;
display : flex;
height : 600px;
justify-content : center;
margin: 0;
width : 1128px;
background-color: #e2e2e2;
}
.social-image-content {
border : 2px solid black;
border-radius : 5px;
box-sizing: border-box;
display : flex;
flex-direction : column;
height : calc(100% - 80px);
margin : 40px;
padding : 20px;
width : calc(100% - 80px);
position: relative;
background-color: white;
}
.social-image-content::after {
content: ' ';
position: absolute;
top: 7px;
left: 7px;
width: 100%;
background-color: black;
height: 100%;
z-index: -1;
border-radius: 5px;
}
.social-image-content h1 {
font-size: 72px;
margin-top: 90px;
}
.social-image-footer {
display : flex;
flex-direction : row;
margin-top : auto;
}
.social-image-footer-left {
align-items: center;
display: flex;
flex-direction: row;
font-size : 28px;
font-weight : 600;
justify-content: center;
line-height: 40px;
}
.social-image-footer-left img {
border : 2px solid black;
border-radius : 50%;
height : 40px;
margin-right : 10px;
width : 40px;
}
.social-image-footer-right {
align-items: center;
display: flex;
flex-direction: row;
height : 40px;
justify-content: center;
margin-left : auto;
font-size : 28px;
}
* {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-weight : 600;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.