Difference between revisions of "Team:Stockholm/test3"

Line 1: Line 1:
−
{{:Team:Stockholm/header}}
+
 
 
<html>
 
<html>
 
<head>
 
<head>
Line 12: Line 12:
 
</center>
 
</center>
 
<div class="container">
 
<div class="container">
−
    <div class="page-header">
+
<div class="row">
−
         <h1 id="timeline">Timeline</h1>
+
   
−
    </div>
+
         <div class="timeline-centered">
−
    <ul class="timeline">
+
 
−
        <li>
+
        <article class="timeline-entry">
−
          <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
+
 
−
          <div class="timeline-panel">
+
            <div class="timeline-entry-inner">
−
            <div class="timeline-heading">
+
 
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
                <div class="timeline-icon bg-success">
−
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+
                    <i class="entypo-feather"></i>
 +
                </div>
 +
 
 +
                <div class="timeline-label">
 +
                    <h2>Week x</h2>
 +
                    <p align="left"> Modeling:TBA</p>
 +
                    <p align="left"> Read-out:TBA</p>
 +
                </div>
 
             </div>
 
             </div>
−
             <div class="timeline-body">
+
 
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
        </article>
 +
 
 +
 
 +
        <article class="timeline-entry">
 +
 
 +
             <div class="timeline-entry-inner">
 +
 
 +
                <div class="timeline-icon bg-success">
 +
                    <i class="entypo-suitcase"></i>
 +
                </div>
 +
 
 +
                <div class="timeline-label">
 +
                    <h2>Week y</h2>
 +
                    <p> More stuff</p>
 +
                </div>
 
             </div>
 
             </div>
−
          </div>
+
 
−
        </li>
+
        </article>
−
        <li class="timeline-inverted">
+
 
−
          <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
+
 
−
          <div class="timeline-panel">
+
          <article class="timeline-entry">
−
            <div class="timeline-heading">
+
 
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
            <div class="timeline-entry-inner">
 +
 
 +
                <div class="timeline-icon bg-secondary">
 +
                    <i class="entypo-suitcase"></i>
 +
                </div>
 +
 
 +
                <div class="timeline-label">
 +
                    <h2>Week a</h2>
 +
                    <p> More stuff</p>
 +
                </div>
 
             </div>
 
             </div>
−
             <div class="timeline-body">
+
 
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
        </article>
−
              <p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
+
 
 +
 
 +
          <article class="timeline-entry">
 +
 
 +
             <div class="timeline-entry-inner">
 +
 
 +
                <div class="timeline-icon bg-info">
 +
                    <i class="entypo-suitcase"></i>
 +
                </div>
 +
 
 +
                <div class="timeline-label">
 +
                    <h2>Week b</h2>
 +
                    <p> More stuff</p>
 +
                </div>
 
             </div>
 
             </div>
−
          </div>
+
 
−
         </li>
+
         </article>
−
        <li>
+
 
−
          <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
+
 
−
          <div class="timeline-panel">
+
          <article class="timeline-entry">
−
             <div class="timeline-heading">
+
 
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
             <div class="timeline-entry-inner">
−
            </div>
+
 
−
            <div class="timeline-body">
+
                <div class="timeline-icon bg-warning">
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
                    <i class="entypo-suitcase"></i>
−
            </div>
+
                </div>
−
          </div>
+
 
−
        </li>
+
                <div class="timeline-label">
−
        <li class="timeline-inverted">
+
                    <h2>Week c</h2>
−
          <div class="timeline-panel">
+
                    <p> More stuff</p>
−
            <div class="timeline-heading">
+
                </div>
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li>
+
−
          <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
 
             </div>
 
             </div>
−
            <div class="timeline-body">
+
 
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
         </article>
−
              <hr>
+
    </div>
−
              <div class="btn-group">
+
 
−
                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
+
   
−
                  <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
+
</div>
−
                </button>
+
−
                <ul class="dropdown-menu" role="menu">
+
−
                  <li><a href="#">Action</a></li>
+
−
                  <li><a href="#">Another action</a></li>
+
−
                  <li><a href="#">Something else here</a></li>
+
−
                  <li class="divider"></li>
