first webbie!!

gallery-container.html

@@ -0,0 +1,52 @@
+<div class="gallery-grid">
+  <img src="gallery/1.png" alt="Image 1">
+  <img src="gallery/2.jpg" alt="Image 2">
+  <img src="gallery/3.jpg" alt="Image 3">
+  <img src="gallery/4.jpg" alt="Image 4">
+  <img src="gallery/5.png" alt="Image 5">
+  <img src="gallery/6.png" alt="Image 6">
+  <img src="gallery/7.jpg" alt="Image 7">
+  <img src="gallery/8.jpg" alt="Image 8">
+  <img src="gallery/9.jpg" alt="Image 9">
+  <img src="gallery/10.jpg" alt="Image 10">
+  <img src="gallery/11.jpg" alt="Image 11">
+  <img src="gallery/12.jpg" alt="Image 12">
+  <img src="gallery/13.gif" alt="Image 13">
+  <img src="gallery/14.jpg" alt="Image 14">
+  <img src="gallery/15.png" alt="Image 15">
+  <img src="gallery/16.png" alt="Image 16">
+  <img src="gallery/17.jpg" alt="Image 17">
+  <img src="gallery/18.jpg" alt="Image 18">
+  <img src="gallery/19.jpg" alt="Image 19">
+  <img src="gallery/20.jpg" alt="Image 20">
+  <img src="gallery/21.gif" alt="Image 21">
+  <img src="gallery/22.jpg" alt="Image 22">
+  <img src="gallery/23.jpg" alt="Image 23">
+  <img src="gallery/24.jpg" alt="Image 24">
+  <img src="gallery/25.jpg" alt="Image 25">
+  <img src="gallery/26.jpg" alt="Image 26">
+  <img src="gallery/27.jpg" alt="Image 27">
+  <img src="gallery/28.jpg" alt="Image 28">
+  <img src="gallery/29.jpg" alt="Image 29">
+  <img src="gallery/30.jpg" alt="Image 30">
+  <img src="gallery/31.jpg" alt="Image 31">
+  <img src="gallery/32.jpg" alt="Image 32">
+  <img src="gallery/33.jpg" alt="Image 33">
+  <img src="gallery/34.jpg" alt="Image 34">
+  <img src="gallery/35.jpg" alt="Image 35">
+  <img src="gallery/36.jpg" alt="Image 36">
+  <img src="gallery/37.jpg" alt="Image 37">
+  <img src="gallery/38.jpg" alt="Image 38">
+  <img src="gallery/39.jpg" alt="Image 39">
+  <img src="gallery/40.jpg" alt="Image 40">
+  <img src="gallery/41.jpg" alt="Image 41">
+  <img src="gallery/42.jpg" alt="Image 42">
+  <img src="gallery/43.jpg" alt="Image 43">
+  <img src="gallery/44.jpg" alt="Image 44">
+  <img src="gallery/45.jpg" alt="Image 45">
+  <img src="gallery/46.jpg" alt="Image 46">
+  <img src="gallery/47.jpg" alt="Image 47">
+  <img src="gallery/48.jpg" alt="Image 48">
+  <img src="gallery/49.jpg" alt="Image 49">
+  <img src="gallery/50.jpg" alt="Image 50">
+</div>

index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="style/styles.css">
+    <link rel="stylesheet" href="style/about.css">
+    <link rel="stylesheet" href="style/gallery.css">
+    <title>hola</title>
+  </head>
+  <body>
+    <video autoplay muted loop id="background-video">
+      <source src="textures/Yuuka_body.mp4" type="video/mp4">
+    </video>
+    <div id="top-line">
+      <a href="index.html" id="home-btn"></a>
+      <button id="about-btn">About This Website</button>
+      <button id="gallery-btn">Gallery</button>
+    </div>
+
+    <section id="about" class="tab-content">
+      <h1>this work?</h1>
+      <p>Welcome to my first website, im learning shit</p>
+    </section>
+
+    <section id="gallery" class="tab-content">
+      <div class="gallery-grid">
+      </div>
+      <div id="gallery-container" class="gallery-grid"></div>
+    </section>
+
+    <script src="js/gallery.js" defer></script>
+    <script src="js/hideBroken.js" defer></script>
+    <script src="js/tabs.js" defer></script>
+    </body>
+</html>

