← back to Graphics Loop
iterations/phillipe-romano-hero-20260503-114223/iter_4/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 Hero Banner</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f5f5f5;
}
.hero-banner {
width: 100%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.logo-text {
font-family: 'Times New Roman', Times, serif;
color: #4a3d3d;
text-transform: uppercase;
margin-bottom: 20px;
}
.tagline {
font-family: Arial, sans-serif;
color: #6b5f5c;
text-align: center;
}
svg {
position: absolute;
top: -10%;
left: -5%;
width: 120%;
height: auto;
z-index: -1;
}
</style>
</head>
<body>
<div class="hero-banner">
<h1 class="logo-text">PHILLIPE ROMANO</h1>
<p class="tagline">High-Performance Surfaces, Quietly Luxurious</p>
<svg viewBox="0 0 1280 640" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f5f5"/>
<stop offset="100%" stop-color="#e7e7e7"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#g)"/>
<path d="M 200 300 C 400 50, 600 200, 800 300 S 1000 500, 1200 300" fill="#f5f5f5" stroke="rgba(100,100,100,.5)" stroke-width="4"/>
<path d="M 200 350 C 400 70, 600 350, 800 350 S 1000 550, 1200 350" fill="#f5f5f5" stroke="rgba(100,100,100,.5)" stroke-width="4"/>
<path d="M 200 400 C 400 90, 600 400, 800 400 S 1000 600, 1200 400" fill="#f5f5f5" stroke="rgba(100,100,100,.5)" stroke-width="4"/>
</svg>
</div>
</body>
</html>