Difference between revisions of "Template:NCKU Tainan/hp silver"

 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
@import url("https://fonts.googleapis.com/css?family=Roboto|Open+Sans|Raleway|Montserrat:300|Noto+Sans|Noto+Serif|Kalam");
+
 
 
body {
 
body {
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
−
   font-family: sans-serif;
+
   font-family: 'Raleway', sans-serif;
 
   color: #646464;
 
   color: #646464;
 
   background: #f0f0f0;
 
   background: #f0f0f0;
Line 11: Line 11:
 
   line-height: 1.4;
 
   line-height: 1.4;
 
}
 
}
−
 
+
h1 {
−
.vertical-container{
+
   font-family: 'Montserrat', sans-serif;
−
   background-image: url(https://static.igem.org/mediawiki/2017/c/c6/T--NCKU_Tainan--HP-Silver-1.jpg);
+
−
}
+
−
#category h1{
+
−
  color: #eee;
+
−
  text-align: center;
+
 
}
 
}
  
−
 
−
.introsection {
 
−
  /* background-color: #444; */
 
−
}
 
−
 
−
.letterpress {
 
−
  font-family: EYInterstate, Helvetica, sans-serif;
 
−
  margin: 0 auto;
 
−
  height: 100vh;
 
−
  display: flex;
 
−
  align-items: center;
 
−
  justify-content: center;
 
−
  text-shadow: 1px 2px 0 #808080, -1px -2px 1px #333;
 
−
  color: #222;
 
−
  font-size: 4vw;
 
−
  text-align: left;
 
−
  font-weight: 300;
 
−
  letter-spacing: -.05em;
 
−
  max-width: 60vw;
 
−
}
 
  
 
.container, .staggered-animation-container {
 
.container, .staggered-animation-container {
Line 46: Line 21:
 
   max-width: 75%;
 
   max-width: 75%;
 
   margin-right: auto;
 
   margin-right: auto;
−
   font-family: 'Noto Serif', serif;
+
   font-family:'Raleway', sans-serif;
 
   font-size: 18px;
 
   font-size: 18px;
−
  padding-bottom: 40px;
 
 
}
 
}
−
 
+
@media only screen and (max-width: 768px) {
−
@media only screen and (min-width: 768px) {
+
  .inner p{
 +
    margin :40px;
 +
    text-align: justify;
 +
  }
 
   .container, .staggered-animation-container {
 
   .container, .staggered-animation-container {
−
     max-width: 700px;
+
    position: relative;
 +
    margin-left: auto;
 +
     max-width: 90%;
 +
    margin-right: auto;
 +
    font-family: 'Raleway', sans-serif;
 +
    padding-bottom: 40px;
 
   }
 
   }
−
}
 
  
−
@media only screen and (min-width: 1024px) {
+
   .inner , .mod-inset-left{
−
   .container, .staggered-animation-container {
+
     width: 100%;
−
     max-width: 1000px;
+
    margin-left: auto;
 +
    margin-right: auto;
 
   }
 
   }
−
}
 
  
 +
  .caption{
 +
    display: none;
 +
  }
 +
  .inner h1{
 +
    font-size: 26px;
 +
    font-family: 'Montserrat', sans-serif;
  
−
.mod-inset-left {
+
  }
−
  background: #cfcfcf;
+
  .inner h2{
−
  padding: 1.15em;
+
    font-size: 24px;
−
   margin: 1em 0;
+
    font-family: 'Montserrat', sans-serif;
 +
  }
 +
 
 +
  .inner p{
 +
    margin:15px;
 +
    font-size: 12px;
 +
  }
 +
  .inner li{
 +
    font-size: 16px;
 +
  }
 +
  [class^="img"] h3 {
 +
    font-family: 'Montserrat', sans-serif;
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    font-size:50px;
 +
    text-align: center;
 +
    color: #fff;
 +
    padding:0px;
 +
  }
 +
 
 +
  .mod-inset-left {
 +
    background: #e2e2e2;
 +
    padding: 1.15em;
 +
 
 +
   }
 
}
 
}
  
 
@media only screen and (min-width: 768px) {
 
@media only screen and (min-width: 768px) {
 +
  .inner p{
 +
    margin :40px;
 +
    text-align: justify;
 +
  }
 +
 +
  .mod-inset-left p{
 +
    margin: 25px;
 +
  }
 +
 
   .mod-inset-left {
 
   .mod-inset-left {
 
     width: auto;
 
     width: auto;
 
     height: auto;
 
     height: auto;
−
     /*float: left;*/
+
     margin-left: 40px;
−
     margin: 0 1em 10px 0;
+
     margin-right: 40px;
 +
    background: #e2e2e2;
 +
    padding: 1.15em;
 +
 
 
   }
 
   }
 +
 +
  .mod-inset-left ul{
 +
    padding-right: 25px;
 +
  }
 +
 
   .container .inner, .staggered-animation-container .inner {
 
   .container .inner, .staggered-animation-container .inner {
−
     max-width: 65%;
+
     max-width: 85%;
 +
 
 
     }
 
     }
 
     #left{
 
     #left{
−
       margin-left: 0;
+
       margin-left: auto;
 
     }
 
     }
 +
 
     .inner{
 
     .inner{
 
       margin-left: auto;
 
       margin-left: auto;
 
       margin-right: auto;
 
       margin-right: auto;
 +
    }
 +
 +
    [class^="img"] h3 {
 +
      font-family: 'Montserrat', sans-serif;
 +
      display: table-cell;
 +
      vertical-align: middle;
 +
      font-size:100px;
 +
      text-align: center;
 +
      color: #fff;
 +
      padding:0px;
 
     }
 
     }
 
}
 
}
−
@media only screen and (max-width: 768px) {
+
 
 +
@media only screen and (min-width: 1024px) {
 
   .container, .staggered-animation-container {
 
   .container, .staggered-animation-container {
−
    position: relative;
+
     max-width: 1000px;
−
    margin-left: auto;
+
−
     max-width: 90%;
+
−
    margin-right: auto;
+
−
    font-family: 'Noto Serif', serif;
+
−
    padding-bottom: 40px;
+
−
  }
+
−
 
+
−
  .inner , .mod-inset-left{
+
−
    width: 100%;
+
−
  }
+
−
 
+
−
  .caption, .mod-inline {
+
−
    display: none;
+
−
  }
+
−
 
+
−
  .inner h1{
+
−
    font-size: 18px;
+
−
  }
+
−
  .inner h2{
+
−
    font-size: 16px;
+
−
  }
+
−
 
+
−
  .inner p , li{
+
−
    font-size: 12px;
+
 
   }
 
   }
 
}
 
}
−
 
  
 
