Difference between revisions of "Team:DUT China B/Team"

Line 54: Line 54:
 
}
 
}
 
 
 +
.block-grid {
 +
  margin-top: 3em;
 +
  -webkit-column-count: 3;
 +
          column-count: 3;
 +
  -webkit-column-gap: 1em;
 +
          column-gap: 1em;
 +
  position: relative;
 +
}
  
 +
.block-panel {
 +
  -webkit-column-break-inside: avoid;
 +
          break-inside: avoid;
 +
  border-radius: 2px;
 +
  margin: 0 0 1em;
 +
  background-color: #69d7f8;
 +
  overflow: hidden;
 +
  position: relative;
 +
  cursor: pointer;
 +
  -webkit-transform: translateX(0);
 +
          transform: translateX(0);
 +
  display: inline-block;
 +
}
 +
.block-panel:hover p {
 +
  -webkit-transform: translateY(0);
 +
          transform: translateY(0);
 +
  opacity: 1;
 +
}
 +
.block-panel:hover h1 {
 +
  bottom: calc(100% - 4em);
 +
}
 +
 +
h1 {
 +
  padding-left: 2rem;
 +
  font-size: 2em;
 +
  font-weight: 800;
 +
  padding-bottom: 2em;
 +
  color: white;
 +
  width: 50%;
 +
  position: absolute;
 +
  text-transform: uppercase;
 +
  bottom: -2em;
 +
  transition: all .3s ease;
 +
  z-index: 3;
 +
}
 +
 +
p {
 +
  padding: 8em 2em 2em 2em;
 +
  position: relative;
 +
  color: white;
 +
  z-index: 2;
 +
  -webkit-transform: translateY(100%);
 +
          transform: translateY(100%);
 +
  margin: 0;
 +
  opacity: .5;
 +
  transition: all .35s ease;
 +
}
 +
p::after {
 +
  background: #13c1f0;
 +
  bottom: 0;
 +
  content: '';
 +
  display: block;
 +
  height: 100%;
 +
  left: 0;
 +
  position: absolute;
 +
  right: 0;
 +
  -webkit-transform: skewY(-7deg);
 +
          transform: skewY(-7deg);
 +
  -webkit-transform-origin: 100%;
 +
          transform-origin: 100%;
 +
  z-index: -1;
 +
  top: 10em;
 +
}
 +
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
 
</style>
 
</style>
 
</head>
 
</head>
Line 82: Line 154:
 
</div>
 
</div>
 
<div id="maintest">
 
<div id="maintest">
−
<div >
+
<div class="container">
−
              <h1 style="font-family: 'JosefinSans-Light' !important; ">Inspiration</h1>
+
    <div class="block-grid">
−
<p style="font-family: 'Roboto' !important;  ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
      <div class="block-panel">
−
</div>
+
        <div class="block-content">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
          <h1>title 1</h1>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ration<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
            ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
−
                <div style="text-align: center; width: 100%; ">
+
            Adipisci fuga ducimus nobis.</p>
−
                <img alt="" src="https://static.igem.org/mediawiki/2019/e/ed/T--DUT_China_B--mirco_robot.jpg" style="display: inline-block;" />
+
 
−
                </div>
+
        </div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
      </div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
      <div class="block-panel">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!e delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
        <div class="block-content">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
          <h1>title 2</h1>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
        </div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
      </div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
      <div class="block-panel">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
        <div class="block-content">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
+
          <h1>title 3</h1>
−
+
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
 +
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis</p>
 +
        </div>
 +
      </div>
 +
      <div class="block-panel">
 +
        <div class="block-content">
 +
          <h1>Advantage</h1><img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
 +
 
 +
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis</p>
 +
        </div>
 +
      </div>
 +
      <div class="block-panel">
 +
        <div class="block-content">
 +
          <h1>title 5</h1>
 +
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
 +
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
 +
        </div>
 +
      </div>
 +
      <div class="block-panel">
 +
        <div class="block-content">
 +
          <h1>title 6</h1>
 +
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
 +
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
 +
        </div>
 +
      </div>
 +
      <div class="block-panel">
 +
        <div class="block-content">
 +
          <h1>title 7</h1>
 +
 
 +
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
 +
          <p>
 +
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.orem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga
 +
            ducimus nobis</p>
 +
        </div>
 +
      </div>
 +
      <div class="block-panel">
 +
        <div class="block-content">
 +
          <h1>title 8</h1>
 +
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
 +
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
 
 +
  </div>
 +
 
 +
  </div>
 
 
  

Revision as of 23:58, 14 October 2019

Document
parts

title 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

Advantage

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

title 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.orem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

title 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.