API tools faq
paste
Advertisement
spiralvibes

Made By ZayDocs | CubeCloud Team

spiralvibes
Nov 20th, 2024
67
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>CubeCloud Bot | Home</title>
  8.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  9.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  10.     <style>
  11.         /* Base Theme Styles */
  12.         body {
  13.             background-color: #121212;
  14.             color: #f4f4f4;
  15.             transition: background-color 0.3s, color 0.3s;
  16.         }
  17.  
  18.         /* Dark Mode */
  19.         .bg-dark {
  20.             background-color: #1a1a1a !important;
  21.         }
  22.  
  23.         .text-accent-colour {
  24.             color: #4169e1;
  25.         }
  26.  
  27.         .btn-accent {
  28.             background-color: #4169e1;
  29.             border: none;
  30.             color: #fff;
  31.         }
  32.  
  33.         .btn-accent:hover {
  34.             background-color: #3658b3;
  35.         }
  36.  
  37.         .card {
  38.             background-color: #1a1a1a;
  39.         }
  40.  
  41.         .card-header {
  42.             background-color: #2a2a2a;
  43.         }
  44.  
  45.         .list-group-item {
  46.             background-color: #1a1a1a;
  47.             color: #f4f4f4;
  48.         }
  49.  
  50.         .list-group-item:hover {
  51.             background-color: #2a2a2a;
  52.         }
  53.  
  54.         .form-select {
  55.             width: 50%;
  56.             margin: 0 auto;
  57.             padding: 10px;
  58.             background-color: #333;
  59.             color: #fff;
  60.         }
  61.  
  62.         .navbar {
  63.             background-color: #333;
  64.         }
  65.  
  66.         .navbar a {
  67.             color: #f4f4f4;
  68.         }
  69.  
  70.         .navbar a:hover {
  71.             color: #4169e1;
  72.         }
  73.  
  74.         /* Light Mode */
  75.         .light-mode body {
  76.             background-color: #ffffff;
  77.             color: #333333;
  78.         }
  79.  
  80.         .light-mode .bg-dark {
  81.             background-color: #f1f1f1 !important;
  82.         }
  83.  
  84.         .light-mode .btn-accent {
  85.             background-color: #4169e1;
  86.             color: #fff;
  87.         }
  88.  
  89.         .light-mode .btn-accent:hover {
  90.             background-color: #3658b3;
  91.         }
  92.  
  93.         .light-mode .card {
  94.             background-color: #f1f1f1;
  95.             border: 1px solid #ddd;
  96.         }
  97.  
  98.         .light-mode .card-header {
  99.             background-color: #e2e2e2;
  100.         }
  101.  
  102.         .light-mode .list-group-item {
  103.             background-color: #ffffff;
  104.             color: #333333;
  105.         }
  106.  
  107.         .light-mode .list-group-item:hover {
  108.             background-color: #f1f1f1;
  109.         }
  110.  
  111.         .light-mode .navbar {
  112.             background-color: #f8f9fa;
  113.         }
  114.  
  115.         .light-mode .navbar a {
  116.             color: #333;
  117.         }
  118.  
  119.         .light-mode .navbar a:hover {
  120.             color: #4169e1;
  121.         }
  122.  
  123.         .light-mode footer {
  124.             background-color: #f1f1f1;
  125.             color: #333;
  126.         }
  127.  
  128.         .light-mode footer a {
  129.             color: #4169e1;
  130.         }
  131.  
  132.         .light-mode footer a:hover {
  133.             text-decoration: underline;
  134.         }
  135.  
  136.         /* Toggle Button */
  137.         .toggle-btn {
  138.             position: fixed;
  139.             top: 20px;
  140.             right: 20px;
  141.             background-color: #4169e1;
  142.             border: none;
  143.             color: #fff;
  144.             padding: 10px 20px;
  145.             font-size: 16px;
  146.             cursor: pointer;
  147.             border-radius: 5px;
  148.         }
  149.  
  150.         .toggle-btn:hover {
  151.             background-color: #3658b3;
  152.         }
  153.     </style>
  154. </head>
  155.  
  156. <body class="dark-mode">
  157.  
  158.     <!-- Navbar -->
  159.     <nav class="navbar navbar-expand-lg navbar-dark">
  160.         <div class="container">
  161.             <a class="navbar-brand" href="#">CubeCloud Bot</a>
  162.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
  163.                 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  164.                 <span class="navbar-toggler-icon"></span>
  165.             </button>
  166.             <div class="collapse navbar-collapse" id="navbarNav">
  167.                 <ul class="navbar-nav ms-auto">
  168.                     <li class="nav-item">
  169.                         <a class="nav-link active" aria-current="page" href="#">Home</a>
  170.                     </li>
  171.                     <li class="nav-item">
  172.                         <a class="nav-link" href="#">Features</a>
  173.                     </li>
  174.                     <li class="nav-item">
  175.                         <a class="nav-link" href="#">Commands</a>
  176.                     </li>
  177.                     <li class="nav-item">
  178.                         <a class="nav-link" href="#">Invite</a>
  179.                     </li>
  180.                     <li class="nav-item">
  181.                         <a class="nav-link" href="#">Support</a>
  182.                     </li>
  183.                 </ul>
  184.             </div>
  185.         </div>
  186.     </nav>
  187.  
  188.     <!-- Toggle Button -->
  189.     <button class="toggle-btn" id="toggleMode">Switch to Light Mode</button>
  190.  
  191.     <!-- Hero Section -->
  192.     <section class="bg-dark text-light text-center py-5">
  193.         <div class="container">
  194.             <h1 class="display-4"><span class="text-accent-colour">CubeCloud</span> Bot</h1>
  195.             <p class="lead">CubeCloud Bot is an integrated bot that separates you from the rest of the bots, with everything you need built in.</p>
  196.             <a class="btn btn-accent" href="#">Invite Bot</a>
  197.             <a class="btn btn-light m-2" href="#">Support Server</a>
  198.         </div>
  199.     </section>
  200.  
  201.     <!-- Features Section -->
  202.     <section class="bg-dark py-5">
  203.         <div class="container">
  204.             <h2 class="text-center mb-4 text-accent-colour">Features</h2>
  205.             <div class="row text-center">
  206.                 <div class="col-sm">
  207.                     <div class="card mb-3">
  208.                         <div class="card-body">
  209.                             <i class="fa-solid fa-clock-rotate-left h1 text-accent-colour"></i>
  210.                             <h4 class="card-title text-accent-colour">Commands</h4>
  211.                             <p class="card-text">With over 50 commands, CubeCloud Bot is ready for any task!</p>
  212.                         </div>
  213.                     </div>
  214.                 </div>
  215.                 <div class="col-sm">
  216.                     <div class="card mb-3">
  217.                         <div class="card-body">
  218.                             <i class="fa-solid fa-arrow-up-from-bracket h1 text-accent-colour"></i>
  219.                             <h4 class="card-title text-accent-colour">24/7 Online</h4>
  220.                             <p class="card-text">A robust support community is always available for you.</p>
  221.                         </div>
  222.                     </div>
  223.                 </div>
  224.                 <div class="col-sm">
  225.                     <div class="card mb-3">
  226.                         <div class="card-body">
  227.                             <i class="fa-solid fa-folder-open h1 text-accent-colour"></i>
  228.                             <h4 class="card-title text-accent-colour">Customization</h4>
  229.                             <p class="card-text">A fully customizable Discord bot, completely free!</p>
  230.                         </div>
  231.                     </div>
  232.                 </div>
  233.             </div>
  234.         </div>
  235.     </section>
  236.  
  237.     <!-- Footer -->
  238.     <footer class="bg-dark text-light">
  239.         <div class="container text-center">
  240.             <p>&copy; 2024 CubeCloud Bot | All Rights Reserved</p>
  241.             <a href="#" class="text-accent-colour">Privacy Policy</a> | <a href="#" class="text-accent-colour">Terms of Service</a>
  242.         </div>
  243.     </footer>
  244.  
  245.     <!-- JavaScript for Toggle Button -->
  246.     <script>
  247.         const toggleButton = document.getElementById("toggleMode");
  248.  
  249.         toggleButton.addEventListener("click", () => {
  250.             document.body.classList.toggle("light-mode");
  251.             document.body.classList.toggle("dark-mode");
  252.  
  253.             if (document.body.classList.contains("light-mode")) {
  254.                 toggleButton.textContent = "Switch to Dark Mode";
  255.             } else {
  256.                 toggleButton.textContent = "Switch to Light Mode";
  257.             }
  258.         });
  259.     </script>
  260.  
  261.     <!-- Bootstrap JS -->
  262.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  263.  
  264. </body>
  265.  
  266. </html>
  267.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!