Difference between revisions of "TEAM:METU Turkey SAFETY"

Line 1: Line 1:
−
<html lang="en">
+
 
 +
<html>
 
<head>
 
<head>
−
  <meta charset="utf-8">
+
<style>
−
   <title>jQuery UI Accordion - Default functionality</title>
+
body {
−
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
+
background-color: #1a1a1a;
−
 
+
font-family: calibri, "helvetica neue", helvetica, arial, sans-serif;
−
  <link rel="stylesheet" href="/resources/demos/style.css">
+
color: #232323;
−
  <script>
+
}
−
  $(function() {
+
 
−
    $( "#accordion" ).accordion();
+
h2 {
−
  });
+
font-size: 16px;
−
   </script>
+
   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 id="accordion">
+
    <div class="description">
−
  <h3>First header</h3>
+
<p>A simple accordion using only CSS3. Huzzah!</p>
−
  <div>First content panel</div>
+
</div>
−
  <h3>Second header</h3>
+
<div class="block-wrapper">
−
  <div>Second content panel</div>
+
<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.