Difference between revisions of "Team:BIT-China/Team"

Line 30: Line 30:
 
       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 
       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 
     <![endif]-->
 
     <![endif]-->
 +
        <style type="text/css">
 +
.st-container {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
 +
}
 +
 +
.st-container > input,
 +
.st-container > a {
 +
position: fixed;
 +
bottom: 0px;
 +
width: 20%;
 +
cursor: pointer;
 +
font-size: 16px;
 +
height: 34px;
 +
line-height: 34px;
 +
}
 +
 +
.st-container > input {
 +
opacity: 0;
 +
z-index: 1000;
 +
}
 +
 +
.st-container > a {
 +
z-index: 10;
 +
font-weight: 700;
 +
background: #e23a6e;
 +
color: #fff;
 +
text-align: center;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
}
 +
 +
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
 +
.st-container:before {
 +
content: '';
 +
position: fixed;
 +
width: 100%;
 +
height: 34px;
 +
background: #e23a6e;
 +
z-index: 9;
 +
bottom: 0;
 +
}
 +
 +
#st-control-1, #st-control-1 + a {
 +
left: 0;
 +
}
 +
 +
#st-control-2, #st-control-2 + a {
 +
left: 20%;
 +
}
 +
 +
#st-control-3, #st-control-3 + a {
 +
left: 40%;
 +
}
 +
 +
#st-control-4, #st-control-4 + a {
 +
left: 60%;
 +
}
 +
 +
#st-control-5, #st-control-5 + a {
 +
left: 80%;
 +
}
 +
 +
.st-container > input:checked + a,
 +
.st-container > input:checked:hover + a{
 +
background: #821134;
 +
}
 +
 +
.st-container > input:checked + a:after,
 +
.st-container > input:checked:hover + a:after{
 +
bottom: 100%;
 +
border: solid transparent;
 +
content: '';
 +
height: 0;
 +
width: 0;
 +
position: absolute;
 +
pointer-events: none;
 +
border-bottom-color: #821134;
 +
border-width: 20px;
 +
left: 50%;
 +
margin-left: -20px;
 +
}
 +
 +
.st-container > input:hover + a{
 +
background: #AD244F;
 +
}
 +
 +
.st-container > input:hover + a:after {
 +
border-bottom-color: #AD244F;
 +
}
 +
 +
.st-scroll,
 +
.st-panel {
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 +
.st-scroll {
 +
top: 0;
 +
left: 0;
 +
-webkit-transition: all 0.6s ease-in-out;
 +
-moz-transition: all 0.6s ease-in-out;
 +
-o-transition: all 0.6s ease-in-out;
 +
-ms-transition: all 0.6s ease-in-out;
 +
transition: all 0.6s ease-in-out;
 +
 +
/* Let's enforce some hardware acceleration */
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-webkit-backface-visibility: hidden;
 +
}
 +
 +
.st-panel{
 +
background: #fff;
 +
overflow: hidden;
 +
}
 +
 +
#st-control-1:checked ~ .st-scroll {
 +
-webkit-transform: translateY(0%);
 +
-moz-transform: translateY(0%);
 +
-o-transform: translateY(0%);
 +
-ms-transform: translateY(0%);
 +
transform: translateY(0%);
 +
}
 +
#st-control-2:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-100%);
 +
-moz-transform: translateY(-100%);
 +
-o-transform: translateY(-100%);
 +
-ms-transform: translateY(-100%);
 +
transform: translateY(-100%);
 +
}
 +
#st-control-3:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-200%);
 +
-moz-transform: translateY(-200%);
 +
-o-transform: translateY(-200%);
 +
-ms-transform: translateY(-200%);
 +
transform: translateY(-200%);
 +
}
 +
#st-control-4:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-300%);
 +
-moz-transform: translateY(-300%);
 +
-o-transform: translateY(-300%);
 +
-ms-transform: translateY(-300%);
 +
transform: translateY(-300%);
 +
}
 +
#st-control-5:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-400%);
 +
-moz-transform: translateY(-400%);
 +
-o-transform: translateY(-400%);
 +
-ms-transform: translateY(-400%);
 +
transform: translateY(-400%);
 +
}
 +
 +
 +
/* Content elements */
 +
 +
