Difference between revisions of "Team:AHUT China/templatemo-style css"

Line 1: Line 1:
−
 
  
 
body {
 
body {
Line 241: Line 240:
 
margin-top: 20px;
 
margin-top: 20px;
 
}
 
}
 +
}
 +
 +
JS代码美化CSS代码美化HTML代码美化XML代码美化SQL代码美化
 +
 +
 +
body {
 +
 +
 +
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
 +
 +
 +
    font-size: 24px;
 +
 +
 +
    font-weight: 300;
 +
 +
 +
    overflow-x: hidden;
 +
 +
 +
}
 +
 +
 +
a, button {
 +
 +
 +
    transition: all 0.3s ease;
 +
 +
 +
    color: #FFFFFF;
 +
 +
 +
}
 +
 +
 +
button:focus {
 +
 +
 +
    outline: none;
 +
 +
 +
}
 +
 +
 +
a:hover {
 +
 +
 +
    color: #FFFF00;
 +
 +
 +
    text-decoration: underline;
 +
 +
 +
}
 +
 +
 +
a:focus {
 +
 +
 +
    text-decoration: none;
 +
 +
 +
    outline: none;
 +
 +
 +
}
 +
 +
 +
h1 {
 +
 +
 +
    color: #FFFFFF;
 +
 +
 +
    font-size: 4rem;
 +
 +
 +
}
 +
 +
 +
p {
 +
 +
 +
    color: #FFFFFF;
 +
 +
 +
}
 +
 +
 +
#particles-js {
 +
 +
 +
    position: absolute;
 +
 +
 +
    top: 0;
 +
 +
 +
    left: 0;
 +
 +
 +
    z-index: 1000;
 +
 +
 +
    width: 100%;
 +
 +
 +
    height: 99%;
 +
 +
 +
}
 +
 +
 +
.cb-slideshow-text-container {
 +
 +
 +
    height: 100vh;
 +
 +
 +
    display: flex;
 +
 +
 +
    align-items: center;
 +
 +
 +
}
 +
 +
 +
.tm-content {
 +
 +
 +
    z-index: 1001;
 +
 +
 +
}
 +
 +
 +
.form-control::-webkit-input-placeholder {
 +
 +
 +
    /* Chrome/Opera/Safari */
 +
 +
 +
    color: white;
 +
 +
 +
}
 +
 +
 +
.form-control::-moz-placeholder {
 +
 +
 +
    /* Firefox 19+ */
 +
 +
 +
    color: white;
 +
 +
 +
}
 +
 +
 +
.form-control:-ms-input-placeholder {
 +
 +
 +
    /* IE 10+ */
 +
 +
 +
    color: white;
 +
 +
 +
}
 +
 +
 +
.form-control:-moz-placeholder {
 +
 +
 +
    /* Firefox 18- */
 +
 +
 +
    color: white;
 +
 +
 +
}
 +
 +
 +
.form-control::placeholder {
 +
 +
 +
    color: white;
 +
 +
 +
}
 +
 +
 +
.form-control {
 +
 +
 +
    color: #FFFFFF;
 +
 +
 +
    border-radius: .5rem;
 +
 +
 +
    background-color: transparent;
 +
 +
 +
    border: 1px solid #FFFFFF;
 +
 +
 +
    padding-top: 10px;
 +
 +
 +
    padding-bottom: 10px;
 +
 +
 +
    font-size: 1.4rem;
 +
 +
 +
    font-weight: 300;
 +
 +
 +
    padding: 0.75rem 1.2rem;
 +
 +
 +
}
 +
 +
 +
.form-section {
 +
 +
 +
    color: #FFFFFF;
 +
 +
 +
    background-color: transparent;
 +
 +
 +
    margin-bottom: 100px;
 +
 +
 +
}
 +
 +
 +
.contact_email {
 +
 +
 +
    color: #FFFFFF;
 +
 +
 +
}
 +
 +
 +
.tm-btn-subscribe {
 +
 +
 +
    background-color: #006699;
 +
 +
 +
    border-radius: .5rem;
 +
 +
 +
    border-color: white;
 +
 +
 +
    padding: 0.75rem 1.6rem;
 +
 +
 +
    font-weight: 300;
 +
 +
 +
    font-size: 1.4rem;
 +
 +
 +
    cursor: pointer;
 +
 +
 +
}
 +
 +
 +
