[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Lynn Resume</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Great+Vibes&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#000;
font-family:'Poppins', sans-serif;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
overflow:hidden;
}
.scene{
position:relative;
width:900px;
height:650px;
}
.red-bg{
position:absolute;
right:80px;
top:40px;
width:420px;
height:420px;
background:
radial-gradient(circle at 70% 30%, #fff4eb 0%, #d14 25%, #b50000 55%, #970000 100%);
}
.resume{
position:absolute;
left:70px;
top:160px;
width:580px;
background:#f6efee;
padding:45px;
box-shadow:0 15px 40px rgba(0,0,0,.4);
}
.top{
display:flex;
justify-content:space-between;
align-items:flex-start;
}
.contact{
font-size:12px;
color:#7d6d6d;
line-height:1.8;
}
.contact .line{
width:120px;
height:2px;
background:#a11;
margin-bottom:10px;
}
.photo{
width:150px;
height:222px;
margin-top: -10px;
background:#fff;
padding:8px;
transform:rotate(6deg);
box-shadow:0 5px 15px rgba(0,0,0,.2);
position: relative; /* важно */
}
.photo img{
width:100%;
height:100%;
object-fit:cover;
}
/* маленькая накладка */
.photo .overlay{
position: absolute;
width:30px;
height:30px;
top: 8px; /* позиция внутри фото */
right: 8px; /* можно менять */
}
.title{
margin-top:20px;
}
.title h1{
font-size:72px;
color:#b30000;
line-height:0.9;
}
.title span{
font-family:'Great Vibes', cursive;
font-size:48px;
color:#7d3c3c;
}
.section{
margin-top:40px;
}
.section-title{
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px;
color:#8e0000;
font-weight:700;
}
.dot{
width:12px;
height:12px;
border-radius:50%;
background:#c10000;
}
.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}
.item{
font-size:12px;
color:#6e5f5f;
line-height:1.7;
}
.item strong{
color:#992222;
display:block;
margin-bottom:5px;
}
.skills{
position:absolute;
right:40px;
bottom:80px;
width:120px;
}
.skill{
margin-bottom:14px;
}
.skill span{
font-size:12px;
color:#7a4d4d;
display:block;
margin-bottom:6px;
}
.bar{
width:100%;
height:8px;
border-radius:10px;
background:#e5d9d9;
overflow:hidden;
}
.fill{
height:100%;
background:#b40000;
}
.education{
margin-top:50px;
border-top:1px dashed #c9b8b8;
padding-top:25px;
display:flex;
gap:80px;
}
.edu h4{
color:#a00000;
margin-bottom:10px;
}
.edu p{
color:#7d6d6d;
font-size:13px;
}
@media(max-width:900px){
.scene{
width:100%;
height:auto;
padding:40px 20px;
}
.red-bg{
width:250px;
height:250px;
right:20px;
}
.resume{
position:relative;
width:100%;
left:0;
top:0;
padding:25px;
}
.title h1{
font-size:54px;
}
.skills{
position:relative;
right:auto;
bottom:auto;
width:100%;
margin-top:30px;
}
.grid{
grid-template-columns:1fr;
}
.education{
flex-direction:column;
gap:30px;
}
}
</style>
</head>
<body>
<div class="scene">
<div class="red-bg"></div>
<div class="resume">
<div class="top">
<div class="contact">
<div class="line"></div>
<p>123 456 7890</p>
<p>lynn_123@mail.com</p>
</div>
<div class="photo">
<img src="http://upforme.ru/uploads/001c/b5/80/5/477253.jpg" alt="photo">
<img class="overlay" src="http://upforme.ru/uploads/001c/b5/80/5/511229.png" alt="icon">
</div>
</div>
<div class="title">
<h1>Lynn</h1>
<span>Resume</span>
</div>
<div class="section">
<div class="section-title">
<div class="dot"></div>
EXPERIENCE
</div>
<div class="grid">
<div class="item">
<strong>2006–2009</strong>
Company Name<br>
Senior Designer
</div>
<div class="item">
Key explanations for clarity. Structured storytelling and
visual presentation to ensure impactful work experience.
</div>
<div class="item">
<strong>2009–2012</strong>
Creative Agency<br>
UI / UX Designer
</div>
<div class="item">
Professional achievements and project descriptions with
concise narrative and readable formatting.
</div>
</div>
</div>
<div class="education">
<div class="edu">
<h4>Degree Earned</h4>
<p>Graduation Year</p>
</div>
<div class="edu">
<h4>Degree Earned</h4>
<p>Graduation Year</p>
</div>
</div>
<div class="skills">
<div class="skill">
<span>Photoshop</span>
<div class="bar">
<div class="fill" style="width:90%"></div>
</div>
</div>
<div class="skill">
<span>Illustrator</span>
<div class="bar">
<div class="fill" style="width:80%"></div>
</div>
</div>
<div class="skill">
<span>Figma</span>
<div class="bar">
<div class="fill" style="width:70%"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>[/html]