add index page

SaphirO46 · May 9, 2024 · efeb719 · efeb719
1 parent 514882c
commit efeb719
Show file tree

Hide file tree

Showing 13 changed files with 221 additions and 3 deletions.
diff --git a/minecccraftPs3/css/app.css b/minecccraftPs3/css/app.css
@@ -0,0 +1,27 @@
+
+.video-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.center-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin-left: 100px;
+}
+*{
+  font-family: Helvetica;
+}
+
+.img-discord{
+  border-radius: 40%;
+  background-color: rgba(0, 76, 252, 0.22);
+}
+
+.img-backup{
+  width: 45%;
+  padding-right: 2%;
+}
diff --git a/minecccraftPs3/discordServ.txt b/minecccraftPs3/discordServ.txt
@@ -0,0 +1,11 @@
+TMC : https://discord.gg/RayS528fp8 | https://cdn.discordapp.com/icons/997327620159058001/a_1dc4cae2281784a6987bf9c4f8ca02c4.webp
+SPEERDUN ZEPHYR : https://discord.gg/s46mb87e6r | https://cdn.discordapp.com/icons/1050579505263149097/7dc21fa5316ce9030a5aa298f0bcf3f0.webp
+LEGACY SERV : https://discord.gg/4EghSMyvWY | https://cdn.discordapp.com/icons/1062589624838520912/9abd29aedd95523e73c4ceda5b1ea6de.webp
+https://discord.gg/minecraft-legacy-edition-987063877080584252 | https://cdn.discordapp.com/icons/987063877080584252/60162bee79e0ed4598c11d4b6a3a6505.webp
+https://discord.gg/yJTjv8at8N | https://cdn.discordapp.com/icons/806988877687423027/e7227fff932e7d32d6ff027461d92808.webp
+https://discord.gg/WVD92EgERE | https://cdn.discordapp.com/icons/676472267156226069/6a5ae869fb376b906a3e8c9dafbe2e5b.webp
+https://discord.gg/pcw6aUvtsj | https://cdn.discordapp.com/icons/1145657856918573146/82edb679959228609577c17dd7f81786.webp
+https://discord.gg/bDxEFuZzzE | https://cdn.discordapp.com/icons/972996357457596446/082e4cff4d9fb51e41fd3e40337cbfa1.webp
+https://discord.gg/ycCJAEH3MC | https://cdn.discordapp.com/icons/756505174356525176/5a5f2885e6531f9086b38b05b9346f4a.webp
+https://discord.gg/qQTYuGJNPw | https://cdn.discordapp.com/icons/845953083908947968/3e370f08828579f34342373f43e4d2cc.webp
+https://discord.gg/abxTXDWdpM | https://cdn.discordapp.com/icons/1175634462860644433/8d5cb173ea8f3d6c4955d128f9ec085d.webp
diff --git a/minecccraftPs3/header.html b/minecccraftPs3/header.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/app.css">
+  <meta name="description" content="">
+
+  <meta property="og:title" content="">
+  <meta property="og:type" content="">
+  <meta property="og:url" content="">
+  <meta property="og:image" content="">
+  <meta property="og:image:alt" content="">
+
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="icon.png">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+
+
+  <link rel="manifest" href="site.webmanifest">
+  <meta name="theme-color" content="#fafafa">
+</head>
+<style>
+  body, html {
+    overflow: hidden;
+  }
+</style>
+<body>
+
+<nav class="navbar is-transparent">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+<img src="img/minecraftPs3.png">
+
+    </a>
+
+  </div>
+
+  <div id="navbarExampleTransparentExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="https://bulma.io/"> Home </a>
+      <a class="navbar-item" href="https://bulma.io/"> Discords </a>
+      <a class="navbar-item" href="https://bulma.io/"> Backups </a>
+      <a class="navbar-item" href="https://bulma.io/"> Mods </a>
+
+    </div>
+
+
+  </div>
+</nav>
+
+</body>
+</html>
diff --git a/minecccraftPs3/img/Minecraft-PS3.mp4 b/minecccraftPs3/img/Minecraft-PS3.mp4
diff --git a/minecccraftPs3/img/background.png b/minecccraftPs3/img/background.png
diff --git a/minecccraftPs3/img/backupImg/1.png b/minecccraftPs3/img/backupImg/1.png
diff --git a/minecccraftPs3/img/backupImg/2.png b/minecccraftPs3/img/backupImg/2.png
diff --git a/minecccraftPs3/img/backupImg/3.png b/minecccraftPs3/img/backupImg/3.png
diff --git a/minecccraftPs3/img/backupImg/4.png b/minecccraftPs3/img/backupImg/4.png
diff --git a/minecccraftPs3/img/mcjacket.jpg b/minecccraftPs3/img/mcjacket.jpg
diff --git a/minecccraftPs3/img/mcjacket.png b/minecccraftPs3/img/mcjacket.png
diff --git a/minecccraftPs3/img/minecraftPs3.png b/minecccraftPs3/img/minecraftPs3.png
diff --git a/minecccraftPs3/index.html b/minecccraftPs3/index.html
@@ -6,6 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/app.css">
+
   <meta name="description" content="">
 
   <meta property="og:title" content="">
@@ -18,16 +20,136 @@
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="icon.png">
 
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
+
   <link rel="manifest" href="site.webmanifest">
   <meta name="theme-color" content="#fafafa">
 </head>
 
 <body>