+
−
                  <li><a href="#">Separated link</a></li>
+
−
                </ul>
+
−
              </div>
+
−
            </div>
+
−
          </div>
+
−
         </li>
+
−
        <li>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li class="timeline-inverted">
+
−
          <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
    </ul>
+
 
</div>
 
</div>
−
 
 
−
 
  
  
Line 116: Line 111:
 
<style type="text/css">
 
<style type="text/css">
  
−
.timeline {
+
img {
−
  list-style: none;
+
    vertical-align: middle;
−
  padding: 20px 0 20px;
+
−
  position: relative;
+
 
}
 
}
−
.timeline:before {
+
 
−
  top: 0;
+
.img-responsive {
−
  bottom: 0;
+
    display: block;
−
  position: absolute;
+
    height: auto;
−
  content: " ";
+
    max-width: 100%;
−
  width: 3px;
+
−
  background-color: #eeeeee;
+
−
  left: 50%;
+
−
  margin-left: -1.5px;
+
 
}
 
}
−
.timeline > li {
+
 
−
  margin-bottom: 20px;
+
.img-rounded {
−
  position: relative;
+
    border-radius: 3px;
 
}
 
}
−
.timeline > li:before,
+
 
−
.timeline > li:after {
+
.img-thumbnail {
−
  content: " ";
+
    background-color: #fff;
−
  display: table;
+
    border: 1px solid #ededf0;
 +
    border-radius: 3px;
 +
    display: inline-block;
 +
    height: auto;
 +
    line-height: 1.428571429;
 +
    max-width: 100%;
 +
    moz-transition: all .2s ease-in-out;
 +
    o-transition: all .2s ease-in-out;
 +
    padding: 2px;
 +
    transition: all .2s ease-in-out;
 +
    webkit-transition: all .2s ease-in-out;
 
}
 
}
−
.timeline > li:after {
+
 
−
  clear: both;
+
.img-circle {
 +
    border-radius: 50%;
 
}
 
}
−
.timeline > li:before,
+
 
