<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Stock App</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #1e293b, #0f172a);
color: #f1f5f9;
overflow-x: hidden;
/* Header Section */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
header h1 {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(45deg, #00ffab, #00ffff);
-webkit-background-clip: text;
color: transparent;
header nav a {
color: #f1f5f9;
text-decoration: none;
margin: 0 1rem;
transition: color 0.3s;
header nav a:hover {
color: #00ffab;
/* Hero Section */
.hero {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
text-align: center;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #f1f5f9;
.hero h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
animation: fadeIn 1s ease-in-out;
.hero p {
font-size: 1.2rem;
color: #94a3b8;
margin-bottom: 2rem;
.hero button {
padding: 0.8rem 2rem;
font-size: 1rem;
color: #0f172a;
background: linear-gradient(45deg, #00ffab, #00ffff);
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 255, 171, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
.hero button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 255, 171, 0.5);
/* Watchlist and Cards */
.dashboard {
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
.card {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(8px);
padding: 1.5rem;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s;
.card:hover {
transform: translateY(-10px);
.card h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
.card p {
font-size: 1rem;
color: #94a3b8;
/* Floating Action Button */
.fab {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: linear-gradient(45deg, #00ffab, #00ffff);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 15px rgba(0, 255, 171, 0.3);
cursor: pointer;
transition: transform 0.3s;
.fab:hover {
transform: scale(1.1);
.fab span {
font-size: 2rem;
color: #0f172a;
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
to {
opacity: 1;
}
}
</style>
</head>
<body>
<header>
<h1>StockMaster</h1>
<nav>
<a href="#">Home</a>
<a href="#">Watchlist</a>
<a href="#">Portfolio</a>
<a href="#">Settings</a>
</nav>
</header>
<section class="hero">
<div>
<h2>Track Your Stocks in Real-Time</h2>
<p>Stay ahead in the market with live updates and personalized insights.</p>
<button>Get Started</button>
</div>
</section>
<section class="dashboard">
<div class="card">
<h3>Top Gainers</h3>
<p>Stock A: +5.3%</p>
</div>
<div class="card">
<h3>Top Losers</h3>
<p>Stock B: -2.7%</p>
</div>
<div class="card">
<h3>Nifty 50</h3>
<p>Index: 18,250</p>
</div>
<div class="card">
<h3>Bank Nifty</h3>
<p>Index: 42,000</p>
</div>
</section>
<div class="fab">
<span>+</span>
</div>
</body>
</html>