.st-deco{
 +
width: 200px;
 +
height: 200px;
 +
position: absolute;
 +
top: 0px;
 +
left: 50%;
 +
margin-left: -100px;
 +
background: #fa96b5;
 +
-webkit-transform: translateY(-50%) rotate(45deg);
 +
-moz-transform: translateY(-50%) rotate(45deg);
 +
-o-transform: translateY(-50%) rotate(45deg);
 +
-ms-transform: translateY(-50%) rotate(45deg);
 +
transform: translateY(-50%) rotate(45deg);
 +
}
 +
 +
[data-icon]:after {
 +
    content: attr(data-icon);
 +
    font-family: 'RaphaelIcons';
 +
    color: #fff;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
position: absolute;
 +
width: 200px;
 +
height: 200px;
 +
line-height: 200px;
 +
text-align: center;
 +
font-size: 90px;
 +
top: 50%;
 +
left: 50%;
 +
margin: -100px 0 0 -100px;
 +
-webkit-transform: rotate(-45deg) translateY(25%);
 +
-moz-transform: rotate(-45deg) translateY(25%);
 +
-o-transform: rotate(-45deg) translateY(25%);
 +
-ms-transform: rotate(-45deg) translateY(25%);
 +
transform: rotate(-45deg) translateY(25%);
 +
}
 +
 +
.st-panel h2 {
 +
color: #e23a6e;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
position: absolute;
 +
font-size: 54px;
 +
font-weight: 900;
 +
width: 80%;
 +
left: 10%;
 +
text-align: center;
 +
line-height: 50px;
 +
margin: -70px 0 0 0;
 +
padding: 0;
 +
top: 50%;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
 +
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
 +
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
 +
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
 +
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
 +
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
 +
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
}
 +
