{"id":18469107,"url":"https://github.com/wfcd/genesis-landing-page","last_synced_at":"2025-10-09T03:14:39.736Z","repository":{"id":42849778,"uuid":"260309359","full_name":"WFCD/genesis-landing-page","owner":"WFCD","description":"New landing page for genesis based on orels1/landing-discord-red","archived":false,"fork":false,"pushed_at":"2025-02-16T20:47:20.000Z","size":6438,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T11:04:33.819Z","etag":null,"topics":["css","discord","discord-bot","html","less","pug"],"latest_commit_sha":null,"homepage":"https://genesis.warframestat.us","language":"Pug","has_issues":false,"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/WFCD.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,"publiccode":null,"codemeta":null}},"created_at":"2020-04-30T20:16:30.000Z","updated_at":"2025-02-16T20:46:51.000Z","dependencies_parsed_at":"2023-02-08T12:02:00.009Z","dependency_job_id":"da429c75-5131-4a45-9e9c-8cf682f441e5","html_url":"https://github.com/WFCD/genesis-landing-page","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WFCD%2Fgenesis-landing-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WFCD%2Fgenesis-landing-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WFCD%2Fgenesis-landing-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WFCD%2Fgenesis-landing-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WFCD","download_url":"https://codeload.github.com/WFCD/genesis-landing-page/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247824186,"owners_count":21002225,"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":["css","discord","discord-bot","html","less","pug"],"created_at":"2024-11-06T10:08:58.075Z","updated_at":"2025-10-09T03:14:34.706Z","avatar_url":"https://github.com/WFCD.png","language":"Pug","funding_links":["https://patreon.com/orels1"],"categories":[],"sub_categories":[],"readme":"# Discord Server Landing Page\n*(Red-DiscordBot-inspired)*\n\n\u003eThere are never enough landing pages, huh?\n\n## Support and get design sources!\nI'm creating these pages absolutely free of charge, and if you like them - [consider supporting me on Patreon!](https://patreon.com/orels1) You will also get a role on my discord server, as well as access to all the designs (and their sources) that I make.\n\n## Usage\n\n### The simplest way\nWe'll be fancy and use Codepen.io!\n\nFirst, you'll need to [open the pen](http://codepen.io/orels/pen/bgZXNP) and edit everything you need.\n\nYou might want to edit text inside the `section` tags, as well as `footer`\n\n##### To change the images - simply change the urls to them in the `css` section of the editor, on top\n\n`$background` is the main website background  \n`$intro` is the website's blueish section background  \n`$image1` is the first image  \n`$image2` is the second image\n\n##### To add more sections you'll need to do the following:\n\n* Add it to the menu, by adding this code to the `nav.topmenu`\n\n```pug\na(href=\"#your_section_name\") Your Section\n.line.align-self-center\n```\n\n* Duplicate `section` tag with all it's contents\n* Change section's ID by typing `#your_section_name` instead of what's in there currently\n* Change image class to `image3`\n* Add new image url to css tab of the editor like this\n\n```sass\n$image3: url('../img/image3.jpg')\n```\n\n* Add new image class to css tab of the editor after the `image2` like this\n\n```sass\n\u0026.image3\n  background-image: $image3\n```\n\n**Make sure your `\u0026.image3` is on the same indentation level as `\u0026.image2`**\n\n\n##### To download final results\n* Click on the `Export` button on the bottom-right and select `Export .zip`\n* Don't forget to create the `img` folder and put all your images in it\n* Upload the `index.html` along with `css` and `img` folders to your server. Everything else is not needed\n\n### Simple way\nDownload the .ZIP archive, extract everything, get the files inside `__build` folder, edit and upload them to your host.\n\nAll the images should be modified inside `styles.css`\n\n`body` - main website background  \n`.header` - website blueish intro section background  \n`.image1` - first image  \n`.image2` - second image\n\n*P.S. You can add more sections to the page, just duplicate one of the existion `\u003csection\u003e` tags, change its contents and give the image `image3` class  \nThen put your image into the `img` folder and in the `styles.css` add this*\n\n```css\nsection .image.image3 {\n    background-image: url(\"../img/\u003cyour_image_name\u003e\"); }\n```\n\n### Smart way\n\n* [Get Node (LTS)](https://nodejs.org)\n* [Get Sass (and Ruby)](http://sass-lang.com/install)\n\nRun\n```bash\nnpm install --only=dev\n```\nand\n```bash\nbower install\n```\n\nEdit source files inside `src` folder. I'm using `Pug` for templates and `Sass` for styles. Don't know what those are? Google them! They're pretty neat ;)\n\n`index.pug` contains all the html  \n`styles.sass` has all the styles\n\nI extracted links to the images into variables on top of the `.sass` files, so you can easily change them in one place\n\n`$background` is the main website background\n`$intro` is the website's blueish section background\n`$image1` is the first image\n`$image2` is the second image\n\nAfter editing run (inside `src` folder)\n\n```bash\npug views/index.pug --out ../__build\n```\nand\n```bash\nsass --no-cache --update css/styles.sass:../__build/css/styles.css \n```\n\nNow you can upload all the files from __build to your server\n\n**Don't forget to put all the images into `img` folder inside `__build` before upload!**\n\n#### Why so much effort?\n\nIf you learn it once - you will be able to write html and css much-much faster. For example - to convert this page from a .Sketch design into the actual code - took me less than 2 hours from complete scratch and bootstrap\n\n## Licenses and yada-yada\n\n**Built with Bootstrap v4**\n\n*All the images are property of Supergiant Games, creators of Transistor*\n\nDistributed under MIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwfcd%2Fgenesis-landing-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwfcd%2Fgenesis-landing-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwfcd%2Fgenesis-landing-page/lists"}