<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Premium UI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
/* ===== SAFE WRAPPER ===== */
.ap-wrapper{
font-family:'Inter',sans-serif;
margin:40px; /* IMPORTANT for visible rounded corners */
padding:80px 40px;
background:radial-gradient(circle at 80% 20%, #5f2cff, #0b0620 60%);
color:white;
border-radius:30px; /* 🔥 CORNER ROUND */
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.35); /* premium look */
}
/* GRID */
.ap-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}
/* LEFT */
.ap-small{
font-size:14px;
opacity:.8;
margin-bottom:20px;
}
.ap-badge{
display:inline-block;
background:#7c6cff;
padding:6px 14px;
border-radius:8px;
font-size:13px;
margin-bottom:20px;
}
.ap-title{
font-size:48px;
font-weight:800;
line-height:1.2;
margin-bottom:20px;
}
.ap-desc{
font-size:15px;
opacity:.8;
max-width:400px;
}
/* RIGHT LIST */
.ap-list{
display:flex;
flex-direction:column;
gap:20px;
}
/* ITEM */
.ap-item{
display:flex;
align-items:center;
gap:15px;
}
/* NUMBER */
.ap-number{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#8f7bff,#5f2cff);
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}
/* CARD */
.ap-card{
flex:1;
background:linear-gradient(135deg,#2a1f5c,#6a4cff);
padding:20px;
border-radius:16px;
display:flex;
justify-content:space-between;
gap:20px;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
}
/* TEXT */
.ap-card-title{
font-weight:600;
max-width:220px;
}
.ap-card-desc{
font-size:13px;
opacity:.8;
border-left:1px solid rgba(255,255,255,0.3);
padding-left:15px;
}
/* RESPONSIVE */
@media(max-width:900px){
.ap-wrapper{
margin:15px;
padding:40px 20px;
}
.ap-container{
grid-template-columns:1fr;
}
}
</style>
</head>
<body>
<section>
<!-- LEFT -->
Allen. project
Problem
Too Much<br>
Entertainment<br>
Applications
Create some catching tagline for your main problem, to keep readers remembering your product or service.
<!-- RIGHT -->
01
Too much entertainment application on device
Presentations are communication tools that can be used as lectures.
02
Lack of storage space on the phone
Presentations are communication tools that can be used as lectures.
03
Paradox of Choices
Presentations are communication tools that can be used as lectures.
</section>
</body>
</html>]]>
