├── Contributing.md ├── LISENCE ├── README.md ├── _config.yml └── code-of-conduct /Contributing.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please note that this project is released with a [Contributor Code of Conduct](code-of-conduct.md). By participating in this project you agree to abide by its terms. 4 | 5 | - 6 | 7 | Ensure your pull request adheres to the following guidelines: 8 | 9 | - Search previous suggestions before making a new one, as yours may be a duplicate. 10 | - If you just created something, wait at least a couple of weeks before submitting. 11 | - Submitted packages should be tested and documented. 12 | - Make an individual pull request for each suggestion. 13 | - Use the following format: `[resource](link) - Description.` 14 | - Additions should be added to the bottom of the relevant section. 15 | - New categories, or improvements to the existing categorization are welcome. 16 | - Keep descriptions short and simple, but descriptive. 17 | - Start the description with a capital and end with a full stop/period. 18 | - Check your spelling and grammar. 19 | - Make sure your text editor is set to remove trailing whitespace. 20 | - The pull request should have a useful title and include a link to the package and why it should be included. 21 | 22 | Thank you for your suggestion! 23 | 24 | ### Updating your PR 25 | 26 | A lot of times, making a PR adhere to the standards above can be difficult. If the maintainers notice anything that we'd like changed, we'll ask you to edit your PR before we merge it. If you're not sure how to do that, [here is a guide](https://github.com/RichardLitt/docs/blob/master/amending-a-commit-guide.md) on the different ways you can update your PR so that we can merge it. 27 | -------------------------------------------------------------------------------- /LISENCE: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-End Design Elements 2 | 3 | ![alt text](http://i.imgsafe.org/c317ca30b0.png) 4 | 5 | >Curated list of Front-End Design Elements 6 | 7 | 8 | # Table of contents 9 | 10 | - [Background](#background) 11 | - [Text](#text) 12 | - [Clocks](#clocks) 13 | - [NavBar](#navbar) 14 | - [Footer](#footer) 15 | - [Icons](#icons) 16 | - [Menu](#menu) 17 | - [SideBar](#sidebar) 18 | - [Cards](#cards) 19 | - [SignUp](#signup) 20 | - [Hover Effects](#hoverEffects) 21 | 22 | Contents 23 | -------- 24 | 25 | ## Background 26 | * [interactive mosaic background](http://codepen.io/xposedbones/pen/XXpgpj): Intercative mosaic background. 27 | * [blurred background](http://codepen.io/ariona/pen/geFIK) : Small text box will be blurred while background remains same. 28 | * [parallax scrolling](http://codepen.io/skeurentjes/pen/wvpus) : Background will be in parallax. 29 | * [connect three](http://codepen.io/MarcoGuglielmelli/pen/lLCxy) : Connected points following mouse movements. 30 | * [gravity points](http://codepen.io/akm2/pen/rHIsa) : Pixels will chase you on mouse click. 31 | * [animated background gradient](http://codepen.io/quasimondo/pen/lDdrF) : Changes colour automatically. 32 | * [floating cloud](http://codepen.io/shshaw/pen/DxJka) : Clouds moving in background. 33 | * [Particle trails](http://codepen.io/Jeremboo/pen/ENVaMY) : Growing random particle movement from the center. 34 | * [Teleportation](https://codepen.io/anon/pen/Lbyyqd) : Hypnotic effect causing background effect. 35 | 36 | ## Text 37 | 38 | * [cloudy text](http://codepen.io/rachsmith/pen/LEyLON) : Text will be made of clouds. 39 | * [moving masked background](http://codepen.io/dghez/pen/ItxKE) : Text mask background movement on mouse movement. 40 | * [CSS text shadow](http://codepen.io/tommymcdonald/pen/Iunzp) : Provides text shadow using CSS. 41 | * [Glitch effect](http://codepen.io/anatravas/pen/mOyNWR) : Provides retro gitch look to text. 42 | * [Hover effects on the title](http://codepen.io/Podgro/pen/XNJdJK) : Great CTA hover effect 43 | * [3D font](http://codepen.io/jappe/pen/MbaXON) : Convers font to 3D on button click. 44 | * [HI](http://codepen.io/katiasmet/pen/XNmZab) : Moving HI typeface. 45 | 46 | ## Clocks 47 | 48 | - [QLOCKTWO](http://codepen.io/FWeinb/pen/oyACz) : Present time is indicated using texts ligthing up. 49 | - [Working clock](http://codepen.io/iliadraznin/pen/JcqbE) : Clock with both text and hands. 50 | - [Countdown clock](http://codepen.io/ademilter/pen/czIGo) : Flip countdown clock. 51 | * [Mother flippin clock](http://codepen.io/rikschennink/pen/lyuaf) : Text clock with awesome design. 52 | * [Rotate clock](http://codepen.io/DawidKrajewski/pen/dPpMXN) : Rotate clock made using only css. 53 | * [Waterclock](http://codepen.io/akhil_001/pen/RGmqZB) : Materalize clock with water like effects. 54 | * [Powered clock](http://codepen.io/eehayman/pen/jVPKpN) : CSS variable powered clock. 55 | 56 | ## NavBar 57 | 58 | - [Responsive Parallax Navbar Logo - Bootstrap](http://codepen.io/Designmite/pen/GwdBm) : Decreasing header size as you scroll down. 59 | - [Navbar Transition on Scroll](http://codepen.io/simonswiss/pen/zrQNmK) : Navbar transition occurs when scrolled. 60 | - [Bootstrap Navbar with Logo Centered Above](http://codepen.io/davidcochran/pen/Dihnl) : Navbar with stylish logo centered above. 61 | - [Bootstrap Navbar Toggle Show/Hide](http://codepen.io/norcal82/pen/ahegw) : Hides the navbar on a button click. 62 | - [Navigation button](http://codepen.io/electerious/pen/ZBQeOv) : Sub-menus which help in quick navigation. 63 | 64 | ## Footer 65 | 66 | - [Sticky Footer](http://codepen.io/chriscoyier/pen/uwJjr) : Footer always stays at the bottom. 67 | - [Header/Footer Parallax Effect](http://codepen.io/hudsonmarinho/pen/FHGeK) : Parallax effect on both header and footer. 68 | - [CSS "Always on the bottom" Footer](http://codepen.io/cbracco/pen/zekgx) : Footer not fixed to the viewport while always on bottom. 69 | - [Responsive CSS Sticky Footer with a touch of jQuery](http://codepen.io/imohkay/pen/htpzf) : Footer always stay at the bottom but responsive. 70 | - [Sticky Footer Magic](https://codepen.io/MelissaMMDP/pen/doGbNy?limit=all&page=2&q=footer) : Simple CSS sticky footer. 71 | 72 | ## Icons 73 | 74 | - [Font Awesome Colored - Brand And Social Icons](http://codepen.io/ameyraut/pen/yfzog) : Colored social icons with awesome animations. 75 | - [Rotating Icon Buttons](http://codepen.io/colewaldrip/pen/bdZVGd) : Icon buttons rotates when pointer is on it. 76 | - [Social media hover icons with pop-up titles](http://codepen.io/kieranfivestars/pen/gbOWbM) : Pop-up titles appear when hovered over social media icons. 77 | - [Social Icons](http://codepen.io/miroot/pen/vdtse) : Large social media icons with animations. 78 | 79 | ## Menu 80 | 81 | - [iOS style sliding menu](http://codepen.io/jasonhowmans/pen/dykhL) : Menu appears from lefthand side of the screen. 82 | - [Gooey Menu](http://codepen.io/lbebber/pen/LELBEo) : Stylish menu appears when clicked on button. 83 | - [Pull Menu - Menu Interaction Concept](http://codepen.io/fbrz/pen/bNdMwZ) : Menu which is pulled down to view. 84 | - [Touch device jelly menu concept](http://codepen.io/sol0mka/pen/Jsyxq) : Menu with awesome jelly like effect. 85 | 86 | ## Sidebar 87 | 88 | - [Elastic SVG Sidebar Material Design](http://codepen.io/suez/pen/emjwvP) : Sidebar with elastic effect when pulled. 89 | - [Sidebar slide-in-out effect](http://codepen.io/marijoha/pen/PNjZyW) : Awesome slide in-out effect when clicked on button. 90 | - [Fixed width sidebar responsive layout](http://codepen.io/kanishkkunal/pen/MYKmbe) : Sidebar with fixed width and content with responsive width. 91 | - [Offcanvas sidebar menu with a twist](http://codepen.io/devilishalchemist/pen/LERvpM) : Sidebar menu which appears in a rotating manner. 92 | - [Secret Project](http://codepen.io/khadkamhn/pen/BNwxEa) : Materialize based sidebar. 93 | 94 | ## Cards 95 | 96 | - [Material Design - Responsive card](http://codepen.io/marlenesco/pen/NqOozj) :Responsive cards with description when clicked on button. 97 | - [Google Now Inspired Flip Cards](http://codepen.io/ettrics/pen/zxMPWj) : Awesome google now styled flipping cards. 98 | - [Material Design Cards](http://codepen.io/MattiaAstorino/pen/VYWxXy) : Simple looking cards with various size options. 99 | - [Flip - card memory game.](http://codepen.io/zerospree/pen/bNWbvW) : Cards flip like those in the memory games. 100 | 101 | ## Signup 102 | 103 | - [Sign Up](http://codepen.io/acezard/pen/eZgZBd) : Awesome sign up page. 104 | - [Login and Signup](https://codepen.io/andytran/pen/RPBdgM?page=8) 105 | 106 | ## Hover Effects 107 | 108 | - [Material Design Click Effect](https://codepen.io/K-ro/pen/MwZjGw) : Buttons light-up when clicked. 109 | - [Info on Hover](https://codepen.io/tystrong/pen/rVJNrQ) : When hovered over give more info about the word/img/element. 110 | - [Layered Button](https://codepen.io/rauldronca/pen/EWeEvV) : Button transforms in a 3-d layered structure when hovered over. 111 | - [Ratings](https://codepen.io/tadaima/pen/rjvYab) : The emoji changes mood based on the rating given. 112 | - [Boder Transformation](https://codepen.io/thejamespower/pen/OVNYLL) : The borders transforms when hovered 113 | - [List Hover](https://codepen.io/bennettfeely/pen/PWZaGX) : Hover over lists to make it stand out from the rest. 114 | - [Sliding the Element](https://codepen.io/jlnljn/pen/pRZWPN) : Slide the Button/Element for its functionality. 115 | 116 | 117 | ## License 118 | 119 | [![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/) 120 | 121 | To the extent possible under law, [Gautham Santhosh](http://www.gauthamzz.github.io) has waived all copyright and related or neighboring rights to this work. 122 | 123 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal 2 | -------------------------------------------------------------------------------- /code-of-conduct: -------------------------------------------------------------------------------- 1 | 2 | Contributor Covenant Code of Conduct 3 | 4 | Our Pledge 5 | 6 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 7 | 8 | Our Standards 9 | 10 | Examples of behavior that contributes to creating a positive environment include: 11 | 12 | Using welcoming and inclusive language 13 | Being respectful of differing viewpoints and experiences 14 | Gracefully accepting constructive criticism 15 | Focusing on what is best for the community 16 | Showing empathy towards other community members 17 | Examples of unacceptable behavior by participants include: 18 | 19 | The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | Trolling, insulting/derogatory comments, and personal or political attacks 21 | Public or private harassment 22 | Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | Other conduct which could reasonably be considered inappropriate in a professional setting 24 | Our Responsibilities 25 | 26 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 27 | 28 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 29 | 30 | Scope 31 | 32 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 33 | 34 | Enforcement 35 | 36 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at thabeatsz@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 37 | 38 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 39 | 40 | Attribution 41 | 42 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at http://contributor-covenant.org/version/1/4 43 | --------------------------------------------------------------------------------