Difference between revisions of "TEAM:METU Turkey SAFETY"
Line 1: | Line 1: | ||
− | <html | + | |
+ | <html> | ||
<head> | <head> | ||
− | + | <style> | |
− | + | body { | |
− | + | background-color: #1a1a1a; | |
− | + | font-family: calibri, "helvetica neue", helvetica, arial, sans-serif; | |
− | + | color: #232323; | |
− | + | } | |
− | + | ||
− | + | h2 { | |
− | + | font-size: 16px; | |
− | </ | + | font-weight: bold; |
+ | } | ||
+ | |||
+ | .wrapper { | ||
+ | margin: 0 auto; | ||
+ | width: 600px; | ||
+ | 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> | </head> | ||
− | <body> | + | <body> |
− | + | <div class="wrapper"> | |
− | <div | + | <div class="description"> |
− | + | <p>A simple accordion using only CSS3. Huzzah!</p> | |
− | + | </div> | |
− | + | <div class="block-wrapper"> | |
− | + | <div class="block block1"> | |
− | </div> | + | <input id="bl1" name="bl1" type="checkbox" /> |
+ | <label for="bl1">Click to expand</label> | ||
+ | <div class="block-content"> | ||
+ | <br><!-- Hacky, I know. --> | ||
+ | <div class="col1"> | ||
+ | <h2>Col1</h2> | ||
+ | <p>The surface is fine and powdery. I can kick it up loosely with my toe. </p> | ||
+ | </div> | ||
+ | <div class="col2"> | ||
+ | <h2>Col2</h2> | ||
+ | <p>It does adhere in fine layers, like powdered charcoal, to the sole and sides of my boots.</p> | ||
+ | </div> | ||
+ | <div class="col3"> | ||
+ | <h2>Col3</h2> | ||
+ | <p>I only go in a small fraction of an inch, maybe an eighth of an inch, but I can see the footprints of my boots and the treads in the fine, sandy particles.</p> | ||
+ | </div> | ||
+ | </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> | </body> | ||
</html> | </html> |
Revision as of 11:23, 1 August 2015
A simple accordion using only CSS3. Huzzah!
Col1
The surface is fine and powdery. I can kick it up loosely with my toe.
Col2
It does adhere in fine layers, like powdered charcoal, to the sole and sides of my boots.
Col3
I only go in a small fraction of an inch, maybe an eighth of an inch, but I can see the footprints of my boots and the treads in the fine, sandy particles.
Col1
The Earth is the only world known so far to harbor life.
Col2
There is nowhere else, at least in the near future, to which our species could migrate.
Col3
Visit, yes. Settle, not yet. Like it or not, for the moment the Earth is where we make our stand.