.caption, .mod-inline {
 
.caption, .mod-inline {
Line 124: Line 140:
 
   position: relative;
 
   position: relative;
 
   overflow: hidden;
 
   overflow: hidden;
 +
 
   width: 30%;
 
   width: 30%;
 
}
 
}
Line 146: Line 163:
 
   line-height: 1.6;
 
   line-height: 1.6;
 
}
 
}
 +
 +
#test {
 +
  border-left: 3px solid #93edd4;
 +
  position: relative;
 +
}
 +
 +
#test::before{
 +
  position: absolute;
 +
  left:-7px;
 +
  height: 10px;
 +
  width: 10px;
 +
  background: #93edd4;
 +
  content: "";
 +
  border-radius: 5px;
 +
}
 +
#test::after{
 +
  position: absolute;
 +
  bottom: 0px;
 +
  left: -7px;
 +
  height: 10px;
 +
  width: 10px;
 +
  background: #93edd4;
 +
  content: "";
 +
  border-radius: 5px;
 +
}
  
 
#p1 {
 
#p1 {
−
  /*float: right;*/
 
 
   width: 100%;
 
   width: 100%;
 
   height: auto;
 
   height: auto;
−
  padding: 25px;
 
 
}
 
}
  
 
#p2 {
 
#p2 {
−
  float: right;
 
 
   width: 100%;
 
   width: 100%;
 
   height: auto;
 
   height: auto;
Line 162: Line 201:
  
 
#p3 {
 
#p3 {
−
  float: right;
 
 
   width: 100%;
 
   width: 100%;
 
   height: auto;
 
   height: auto;
Line 175: Line 213:
 
   display: table;
 
   display: table;
 
   width: 100%;
 
   width: 100%;
−
}
+
  position: relative;
  
−
[class^="img"] h3 {
 
−
  font-family: 'Kalam', cursive;
 
−
  display: table-cell;
 
−
  vertical-align: middle;
 
−
  font-size: 48px;
 
−
  text-align: center;
 
−
  color: #fff;
 
 
}
 
}
 +
 +
  
 
[class^="img"]+.container .caption {
 
[class^="img"]+.container .caption {
Line 205: Line 238:
 
   height: 300px;
 
   height: 300px;
 
   width: 100%;
 
   width: 100%;
−
   background: url(/assets/img/glowing.jpg) no-repeat center center/cover;
+
   background: url('https://static.igem.org/mediawiki/2017/4/45/NCKU-hp-silver-dialogue.png') no-repeat center center/cover;
 +
  background-attachment: fixed;
 +
}
 +
.img3 {
 +
  height: 300px;
 +
  width: 100%;
 +
  background: url('https://static.igem.org/mediawiki/2017/7/75/NCKU-hp-silver-collaboration.png') no-repeat center center/cover;
 
   background-attachment: fixed;
 
   background-attachment: fixed;
 
}
 
}
Line 226: Line 265:
 
   opacity: 1;
 
   opacity: 1;
 
}
 
}
 +
 +
 +
  hr {
 +
    height: 5px;
 +
    border: 0;
 +
    margin-left: 45%;
 +
    margin-right: 45%;
 +
    padding: 0;
 +
    background-color: #f9cb8f
 +
    /*background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #f9cb8f, rgba(0, 0, 0, 0));*/
 +
  }
  
  
 
/*# sourceMappingURL=hp-silver.component.css.map */
 
/*# sourceMappingURL=hp-silver.component.css.map */
 +
  
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 10:02, 1 November 2017