Difference between revisions of "Team:NYMU-Taipei/css-test"

Line 9: Line 9:
 
}
 
}
  
−
.igem_2018_team_content {
 
−
background-color:white;
 
−
display:block;
 
−
width: 100%;
 
−
}
 
 
.igem_2018_team_menu.displaying_menu{
 
.igem_2018_team_menu.displaying_menu{
 
display:none;
 
display:none;
 
}
 
}
  
−
/* first version of homepage, discarded
 
−
 
−
/*styling the menu*/
 
 
.nymu_menu{
 
.nymu_menu{
−
height: 120px;
+
min-width: 1310px;
−
background-color: white;
+
width:100%;
−
box-shadow: 0 10px 20px -5px gray;
+
position: fixed;
−
position:fixed;
+
z-index: 1;
−
width:1310px;
+
height: 200px;
−
top:16px;
+
 
}
 
}
  
−
/*style title*/
+
body{
−
#title{
+
font-family: sans-serif;
−
text-align:center;
+
background-color:#F1F1F1;
−
font-family:"Blippo", fantasy;
+
−
color:#5bc7d8;
+
−
font-size:70px;
+
−
height:30px;
+
−
padding-top:40px;
+
 
}
 
}
  
−
/*style image*/
+
a{
−
img.cover {
+
text-decoration: none;
−
    width: 1310px;
+
}
 +
 
 +
#title{
 +
display:none;
 
}
 
}
  
 
/*for drop down function*/
 
/*for drop down function*/
 +
 +
.menu_item{
 +
position: relative;
 +
bottom:25px;
 +
}
  
 
.dropdown {
 
.dropdown {
 
     position: relative;
 
     position: relative;
 
     display: inline-block;
 
     display: inline-block;
−
width:150px;
+
min-width:140px;
 +
width:10%;
 
text-align:center;
 
text-align:center;
−
padding-top:25px;
+
color:#638695;
 +
font-size: 20px;
 +
}
 +
 
 +
.dropdown:hover {
 +
/*color:#B1C4C9;*/
 +
color: pink;
 +
}
 +
 
 +
.dropdown .submenu_item:hover{
 +
border-style: solid;
 +
border-width: 1px;
 +
border-color: pink;
 
}
 
}
  
Line 58: Line 65:
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
−
     background-color:white;
+
     top:0px;
 
     width: 100%;
 
     width: 100%;
−
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
     z-index: 2;
−
     padding: 20px 16px;
+
     text-align: left;
−
    z-index: 1;
+
 
}
 
}
  
 
.dropdown-content a .submenu_item{
 
.dropdown-content a .submenu_item{
−
height:40px;
+
color:pink;
 +
margin:15px;
 
}
 
}
  
 +
.dropdown img{
 +
width: 50px;
 +
position: relative;
 +
top:20px;
 +
left:50px;
 +
}
 
/*.dropdown:hover .dropdown-content {
 
/*.dropdown:hover .dropdown-content {
 
     display: block;
 
     display: block;
Line 86: Line 99:
 
/* end of dropdown function*/
 
/* end of dropdown function*/
  
−
*/
+
.cover video{
 +
width: 80%;
 +
position: relative;
 +
top: 100px;
 +
opacity: 0.7;
 +
}
 +
 
 +
#coversentence1{
 +
position: absolute;
 +
left:60%;
 +
top:75%;
 +
font-size: 280%;
 +
color:gray;
 +
animation-name:fade-in2;
 +
animation-duration: 4s;
 +
font-family: 'Monoton', cursive;
 +
}
 +
 
 +
#coversentence2{
 +
position: absolute;
 +
left:60%;
 +
top:60%;
 +
font-size: 600%;
 +
color:#638695;
 +
animation-name:fade-in1;
 +
animation-duration: 4s;
 +
font-family: 'Monoton', cursive;
 +
}
 +
 
 +
 
 +
 
 +
@keyframes fade-in1{
 +
from{
 +
opacity: 0;
 +
}
 +
to{
 +
opacity:1;
 +
}
 +
}
 +
 
 +
@keyframes fade-in2{
 +
0%{
 +
opacity: 0;
 +
}
 +
30%{
 +
opacity:0;
 +
}
 +
100%{
 +
opacity: 1;
 +
}
 +
}

Revision as of 07:06, 19 June 2018

.extra_space{ display:none; }

.igem_2018_team_content .igem_2018_team_column_wrapper { 

   margin: auto;
   max-width:none;
    width: 100%;

}

.igem_2018_team_menu.displaying_menu{ display:none; }

.nymu_menu{ min-width: 1310px; width:100%; position: fixed; z-index: 1; height: 200px; }

body{ font-family: sans-serif; background-color:#F1F1F1; }

a{ text-decoration: none; }

  1. title{

display:none; }

/*for drop down function*/

.menu_item{ position: relative; bottom:25px; }

.dropdown { 

   position: relative;
   display: inline-block;

min-width:140px; width:10%; text-align:center; color:#638695; font-size: 20px; }

.dropdown:hover { /*color:#B1C4C9;*/ color: pink; }

.dropdown .submenu_item:hover{ border-style: solid; border-width: 1px; border-color: pink; }

.dropdown-content { 

   display: none;
   position: absolute;
   top:0px;
   width: 100%;
   z-index: 2;
   text-align: left;

}

.dropdown-content a .submenu_item{ color:pink; margin:15px; }

.dropdown img{ width: 50px; position: relative; top:20px; left:50px; } /*.dropdown:hover .dropdown-content { 

   display: block;

}

  • /

.dropdown-content a:hover { background-color: #ddd }

.igem_2018_team_content .igem_2018_team_column_wrapper a{ text-decoration:none; } .dropdown:hover .dropdown-content { 

   display:block;

} /* end of dropdown function*/

.cover video{ width: 80%; position: relative; top: 100px; opacity: 0.7; }

  1. coversentence1{

position: absolute; left:60%; top:75%; font-size: 280%; color:gray; animation-name:fade-in2; animation-duration: 4s; font-family: 'Monoton', cursive; }

  1. coversentence2{

position: absolute; left:60%; top:60%; font-size: 600%; color:#638695; animation-name:fade-in1; animation-duration: 4s; font-family: 'Monoton', cursive; }


@keyframes fade-in1{ from{ opacity: 0; } to{ opacity:1; } }

@keyframes fade-in2{ 0%{ opacity: 0; } 30%{ opacity:0; } 100%{ opacity: 1; } }