← back to Graphics Loop
iterations/phillipe-romano-hero-20260503-114223/iter_3/graphic.html
62 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phillipe Romano Banner</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.banner {
width: 100%;
max-width: 1024px;
padding: 20px;
box-sizing: border-box;
}
h1 {
font-family: 'Times New Roman', serif;
font-size: 3em;
text-align: center;
margin-bottom: 20px;
}
.tagline {
font-family: Arial, sans-serif;
font-size: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<div class="banner">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#d9d9d9;stop-opacity:1" />
<stop offset="100%" style="stop-color:#c8c8c8;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" />
<path d="M35 200 Q70 40, 260 200 T480 200 Q680 40, 725 200" stroke="#c8c8c8" fill="none" stroke-width="1.5" />
<path d="M35 225 Q90 25, 290 225 T510 225 Q670 25, 740 225" stroke="#c8c8c8" fill="none" stroke-width="1.5" />
<path d="M35 250 Q95 20, 315 250 T630 250 Q705 20, 745 250" stroke="#c8c8c8" fill="none" stroke-width="1.5" />
</svg>
<h1 style="background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="145" height="46"><text y=".9em" font-family="Times New Roman" fill="#4a4a4a">PHILLIPE ROMANO</text></svg>') no-repeat center center / contain; padding: 20px;">
PHILLIPE ROMANO
</h1>
<div class="tagline">
High-Performance Surfaces, Quietly Luxurious
</div>
</div>
</body>
</html>