Spaces:
Running
Running
Can you make this image background for landing page
Browse files- index.html +11 -4
index.html
CHANGED
|
@@ -21,6 +21,13 @@
|
|
| 21 |
left: 0;
|
| 22 |
pointer-events: none;
|
| 23 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
.grid-pattern {
|
| 25 |
background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px),
|
| 26 |
linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px);
|
|
@@ -31,13 +38,13 @@
|
|
| 31 |
<body class="bg-white text-gray-800 font-poppins">
|
| 32 |
<custom-navbar></custom-navbar>
|
| 33 |
<!-- Hero Section -->
|
| 34 |
-
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden
|
| 35 |
-
|
| 36 |
<div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
|
| 37 |
-
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-
|
| 38 |
Enabling Next-Generation<br>Semiconductor Innovation
|
| 39 |
</h1>
|
| 40 |
-
<p class="text-xl md:text-2xl text-
|
| 41 |
Advanced deposition tools for FEOL and BEOL
|
| 42 |
</p>
|
| 43 |
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
|
|
| 21 |
left: 0;
|
| 22 |
pointer-events: none;
|
| 23 |
}
|
| 24 |
+
.hero-background {
|
| 25 |
+
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
| 26 |
+
url('https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/the-world-of-the-semiconductor-cleanroom.jpg');
|
| 27 |
+
background-size: cover;
|
| 28 |
+
background-position: center;
|
| 29 |
+
background-attachment: fixed;
|
| 30 |
+
}
|
| 31 |
.grid-pattern {
|
| 32 |
background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px),
|
| 33 |
linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px);
|
|
|
|
| 38 |
<body class="bg-white text-gray-800 font-poppins">
|
| 39 |
<custom-navbar></custom-navbar>
|
| 40 |
<!-- Hero Section -->
|
| 41 |
+
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden hero-background">
|
| 42 |
+
<div class="atom-animation" id="atomCanvas"></div>
|
| 43 |
<div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
|
| 44 |
+
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">
|
| 45 |
Enabling Next-Generation<br>Semiconductor Innovation
|
| 46 |
</h1>
|
| 47 |
+
<p class="text-xl md:text-2xl text-orange-100 mb-8 max-w-3xl mx-auto">
|
| 48 |
Advanced deposition tools for FEOL and BEOL
|
| 49 |
</p>
|
| 50 |
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|