cards - PHP Online

Form of PHP Sandbox

Enter Your PHP code here for testing/debugging in the Online PHP Sandbox. As in the usual PHP files, you can also add HTML, but do not forget to add the tag <?php in the places where the PHP script should be executed.



Your result can be seen below.

Result of php executing





Full code of cards.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Javascript Card Slider Template</title>
  6.     <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
  7.     <link rel="stylesheet" href="styles.css" />
  8.   </head>
  9.   <body>
  10.     <div class='cards-wrapper'>
  11.       <div class='cards'>
  12.         <button class='card card1' tabindex="-1">
  13.           <h2>1</h2>
  14.         </button>
  15.         <button class='card card2' tabindex="-1">
  16.           <h2>2</h2>   
  17.         </button>
  18.         <button class='card card4' tabindex="-1">
  19.           <h2>3</h2> 
  20.         </button> 
  21.         <button class='card card5' tabindex="-1">
  22.           <h2>4</h2>  
  23.         </button>
  24.       </div>
  25.       <button class="arrow-btn arrow-btn-prev" tabindex="0">
  26.         <svg viewBox="0 0 256 512">
  27.           <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" />
  28.         </svg>
  29.       </button>
  30.       <button class="arrow-btn arrow-btn-next" tabindex="0">
  31.         <svg viewBox="0 0 256 512">
  32.           <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
  33.         </svg>
  34.       </button>
  35.     </div>
  36.     <script src="main.js"></script>
  37.   </body>
  38. </html>
File Description
  • cards
  • PHP Code
  • 04 Apr-2024
  • 1.44 Kb
You can Share it: