feat: add image to starter (#4497)

QwikDev · Jun 14, 2023 · 8350d56 · 8350d56
1 parent d8d9aca
commit 8350d56
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/starters/apps/basic/src/components/starter/hero/hero.module.css b/starters/apps/basic/src/components/starter/hero/hero.module.css
@@ -9,6 +9,16 @@
   gap: 40px;
 }
 
+.hero-image {
+  width: 100%;
+  position: absolute;
+  height: auto;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0.2;
+  pointer-events: none;
+}
+
 .hero p {
   color: white;
   margin: 0;

diff --git a/starters/apps/basic/src/components/starter/hero/hero.tsx b/starters/apps/basic/src/components/starter/hero/hero.tsx
@@ -1,9 +1,11 @@
 import { component$ } from '@builder.io/qwik';
 import styles from './hero.module.css';
+import ImgThunder from '~/media/thunder.png?jsx';
 
 export default component$(() => {
   return (
     <div class={['container', styles.hero]}>
+      <ImgThunder class={styles['hero-image']} />
       <h1>
         So <span class="highlight">fantastic</span>
         <br />

diff --git a/starters/apps/basic/src/media/thunder.png b/starters/apps/basic/src/media/thunder.png