@-webkit-keyframes moveDown{
 +
0% {
 +
-webkit-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-moz-keyframes moveDown{
 +
0% {
 +
-moz-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-moz-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-o-keyframes moveDown{
 +
0% {
 +
-o-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-o-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-ms-keyframes moveDown{
 +
0% {
 +
-ms-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-ms-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@keyframes moveDown{
 +
0% {
 +
transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
.st-panel p {
 +
position: absolute;
 +
text-align: center;
 +
font-size: 16px;
 +
line-height: 22px;
 +
color: #8b8b8b;
 +
z-index: 2;
 +
padding: 0;
 +
width: 50%;
 +
left: 25%;
 +
top: 50%;
 +
margin: 10px 0 0 0;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
 +
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
 +
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
 +
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
 +
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
 +
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
}
 +
 +
@-webkit-keyframes moveUp{
 +
0% {
 +
-webkit-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-moz-keyframes moveUp{
 +
0% {
 +
-moz-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-moz-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-o-keyframes moveUp{
 +
0% {
 +
-o-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-o-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-ms-keyframes moveUp{
 +
0% {
 +
-ms-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-ms-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
@keyframes moveUp{
 +
0% {
 +
transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 +
/* Colored sections */
 +
 +
.st-color,
 +
.st-deco{
 +
background: #fa96b5;
 +
}
 +
.st-color [data-icon]:after {
 +
color: #fa96b5;
 +
}
 +
.st-color .st-deco {
 +
background: #fff;
 +
}
 +
.st-color h2 {
 +
color: #fff;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 +
}
 +
.st-color p {
 +
color: #fff;
 +
color: rgba(255,255,255,0.8);
 +
}
 +
 +
@media screen and (max-width: 520px) {
 +
.st-panel h2 {
 +
font-size: 42px;
 +
}
 +
 +
.st-panel p {
 +
width: 90%;
 +
left: 5%;
 +
margin-top: 0;
 +
}
 +
 +
.st-container > a {
 +
font-size: 13px;
 +
}
 +
}
 +
@media screen and (max-width: 360px) {
 +
.st-container > a {
 +
font-size: 10px;
 +
}
 +
 +
.st-deco{
 +
width: 120px;
 +
height: 120px;
 +
margin-left: -60px;
 +
}
 +
 +
[data-icon]:after {
 +
font-size: 60px;
 +
-webkit-transform: rotate(-45deg) translateY(15%);
 +
-moz-transform: rotate(-45deg) translateY(15%);
 +
-o-transform: rotate(-45deg) translateY(15%);
 +
-ms-transform: rotate(-45deg) translateY(15%);
 +
transform: rotate(-45deg) translateY(15%);
 +
}
 +
}
 +
body{
 +
font-family: Georgia, serif;
 +
background: #ddd;
 +
font-weight: 400;
 +
font-size: 15px;
 +
color: #333;
 +
overflow: hidden;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
a{
 +
color: #555;
 +
text-decoration: none;
 +
}
 +
.clr{
 +
clear: both;
 +
padding: 0;
 +
height: 0;
 +
margin: 0;
 +
}
 +
/* Header Style */
 +
.codrops-top{
 +
line-height: 24px;
 +
font-size: 9px;
 +
text-transform: uppercase;
 +
z-index: 9999;
 +
position: relative;
 +
font-family: Cambria, Georgia, serif;
 +
}
 +
.codrops-top a{
 +
padding: 0px 10px;
 +
letter-spacing: 1px;
 +
color: #888;
 +
display: inline-block;
 +
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
 +
}
 +
.codrops-top span.right{
 +
float: right;
 +
}
 +
.codrops-top span.right a{
 +
float: left;
 +
display: block;
 +
}
 +
@media screen and (max-width: 520px) {
 +
.codrops-top { display: none; }
 +
}
 +
</style>
 
</head>
 
</head>
 
<body>
 
<body>
Line 91: Line 551:
 
       <div class="jumbotron">
 
       <div class="jumbotron">
 
         <h1>Navbar example</h1>
 
         <h1>Navbar example</h1>
−
         <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+
 
−
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
+
 
−
        <p>
+
         <div class="container">
−
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
+
<div class="st-container">
−
        </p>
+
 +
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
 +
<a href="#st-panel-1">Serendipity</a>
 +
<input type="radio" name="radio-set" id="st-control-2"/>
 +
<a href="#st-panel-2">Happiness</a>
 +
<input type="radio" name="radio-set" id="st-control-3"/>
 +
<a href="#st-panel-3">Tranquillity</a>
 +
<input type="radio" name="radio-set" id="st-control-4"/>
 +
<a href="#st-panel-4">Positivity</a>
 +
<input type="radio" name="radio-set" id="st-control-5"/>
 +
<a href="#st-panel-5">Passion</a>
 +
 +
<div class="st-scroll">
 +
 +
<!-- Placeholder text from http://hipsteripsum.me/ -->
 +
 +
<section class="st-panel" id="st-panel-1">
 +
<div class="st-deco" data-icon="H"></div>
 +
<h2>Serendipity</h2>
 +
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
 +
<p>
 +
<a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> |
 +
<a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/html5/html5muban/20141126596.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
 +
</p>
 +
<!--<div class="htmleaf-links">
 +
<a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
 +
<a class="htmleaf-icon icon-arrow-right3" href="" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
 +
</div>-->
 +
</section>
 +
 +
<section class="st-panel st-color" id="st-panel-2">
 +
<div class="st-deco" data-icon="2"></div>
 +
<h2>Happiness</h2>
 +
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
 +
</section>
 +
 +
<section class="st-panel" id="st-panel-3">
 +
<div class="st-deco" data-icon="B"></div>
 +
<h2>Tranquillity</h2>
 +
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
 +
</section>
 +
 +
<section class="st-panel st-color" id="st-panel-4">
 +
<div class="st-deco" data-icon="x"></div>
 +
<h2>Positivity</h2>
 +
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
 +
</section>
 +
 +
<section class="st-panel" id="st-panel-5">
 +
<div class="st-deco" data-icon="Ç"></div>
 +
<h2>Passion</h2>
 +
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
 +
</section>
 +
 
 +
</div><!-- // st-scroll -->
 +
 +
</div><!-- // st-container -->
 +
 +
        </div>
 +
 
 
       </div>
 
       </div>
  

Revision as of 04:18, 5 August 2017

BIT-CHINA

BIT-CHINA

Navbar example

Serendipity Happiness Tranquillity Positivity Passion

Serendipity

Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.

jQuery之家 | 返回下载页

Happiness

Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.

Tranquillity

Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.

Positivity

Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.

Passion

Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.