Tricky frame
Html
<div class="left-light"></div>
<div class="right-light"></div>
<div class="guy-image-container">
<img class="shape vector" src="https://raw.githubusercontent.com/Moamal-2000/images/15544c5f489023b8c871801240bcff0fa435be65/vector-icon.svg" alt="vector shape">
<img class="shape circles" src="https://raw.githubusercontent.com/Moamal-2000/images/15544c5f489023b8c871801240bcff0fa435be65/group-icon.svg" alt="circles shape">
<img class="shape triangle" src="https://raw.githubusercontent.com/Moamal-2000/images/15544c5f489023b8c871801240bcff0fa435be65/group-icon2.svg" alt="triangle shape">
<img class="shape plus-sign" src="https://raw.githubusercontent.com/Moamal-2000/images/15544c5f489023b8c871801240bcff0fa435be65/plus-sign-icon.svg" alt="plus sign shape">
<div class="background-square-frame"></div>
<div class="invisible-holder">
<div class="square-frame">
<img src="https://raw.githubusercontent.com/Moamal-2000/images/main/young-guy.png" alt="young guy with yellow T-shirt">
</div>
</div>
</div>
Css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1a191b;
color: var(--white);
font-size: 1rem;
overflow-x: hidden;
font-family: Arial;
}
:root {
--white: #fff;
}
.left-light {
position: absolute;
left: 0;
top: -300px;
width: 310px;
height: 1150px;
background-image: linear-gradient(
180deg,
rgba(84, 84, 212, 0.27) 0%,
rgba(84, 84, 212, 0.11) 100%
);
transform: rotate(-54deg);
border-radius: 155px;
filter: blur(99.5px);
z-index: -1;
}
.right-light {
position: absolute;
right: 0;
top: 0;
width: 310px;
height: 1150px;
background-image: linear-gradient(
180deg,
rgba(251, 168, 28, 0.11) 0%,
rgba(224, 86, 136, 0.06) 100%
);
transform: rotate(65.5deg);
border-radius: 155px;
filter: blur(99.5px);
z-index: -1;
}
.guy-image-container {
width: 370px;
height: 470px;
margin: 70px auto;
user-select: none;
position: relative;
}
.guy-image-container .shape {
position: absolute;
object-fit: contain;
}
.guy-image-container .vector {
width: 63px;
height: 18px;
left: -90px;
top: 40px;
}
.guy-image-container .circles {
width: 34px;
height: 40px;
right: 0;
top: 0;
}
.guy-image-container .triangle {
width: 69px;
height: 80px;
left: -110px;
bottom: 30px;
}
.guy-image-container .plus-sign {
width: 33px;
height: 33px;
right: 0;
bottom: 50px;
}
.guy-image-container .background-square-frame {
position: absolute;
width: 250px;
height: 250px;
border-radius: 15px;
border: solid 2px var(--white);
transform: rotate(23.5deg);
margin-top: 100px;
top: 24px;
left: 52px;
}
.guy-image-container::before {
content: "";
position: absolute;
transform: rotate(23.5deg);
width: 245px;
height: 245.5px;
border-radius: 15px;
border: solid 3px transparent;
border-color: transparent var(--white) var(--white) transparent;
margin-top: 100px;
top: 63.3px;
left: 69px;
z-index: 1;
}
.invisible-holder {
transform: rotate(23.5deg);
overflow: hidden;
width: 350px;
height: 397px;
}
.invisible-holder .square-frame {
width: 250px;
height: 250px;
border-radius: 15px;
background-image: linear-gradient(to bottom, #5454d4, #5e5ee7);
border: solid 3px var(--white);
margin-top: 100px;
position: relative;
top: 48px;
left: 103px;
}
.invisible-holder .square-frame img {
transform: rotate(-23.5deg);
width: 350px;
height: 433px;
object-fit: contain;
position: relative;
top: -148px;
left: -75px;
}
p {
width: fit-content;
margin: 120px auto 0;
color: var(--white);
font-size: 1.2rem;
padding: 20px;
}
p span {
opacity: .8;
}
p a {
color: var(--white);
transition: opacity .2s;
opacity: .8;
&:hover {
opacity: 1;
}
}
Js
ثبت نظر خود
برای ثبت نظر باید ابتدا وارد حساب کاربری خود شوید.
ورود یا ثبت نامنظری ثبت نشده است