<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Layers - Finance Dashboard</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
body {
background: linear-gradient(135deg, #e0e0ff, #f9f9ff);
color: #333;
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 8%;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: sticky;
top: 0;
.logo {
font-size: 20px;
font-weight: bold;
color: #4a47f5;
nav ul {
list-style: none;
display: flex;
gap: 20px;
nav ul li a {
text-decoration: none;
color: #333;
font-weight: 500;
.header-buttons button {
margin-left: 10px;
padding: 8px 16px;
border-radius: 25px;
border: none;
cursor: pointer;
font-weight: bold;
.btn-primary {
background: #4a47f5;
color: white;
.btn-outline {
background: transparent;
border: 1px solid #4a47f5;
color: #4a47f5;
/* Hero Section */
.hero {
text-align: center;
padding: 80px 8%;
.hero h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: bold;
.hero p {
font-size: 16px;
margin-bottom: 30px;
color: #666;
.hero-buttons button {
margin: 0 10px;
padding: 12px 28px;
border-radius: 30px;
border: none;
font-weight: bold;
cursor: pointer;
.hero-buttons .btn-primary {
background: #4a47f5;
color: white;
}
.hero-buttons .btn-outline {
background: white;
border: 1px solid #ccc;
color: #333;
/* Dashboard Image */
.dashboard-img {
display: flex;
justify-content: center;
margin: 40px 0;
.dashboard-img img {
width: 80%;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
/* Brand Section */
.brands {
text-align: center;
margin: 60px 0;
.brands p {
font-size: 14px;
margin-bottom: 20px;
color: #666;
}
.brands-logos {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
.brands-logos img {
max-height: 40px;
filter: grayscale(100%);
/* Feature Section */
.features {
text-align: center;
padding: 60px 8%;
.features h2 {
font-size: 28px;
margin-bottom: 20px;
.features p {
font-size: 16px;
max-width: 600px;
margin: auto;
color: #555;
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="logo">Layers</div>
<nav>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blogs</a></li>
</ul>
</nav>
<div class="header-buttons">
<button class="btn-outline">Log in</button>
<button class="btn-primary">Try for free</button>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<h1>Monitor Your Finance Like a Pro</h1>
<p>Create and send professional invoices with a few clicks, manage
your clients, and keep track of your expenses with the best invoicing
software.</p>
<div class="hero-buttons">
<button class="btn-primary">Try for free</button>
<button class="btn-outline">Book a demo</button>
</div>
</section>
<!-- Dashboard Image Placeholder -->
<div class="dashboard-img">
<img src="https://via.placeholder.com/900x500.png?
text=Dashboard+Preview" alt="Dashboard preview">
</div>
<!-- Brands -->
<section class="brands">
<p>From startups to enterprises 4,800+ brands, 1,000,000+ invoices,
one trusted platform.</p>
<div class="brands-logos">
<img src="https://via.placeholder.com/100x40?text=Logo1"
alt="logo1">
<img src="https://via.placeholder.com/100x40?text=Logo2"
alt="logo2">
<img src="https://via.placeholder.com/100x40?text=Logo3"
alt="logo3">
<img src="https://via.placeholder.com/100x40?text=Logo4"
alt="logo4">
<img src="https://via.placeholder.com/100x40?text=Logo5"
alt="logo5">
</div>
</section>
<!-- Features -->
<section class="features">
<h2>Let’s Know Our Cool Feature</h2>
<p>Take control of your finances with smart, simple tools. Track
spending, grow investments, and plan your future.</p>
</section>
</body>
</html>
