Merge pull request #1 from cristalvioletacristal/tests

Tests
cristalvioletacristal · Dec 16, 2024 · ccf88d6 · ccf88d6
1 parent 1c27c20
commit ccf88d6
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -1,43 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
-<!-- reference:
-luyang.asia
-https://cinni.net
--->
-
   <head>
     <meta charset="utf-8">
-    <title ?class="inline-img">♡ cristalvioletacristal ♡ </title>
-    <link rel="shortcut icon" href=".\images\icon\vvinx1280000.png" type="image/x-icon">
+    <title>♡ cristalvioletacristal ♡</title>
+    <link rel="shortcut icon" href="./images/icon/vvinx1280000.png" type="image/x-icon">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>cristalvioletacristal</title>
     <link rel="stylesheet" href="./styles.css">
+    <script src="./sketch.js" defer></script>
   </head>
+
   <body>
-    <video autoplay muted loop id="myVideo">
-  <source src="./videos/demais-para-contar.mp4" type="video/mp4">
-</video>
+    <video autoplay muted loop id="videoDemaisParaContar">
+      <source src="./videos/demais-para-contar.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+
     <header class="header">
       <h1>cristalvioletacristal</h1>
     </header>
 
-
-
     <div class="gallery">
-      <img src=".\images\icone-oblivio-inconfesso-bebe.png">
-      <img src=".\images\icone-melting-dpi.webp">
-      <img src=".\images\icone-fresta.jpg">
-      <img src=".\images\icone-cmedi-poster-ingles.jpg">
-      <img src=".\images\icone-demais-para-contar.jpg">
-      <img src=".\images\icone-estou-paralisada-de-medo-de-voces.png">
-      <img src=".\images\icone-glitch-desvio-do-diluvio-paradigmatico.png">
-      <img src=".\images\icone-erro-nascimento.png">
-
-
-
+      <img src="./images/icone-oblivio-inconfesso-bebe.png" alt="icone-oblivio">
+      <img src="./images/icone-melting-dpi.webp" alt="icone-melting">
+      <img src="./images/icone-fresta.jpg" alt="icone-fresta">
+      <img src="./images/icone-cmedi-poster-ingles.jpg" alt="icone-cmedi">
+      <img src="./images/icone-demais-para-contar.jpg" alt="icone-demais">
+      <img src="./images/icone-estou-paralisada-de-medo-de-voces.png" alt="icone-estou-paralisada">
+      <img src="./images/icone-glitch-desvio-do-diluvio-paradigmatico.png" alt="icone-glitch">
+      <img src="./images/icone-erro-nascimento.png" alt="icone-erro">
     </div>
-
-
-
   </body>
 </html>
diff --git a/sketch.js b/sketch.js
diff --git a/styles.css b/styles.css
@@ -1,3 +1,4 @@
+/* Reset and Fonts */
 * {
   box-sizing: border-box;
 }
@@ -8,46 +9,58 @@
 }
 
 body {
-  cursor:url("./images/cursor/0.png"),default;
-  font-family: TimesNewArial;
+  cursor: url("./images/cursor/0.png"), default;
+  font-family: TimesNewArial, sans-serif;
   background: #AEAEAE;
+  margin: 0;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
 }
-#myVideo {
+
+/* Video Background */
+#videoDemaisParaContar {
   position: fixed;
-  right: 0;
   top: 0;
-  min-width: 100%;
-  min-height: 100%;
-  z-index:-100;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -100;
+	opacity: 1; /* Adjust background video brightness */
 }
+
+/* Header */
 .header {
   text-align: left;
-  /* text-transform: lowercase; */
   padding: 32px;
-  /* background-color: #e3a7ff; */
-  /* color: #fff; */
-  /* border-bottom: 4px solid #fdb347; */
+  font-size: 1.5em;
+  z-index: 1;
+  position: relative;
 }
 
+/* Gallery */
 .gallery {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-  /* gap: 12px; */
   justify-content: center;
   align-items: center;
   max-width: 1400px;
-  margin: 0 auto;
+  margin: 20px auto;
   padding: 20px 10px;
+  gap: 16px; /* Add consistent spacing between images */
 }
 
 .gallery img {
-  top: 0px;
   width: 100%;
-  max-width: 350px;
-  height: 300px;
+  max-width: 300px;
+  height: 250px;
   object-fit: cover;
   margin: 4%;
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
+}
+
+.gallery img:hover {
+	filter: hue-rotate(90deg) contrast(200%);
+/* filter: grayscale(30%); */
 }
 
 .inline-img {
@@ -56,7 +69,3 @@ body {
   padding: 0;
   vertical-align: baseline;
 }
-.nav {
-  position: fixed;
-  z-index: 1;
-}