.tm-btn-subscribe:hover {
 +
 +
 +
    background-color: #055278;
 +
 +
 +
}
 +
 +
 +
.tm-social-icons-container {
 +
 +
 +
    margin: 10px;
 +
 +
 +
}
 +
 +
 +
.tm-social-link {
 +
 +
 +
    border-color: #FFFFFF;
 +
 +
 +
    color: black;
 +
 +
 +
    display: inline-block;
 +
 +
 +
    width: 50px;
 +
 +
 +
    height: 50px;
 +
 +
 +
    text-align: center;
 +
 +
 +
}
 +
 +
 +
.fa {
 +
 +
 +
    color: #FFFFFF;
 +
 +
 +
}
 +
 +
 +
.footer-link {
 +
 +
 +
    margin: 20px;
 +
 +
 +
    font-size: 18px;
 +
 +
 +
    position: absolute;
 +
 +
 +
    bottom: 0;
 +
 +
 +
    left: 0;
 +
 +
 +
    color: white;
 +
 +
 +
    text-align:center;
 +
 +
 +
    width:100%;
 +
 +
 +
    z-index: 1001;
 +
 +
 +
}
 +
 +
 +
/* Animation */
 +
 +
 +
.cb-slideshow, .cb-slideshow:after {
 +
 +
 +
    position: fixed;
 +
 +
 +
    width: 100%;
 +
 +
 +
    height: 100%;
 +
 +
 +
    top: 0px;
 +
 +
 +
    left: 0px;
 +
 +
 +
    z-index: 0;
 +
 +
 +
}
 +
 +
 +
.cb-slideshow li {
 +
 +
 +
    width: 100%;
 +
 +
 +
    height: 100%;
 +
 +
 +
    position: absolute;
 +
 +
 +
    top: 0px;
 +
 +
 +
    left: 0px;
 +
 +
 +
    color: transparent;
 +
 +
 +
    background-size: cover;
 +
 +
 +
    background-position: 50% 50%;
 +
 +
 +
    background-repeat: none;
 +
 +
 +
    opacity: 0;
 +
 +
 +
    z-index: 0;
 +
 +
 +
    -webkit-backface-visibility: hidden;
 +
 +
 +
    -webkit-animation: imageAnimation 20s linear infinite 0s;
 +
 +
 +
    -moz-animation: imageAnimation 20s linear infinite 0s;
 +
 +
 +
    -o-animation: imageAnimation 20s linear infinite 0s;
 +
 +
 +
    -ms-animation: imageAnimation 20s linear infinite 0s;
 +
 +
 +
    animation: imageAnimation 20s linear infinite 0s;
 +
 +
 +
}
 +
 +
 +
