|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <style>
| |
| − | body {
| |
| − | background-color: #1a1a1a;
| |
| − | font-family: calibri, "helvetica neue", helvetica, arial, sans-serif;
| |
| − | color: #232323;
| |
| − | }
| |
| | | | |
| − | h2 {
| |
| − | font-size: 16px;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | position: relative;
| |
| − | width: 965px;
| |
| − | margin: 0 auto;
| |
| − | padding: 5px 5px 5px 5px;
| |
| − | background: black;
| |
| − | color: black;
| |
| − | line-height: 1.5em;
| |
| − | z-index: 2;
| |
| − | }
| |
| − |
| |
| − | .wrapper {
| |
| − | margin: 0 auto;
| |
| − | width: 950px;
| |
| − | height: 500px;
| |
| − | }
| |
| − |
| |
| − | .description {
| |
| − | margin-top: 60px;
| |
| − | font-size: 28px;
| |
| − | line-height: 28px;
| |
| − | color: #fff;
| |
| − | font-family: cambria, georgia, serif;
| |
| − | }
| |
| − |
| |
| − | .description a {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .block {
| |
| − | margin-bottom: 30px;
| |
| − | -webkit-border-radius: 2px;
| |
| − | border-radius: 2px;
| |
| − | }
| |
| − |
| |
| − | .col1, .col2, .col3 {
| |
| − | float: left;
| |
| − | -webkit-hyphens:auto;
| |
| − | -moz-hyphens:auto;
| |
| − | -ms-hyphens:auto;
| |
| − | hyphens:auto;
| |
| − | word-wrap:break-word;
| |
| − | font-size: 12px;
| |
| − | margin: 5px 10px;
| |
| − | }
| |
| − |
| |
| − | .col1, .col2, .col3 {
| |
| − | width: 180px;
| |
| − | }
| |
| − |
| |
| − | .block1 {
| |
| − | background-color: #A0E0A9;
| |
| − | }
| |
| − |
| |
| − | .block2 {
| |
| − | background-color: #00ADA7;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper {
| |
| − | margin: 40px auto 30px auto;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper label {
| |
| − | padding: 5px 10px;
| |
| − | position: relative;
| |
| − | z-index: 20;
| |
| − | display: block;
| |
| − | height: 30px;
| |
| − | cursor: pointer;
| |
| − | color: #333;
| |
| − | line-height: 30px;
| |
| − | font-size: 18px;
| |
| − | font-weight: bold;
| |
| − | text-shadow: 0px 1px #ccc;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper label:hover {
| |
| − | background: #fff;
| |
| − | -webkit-border-radius: 2px;
| |
| − | border-radius: 2px;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper input:checked + label,
| |
| − | .block-wrapper input:checked + label:hover {
| |
| − | background-color: #ccc;
| |
| − | -webkit-border-radius: 2px;
| |
| − | border-radius: 2px;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper input {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper .block-content {
| |
| − | background-color: #fff;
| |
| − | margin-top: -1px;
| |
| − | overflow: hidden;
| |
| − | height: 0px;
| |
| − | position: relative;
| |
| − | z-index: 10;
| |
| − | -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
| − | -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
| − | -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
| − | -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
| − | transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
| − | -webkit-border-radius: 2px;
| |
| − | border-radius: 2px;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper input:checked ~ .block-content {
| |
| − | -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
| − | -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
| − | -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
| − | -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
| − | transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
| − | }
| |
| − |
| |
| − | .block-wrapper input:checked ~ .block-content {
| |
| − | height: 160px;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class="wrapper">
| |
| − | <div class="description">
| |
| − | <p>A simple accordion using only CSS3. Huzzah!</p>
| |
| − | </div>
| |
| − | <div class="block-wrapper">
| |
| − | <div class="block block1">
| |
| − | <input id="bl1" name="bl1" type="checkbox" />
| |
| − | <label for="bl1">Click to expand</label>
| |
| − | <div class="block-content">
| |
| − | <br><!-- Hacky, I know. -->
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="block block2">
| |
| − | <input id="bl2" name="bl2" type="checkbox" />
| |
| − | <label for="bl2">Click to expand me too!</label>
| |
| − | <div class="block-content">
| |
| − | <br><!-- Hacky, I know. -->
| |
| − | <div class="col1">
| |
| − | <h2>Col1</h2>
| |
| − | <p>The Earth is the only world known so far to harbor life.</p>
| |
| − | </div>
| |
| − | <div class="col2">
| |
| − | <h2>Col2</h2>
| |
| − | <p>There is nowhere else, at least in the near future, to which our species could migrate.</p>
| |
| − | </div>
| |
| − | <div class="col3">
| |
| − | <h2>Col3</h2>
| |
| − | <p>Visit, yes. Settle, not yet. Like it or not, for the moment the Earth is where we make our stand.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div> <!-- End .log -->
| |
| − | </div> <!-- End .wrapper -->
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |