<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Section</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap" rel="stylesheet">
<style>
/* ===== SECTION ===== */
.ai-section{
padding:60px 20px;
background:linear-gradient(135deg,#d9a7c7,#fffcdc);
font-family:'Inter',sans-serif;
}
/* ===== CONTAINER ===== */
.ai-container{
max-width:1200px;
margin:auto;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(12px);
border-radius:20px;
padding:30px;
box-shadow:0 20px 60px rgba(0,0,0,0.15);
}
/* ===== NAV ===== */
.ai-nav{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
margin-bottom:30px;
}
.ai-logo{
font-weight:700;
font-size:20px;
color:#111;
}
.ai-nav ul{
display:flex;
gap:15px;
list-style:none;
}
.ai-nav a{
text-decoration:none;
color:#111;
font-size:14px;
}
.ai-btn-top{
padding:8px 14px;
border-radius:10px;
border:none;
background:#111;
color:#fff;
cursor:pointer;
}
/* ===== GRID ===== */
.ai-hero{
display:grid;
grid-template-columns:1.8fr 1fr;
gap:25px;
}
/* ===== LEFT ===== */
.ai-badge{
display:inline-block;
background:#ffffff;
color:#111;
padding:6px 12px;
border-radius:20px;
font-size:12px;
margin-bottom:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.ai-title{
font-size:64px;
color:#111;
line-height:1.1;
}
.ai-desc{
margin-top:12px;
color:#333;
font-size:15px;
max-width:500px;
}
/* ===== CARDS ===== */
.ai-cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:25px;
}
.ai-card{
background:#ffffff;
padding:18px;
border-radius:16px;
border:1px solid rgba(0,0,0,0.05);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
}
.ai-card:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}
.ai-card h3{
font-size:16px;
margin-bottom:6px;
color:#111;
}
.ai-card p{
color:#444;
font-size:14px;
}
.ai-big{
grid-column:span 2;
}
.ai-btn{
margin-top:12px;
padding:10px 14px;
border:none;
border-radius:10px;
background:#111;
color:#fff;
cursor:pointer;
}
/* ===== RIGHT ===== */
.ai-right{
display:flex;
flex-direction:column;
gap:18px;
}
.ai-mini{
background:#ffffff;
padding:18px;
border-radius:16px;
border:1px solid rgba(0,0,0,0.05);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}
.ai-mini h3{
margin-bottom:6px;
color:#111;
}
.ai-mini p{
color:#444;
}
/* ===== RESPONSIVE ===== */
@media(max-width:900px){
.ai-hero{
grid-template-columns:1fr;
}
.ai-title{
font-size:42px;
}
}
@media(max-width:500px){
.ai-title{
font-size:30px;
}
.ai-cards{
grid-template-columns:1fr;
}
.ai-big{
grid-column:span 1;
}
}
</style>
</head>
<body>
vanda
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button>Sign Up</button>
<!-- LEFT -->
Interesting trends of AI
<h1>TECHNOLOGY</h1>
<p>
Vanda AI is an artificial intelligence platform that allows developers
to create high-performance intelligent systems.
</p>
<h3>Extraordinary speed</h3>
<p>Unrivaled resilience</p>
<h3>Velocity</h3>
<p>High-speed processing</p>
<h3>We have created the most advanced AI platform in the world</h3>
<button>Learn More</button>
<!-- RIGHT -->
<h3>Mission</h3>
<p>To create a future where AI benefits humanity.</p>
<h3>Company Goals</h3>
<p>Help companies accelerate innovation using AI.</p>
</body>
</html>]]>