+<iframe src="header.html" style="width: 100%; height: 50px" class="header-iframe"></iframe>
+<video autoplay muted loop class="video-container">
+  <source src="img/Minecraft-PS3.mp4" type="video/mp4">
+  Your browser does not support HTML5 video.
+</video>
+
+<section class="hero is-large is-link">
+  <div class="hero-body">
+    <p class="title">Welcome</p>
+    <p class="subtitle">Hi! Start a new adventure in Minecraft on PS3: discover all the creations of the passionate Minecraft community on PS3, their mods, Minecraft modifications, community Discord, and much more.</p>
+
+<br>
+    <br>
+    <center>
+    <table style="width: 100%; height: 200px">
+      <thead>
+      <tr>
+        <th style="width: 35%; color: #ececec" class="center-text" ><center><button data-aos="fade-down-right" class="button is-info is-rounded is-large">Let's Start !</button></center> </th>
+        <th style="width: 65%;"><img data-aos="fade-down-left" src="img/mcjacket.png"></th>
+      </tr>
+      </thead>
+    </table>
+    </center>
+
+  </div>
+
+</section>
+
+
 
-  <!-- Add your site or application content here -->
-  <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/app.js"></script>
+
+<section class="hero is-large">
+  <div class="hero-body">
+    <p class="title">Backups</p>
+    <p class="subtitle">Not satisfied with Minecraft PS3? Texture packs, skins, or mini-games not to your liking? No worries, there's a solution! You can download backups to customize your game. A backup allows you to add skins, texture packs, and much more! Don't hesitate any longer, come and discover our selection of backups!</p>
+
+  <br>
+  <table style="width: 100%;">
+    <thead>
+    <tr>
+      <th class="img-backup" class="img-backup"><img data-aos="flip-down"  src="img/backupImg/1.png" alt=""></th>
+      <th class="img-backup"> <img data-aos="flip-down" src="img/backupImg/2.png" alt=""></th>
+    </tr>
+    </thead>
+  </table>
+    <table style="width: 100%;">
+      <thead>
+      <tr>
+        <th  class="img-backup"><img data-aos="flip-down"  src="img/backupImg/3.png" alt=""></th>
+        <th class="img-backup"> <img data-aos="flip-down" src="img/backupImg/4.png" alt=""></th>
+        <br>
+      </tr>
+      </thead>
+    </table>
+    <br>
+    <br>
+    <center>
+      <a href="https://www.youtube.com/watch?v=oQyYbmNsjFk&list=PLd7LR4mpKrH3rPmuzdIWJai6B7Oj-UeYi&index=13">
+      <button  class="button is-info is-rounded is-large">See More -></button>
+      </a>
+    </center>
+  </div>
+</section>
+
+<section class="hero is-large is-link">
+  <div class="hero-body">
+    <p class="title">Mods</p>
+    <p class="subtitle">Still not satisfied? Then let's take it to the next level and discover Mods. These allow you to deeply modify the game, adding features that a backup couldn't achieve. With the world of mods, adding chat, custom sky, or various cheats is possible. Explore the trending mods for MC PS3 right now!</p>
+    <br>
+    <br>
+    <center>
+      <button  class="button is-info is-rounded is-large">See More -></button>
+    </center>
+  </div>
+</section>
+
+<section class="hero is-large">
+  <div class="hero-body">
+    <p class="title">Discords</p>
+    <p class="subtitle">Minecraft PS3 offers a vast world where hundreds of Discord servers are dedicated to different activities. Don't hesitate any longer, join them to make new friends!</p>
+    <br>
+    <br>
+    <div class="your-class" data-aos="fade-up">
+      <div ><a href="https://discord.gg/9bHZTdm8Ee"><img class="img-discord" src="https://cdn.discordapp.com/icons/896429833133887588/cece532e082e1e9bc833ca319f9cfea6.webp"></a></div>
+      <div ><a href="https://discord.gg/qH7SxHGGvh"><img class="img-discord" src="https://cdn.discordapp.com/icons/713996927590596639/a_90cf82ff8d80501672c994842e913b69.webp"></a></div>
+      <div ><a href="https://discord.gg/s46mb87e6r"><img class="img-discord" src="https://cdn.discordapp.com/icons/1050579505263149097/7dc21fa5316ce9030a5aa298f0bcf3f0.webp"></a></div>
+      <div ><a href="https://discord.gg/4EghSMyvWY"><img class="img-discord" src="https://cdn.discordapp.com/icons/1062589624838520912/9abd29aedd95523e73c4ceda5b1ea6de.webp"></a></div>
+      <div ><a href="https://discord.gg/minecraft-legacy-edition-987063877080584252"><img class="img-discord" src="https://cdn.discordapp.com/icons/987063877080584252/60162bee79e0ed4598c11d4b6a3a6505.webp"></a></div>
+      <div ><a href="https://discord.gg/yJTjv8at8N"><img class="img-discord" src="https://cdn.discordapp.com/icons/806988877687423027/e7227fff932e7d32d6ff027461d92808.webp"></a></div>
+      <div ><a href="https://discord.gg/WVD92EgERE"><img class="img-discord" src="https://cdn.discordapp.com/icons/676472267156226069/6a5ae869fb376b906a3e8c9dafbe2e5b.webp"></a></div>
+
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
+    <script>
+      $(document).ready(function(){
+        $('.your-class').slick({
+          slidesToShow: 4,
+          slidesToScroll: 1,
+          autoplay: true,
+          autoplaySpeed: 2000,
+        });
+      });
+    </script>
+    <br>
+    <br>
+    <center>
+      <button  class="button is-info is-rounded is-large">See More -></button>
+    </center>
+  </div>
+</section>
 
 </body>
 
+<script>
+  AOS.init();
+</script>
+
 </html>
+