
scroll down for html and style codes!
HTML
<div class="css-layout-by-crowbirdie"><div class="links"><div class="credits"><a href="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie">layout by crowbirdie</a></div><div class="container">
<div class="left-image">
<img src="https://i.imgur.com/86ziY2u.png" alt="Left-Image">
</div>
<div class="right-images">
<a href="https://janitorai.com/">
<img src="https://i.imgur.com/euLSuMH.png" alt="image-1">
</a>
<a href="https://janitorai.com/">
<img src="https://i.imgur.com/euLSuMH.png" alt="image-2">
</a>
<a href="https://janitorai.com/">
<img src="https://i.imgur.com/euLSuMH.png" alt="image-3">
</a>
</div>
</div>
</div>
<div class="left-image">
<img src="https://i.imgur.com/86ziY2u.png" alt="Left-Image">
</div>
<div class="right-images">
<a href="https://janitorai.com/">
<img src="https://i.imgur.com/euLSuMH.png" alt="image-1">
</a>
<a href="https://janitorai.com/">
<img src="https://i.imgur.com/euLSuMH.png" alt="image-2">
</a>
<a href="https://janitorai.com/">
<img src="https://i.imgur.com/euLSuMH.png" alt="image-3">
</a>
</div>
</div>
</div>
STYLE
<style>
.container {
display: flex;
}
.left-image {
flex: 1;
flex-basis: 28%; /*Adjust width as needed*/
}
.right-images {
display: flex;
flex-direction: column;
flex: 1;
margin-left: -14%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
margin-top: 7.5%; /*ADJUST THESE TO MOVE RIGHT PICTURES UP AND DOWN*/
}
.left-image img {
width: 92%;
float: right;
margin-right: -8%; /*ADJUST THIS TO MOVE LEFT PICTURE*/
}
.right-images img {
width: 70%;
float: left;
margin-left: 2%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
margin-bottom: 6%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
border: 1px solid rgb(255 255 255 / 67%); /*color of border around pictures*/
transition: box-shadow 0.6s; /*this is the animation for the glow-change speed if desired*/
}
.right-images img:hover {
box-shadow: 0 0 10px 2px rgb(255 255 255 / 67%); /*color of the glow effect transition*/
}
.image-container {
position: relative;
display: inline-block;
}
.links { /*this is what keeps everything contained at the right size*/
margin: 12px auto;
padding: 13px;
overflow: hidden;
display: flex;
justify-content: center; /*Center the content*/
max-width: 526px; /*makes sure formatting is good for mobile w/o the need for media inquiry*/
position: relative;
}
.credits a {
color: grey;
font-family: times;
font-variant: all-small-caps;
font-size: 12px;
text-align: left;
position: absolute;
bottom: -1%;
opacity: .5;
left: 5%;
z-index: 10;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .links {
display: none;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .css-layout-by-crowbirdie::before {
content: "please include credit!";
color: red;
font-size: 5vw;
width: 100%;
display: block;
text-align: center;
}
</style>
.container {
display: flex;
}
.left-image {
flex: 1;
flex-basis: 28%; /*Adjust width as needed*/
}
.right-images {
display: flex;
flex-direction: column;
flex: 1;
margin-left: -14%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
margin-top: 7.5%; /*ADJUST THESE TO MOVE RIGHT PICTURES UP AND DOWN*/
}
.left-image img {
width: 92%;
float: right;
margin-right: -8%; /*ADJUST THIS TO MOVE LEFT PICTURE*/
}
.right-images img {
width: 70%;
float: left;
margin-left: 2%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
margin-bottom: 6%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
border: 1px solid rgb(255 255 255 / 67%); /*color of border around pictures*/
transition: box-shadow 0.6s; /*this is the animation for the glow-change speed if desired*/
}
.right-images img:hover {
box-shadow: 0 0 10px 2px rgb(255 255 255 / 67%); /*color of the glow effect transition*/
}
.image-container {
position: relative;
display: inline-block;
}
.links { /*this is what keeps everything contained at the right size*/
margin: 12px auto;
padding: 13px;
overflow: hidden;
display: flex;
justify-content: center; /*Center the content*/
max-width: 526px; /*makes sure formatting is good for mobile w/o the need for media inquiry*/
position: relative;
}
.credits a {
color: grey;
font-family: times;
font-variant: all-small-caps;
font-size: 12px;
text-align: left;
position: absolute;
bottom: -1%;
opacity: .5;
left: 5%;
z-index: 10;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .links {
display: none;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .css-layout-by-crowbirdie::before {
content: "please include credit!";
color: red;
font-size: 5vw;
width: 100%;
display: block;
text-align: center;
}
</style>