.cb-slideshow li:nth-child(1) {
 +
 +
 +
    background-image: url(https://static.igem.org/mediawiki/2018/e/e0/T--AHUT_China--letter_bg_01.jpg)
 +
 +
 +
}
 +
 +
 +
.cb-slideshow li:nth-child(2) {
 +
 +
 +
    background-image: url(https://static.igem.org/mediawiki/2018/4/4a/T--AHUT_China--letter_bg_02.jpg);
 +
 +
 +
    -webkit-animation-delay: 4s;
 +
 +
 +
    -moz-animation-delay: 4s;
 +
 +
 +
    -o-animation-delay: 4s;
 +
 +
 +
    -ms-animation-delay: 4s;
 +
 +
 +
    animation-delay: 4s;
 +
 +
 +
}
 +
 +
 +
.cb-slideshow li:nth-child(3) {
 +
 +
 +
    background-image: url(https://static.igem.org/mediawiki/2018/b/bf/T--AHUT_China--letter_bg_03.jpg);
 +
 +
 +
    -webkit-animation-delay: 8s;
 +
 +
 +
    -moz-animation-delay: 8s;
 +
 +
 +
    -o-animation-delay: 8s;
 +
 +
 +
    -ms-animation-delay: 8s;
 +
 +
 +
    animation-delay: 8s;
 +
 +
 +
}
 +
 +
 +
.cb-slideshow li:nth-child(4) {
 +
 +
 +
    background-image: url(https://static.igem.org/mediawiki/2018/e/e0/T--AHUT_China--letter_bg_01.jpg);
 +
 +
 +
    animation-delay: 12s;
 +
 +
 +
}
 +
 +
 +
.cb-slideshow li:nth-child(5) {
 +
 +
 +
    background-image: url(https://static.igem.org/mediawiki/2018/4/4a/T--AHUT_China--letter_bg_02.jpg);
 +
 +
 +
    animation-delay: 16s;
 +
 +
 +
}
 +
 +
 +
.cb-slideshow li:nth-child(6) {
 +
 +
 +
    background-image: url(https://static.igem.org/mediawiki/2018/b/bf/T--AHUT_China--letter_bg_03.jpg);
 +
 +
 +
    animation-delay: 20s;
 +
 +
 +
}
 +
 +
 +
@keyframes imageAnimation {
 +
 +
 +
    0% {
 +
 +
 +
        opacity: 0;
 +
 +
 +
        animation-timing-function: ease-in;
 +
 +
 +
    }
 +
 +
 +
    8% {
 +
 +
 +
        opacity: 1;
 +
 +
 +
        transform: scale(1.15);
 +
 +
 +
        animation-timing-function: ease-out;
 +
 +
 +
    }
 +
 +
 +
    17% {
 +
 +
 +
        opacity: 1;
 +
 +
 +
        transform: scale(1.20);
 +
 +
 +
    }
 +
 +
 +
    25% {
 +
 +
 +
        opacity: 0;
 +
 +
 +
        transform: scale(1.40);
 +
 +
 +
    }
 +
 +
 +
    100% {
 +
 +
 +
        opacity: 0
 +
 +
 +
    }
 +
 +
 +
}
 +
 +
 +
@media screen and (max-width: 1140px) {
 +
 +
 +
    .cb-slideshow li div h3 {
 +
 +
 +
        font-size: 140px
 +
 +
 +
    }
 +
 +
 +
}
 +
 +
 +
@media screen and (max-width: 600px) {
 +
 +
 +
    .cb-slideshow li div h3 {
 +
 +
 +
        font-size: 80px
 +
 +
 +
    }
 +
 +
 +
    .tm-content {
 +
 +
 +
        margin-top: 80px;
 +
 +
 +
    }
 +
 +
 +
}
 +
 +
 +
@media screen and (max-width: 576px) {
 +
 +
 +
    .cb-slideshow li div h3 {
 +
 +
 +
        font-size: 80px
 +
 +
 +
    }
 +
 +
 +
    .tm-btn-subscribe {
 +
 +
 +
        margin-top: 20px;
 +
 +
 +
    }
 +
 +
 
}
 
}

Revision as of 07:57, 4 October 2018

body { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; overflow-x: hidden;

}

a, button { transition: all 0.3s ease; color: #FFFFFF; }

button:focus { 

   outline: none;

}

a:hover { color: #FFFF00; text-decoration: underline; } a:focus { text-decoration: none; outline: none; }

h1 { color: #FFFFFF; font-size: 4rem; }

p { color: #FFFFFF; }

  1. particles-js {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
   width: 100%;
   height: 99%;

}

.cb-slideshow-text-container { 

   height: 100vh;
   display: flex;
   align-items: center;

}

.tm-content { 

   z-index: 1001;

}

.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 

 color: white;

} .form-control::-moz-placeholder { /* Firefox 19+ */ 

 color: white;

} .form-control:-ms-input-placeholder { /* IE 10+ */ 

 color: white;

} .form-control:-moz-placeholder { /* Firefox 18- */ 

 color: white;

}

.form-control::placeholder { 

   color: white;

}

.form-control { 

   color: #FFFFFF;
   border-radius: .5rem;
   background-color: transparent;
   border: 1px solid #FFFFFF;
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 1.4rem;
   font-weight: 300;
   padding: 0.75rem 1.2rem;

}

.form-section { 

   color: #FFFFFF;
   background-color: transparent;
   margin-bottom: 100px;

}

.contact_email { color: #FFFFFF; } .tm-btn-subscribe { background-color: #006699; border-radius: .5rem; 

   border-color: white;

padding: 0.75rem 1.6rem; 

   font-weight: 300;
   font-size: 1.4rem;
   cursor: pointer;

}

.tm-btn-subscribe:hover { 

   background-color: #055278;

}

.tm-social-icons-container { 

   margin: 10px;

}

.tm-social-link { 

   border-color: #FFFFFF;
   color: black;
   display: inline-block;
   width: 50px;
   height: 50px;
   text-align: center;

}

.fa { 

   color: #FFFFFF;

}

.footer-link { 

   margin: 20px;

font-size: 18px; 

   position: absolute;
   bottom: 0;
   left: 0;
   color: white;
   text-align:center;
   width:100%;
   z-index: 1001;

}

/* Animation */ .cb-slideshow, .cb-slideshow:after { 

   position: fixed;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   z-index: 0;

}

.cb-slideshow li { 

   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   color: transparent;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: none;
   opacity: 0;
   z-index: 0;
   -webkit-backface-visibility: hidden;
   -webkit-animation: imageAnimation 20s linear infinite 0s;
   -moz-animation: imageAnimation 20s linear infinite 0s;
   -o-animation: imageAnimation 20s linear infinite 0s;
   -ms-animation: imageAnimation 20s linear infinite 0s;
   animation: imageAnimation 20s linear infinite 0s;

}


.cb-slideshow li:nth-child(1) { 

   background-image: url(T--AHUT_China--letter_bg_01.jpg)

} .cb-slideshow li:nth-child(2) { 

   background-image: url(T--AHUT_China--letter_bg_02.jpg);
   -webkit-animation-delay: 4s;
   -moz-animation-delay: 4s;
   -o-animation-delay: 4s;
   -ms-animation-delay: 4s;
   animation-delay: 4s;

} .cb-slideshow li:nth-child(3) { 

   background-image: url(T--AHUT_China--letter_bg_03.jpg);
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   -ms-animation-delay: 8s;
   animation-delay: 8s;

} .cb-slideshow li:nth-child(4) { 

   background-image: url(T--AHUT_China--letter_bg_01.jpg);
   animation-delay: 12s;

} .cb-slideshow li:nth-child(5) { 

   background-image: url(T--AHUT_China--letter_bg_02.jpg);
   animation-delay: 16s;

} .cb-slideshow li:nth-child(6) { 

   background-image: url(T--AHUT_China--letter_bg_03.jpg);
   animation-delay: 20s;

}


@keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.15); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.20); } 25% { opacity: 0; transform: scale(1.40); } 100% { opacity: 0 } }


@media screen and (max-width: 1140px) { 

   .cb-slideshow li div h3 { font-size: 140px }

} @media screen and (max-width: 600px) { 

   .cb-slideshow li div h3 { font-size: 80px }

.tm-content { margin-top: 80px; } }

@media screen and (max-width: 576px) { 

   .cb-slideshow li div h3 { font-size: 80px }

.tm-btn-subscribe { margin-top: 20px; } }

JS代码美化CSS代码美化HTML代码美化XML代码美化SQL代码美化


body { 


   font-family:'Open Sans', Helvetica, Arial, sans-serif;



   font-size: 24px;



   font-weight: 300;



   overflow-x: hidden;


}


a, button { 


   transition: all 0.3s ease;



   color: #FFFFFF;


}


button:focus { 


   outline: none;


}


a:hover { 


   color: #FFFF00;



   text-decoration: underline;


}


a:focus { 


   text-decoration: none;



   outline: none;


}


h1 { 


   color: #FFFFFF;



   font-size: 4rem;


}


p { 


   color: #FFFFFF;


}


  1. particles-js {


   position: absolute;



   top: 0;



   left: 0;



   z-index: 1000;



   width: 100%;



   height: 99%;


}


.cb-slideshow-text-container { 


   height: 100vh;



   display: flex;



   align-items: center;


}


.tm-content { 


   z-index: 1001;


}


.form-control::-webkit-input-placeholder { 


   /* Chrome/Opera/Safari */



   color: white;


}


.form-control::-moz-placeholder { 


   /* Firefox 19+ */



   color: white;


}


.form-control:-ms-input-placeholder { 


   /* IE 10+ */



   color: white;


}


.form-control:-moz-placeholder { 


   /* Firefox 18- */



   color: white;


}


.form-control::placeholder { 


   color: white;


}


.form-control { 


   color: #FFFFFF;



   border-radius: .5rem;



   background-color: transparent;



   border: 1px solid #FFFFFF;



   padding-top: 10px;



   padding-bottom: 10px;



   font-size: 1.4rem;



   font-weight: 300;



   padding: 0.75rem 1.2rem;


}


.form-section { 


   color: #FFFFFF;



   background-color: transparent;



   margin-bottom: 100px;


}


.contact_email { 


   color: #FFFFFF;


}


.tm-btn-subscribe { 


   background-color: #006699;



   border-radius: .5rem;



   border-color: white;



   padding: 0.75rem 1.6rem;



   font-weight: 300;



   font-size: 1.4rem;



   cursor: pointer;


}


.tm-btn-subscribe:hover { 


   background-color: #055278;


}


.tm-social-icons-container { 


   margin: 10px;


}


.tm-social-link { 


   border-color: #FFFFFF;



   color: black;



   display: inline-block;



   width: 50px;



   height: 50px;



   text-align: center;


}


.fa { 


   color: #FFFFFF;


}


.footer-link { 


   margin: 20px;



   font-size: 18px;



   position: absolute;



   bottom: 0;



   left: 0;



   color: white;



   text-align:center;



   width:100%;



   z-index: 1001;


}


/* Animation */


.cb-slideshow, .cb-slideshow:after { 


   position: fixed;



   width: 100%;



   height: 100%;



   top: 0px;



   left: 0px;



   z-index: 0;


}


.cb-slideshow li { 


   width: 100%;



   height: 100%;



   position: absolute;



   top: 0px;



   left: 0px;



   color: transparent;



   background-size: cover;



   background-position: 50% 50%;



   background-repeat: none;



   opacity: 0;



   z-index: 0;



   -webkit-backface-visibility: hidden;



   -webkit-animation: imageAnimation 20s linear infinite 0s;



   -moz-animation: imageAnimation 20s linear infinite 0s;



   -o-animation: imageAnimation 20s linear infinite 0s;



   -ms-animation: imageAnimation 20s linear infinite 0s;



   animation: imageAnimation 20s linear infinite 0s;


}


.cb-slideshow li:nth-child(1) { 


   background-image: url(T--AHUT_China--letter_bg_01.jpg)


}


.cb-slideshow li:nth-child(2) { 


   background-image: url(T--AHUT_China--letter_bg_02.jpg);



   -webkit-animation-delay: 4s;



   -moz-animation-delay: 4s;



   -o-animation-delay: 4s;



   -ms-animation-delay: 4s;



   animation-delay: 4s;


}


.cb-slideshow li:nth-child(3) { 


   background-image: url(T--AHUT_China--letter_bg_03.jpg);



   -webkit-animation-delay: 8s;



   -moz-animation-delay: 8s;



   -o-animation-delay: 8s;



   -ms-animation-delay: 8s;



   animation-delay: 8s;


}


.cb-slideshow li:nth-child(4) { 


   background-image: url(T--AHUT_China--letter_bg_01.jpg);



   animation-delay: 12s;


}


.cb-slideshow li:nth-child(5) { 


   background-image: url(T--AHUT_China--letter_bg_02.jpg);



   animation-delay: 16s;


}


.cb-slideshow li:nth-child(6) { 


   background-image: url(T--AHUT_China--letter_bg_03.jpg);



   animation-delay: 20s;


}


@keyframes imageAnimation { 


   0% {



       opacity: 0;



       animation-timing-function: ease-in;



   }



   8% {



       opacity: 1;



       transform: scale(1.15);



       animation-timing-function: ease-out;



   }



   17% {



       opacity: 1;



       transform: scale(1.20);



   }



   25% {



       opacity: 0;



       transform: scale(1.40);



   }



   100% {



       opacity: 0



   }


}


@media screen and (max-width: 1140px) { 


   .cb-slideshow li div h3 {



       font-size: 140px



   }


}


@media screen and (max-width: 600px) { 


   .cb-slideshow li div h3 {



       font-size: 80px



   }



   .tm-content {



       margin-top: 80px;



   }


}


@media screen and (max-width: 576px) { 


   .cb-slideshow li div h3 {



       font-size: 80px



   }



   .tm-btn-subscribe {



       margin-top: 20px;



   }


}