(40 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
− | . | + | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap'); |
− | background-color: #b1e7ef; | + | .blue_body{ |
+ | width: 100vw; | ||
+ | /*background-color: #b1e7ef;*/ | ||
+ | background: rgb(255,255,255); | ||
+ | //background: linear-gradient(180deg, rgba(177,231,239,1) 39%, rgba(50,113,246,1) 100%); | ||
} | } | ||
.overlay_container{ | .overlay_container{ | ||
Line 12: | Line 16: | ||
.wave{ | .wave{ | ||
position: absolute; | position: absolute; | ||
− | bottom: 0%; | + | bottom: -1%; |
+ | left: 0%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .island{ | ||
+ | position: absolute; | ||
+ | bottom:10%; | ||
left: 0%; | left: 0%; | ||
width: 100%; | width: 100%; | ||
Line 36: | Line 46: | ||
width: 100%; | width: 100%; | ||
position: relative; | position: relative; | ||
− | opacity:0.2; | + | background-color: rgb(255,255,255,0.0); |
+ | /*opacity:0.2;*/ | ||
} | } | ||
.td_person_table{ | .td_person_table{ | ||
position: relative; | position: relative; | ||
− | border: 5px solid #CDECA9; | + | /*border: 5px solid #CDECA9; |
− | border-radius: 50px; | + | border-radius: 50px;*/ |
} | } | ||
.person_image_div img{ | .person_image_div img{ | ||
− | border-radius: | + | border-radius: 100%; |
− | width: 100%; | + | width: 100%; |
+ | height: 100%; | ||
+ | cursor: pointer; | ||
+ | border: solid 5px #04ADD2; | ||
} | } | ||
.person_image_div{ | .person_image_div{ | ||
+ | width: 200px; | ||
+ | margin-left: 50%; | ||
+ | margin-top: 15%; | ||
+ | margin-bottom: 15%; | ||
+ | transform: translate(-50%,0%); | ||
+ | } | ||
+ | .person_name_tb{ | ||
+ | width: 100%; | ||
+ | margin-top: 5%; | ||
+ | margin-bottom: 5%; | ||
+ | |||
+ | } | ||
+ | .advisor_image_div img{ | ||
+ | border-radius: 20%; | ||
+ | width: 100%; | ||
+ | border: solid 5px #85D6A5; | ||
+ | } | ||
+ | .advisor_image_div{ | ||
+ | width: 200px; | ||
+ | margin-left: 50%; | ||
+ | margin-top: 15%; | ||
+ | margin-bottom: 15%; | ||
+ | transform: translate(-50%,0%); | ||
+ | } | ||
+ | .investigator_image_div img{ | ||
+ | border-radius: 20%; | ||
+ | width: 100%; | ||
+ | border: solid 5px #3A9300 | ||
+ | } | ||
+ | .investigator_image_div{ | ||
width: 200px; | width: 200px; | ||
margin-left: 50%; | margin-left: 50%; | ||
Line 64: | Line 108: | ||
} | } | ||
.table_title{ | .table_title{ | ||
− | color: | + | color: #45ACFF; |
font-size: 50px; | font-size: 50px; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
Line 78: | Line 122: | ||
animation-name: rise_up; | animation-name: rise_up; | ||
animation-iteration-count: infinite; | animation-iteration-count: infinite; | ||
+ | } | ||
+ | .image_slider{ | ||
+ | width:100%; | ||
+ | } | ||
+ | .image_slider img{ | ||
+ | width:60%; | ||
+ | margin-left: 50%; | ||
+ | margin-top: 10%; | ||
+ | margin-bottom: 10%; | ||
+ | transform: translate(-50%,0%); | ||
+ | } | ||
+ | .tips{ | ||
+ | display: flex; | ||
+ | transition: transform 0.6s ease-out; | ||
+ | flex-wrap: wrap; | ||
+ | width: 10%; | ||
+ | background: #FDEBC5; | ||
+ | border-radius: 2rem; | ||
+ | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | ||
+ | justify-content: center; | ||
+ | align-content: center; | ||
+ | align-items: center; | ||
+ | max-height: 45rem; | ||
+ | position: fixed; | ||
+ | top: 15%; | ||
+ | margin-left: 2rem; | ||
+ | padding: 1rem; | ||
+ | right: 26px; | ||
+ | transform: translateX(+150%) translateY(0); | ||
+ | |||
+ | } | ||
+ | .tips_hidden{ | ||
+ | transform: translateX(0%) translateY(0); | ||
+ | /*100% - .menu_lateral.height + .menu_lateral_teccem.heigh | ||
+ | 100 - 35 + 20 = 85 | ||
+ | */ | ||
} | } | ||
− | @keyframes rise_up{ | + | /*@keyframes rise_up{ |
from{ | from{ | ||
− | bottom: | + | bottom: 10%; |
} | } | ||
to{ | to{ | ||
− | bottom: | + | bottom: 80%; |
} | } | ||
− | } | + | }*/ |
</style> | </style> | ||
</html> | </html> |
Latest revision as of 01:33, 18 October 2021