|
|
| Line 356: |
Line 356: |
| | </html> | | </html> |
| | | | |
| - | <html>
| + | |
| - | <head>
| + | |
| - | <title>jQuery Pop In</title>
| + | |
| - |
| + | |
| - | <style type="text/css">
| + | |
| - | <!--
| + | |
| - | #box
| + | |
| - | {
| + | |
| - | position: absolute;
| + | |
| - | top:25%;
| + | |
| - | left:25%;
| + | |
| - | width:50%;
| + | |
| - | text-align: center;
| + | |
| - | }
| + | |
| - |
| + | |
| - | #form{
| + | |
| - | background: url('box.png') no-repeat;
| + | |
| - | width: 450px;
| + | |
| - | height: 425px;
| + | |
| - | margin: 0 auto;
| + | |
| - | }
| + | |
| - | -->
| + | |
| - | </style>
| + | |
| - |
| + | |
| - |
| + | |
| - | </head>
| + | |
| - |
| + | |
| - |
| + | |
| - | <body>
| + | |
| - | <a href="#" id="in">Fade Box</a> <!-- Button to Fade the div in -->
| + | |
| - | <a href="#" id="show">Show Box</a> <!-- Button to Simply show the box with no effect -->
| + | |
| - | <a href="#" id="slide">Slide Box</a> <!-- Button to slide the box in -->
| + | |
| - |
| + | |
| - |
| + | |
| - | <div id="box"> <!-- This container centers the box in your browser windo -->
| + | |
| - |
| + | |
| - | <div id="form"></div> <!-- This is the actual box.-->
| + | |
| - |
| + | |
| - | </div><!-- end #box-->
| + | |
| - |
| + | |
| - | </div><!-- end #form-->
| + | |
| - |
| + | |
| - |
| + | |
| - | <!-- the rest is the basic page layout-->
| + | |
| - | <div id="page">
| + | |
| - |
| + | |
| - | <h2>This is the page</h2>
| + | |
| - | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam porta quam eget
| + | |
| - | turpis placerat aliquam. Praesent eget metus. Aliquam fermentum, massa a pulvinar
| + | |
| - | sodales, justo velit consectetuer purus, at vehicula magna libero quis sapien.
| + | |
| - | Praesent molestie. Pellentesque habitant morbi tristique senectus et netus et
| + | |
| - | malesuada fames ac turpis egestas. Vivamus id diam non metus euismod sollicitudin.
| + | |
| - | Duis lobortis leo vel dui. Nulla ultricies tortor at augue. Proin egestas feugiat nibh.
| + | |
| - | Maecenas a pede sed lorem vestibulum facilisis.>/p>
| + | |
| - |
| + | |
| - | <p>Curabitur venenatis tempus risus. Lorem ipsum dolor sit amet, consectetuer
| + | |
| - | adipiscing elit. Praesent elit. Donec imperdiet dapibus lorem. Mauris imperdiet lacinia
| + | |
| - | lacus. Aliquam pellentesque enim ut nisl. Pellentesque tristique, augue egestas porttitor
| + | |
| - | suscipit, lacus dui tempus dui, in commodo lacus mauris non tortor. Lorem ipsum dolor sit
| + | |
| - | amet, consectetuer adipiscing elit. Duis vel neque sed nibh pharetra adipiscing. Etiam
| + | |
| - | euismod rhoncus dui. Sed ut nulla. Quisque mollis.</p>
| + | |
| - |
| + | |
| - | <p>Praesent libero turpis, ultrices nec, blandit sed, cursus sed, augue. Cum sociis
| + | |
| - | natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec hendrerit
| + | |
| - | pretium elit. Donec eget dui in mauris lobortis viverra. Vestibulum pharetra, libero in
| + | |
| - | bibendum malesuada, ante ligula lobortis turpis, eu tempor turpis libero at lacus. Curabitur
| + | |
| - | semper, ligula non mattis semper, neque dolor fermentum arcu, quis vehicula ipsum mi sed libero.
| + | |
| - | Suspendisse potenti. Integer ut lacus nec sem hendrerit ornare. Nulla eros. Duis nec mauris.
| + | |
| - | Cras ac turpis vel ante venenatis consequat. Sed rutrum lobortis augue. Aenean mi lectus,
| + | |
| - | vulputate quis, rutrum in, pharetra id, dolor. Proin posuere pede vitae ipsum. Curabitur euismod
| + | |
| - | semper odio. Ut tristique scelerisque leo. Fusce at ante sit amet lorem pharetra viverra. In hac
| + | |
| - | habitasse platea dictumst.</p>
| + | |
| - |
| + | |
| - | <p>Curabitur id nunc. Cras euismod, orci sed eleifend tempus, massa lacus sodales metus, vitae
| + | |
| - | tristique augue elit a tortor. Vestibulum viverra, nisi id faucibus sodales, nunc dolor condimentum
| + | |
| - | eros, et accumsan velit orci ut dolor. Donec dolor dolor, porttitor nec, porta in, rutrum vel, leo.
| + | |
| - | Suspendisse erat eros, ultricies in, auctor in, pretium vel, ante. Aliquam erat volutpat.
| + | |
| - | Vestibulum auctor ipsum ut risus. Maecenas nec sapien. Nullam eget ipsum nec sapien ornare dapibus.
| + | |
| - | Pellentesque ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
| + | |
| - | ac turpis egestas. Integer ac pede. Phasellus eleifend malesuada nibh. Ut laoreet, mi a auctor
| + | |
| - | fermentum, magna lectus placerat ligula, a vestibulum sapien arcu non nunc. Vivamus tristique.
| + | |
| - | Vestibulum sagittis est.</p>
| + | |
| - |
| + | |
| - | <p>
| + | |
| - | Phasellus tincidunt neque et dui. Praesent sed enim. Aliquam gravida pulvinar quam. Class aptent
| + | |
| - | taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vitae ante nec
| + | |
| - | tellus rutrum pharetra. Praesent sodales tempus magna. Vestibulum fermentum imperdiet leo. Praesent
| + | |
| - | vel augue. Proin at nisi. Etiam volutpat venenatis ipsum. Morbi venenatis. Mauris porta elementum velit.
| + | |
| - | Pellentesque nibh dolor, molestie in, ultrices at, accumsan sit amet, massa. </p>
| + | |
| - | <p/>
| + | |
| - |
| + | |
| - | </div>
| + | |
| - |
| + | |
| - |
| + | |
| - | </body>
| + | |
| - | </html>
| + | |
| | | | |
| | | | |
| | | | |
| | {{Template:SponsorsGroningen2012}} | | {{Template:SponsorsGroningen2012}} |
"