js/gallery.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const galleryContainer = document.getElementById('gallery-container');
+  const totalImages = 50; // number of images you want to load
+
+  for (let i = 1; i <= totalImages; i++) {
+    const img = document.createElement('img');
+    img.src = `gallery/${i}.jpg`;  // assuming .jpg extension, change if needed
+    img.alt = `Image ${i}`;
+    img.onerror = () => { img.style.display = 'none'; }; // hide broken images
+    galleryContainer.appendChild(img);
+  }
+});

js/hideBroken.js

@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('img').forEach(img => {
+    img.onerror = () => {
+      img.style.display = 'none';
+    };
+  });
+});

js/tabs.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', () => {
+ 
+  const tabs = document.querySelectorAll('.tab-content');
+  tabs.forEach(tab => tab.style.display = 'none'); 
+  const aboutTab = document.getElementById('about');
+  if (aboutTab) aboutTab.style.display = 'block';   
+
+  const buttons = document.querySelectorAll('#top-line button');
+  buttons.forEach(button => {
+    button.addEventListener('click', () => {
+      const targetId = button.id.replace('-btn', '');
+      tabs.forEach(tab => tab.style.display = 'none');
+      const targetTab = document.getElementById(targetId);
+      if (targetTab) targetTab.style.display = 'block';
+    });
+  });
+});

style/about.css

@@ -0,0 +1,13 @@
+#about-link-btn {
+    background-color:aliceblue;
+    color:#f0f8ff;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: box-shadow 0.3s ease;
+}
+
+#about-link-btn:hover {
+    box-shadow: 0 0 10px #02e3ff;
+}

style/gallery.css

@@ -0,0 +1,28 @@
+#gallery-link-btn {
+    background-color:aliceblue;
+    color:#f0f8ff;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: box-shadow 0.3s ease;
+}
+
+#gallery-link-btn:hover {
+    box-shadow: 0 0 10px #02e3ff;
+}
+
+.gallery-grid {
+    display:grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 10px;
+    padding: 70px;
+}
+
+.gallery-grid img {
+    width: 100%;
+    max-width: 700px;
+    height: auto;
+    border-radius: 8px;
+    object-fit: cover;
+}

style/styles.css

@@ -0,0 +1,89 @@
+.tab-content {
+    display: none;
+    padding: 20px;
+    color:aliceblue;
+}
+
+#about {
+    display: block;
+}
+
+html, body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow-x: hidden;
+}
+#background-video {
+    position: fixed;
+    right: 0%;
+    left: 0%;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: -1;
+    object-fit: cover;
+}
+#top-line {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 95px;
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    z-index: 10;
+    display: flex;
+    justify-content: flex-start;
+    align-items:center;
+    background-color: #1111;
+    padding: 10px;
+}
+
+#top-line button {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 2px solid #5b6fde;
+    border-left: 2px solid #5b6fde; 
+    border-right: 2px solid #5b6fde;
+    border-top: transparent;
+    color:#153dee;
+    font-size: large;
+    padding: 30px;
+    margin: 30px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+    background-color: transparent;
+    transition: box-shadow 0.3s ease, background-color 0.3s ease;
+}
+
+#top-line button:hover {
+    text-decoration: underline;
+}
+
+title {
+    font-size: large;
+    font-weight: 100;
+    margin-bottom: auto;
+    color:#a50000;
+}
+h1 {
+    font-size: 3rem;
+    color: #a50000;
+    font-weight: bold;
+    margin-top: 150px;
+}
+p {
+    font-size: 1.2rem;
+    color:blueviolet;
+    max-width: 800px;
+    margin: 0 auto 40px auto;
+    line-height: 1.5;
+}
+img {
+    display:block;
+}