├── .gitignore ├── assets ├── images │ ├── git.jpg │ ├── alien.gif │ ├── cursor.gif │ ├── pink_cow.png │ ├── huevospascua.gif │ └── hacktober_header.svg └── icons │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon-96x96.png ├── site.webmanifest ├── scripts └── index.js ├── LICENSE ├── styles └── style.css ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /assets/images/git.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/images/git.jpg -------------------------------------------------------------------------------- /assets/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/icons/favicon.ico -------------------------------------------------------------------------------- /assets/images/alien.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/images/alien.gif -------------------------------------------------------------------------------- /assets/images/cursor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/images/cursor.gif -------------------------------------------------------------------------------- /assets/images/pink_cow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/images/pink_cow.png -------------------------------------------------------------------------------- /assets/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/icons/favicon-16x16.png -------------------------------------------------------------------------------- /assets/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/icons/favicon-32x32.png -------------------------------------------------------------------------------- /assets/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/icons/favicon-96x96.png -------------------------------------------------------------------------------- /assets/images/huevospascua.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fr1sk/lets-build-a-webpage-hacktoberfest2019/HEAD/assets/images/huevospascua.gif -------------------------------------------------------------------------------- /site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /scripts/index.js: -------------------------------------------------------------------------------- 1 | 2 | document.addEventListener("DOMContentLoaded", function() { 3 | 4 | document.onkeydown = checkKey; 5 | }); 6 | 7 | const checkKey = (e) => { 8 | e = e || window.event; 9 | if (e.keyCode == '82') { 10 | alert('Open console to see the magic 🌈'); 11 | rainbow(); 12 | } 13 | } 14 | 15 | /* 16 | _.-""""`-._ 17 | ,' _-""""`-_ `. 18 | / ,'.-'"""`-.`. \ 19 | | / / ,'"""`. \ \ | 20 | | | | | ,'"`. | | | | 21 | | | | | | | | | | | 22 | 23 | RAINBOW EASTER LOG 24 | */ 25 | 26 | const rainbow = () => { 27 | let x = 1; 28 | let up = !1; 29 | setInterval(() => { 30 | (75 === x || 1 === x) && (up = !up), up ? x++ : x--, console.log(`%c${`■`.repeat(x)}`, `color: hsl(${2*x}, 100%, 50%)`) 31 | }, 15); 32 | }; 33 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Marko Jovanovic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | 3 | line-height: 1.2em; 4 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 5 | background-size: 400% 400%; 6 | animation: gradientBG 15s ease infinite; 7 | } 8 | 9 | @keyframes gradientBG { 10 | 0% { 11 | background-position: 0% 50%; 12 | } 13 | 50% { 14 | background-position: 100% 50%; 15 | } 16 | 100% { 17 | background-position: 0% 50%; 18 | } 19 | } 20 | 21 | .header_icon { 22 | position: absolute; 23 | left: 50%; 24 | transform: translateX(-50%); 25 | } 26 | 27 | .text-spin { 28 | /* border-radius: 50%; */ 29 | -webkit-transition: -webkit-transform .8s ease-in-out; 30 | transition: transform .8s ease-in-out; 31 | } 32 | .text-spin:hover { 33 | -webkit-transform: rotate(360deg); 34 | transform: rotate(360deg); 35 | } 36 | 37 | #silly { 38 | color: white; 39 | } 40 | /*.header_icon { 41 | position: absolute; 42 | left: 50%; 43 | transform: translateX(-50%); 44 | } 45 | */ 46 | .header_icon img{ 47 | transition: 0.5s; 48 | } 49 | 50 | .header_icon img:hover{ 51 | transition: 0.5s; 52 | transform: scale(1.1); 53 | } 54 | 55 | .box{ 56 | background:#84419D; 57 | transition: 0.3s; 58 | width: 200px; 59 | height: 200px; 60 | } 61 | 62 | .box:hover{ 63 | background-color: #6BCAE2; 64 | color:black; 65 | color:#31275B; 66 | transition: 0.3s; 67 | transform: scale(1.1); 68 | } 69 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lets-build-a-webpage-hacktoberfest2019 [LIVE WEBSITE](https://fr1sk.github.io/lets-build-a-webpage-hacktoberfest2019/) 2 | 3 | Community-driven webpage! Inspired by [🎃Hacktoberfest](https://hacktoberfest.digitalocean.com/)! 4 | 5 | 6 | Let's try to create a crazy community-driven webpage (something similar to [portfolio](https://bennycarlsson.github.io/MyPortfolio-Hacktoberfest2019/), [git](https://github.com/BennyCarlsson/MyPortfolio-Hacktoberfest2019)). Hacktoberfest army, are you ready? 🚀 7 | Feel free to add whatever you want (eg. easter eggs, weird stuff, silly animations, etc.) and lets try to see what can we create from it. 👨🏻‍🎨 8 | 9 | If you have any questions or requests drop me a message! 📧 10 | Creemos una pagina divertida. 11 | # Rules for contributing 👨🏻‍💻 12 | 13 | ### ✅ 14 | * Try to add something funny (get inspiration from portfolio site above), don't just try to add something just for PR, open your mind 🙏🏻 15 | * Keep pull requests small to minimize merge conflicts. 16 | * Make sure there is no merge conflict 17 | * Add fun and weird things. This is not serious project, add easter eggs and ａｅｓｔｈｅｔｉｃ stuff. 🐮 18 | 19 | ### ❌ 20 | * DONT SPAM! If you are able to fix small error or improve some small thing, thats ok, but don't try to add something just to add (eg. just a console.log) 21 | * Don't use prettier/auto indent/auto format we don't want merge conflicts, right? 22 | * Use simple things, don't add some huge library! 23 | 24 | # Ideas 🧠 25 | * Add more weird and silly stuff (animations, colors, easter eggs) 26 | * Add layout to index.html 27 | * Style the index.html 28 | * Update Readme.md 29 | * Check issues for more things to do 30 | * Spelling and grammar 31 | 32 | 33 | ## please ⭐ the project, and lets 🚀 it together! 34 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hacktoberfest2019 - Wacky Page Hacktoberfest 2019 5 | 6 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 46 | 47 |

HacktoberFEST 2019🌈🤘 HacktoberFEST 2019🌈🤘 HacktoberFEST 2019🌈🤘 HacktoberFEST 2019🌈🤘

 48 |
49 | Hacktoberfest2019 Header 50 | 51 |
52 | 53 |
Funny image
54 |
Funny image
55 |
56 |

Add some crazy things or easter eggs 🐮
Or try to find some...

57 |
58 | 59 |
60 |

¡ʇᴉqqɐɹ ǝʇᴉɥʍ ǝɥʇ ʍoๅๅoɟ 🐇

61 |
62 | 63 |
64 | 65 |

66 |

INSTAGRAM

67 |
68 | 69 | 70 | 71 |
72 | 73 |

74 |

TWITTER

75 |
76 | 77 | 78 |
79 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /assets/images/hacktober_header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | --------------------------------------------------------------------------------