−
.timeline > li:after {
+
.timeline-centered {
−
  content: " ";
+
    position: relative;
−
  display: table;
+
    margin-bottom: 30px;
−
}
+
−
.timeline > li:after {
+
−
  clear: both;
+
−
}
+
−
.timeline > li > .timeline-panel {
+
−
  width: 46%;
+
−
  float: left;
+
−
  border: 1px solid #d4d4d4;
+
−
  border-radius: 2px;
+
−
  padding: 20px;
+
−
  position: relative;
+
−
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+
−
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+
−
}
+
−
.timeline > li > .timeline-panel:before {
+
−
  position: absolute;
+
−
  top: 26px;
+
−
  right: -15px;
+
−
  display: inline-block;
+
−
  border-top: 15px solid transparent;
+
−
  border-left: 15px solid #ccc;
+
−
  border-right: 0 solid #ccc;
+
−
  border-bottom: 15px solid transparent;
+
−
  content: " ";
+
−
}
+
−
.timeline > li > .timeline-panel:after {
+
−
  position: absolute;
+
−
  top: 27px;
+
−
  right: -14px;
+
−
  display: inline-block;
+
−
  border-top: 14px solid transparent;
+
−
  border-left: 14px solid #fff;
+
−
  border-right: 0 solid #fff;
+
−
  border-bottom: 14px solid transparent;
+
−
  content: " ";
+
−
}
+
−
.timeline > li > .timeline-badge {
+
−
  color: #fff;
+
−
  width: 50px;
+
−
  height: 50px;
+
−
  line-height: 50px;
+
−
  font-size: 1.4em;
+
−
  text-align: center;
+
−
  position: absolute;
+
−
  top: 16px;
+
−
  left: 50%;
+
−
  margin-left: -25px;
+
−
  background-color: #999999;
+
−
  z-index: 100;
+
−
  border-top-right-radius: 50%;
+
−
  border-top-left-radius: 50%;
+
−
  border-bottom-right-radius: 50%;
+
−
  border-bottom-left-radius: 50%;
+
−
}
+
−
.timeline > li.timeline-inverted > .timeline-panel {
+
−
  float: right;
+
−
}
+
−
.timeline > li.timeline-inverted > .timeline-panel:before {
+
−
  border-left-width: 0;
+
−
  border-right-width: 15px;
+
−
  left: -15px;
+
−
  right: auto;
+
−
}
+
−
.timeline > li.timeline-inverted > .timeline-panel:after {
+
−
  border-left-width: 0;
+
−
  border-right-width: 14px;
+
−
  left: -14px;
+
−
  right: auto;
+
−
}
+
−
.timeline-badge.primary {
+
−
  background-color: #2e6da4 !important;
+
−
}
+
−
.timeline-badge.success {
+
−
  background-color: #3f903f !important;
+
−
}
+
−
.timeline-badge.warning {
+
−
  background-color: #f0ad4e !important;
+
−
}
+
−
.timeline-badge.danger {
+
−
  background-color: #d9534f !important;
+
−
}
+
−
.timeline-badge.info {
+
−
  background-color: #5bc0de !important;
+
−
}
+
−
.timeline-title {
+
−
  margin-top: 0;
+
−
  color: inherit;
+
−
}
+
−
.timeline-body > p,
+
−
.timeline-body > ul {
+
−
  margin-bottom: 0;
+
−
}
+
−
.timeline-body > p + p {
+
−
  margin-top: 5px;
+
 
}
 
}
 +
 +
    .timeline-centered:before, .timeline-centered:after {
 +
        content: " ";
 +
        display: table;
 +
    }
 +
 +
    .timeline-centered:after {
 +
        clear: both;
 +
    }
 +
 +
    .timeline-centered:before, .timeline-centered:after {
 +
        content: " ";
 +
        display: table;
 +
    }
 +
 +
    .timeline-centered:after {
 +
        clear: both;
 +
    }
 +
 +
    .timeline-centered:before {
 +
        content: '';
 +
        position: absolute;
 +
        display: block;
 +
        width: 4px;
 +
        background: #f5f5f6;
 +
        /*left: 50%;*/
 +
        top: 20px;
 +
        bottom: 20px;
 +
        margin-left: 30px;
 +
    }
 +
 +
    .timeline-centered .timeline-entry {
 +
        position: relative;
 +
        /*width: 50%;
 +
        float: right;*/
 +
        margin-top: 5px;
 +
        margin-left: 30px;
 +
        margin-bottom: 10px;
 +
        clear: both;
 +
    }
 +
 +
        .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
 +
            content: " ";
 +
            display: table;
 +
        }
 +
 +
        .timeline-centered .timeline-entry:after {
 +
            clear: both;
 +
        }
 +
 +
        .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
 +
            content: " ";
 +
            display: table;
 +
        }
 +
 +
        .timeline-centered .timeline-entry:after {
 +
            clear: both;
 +
        }
 +
 +
        .timeline-centered .timeline-entry.begin {
 +
            margin-bottom: 0;
 +
        }
 +
 +
        .timeline-centered .timeline-entry.left-aligned {
 +
            float: left;
 +
        }
 +
 +
            .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
 +
                margin-left: 0;
 +
                margin-right: -18px;
 +
            }
 +
 +
                .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
 +
                    left: auto;
 +
                    right: -100px;
 +
                    text-align: left;
 +
                }
 +
 +
                .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
 +
                    float: right;
 +
                }
 +
 +
                .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
 +
                    margin-left: 0;
 +
                    margin-right: 70px;
 +
                }
 +
 +
                    .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
 +
                        left: auto;
 +
                        right: 0;
 +
                        margin-left: 0;
 +
                        margin-right: -9px;
 +
                        -moz-transform: rotate(180deg);
 +
                        -o-transform: rotate(180deg);
 +
                        -webkit-transform: rotate(180deg);
 +
                        -ms-transform: rotate(180deg);
 +
                        transform: rotate(180deg);
 +
                    }
 +
 +
        .timeline-centered .timeline-entry .timeline-entry-inner {
 +
            position: relative;
 +
            margin-left: -20px;
 +
        }
 +
 +
            .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after {
 +
                content: " ";
 +
                display: table;
 +
            }
 +
 +
            .timeline-centered .timeline-entry .timeline-entry-inner:after {
 +
                clear: both;
 +
            }
 +
 +
            .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after {
 +
                content: " ";
 +
                display: table;
 +
            }
 +
 +
            .timeline-centered .timeline-entry .timeline-entry-inner:after {
 +
                clear: both;
 +
            }
 +
 +
            .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
 +
                position: absolute;
 +
                left: -100px;
 +
                text-align: right;
 +
                padding: 10px;
 +
                -webkit-box-sizing: border-box;
 +
                -moz-box-sizing: border-box;
 +
                box-sizing: border-box;
 +
            }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span {
 +
                    display: block;
 +
                }
 +
 +
                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child {
 +
                        font-size: 15px;
 +
                        font-weight: bold;
 +
                    }
 +
 +
                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child {
 +
                        font-size: 12px;
 +
                    }
 +
 +
            .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
 +
                background: #fff;
 +
                color: #737881;
 +
                display: block;
 +
                width: 40px;
 +
                height: 40px;
 +
                -webkit-background-clip: padding-box;
 +
                -moz-background-clip: padding;
 +
                background-clip: padding-box;
 +
                -webkit-border-radius: 20px;
 +
                -moz-border-radius: 20px;
 +
                border-radius: 20px;
 +
                text-align: center;
 +
                -moz-box-shadow: 0 0 0 5px #f5f5f6;
 +
                -webkit-box-shadow: 0 0 0 5px #f5f5f6;
 +
                box-shadow: 0 0 0 5px #f5f5f6;
 +
                line-height: 40px;
 +
                font-size: 15px;
 +
                float: left;
 +
            }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
 +
                    background-color: #303641;
 +
                    color: #fff;
 +
                }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary {
 +
                    background-color: #ee4749;
 +
                    color: #fff;
 +
                }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success {
 +
                    background-color: #00a651;
 +
                    color: #fff;
 +
                }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info {
 +
                    background-color: #21a9e1;
 +
                    color: #fff;
 +
                }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning {
 +
                    background-color: #fad839;
 +
                    color: #fff;
 +
                }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger {
 +
                    background-color: #cc2424;
 +
                    color: #fff;
 +
                }
 +
 +
            .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
 +
                position: relative;
 +
                background: #f5f5f6;
 +
                padding: 1em;
 +
                margin-left: 60px;
 +
                -webkit-background-clip: padding-box;
 +
                -moz-background-clip: padding;
 +
                background-clip: padding-box;
 +
                -webkit-border-radius: 3px;
 +
                -moz-border-radius: 3px;
 +
                border-radius: 3px;
 +
            }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
 +
                    content: '';
 +
                    display: block;
 +
                    position: absolute;
 +
                    width: 0;
 +
                    height: 0;
 +
                    border-style: solid;
 +
                    border-width: 9px 9px 9px 0;
 +
                    border-color: transparent #f5f5f6 transparent transparent;
 +
                    left: 0;
 +
                    top: 10px;
 +
                    margin-left: -9px;
 +
                }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2, .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p {
 +
                    color: #737881;
 +
                    font-family: "Noto Sans",sans-serif;
 +
                    font-size: 12px;
 +
                    margin: 0;
 +
                    line-height: 1.428571429;
 +
                }
 +
 +
                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p + p {
 +
                        margin-top: 15px;
 +
                    }
 +
 +
                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 {
 +
                    font-size: 16px;
 +
                    margin-bottom: 10px;
 +
                }
 +
 +
                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a {
 +
                        color: #303641;
 +
                    }
 +
 +
                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span {
 +
                        -webkit-opacity: .6;
 +
                        -moz-opacity: .6;
 +
                        opacity: .6;
 +
                        -ms-filter: alpha(opacity=60);
 +
                        filter: alpha(opacity=60);
 +
                    }
 +
 
.contentbox {
 
.contentbox {
 
    
 
    
Line 270: Line 428:
 
<h1><br></h1>
 
<h1><br></h1>
 
</html>
 
</html>
−
{{:Team:Stockholm/footer}}
 

Revision as of 22:08, 31 August 2015









Week x

Modeling:TBA

Read-out:TBA

Week y

More stuff

Week a

More stuff

Week b

More stuff

Week c

More stuff