diff --git a/index.html b/index.html new file mode 100755 index 0000000..211c10f --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + The Pirate Oasis + + + + +
+

The Pirate Oasis

+ +
+ +
+ Welcome to The Pirate Oasis - Home of the Lost Torrents +
+ +
+ +
+ +
+ + + + + + + + + + + + +
NameTorrent LinkLast UpdatedActive Peers
+
+ + + + + diff --git a/styles.css b/styles.css new file mode 100755 index 0000000..7189e17 --- /dev/null +++ b/styles.css @@ -0,0 +1,249 @@ +body { + margin: 0; + background-color: #000000; + color: #FFFFFF; + font-family: 'Special Elite', monospace; + overflow-x: hidden; +} + +header { + text-align: center; + padding: 30px 20px; + background-color: #0a0a0a; + box-shadow: 0 2px 10px #FF4E00; +} + +.title { + font-family: 'Pirata One', cursive; + color: #FF4E00; + font-size: 60px; + margin: 0; + letter-spacing: 3px; +} + +.navbar { + margin-top: 20px; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 20px; +} + +.navbar a { + color: #FFFFFF; + text-decoration: none; + padding: 12px 25px; + border: 2px solid #FF4E00; + border-radius: 5px; + transition: all 0.4s ease; + font-size: 18px; +} + +.navbar a:hover { + background-color: #00FF00; + color: #000000; + transform: scale(1.1); +} + +.welcome { + margin: 30px 0; + background-color: #111111; + padding: 10px 0; + box-shadow: inset 0 0 10px #FF4E00; +} + +.welcome marquee { + font-size: 22px; + color: #FF4E00; +} + +.filters { + text-align: center; + margin: 40px 0; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropbtn { + background-color: #FF4E00; + color: #000000; + padding: 14px 28px; + font-size: 18px; + border: none; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.4s, transform 0.4s; +} + +.dropbtn:hover { + background-color: #00FF00; + transform: translateY(-2px); +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #000000; + min-width: 180px; + box-shadow: 0px 8px 16px 0px rgba(255,78,0,0.5); + z-index: 1; + border: 1px solid #FF4E00; +} + +.dropdown-content a { + color: #FFFFFF; + padding: 14px 18px; + text-decoration: none; + display: block; + font-size: 16px; + transition: background-color 0.3s; +} + +.dropdown-content a:hover { + background-color: #00FF00; + color: #000000; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.torrent-table { + width: 90%; + margin: 50px auto; + overflow-x: auto; +} + +.torrent-table table { + width: 100%; + border-collapse: collapse; + background-color: #111111; + box-shadow: 0 0 10px #FF4E00; +} + +.torrent-table th, .torrent-table td { + border: 1px solid #FF4E00; + padding: 16px; + text-align: center; + font-size: 18px; + transition: background-color 0.3s, color 0.3s; +} + +.torrent-table th { + background-color: #FF4E00; + color: #000000; + text-transform: uppercase; +} + +.torrent-table tr:hover { + background-color: #00FF00; + color: #000000; +} + +footer { + text-align: center; + padding: 20px; + background-color: #0a0a0a; + border-top: 2px solid #FF4E00; + margin-top: 50px; + font-size: 14px; +} + +footer p { + color: #FFFFFF; + margin: 0; + letter-spacing: 1px; +} + +html { + scroll-behavior: smooth; +} + +.torrent-table tbody tr { + cursor: pointer; +} + +.torrent-table tbody tr:hover td { + background-color: #00FF00; + color: #000000; +} + +@media (max-width: 1024px) { + .title { + font-size: 50px; + } + + .navbar a { + font-size: 16px; + padding: 10px 20px; + } + + .dropbtn { + padding: 12px 24px; + font-size: 16px; + } + + .torrent-table th, .torrent-table td { + font-size: 16px; + padding: 12px; + } +} + +@media (max-width: 768px) { + .navbar { + flex-direction: column; + gap: 10px; + } + + .navbar a { + width: 80%; + text-align: center; + } + + .title { + font-size: 40px; + } + + .dropbtn { + width: 100%; + padding: 10px; + } + + .torrent-table { + width: 100%; + margin: 20px 0; + } +} + +@media (max-width: 480px) { + .title { + font-size: 32px; + } + + .welcome marquee { + font-size: 18px; + } + + .dropbtn { + font-size: 14px; + padding: 8px 16px; + } + + .dropdown-content a { + font-size: 14px; + padding: 10px; + } + + .torrent-table th, .torrent-table td { + font-size: 14px; + padding: 10px; + } + + footer { + font-size: 12px; + } +} +