Last active
November 22, 2016 09:04
-
-
Save exarcheia-web/8546677 to your computer and use it in GitHub Desktop.
Modal with CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Modal with CSS */ | |
| @import url(http://fonts.googleapis.com/css?family=Audiowide); | |
| p { | |
| font-family: Arial, sans-serif; | |
| } | |
| .box { | |
| padding: 2em; | |
| background: hotpink; | |
| text-align: center; | |
| font-family: 'Audiowide', cursive; | |
| width: 20vw; | |
| height: 3vw; | |
| line-height: 3vw; | |
| border-radius: .7em; | |
| border: 1px solid darken(hotpink,30%); | |
| transition: 1.4s all; | |
| position: absolute; | |
| margin: auto; | |
| top: 0; left: 0; bottom: 0; right: 0; | |
| } | |
| .box:hover { | |
| cursor: pointer; | |
| background: deeppink; | |
| box-shadow: 0 0 0 3000px rgba(0,0,0,0.9); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At odit blanditiis beatae quod dolorum soluta repudiandae voluptatibus expedita. Ipsa recusandae quisquam quod asperiores vitae obcaecati a tenetur ex optio nostrum atque cumque deserunt esse quo sunt iusto excepturi similique impedit.</p> | |
| <p>Amet sint aliquid veniam dolores temporibus magnam inventore ea delectus ab pariatur accusamus et quia quo quam suscipit. Aspernatur aperiam atque rerum dignissimos ducimus provident quis cupiditate doloribus. Quos error optio assumenda libero mollitia incidunt officia ipsa earum commodi cumque?</p> | |
| <p>Sint cupiditate ex non distinctio iure architecto voluptates facere labore culpa possimus odio porro aspernatur? Nisi similique quidem maxime id cum sapiente optio iure debitis harum ut nesciunt ipsum modi sint magnam atque cupiditate velit sed eaque ratione fuga aperiam.</p> | |
| <p>Optio ab magnam velit eaque neque harum est repellendus quidem rerum minima quasi autem tempora accusantium a alias? Voluptate ullam recusandae fugit nemo accusamus aliquid fuga quia assumenda excepturi doloribus animi veritatis at labore incidunt est molestiae sit quis eaque.</p> | |
| <p>At officiis quos doloribus cupiditate culpa id eaque ab tenetur vitae maxime. Qui eum eveniet ut maxime quo dignissimos id earum doloribus blanditiis quos voluptate sapiente similique ex possimus reprehenderit numquam aperiam magnam cum magni nam odio quis nihil animi.</p> | |
| <div class="box">Focus Me</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment