{"id":22771421,"url":"https://github.com/ramxcodes/solo-leveling","last_synced_at":"2025-06-13T20:06:36.768Z","repository":{"id":226892093,"uuid":"769900988","full_name":"ramxcodes/solo-leveling","owner":"ramxcodes","description":"Welcome to the Fan Made website for Solo Leveling, a web novel that takes you on an extraordinary journey through the world of Sung Jin Woo and his incredible adventures.","archived":false,"fork":false,"pushed_at":"2024-03-10T12:04:34.000Z","size":8587,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T12:14:16.681Z","etag":null,"topics":["anime","jin","solo-leveling","sung","sung-jin-woo","woo"],"latest_commit_sha":null,"homepage":"https://ramxcodes.github.io/solo-leveling/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ramxcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-10T11:42:09.000Z","updated_at":"2025-01-21T09:40:36.000Z","dependencies_parsed_at":"2024-03-10T12:46:11.095Z","dependency_job_id":"1d1c598a-a890-4147-8a4f-268c3cb6d5b6","html_url":"https://github.com/ramxcodes/solo-leveling","commit_stats":null,"previous_names":["ramxcodes/solo-leveling"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ramxcodes/solo-leveling","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2Fsolo-leveling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2Fsolo-leveling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2Fsolo-leveling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2Fsolo-leveling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ramxcodes","download_url":"https://codeload.github.com/ramxcodes/solo-leveling/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2Fsolo-leveling/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259712410,"owners_count":22900038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anime","jin","solo-leveling","sung","sung-jin-woo","woo"],"created_at":"2024-12-11T16:13:36.591Z","updated_at":"2025-06-13T20:06:36.720Z","avatar_url":"https://github.com/ramxcodes.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Solo Leveling Landing Page\nWelcome to the Fan Made website for Solo Leveling, a web novel that takes you on an extraordinary journey through the world of Sung Jin Woo and his incredible adventures. Dive into the characters, witness epic battles, and explore the shadows of Sung Jin Woo's realm.\n\n## Table of Contents\n1. [Introduction](#introduction)\n2. [Features](#features)\n3. [Installation / Fork](#installation--fork)\n4. [Star the GitHub Repo](#star-the-github-repo)\n5. [Code of the Website](#code-of-the-website)\n\n---\n\n## Introduction\n\nExplore the captivating world of Solo Leveling through this interactive website. Immerse yourself in the story, characters, and thrilling battles that make this web novel a fan favorite.\n\n\u003cimg src=\"https://drive.google.com/uc?export=view\u0026id=1WpkN4nxMHr9QXmG7SQifk83Mq8pZsFA4\" alt=\"Gojo Satoru Image\" style=\"width: 100%; max-width: 600px; height: auto; margin: 20px 0;\"\u003e\n\u003ca target=\"_blank\" href=\"https://ramxcodes.github.io/solo-leveling/\" target=\"_blank\" style=\"display: inline-block; padding: 10px 20px; background-color: #3498db; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 16px; margin-bottom: 20px;\"\u003eVisit Website ↗\u003c/a\u003e\n\n---\n\n## Features\n\n- **Navigation Menu:**\n  - Easy-to-use navigation menu with quick access to different sections.\n  - Weekly updates, best manga, anime news, and more.\n\n- **Content Display:**\n  - Display of popular anime titles with corresponding images.\n  - Each title is presented in a visually appealing format.\n\n- **Responsive Design:**\n  - The website is designed to be responsive, providing a seamless experience across different devices.\n\n---\n\n## Installation / Fork\n\nTo set up the Anime Hunt website locally or fork it for your own modifications, follow these steps:\n\n1. Clone the repository:\n    ```bash\n    git clone https://github.com/ramxcodes/anime-hunt.git\n    ```\n\n2. Open the `index.html` file in a web browser to view the website locally.\n\n3. Customize the content, styles, or scripts according to your preferences.\n\n4. Make sure to update the repository URL in the cloned version:\n    ```bash\n    git remote set-url origin https://github.com/ramxcodes/anime-hunt.git\n    ```\n\n5. Push the changes to your GitHub repository:\n    ```bash\n    git push origin master\n    ```\n\n---\n\n## God Fight\nWitness the intense battle between Sung Jin Woo and a divine entity in the \"God Fight\" section. Experience the clash of supernatural powers and narrative tension that defines this epic confrontation.\n\n## Shadows of Sung Jin Woo\nDelve into the shadows of Sung Jin Woo's army, featuring key characters like Bellion, Beru, Igris, Kamish, and Greed. Learn about their strengths, roles, and significance in the unfolding storyline.\n\n## Powerful Abilities\nUncover the extraordinary powers showcased in Solo Leveling, including speed, stealth, bloodlust, mana, and quicksilver. Explore how these abilities contribute to the characters' prowess in the world of Solo Leveling.\n\n## Statue Of God\nDiscover the enigmatic \"Statue Of God\" and unravel its mysteries. Engage with captivating visuals and information about this intriguing element of the Solo Leveling narrative.\n\n## Star the GitHub Repo\n\nIf you find the Anime Hunt website interesting or useful, consider starring the GitHub repository. Your support is highly appreciated!\n\n---\n\n## Code of the Website\n\nBelow is the HTML and CSS code that constitutes the Anime Hunt website. Feel free to explore and modify the code as needed.\n\n### HTML (index.html)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n    \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n    \u003clink href=\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900\u0026display=swap\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css\" rel=\"stylesheet\" /\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"./Assets/dagger.png\"\u003e\n    \u003ctitle\u003eSolo Leveling\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"main\"\u003e\n        \u003cdiv id=\"nav\"\u003e\n            \u003ch1\u003eSolo Leveling\u003c/h1\u003e\n            \u003ch2\u003e\u003ca href=\"#scroll\"\u003eCharacters\u003c/a\u003e\u003c/h2\u003e\n            \u003ch2\u003e\u003ca href=\"#page2\"\u003eGod Fight\u003c/a\u003e\u003c/h2\u003e\n            \u003ch2\u003e\u003ca href=\"#page3\"\u003eSHADOW'S OF SUNG JIN WOO\u003c/a\u003e\u003c/h2\u003e\n            \u003c!-- \u003ch2\u003e\u003ci class=\"ri-search-line\"\u003e\u003c/i\u003e\u003c/h2\u003e --\u003e\n            \u003ca href=\"#marque\"\u003e\u003cimg src=\"./Assets/dagger.png\" alt=\"\"\u003e\u003c/a\u003e\n            \u003ch3\u003e\u003ci class=\"ri-menu-fold-2-line\"\u003e\u003c/i\u003e\u003c/h3\u003e\n        \u003c/div\u003e\n        \u003cdiv id=\"center\"\u003e\n            \u003cdiv id=\"content\"\u003e\n                \u003cvideo autoplay muted loop src=\"./Assets/main vid.mp4\"\u003e\u003c/video\u003e\n                \u003cdiv id=\"overlay\"\u003e\n                    \u003cdiv id=\"over1\"\u003e\n                        \u003ch1\u003eSung Jin woo\u003c/h1\u003e\n                        \u003ch2\u003eLevel 100\u003c/h2\u003e\n\n                    \u003c/div\u003e\n                    \u003cdiv id=\"over2\"\u003e\n                        \u003ch4\u003ePowers\u003c/h4\u003e\n                        \u003cdiv id=\"img-wrap\"\u003e\n                            \u003cimg src=\"./Assets/1.png\" alt=\"\"\u003e\n                            \u003cimg src=\"./Assets/2.png\" alt=\"\"\u003e\n                            \u003cimg src=\"./Assets/3.png\" alt=\"\"\u003e\n                    \u003c/div\u003e\n                        \n                    \u003c/div\u003e\n\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv id=\"scroll\"\u003e\n            \u003cdiv id=\"container\"\u003e\n                \u003cimg src=\"https://cdn.myanimelist.net/images/characters/8/531267.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://staticg.sportskeeda.com/editor/2024/01/71fce-17046817861688-1920.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/06/Frost-Monarch.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/2-Hwang-Dong-SU.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/3.-Go-Gun-Hee.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/4.-Yoo-Jin-Ho.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/5.-Akari-Shimizu.jpg\" alt=\"\"\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"container\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/6-Ahn-Sang-Min1.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/06/Baran.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/06/statue-of-god-2.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/Atsushi-Kukammoto-768x768.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/06/Beast-Monarch.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/Kamish.jpg\" alt=\"\"\u003e\n                \u003cimg src=\"https://i0.wp.com/quotetheanime.com/wp-content/uploads/2021/07/Kargalgan.jpg\" alt=\"\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv id=\"alphabet\"\u003e\n            \u003ch5\u003ePowers\u003c/h5\u003e\n            \u003ch6\u003eSpeed\u003c/h6\u003e\n            \u003ch6\u003eStealth\u003c/h6\u003e\n            \u003ch6\u003eBloodlust\u003c/h6\u003e\n            \u003ch6\u003emana\u003c/h6\u003e\n            \u003ch6\u003eQuicksilver\u003c/h6\u003e\n        \u003c/div\u003e\n        \u003cdiv id=\"page2\"\u003e\n            \u003cdiv id=\"page2-part1\"\u003e\n                \u003cimg src=\"https://images6.alphacoders.com/134/1347884.jpeg\" alt=\"\"\u003e\n                \u003ch5\u003eStatue Of God\u003c/h5\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"page2-part2\"\u003e\n                \u003cimg src=\"https://images8.alphacoders.com/135/1350926.jpeg\" alt=\"\"\u003e\n                \u003cdiv id=\"solo\"\u003e\n                    \u003ch5\u003eSung Jin Woo VS God\u003c/h5\u003e\n                \u003cp\u003eSung Jin Woo, a formidable protagonist in the \u003cb\u003e\"Solo Leveling\"\u003c/b\u003e  web novel, faces a transcendent challenge against a divine entity. \n                    Their epic clash unfolds in a breathtaking confrontation, blending supernatural prowess and intense narrative tension.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv id=\"page3\"\u003e\n            \u003ch1\u003eSHADOW's Of Sung Jin woo\u003c/h1\u003e\n            \u003cdiv class=\"elem\"\u003e\n                \u003ch4\u003e01\u003c/h4\u003e\n                \u003cimg src=\"https://static1.cbrimages.com/wordpress/wp-content/uploads/2021/12/solo-leveling-grand-marshal-bellion.jpg?q=50\u0026fit=contain\u0026w=750\u0026h=415\u0026dpr=1.5\" alt=\"\"\u003e\n                \u003cdiv class=\"elem-part2\"\u003e\n                    \u003ch1\u003eBellion\u003c/h1\u003e\n                    \u003ch5\u003ethe Strongest Shadow in Jinwoo's Army\u003c/h5\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"elem\"\u003e\n                \u003ch4\u003e02\u003c/h4\u003e\n                \u003cimg src=\"https://static1.cbrimages.com/wordpress/wp-content/uploads/2021/12/solo-leveling-beru.jpg?q=50\u0026fit=crop\u0026w=750\u0026dpr=1.5\" alt=\"\"\u003e\n                \u003cdiv class=\"elem-part2\"\u003e\n                    \u003ch1\u003eBeru\u003c/h1\u003e\n                    \u003ch5\u003eSung Jinwoo's Right-hand Man\u003c/h5\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"elem\"\u003e\n                \u003ch4\u003e03\u003c/h4\u003e\n                \u003cimg src=\"https://w0.peakpx.com/wallpaper/356/538/HD-wallpaper-igris-sololeveling-shadow-webtoon-solo-chahaein-sung-jin-woo.jpg\" alt=\"\"\u003e\n                \u003cdiv class=\"elem-part2\"\u003e\n                    \u003ch1\u003eIgris\u003c/h1\u003e\n                    \u003ch5\u003eShadow Monarch's Army Commander\u003c/h5\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"elem\"\u003e\n                \u003ch4\u003e04\u003c/h4\u003e\n                \u003cimg src=\"https://static1.cbrimages.com/wordpress/wp-content/uploads/2022/01/solo-leveling-kamish.jpg?q=50\u0026fit=crop\u0026w=750\u0026dpr=1.5\" alt=\"\"\u003e\n                \u003cdiv class=\"elem-part2\"\u003e\n                    \u003ch1\u003eKamish\u003c/h1\u003e\n                    \u003ch5\u003eHumanity's Greatest Calamity\u003c/h5\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"elem\"\u003e\n                \u003ch4\u003e05\u003c/h4\u003e\n                \u003cimg src=\"https://static1.cbrimages.com/wordpress/wp-content/uploads/2022/01/solo-leveling-greed.jpg?q=50\u0026fit=crop\u0026w=750\u0026dpr=1.5\" alt=\"\"\u003e\n                \u003cdiv class=\"elem-part2\"\u003e\n                    \u003ch1\u003eGreed\u003c/h1\u003e\n                    \u003ch5\u003eShadow Monarch's Army General\u003c/h5\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv id=\"marque\"\u003e\n            \u003ch1\u003eSolo Leveling\u003c/h1\u003e\n            \u003ch1\u003eSolo Leveling\u003c/h1\u003e\n            \u003ch1\u003eSolo Leveling\u003c/h1\u003e\n            \u003ch1\u003eSolo Leveling\u003c/h1\u003e\n            \u003ch1\u003eSolo Leveling\u003c/h1\u003e\n        \u003c/div\u003e\n        \u003cdiv id=\"footer\"\u003e\n            \u003ch5\u003eMade With ❤️ \u003ca target=\"_blank\" href=\"https://github.com/ramxcodes\"\u003eRam ↗\u003c/a\u003e\u003c/h5\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### CSS (style.css)\n\n```css\n@font-face {\n    font-family: 'Monument';\n    src: url(./font/MonumentExtended-Regular.otf);\n    font-weight: normal;\n}\n\n@font-face {\n    font-family: 'Monument';\n    src: url(./font/MonumentExtended-Ultrabold.otf);\n    font-weight: bolder;\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Montserrat';\n}\n\nhtml, body {\n    height: 100%;\n    width: 100%;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\nbody {\n    background-color: #f8f8f8;\n    user-select: none;\n}\n\nbody::-webkit-scrollbar {\n    width: 2px;          \n}\n\nbody::-webkit-scrollbar-track {\n    background: rgb(104, 141, 241);\n}\n\nbody::-webkit-scrollbar-thumb {\n    background-color: rgb(255, 204, 34);    \n    border-radius: 50%;       \n    border: 3px solid rgb(247, 210, 141);  \n  }\n\n#main {\n    height: 100%;\n    width: 100%;\n    background-color: #f8f8f8;\n    position: relative;\n    padding-top: 0.1px;\n}\n\n#nav {\n    height: 11vh;\n    width: 100%;\n    margin-top: 40px;\n    border-top: 2px solid #000;\n    border-bottom: 2px solid #000;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n#nav img {\n    height: 10vh;\n    width: fit-content;\n    padding: 0.1;\n    object-fit: cover;\n}\n\n#nav h1 {\n    height: 100%;\n    width: 20%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: 'monument';\n    font-size: 38px;\n    letter-spacing: -1px;\n    position: relative;\n}\n\n#nav h1::after {\n    content: \"©️\";\n    font-family: montserrat;\n    font-weight: 400;\n    font-size: 20px;\n    position: absolute;\n    top: 18%;\n    right: 3%;\n}\n\n#nav h1::before {\n    content: \"Made by ram\";\n    font-family: montserrat;\n    font-weight: 400;\n    font-size: 18px;\n    position: absolute;\n    bottom: 15%;\n    right: 16%;\n    letter-spacing: 1px;\n    color: #666;\n}\n\n#nav h2 {\n    height: 100%;\n    width: 25%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-right: 2px solid #000;\n    font-size: 26px;\n    font-weight: 600;\n}\n\n#nav a {\n    text-decoration: none;\n    color: black;\n}\n\n#nav h2:nth-last-child(2) {\n    width: 30%;\n}\n\n#nav h2:nth-last-child(1) {\n    width: 10%;\n}\n\n#nav h3 {\n    display: none;\n}\n\n#center {\n    height: 90%;\n    width: 100%;\n    position: relative;\n    padding: 3vw 4vw;\n}\n\n#content {\n    height: 100%;\n    width: 100%;\n    position: relative;\n}\n\n#content video {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n}\n\n#overlay {\n    height: 50%;\n    width: 100%;\n    position: absolute;\n    bottom: 0;\n    padding: 3vw;\n}\n\n#over1 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: #fff;\n    margin-bottom: 2vh;\n}\n\n#over1 h1 {\n    font-family: 'monument';\n    font-size: 3vw;\n}\n\n#over1 h2 {\n    font-size: 1vw;\n    padding: 3vw 2.5vh;\n    border-radius: 50%;\n    border: 1px solid #fff;\n}\n\n#over2 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: #fff;\n    border-top: 2px solid #fff;\n    padding: 2vw 0;\n}\n\n#over2 h4 {\n    font-size: 1.3vw;\n    font-weight: 500;\n}\n\n#over2 img {\n    height: 3vw;\n    gap: 1vw;\n}\n\n#img-wrap {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n#scroll {\n    height: 40vh;\n    width: 100%;\n    white-space: nowrap;\n    overflow-x: hidden;\n    overflow-y: hidden;\n}\n\n#container {\n    height: 100%;\n    width: 130%;\n    display: inline-block;\n    padding: 2vw;\n    animation-name: anime;\n    animation-duration: 10s;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n}\n\n#scroll img {\n    height: 95%;\n    border-radius: 50%;\n    margin: 1vw;\n    width: 13%;\n    object-fit: cover;\n    object-position: 30% 30%;\n}\n\n@keyframes anime {\n    from {\n        transform: translateX(0);\n    }\n\n    to {\n        transform: translateX(-100%);\n    }\n}\n\n#alphabet {\n    height: 12vh;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 1vw;\n    border-top: 2px solid #000;\n    border-bottom: 2px solid #000;\n}\n\n#alphabet h5 {\n    font-size: 2vw;\n    text-transform: uppercase;\n    font-weight: 400;\n    font-style: italic;\n    letter-spacing: 4px;\n    border-bottom: 2px solid #000;\n    margin-right: 2vw;\n}\n\n#alphabet h6 {\n    font-size: 0.8vw;\n    text-transform: uppercase;\n    font-weight: 400;\n    font-style: italic;\n    letter-spacing: 4px;\n    padding: 1.6vw 1vw;\n    border-radius: 50%;\n    cursor: pointer;\n    border: 1px solid rgba(0, 0, 0, 0);\n    transition: all ease 0.2s;\n}\n\n#alphabet h6:hover {\n    border: 1px solid hsl(0, 0%, 0%);\n}\n\n#page2 {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 2.5vw 5vw;\n}\n\n#page2-part1 {\n    height: 100%;\n    width: 50%;\n}\n\n#page2-part1 img {\n    height: 90%;\n    width: 100%;\n    object-fit: cover;\n}\n\n#page2-part1 h5 {\n    margin-top: 0.3vw;\n    color: rgb(22, 22, 22);\n    font-size: 2.1vw;\n    font-family: 'monument';\n    font-weight: bolder;\n}\n\n#page2-part2 {\n    height: 100%;\n    width: 46%;\n}\n\n#page2-part2 img {\n    height: 70%;\n    width: 100%;\n    object-fit: cover;\n    object-position: center;\n}\n\n#page2-part2 h5 {\n    width: 60%;\n    font-size: 2.5vw;\n    font-family: 'Monument';\n    text-align: center;\n}\n\n#page2-part2 p {\n    width: 40%;\n    margin-top: 1vw;\n}\n\n#solo {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-top: 2vw;\n}\n\n#page3 {\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: 5vw 4vw;\n}\n\n#page3 \u003e h1 {\n    text-align: center;\n    font-family: 'monument';\n    text-transform: uppercase;\n    font-size: 3vw;\n    margin-bottom: 7vh;\n}\n\n.elem {\n    height: 15vh;\n    width: 100%;\n    border-top: 2px solid #000;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 2vw;\n    position: relative;\n}\n\n.elem img {\n    height: 120px;\n    width: 120px;\n    position: absolute;\n    border-radius: 50%;\n    object-fit: cover;\n    left: 12%;\n    opacity: 0;\n    transition: all ease 0.7s;\n}\n\n.elem:nth-last-child(1) img {\n    left: 40%;\n}\n\n.elem:nth-last-child(3) img {\n    left: 40%;\n}\n\n.elem:nth-last-child(5) img {\n    left: 40%;\n}\n\n.elem:hover img {\n    opacity: 1;\n    left: 24%;\n}\n\n.elem h4 {\n    font-size: 1.5vw;\n    font-weight: 500;\n    width: 6%;\n    text-transform: uppercase;\n}\n\n.elem .elem-part2 {\n    width: 45%;\n}\n\n.elem-part2 h1 {\n    font-size: 2.4vw;\n    font-weight: 600;\n}\n\n.elem-part2 h5 {\n    font-size: 0.7vw;\n    font-weight: 500;\n    text-transform: uppercase;\n}\n\n.elem:nth-last-child(1) {\n    border-bottom: 2px solid #000;\n}\n\n#marque {\n    width: 100%;\n    white-space: nowrap;\n    padding: 0.8vw;\n    overflow-x: hidden;\n    overflow-y: hidden;\n    border-top: 2px solid #000;\n    border-bottom: 2px solid #000;\n    margin-top: 3vw;\n}\n\n#marque h1 {\n    display: inline-block;\n    font-size: 3vw;\n    text-transform: uppercase;\n    font-weight: 900;\n    -webkit-text-stroke: 2px black;\n    color: transparent;\n    font: 'monument';\n    letter-spacing: 3px;\n    margin-right: 16px;\n    animation-name: move;\n    animation-duration: 2s;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n}\n\n@keyframes move {\n    from {\n        transform: translateX(0);\n    }\n\n    to {\n        transform: translateX(calc(-100% - 20px));\n    }\n}\n\n#footer {\n    height: fit-content;\n    width: 100%;\n    padding: 2vw;\n    text-align: center;\n}\n\n#footer h5 {\n    font-size: 1vw;\n}\n\n#footer a {\n    text-decoration: none;\n    color: #000;\n}\n\n@media (max-width: 600px) {\n    body {\n        overflow-x: hidden;\n        user-select: none;\n    }\n\n    #nav {\n        height: 8vh;\n        margin-top: 20px;\n        padding: 0vw 5vw;\n    }\n\n    #nav img {\n        height: 10vh;\n        width: fit-content;\n        padding: 0.1;\n        object-fit: cover;\n    }\n\n    #nav h1 {\n        width: 40%;\n        justify-content: flex-start;\n        font-size: 14px;\n    }\n\n    #nav h1::after,\n    #nav h1::before {\n        display: none;\n    }\n\n    #nav h2,\n    #nav a {\n        display: none;\n    }\n\n    #nav h3 {\n        display: block;\n    }\n\n    #center {\n        height: 30%;\n        padding: 3vw 4vw;\n    }\n\n    #content {\n        height: 100%;\n        width: 100%;\n        position: relative;\n    }\n\n    #content video {\n        height: 100%;\n        width: 100%;\n        object-fit: cover;\n    }\n\n    #overlay {\n        height: fit-content;\n        padding: 3vw;\n    }\n\n    #over1 h1 {\n        margin-top: 1vw;\n        font-size: 5vw;\n    }\n\n    #over1 h2 {\n        font-size: 1.5vw;\n        padding: 5vw 1.5vh;\n    }\n\n    #over2 {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        color: #fff;\n        border-top: 2px solid #fff;\n        padding: 2vw 0;\n    }\n\n    #over2 h4 {\n        font-size: 2.3vw;\n        font-weight: 500;\n    }\n\n    #over2 img {\n        height: 5vw;\n        gap: 1vw;\n    }\n\n    #img-wrap {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n\n    #scroll {\n        height: 16vh;\n        width: 100%;\n        white-space: nowrap;\n        overflow-x: hidden;\n        overflow-y: hidden;\n    }\n\n    #container {\n        height: 100%;\n        width: 230%;\n        display: inline-block;\n        padding: 2vw;\n        animation-name: anime;\n        animation-duration: 10s;\n        animation-iteration-count: infinite;\n        animation-timing-function: linear;\n    }\n\n    #scroll img {\n        height: 95%;\n        border-radius: 50%;\n        margin: 1vw;\n        width: 13.5%;\n        object-fit: cover;\n        object-position: top;\n    }\n\n    #alphabet {\n        height: 10vh;\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.6vw;\n        border-top: 2px solid #000;\n        border-bottom: 2px solid #000;\n    }\n\n    #alphabet h5 {\n        font-size: 3vw;\n        text-transform: uppercase;\n        font-weight: 400;\n        font-style: italic;\n        letter-spacing: 4px;\n        border-bottom: 2px solid #000;\n        margin-right: 2vw;\n    }\n\n    #alphabet h6 {\n        font-size: 2vw;\n        text-transform: uppercase;\n        font-weight: 400;\n        font-style: italic;\n        letter-spacing: 4px;\n        padding: 1.6vw 1vw;\n        border-radius: 50%;\n        cursor: pointer;\n        border: 1px solid rgba(0, 0, 0, 0);\n        transition: all ease 0.2s;\n    }\n\n    #alphabet h6:hover {\n        border: 1px solid hsl(0, 0%, 0%);\n    }\n\n    #alphabet h6:nth-last-child(1) {\n        display: none;\n    }\n\n    #page2 {\n        height: 100%;\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        flex-direction: column;\n        padding: 2.5vw 5vw;\n    }\n\n    #page2-part1 {\n        height: 100%;\n        width: 100%;\n    }\n\n    #page2-part1 img {\n        height: 90%;\n        width: 100%;\n        object-fit: cover;\n    }\n\n    #page2-part1 h5 {\n        margin-top: 0.3vw;\n        color: rgb(22, 22, 22);\n        font-size: 5.1vw;\n        font-family: 'monument';\n        font-weight: bolder;\n        text-align: center;\n    }\n\n    #page2-part2 {\n        margin-top: 2vw;\n        height: 100%;\n        width: fit-content;\n    }\n\n    #page2-part2 img {\n        height: 70%;\n        width: 100%;\n        object-fit: cover;\n        object-position: center;\n    }\n\n    #page2-part2 h5 {\n        width: 80%;\n        font-size: 4.5vw;\n        font-family: 'Monument';\n        text-align: center;\n    }\n\n    #page2-part2 p {\n        width: 90%;\n        margin-top: 2vw;\n    }\n\n    #solo {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding-top: 3vw;\n        flex-direction: column;\n        gap: 3vw;\n    }\n\n    #page3 {\n        height: 100%;\n        width: 100%;\n        position: relative;\n        padding: 45vw 4vw 10vw 4vw;\n    }\n\n    #page3 \u003e h1 {\n        text-align: center;\n        font-family: 'monument';\n        text-transform: uppercase;\n        font-size: 4.5vw;\n        margin-bottom: 7vh;\n    }\n\n    .elem {\n        height: 12vh;\n        width: 100%;\n        border-top: 2px solid #000;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0 2vw;\n        position: relative;\n    }\n\n    .elem img {\n        height: 60px;\n        width: 60px;\n        position: absolute;\n        border-radius: 50%;\n        object-fit: cover;\n        left: 12%;\n        opacity: 0;\n        transition: all ease 0.7s;\n    }\n\n    .elem h4 {\n        font-size: 3vw;\n    }\n\n    .elem .elem-part2 {\n        width: 45%;\n    }\n\n    .elem-part2 h1 {\n        font-size: 5vw;\n        font-weight: 600;\n    }\n\n    .elem-part2 h5 {\n        font-size: 2vw;\n        font-weight: 500;\n        text-transform: uppercase;\n    }\n\n    .elem:nth-last-child(1) {\n        border-bottom: 2px solid #000;\n    }\n\n    #marque {\n        width: 100%;\n        white-space: nowrap;\n        padding: 8vw;\n        overflow-x: hidden;\n        overflow-y: hidden;\n        border-top: 2px solid #000;\n        border-bottom: 2px solid #000;\n        margin-top: 3vw;\n    }\n\n    #marque h1 {\n        font-size: 10vw;\n    }\n\n    @keyframes move {\n        from {\n            transform: translateX(0);\n        }\n\n        to {\n            transform: translateX(calc(-100% - 20px));\n        }\n    }\n\n    #footer {\n        height: fit-content;\n        width: 100%;\n        padding: 5vw;\n        text-align: center;\n    }\n\n    #footer a {\n        text-decoration: none;\n        color: #000;\n    }\n}\n```\n\n---\n\nFeel free to explore and customize the code to suit your preferences.\n\nMade with ❤️ by [Ram](https://github.com/ramxcodes).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framxcodes%2Fsolo-leveling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framxcodes%2Fsolo-leveling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framxcodes%2Fsolo-leveling/lists"}