Skip to content

Instantly share code, notes, and snippets.

@geminixiang
Created September 5, 2017 09:36
Show Gist options
  • Save geminixiang/8a183f9110aa0d667c9cfcda4469a1b3 to your computer and use it in GitHub Desktop.
Save geminixiang/8a183f9110aa0d667c9cfcda4469a1b3 to your computer and use it in GitHub Desktop.
<p><style type="text/css">
a.button {
padding: 9px 15px;
border: 3px solid #555;
letter-spacing: 5px;
cursor: pointer;
font-size: 1.3em;
color: #555;
background: rgba(0,0,0,0);
transition: 0.3s;
}
a.button:hover {
-moz-box-shadow: 0px 0px 5px 1px #555;
-webkit-box-shadow: 0px 0px 5px 1px #555;
box-shadow: 0px 0px 5px 1px #555;
padding: 6px 25px;
transition:0.3s;
}
.lightbox-target {
top: -100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
overflow: hidden;
}
.lightbox-target .content {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
margin: auto;
position: absolute;
overflow: hidden;
left: 0;
right: 0;
bottom: 0;
max-height: 0%;
max-width: 0%;
padding:5%;
border: 0px solid #fff;
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
-moz-transition: ease-in-out 0.5s;
-o-transition: ease-in-out 0.5s;
-webkit-transition: ease-in-out 0.5s;
transition: ease-in-out 0.5s;
}
.lightbox-target img {
margin: auto;
position: relative;
width:25%;
border: 0px solid #fff;
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
-moz-transition: ease-in-out 0.5s;
-o-transition: ease-in-out 0.5s;
-webkit-transition: ease-in-out 0.5s;
transition: ease-in-out 0.5s;
}
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target .content, .lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-close {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
background: #139dd7;
color: #fff;
position: absolute;
top:0px;
right:0px;
-moz-transition: ease-in-out 0.5s;
-o-transition: ease-in-out 0.5s;
-webkit-transition: ease-in-out 0.5s;
transition: ease-in-out 0.5s;
}
.lightbox-close:before, .lightbox-close:after {
content: " ";
display: block;
height: 30px;
width: 1px;
background: #1d0909;
position: absolute;
left: 26px;
top: 10px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.lightbox-close:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style> <style type="text/css">
.at-section__title {
margin: 0 0 70px;
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 3.5rem;
font-weight: 300;
line-height: 2.625rem;
text-align: center;
}
.at-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: #FFF;
border: 1px solid #E2E9ED;
}
.at-grid[data-column="1"] .at-column {
width: 100%;
max-width: 100%;
min-width: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.at-grid[data-column="2"] .at-column {
width: 50%;
max-width: 50%;
min-width: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.at-grid[data-column="3"] .at-column {
width: 33.33333%;
max-width: 33.33333%;
min-width: 33.33333%;
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
.at-grid[data-column="4"] .at-column {
width: 25%;
max-width: 25%;
min-width: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.at-grid[data-column="5"] .at-column {
width: 20%;
max-width: 20%;
min-width: 20%;
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
.at-grid[data-column="6"] .at-column {
width: 16.66667%;
max-width: 16.66667%;
min-width: 16.66667%;
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
}
.at-grid[data-column="7"] .at-column {
width: 14.28571%;
max-width: 14.28571%;
min-width: 14.28571%;
-ms-flex-preferred-size: 14.28571%;
flex-basis: 14.28571%;
}
.at-grid[data-column="8"] .at-column {
width: 12.5%;
max-width: 12.5%;
min-width: 12.5%;
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
}
.at-grid[data-column="9"] .at-column {
width: 11.11111%;
max-width: 11.11111%;
min-width: 11.11111%;
-ms-flex-preferred-size: 11.11111%;
flex-basis: 11.11111%;
}
.at-column {
z-index: 0;
position: relative;
background: #FFF;
box-shadow: 0 0 0 1px #E2E9ED;
padding: 10px;
box-sizing: border-box;
-webkit-transition: box-shadow 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
transition: box-shadow 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease;
transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
}
.at-column:before {
content: "";
display: block;
padding-top: 100%;
}
.at-column:hover {
z-index: 1;
box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: box-shadow 0.2s ease, z-index 0s 0s ease, -webkit-transform 0.2s ease;
transition: box-shadow 0.2s ease, z-index 0s 0s ease, -webkit-transform 0.2s ease;
transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0s ease;
transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0s ease, -webkit-transform 0.2s ease;
}
.at-column:hover .at-social {
margin: 16px 0 0;
opacity: 1;
}
@media (max-width: 800px) {
.at-column {
width: 50% !important;
max-width: 50% !important;
min-width: 50% !important;
-ms-flex-preferred-size: 50% !important;
flex-basis: 50% !important;
}
}
@media (max-width: 600px) {
.at-column {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
-ms-flex-preferred-size: 100% !important;
flex-basis: 100% !important;
}
}
.at-user {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
}
.at-user__avatar {
width: 98px;
height: 98px;
border-radius: 100%;
margin: 0 auto 20px;
overflow: hidden;
}
.at-user__avatar img {
display: block;
width: 100%;
max-width: 100%;
}
.at-user__name {
color: #313435;
font-family: 'Roboto', sans-serif;
font-size: 1.5rem;
font-weight: 500;
line-height: 2.625rem;
}
.at-user__title {
color: #6F808A;
font-family: 'Roboto', sans-serif;
font-size: 0.875rem;
line-height: 2.375rem;
}
.at-social {
margin: 0 0 -18px;
opacity: 0;
padding: 0px;
-webkit-transition: margin 0.2s ease, opacity 0.2s ease;
transition: margin 0.2s ease, opacity 0.2s ease;
}
.at-social__item {
display: inline-block;
margin: 0 10px;
}
.at-social__item a {
display: block;
}
.at-social__item svg {
fill: #515F65;
display: block;
height: 18px;
-webkit-transition: fill 0.2s ease;
transition: fill 0.2s ease;
}
.at-social__item svg:hover {
fill: #788D96;
}
body {
background: #FFF;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 1170px;
width: 100%;
margin: 100px auto;
padding: 0px;
box-sizing: border-box;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
</style></p>
<div class="container">
<div class="at-section">
<div class="at-section__title">The Team</div>
</div>
<div class="at-grid" data-column="3">
<div class="at-column">
<div class="at-user">
<div class="at-user__avatar"><img src="http://gemini.nm7.cc/wp-content/uploads/2017/07/Dr.Dean曹董.jpg" alt="" /></div>
<div class="at-user__name">Dr. Dean Tsao</div>
<div class="at-user__title">Chairman &amp; Chief Executive Officer</div>
<ul class="at-social"><section><a href="#Dr.Dean-Tsao" class="button">MORE</a></section></ul>
</div>
</div>
<div class="at-column">
<div class="at-user">
<div class="at-user__avatar"><img src="http://gemini.nm7.cc/wp-content/uploads/2017/07/Dr.-C.S.Huang黃博1.jpg" alt="" /></div>
<div class="at-user__name">Dr. Chin-Shiou Huang</div>
<div class="at-user__title">Vice President &amp; Chief Technology Officer</div>
<ul class="at-social"><section><a href="#Dr.Chin-Shiou-Huang" class="button">MORE</a></section></ul>
</div>
</div>
<div class="at-column">
<div class="at-user">
<div class="at-user__avatar"><img src="../../upload/image/Management Team/Dr.StuartPalmer.jpg" alt="" /></div>
<div class="at-user__name">Dr. Stuart M. Palmer</div>
<div class="at-user__title">Chief Operating Officer</div>
<ul class="at-social"><section><a href="#Dr.Stuart-M.-Palmer" class="button">MORE</a></section></ul>
</div>
</div>
<div class="at-column">
<div class="at-user">
<div class="at-user__avatar"><img src="../../upload/image/Management Team/Ms.LipiYeh.jpg" alt="" /></div>
<div class="at-user__name">Ms. Lipi Yeh</div>
<div class="at-user__title">Chief Financial Officer</div>
<ul class="at-social"><section><a href="#Ms.Lipi-Yeh" class="button">MORE</a></section></ul>
</div>
</div>
<div class="at-column">
<div class="at-user">
<div class="at-user__avatar"><img src="http://www.freeiconspng.com/uploads/person-icon-5.png" alt="" /></div>
<div class="at-user__name">Mr. Willie Koh</div>
<div class="at-user__title">Director, International Sales and Marketing (APAC/ME)</div>
<ul class="at-social"><section><a href="#Mr.Willie-Koh" class="button">MORE</a></section></ul>
</div>
</div>
<div class="at-column">
<div class="at-user">
<div class="at-user__avatar"><img src="http://www.freeiconspng.com/uploads/person-icon-5.png" alt="" /></div>
<div class="at-user__name">Mr. Aidan Coe</div>
<div class="at-user__title">Director, International Sales and Marketing (EU/NA)</div>
<ul class="at-social"><section><a href="#Mr.Aidan-Coe" class="button">MORE</a></section></ul>
</div>
</div>
</div>
</div>
<div class="lightbox-target" id="Dr.Dean-Tsao">
<div class="content"><div style="width:100%;text-align:center;"><img src="http://gemini.nm7.cc/wp-content/uploads/2017/07/Dr.Dean曹董.jpg" alt="" /></div>
<h3 style="color:#4d6fd2;">Professional Experiences</h3>
<p style="font-size:14px;list-style:none;">Dr. Tsao has over 30 years of extensive experience in the IVD industry. He is an accomplished scientist and a successful serial entrepreneur with an excellent track record of launching and leading new companies to grow into successful businesses. The companies he has established have developed thousands of products that are currently being used in the diagnosis and research of cancer, HIV, Down syndrome, and numerous other medical conditions. He received his Ph.D. in Biochemistry from Colorado State University.</p>
</div>
<a class="lightbox-close" href="#"></a>
</div>
<div class="lightbox-target" id="Dr.Chin-Shiou-Huang">
<div class="content"><div style="width:100%;text-align:center;""><img src="http://gemini.nm7.cc/wp-content/uploads/2017/07/Dr.-C.S.Huang黃博1.jpg" alt=""/></div>
<h3 style="color:#4d6fd2;">Professional Experiences</h3>
<p style="font-size:14px;list-style:none;">Dr. Huang has over 20 years of research experience in areas related to biotechnology. In 1999, he invented an artificial antibody fabrication technology and co-founded Aspira Biosystems. Dr. Huang led an advanced research team that applied the a-state-of-the-art artificial antibody technology to protein capture mechanism in many platforms, such as sequence-specific protein capture beads and protein capture array chips. Aspira was funded by Alloy Ventures and later acquired by Nanomune Inc. He received his Ph.D. in Biochemistry and Molecular Biology from Cornell University.</p>
</div>
<a class="lightbox-close" href="#"></a>
</div>
<div class="lightbox-target" id="Dr.Stuart-M.-Palmer">
<div class="content"><div style="width:100%;text-align:center;"><img src="../../upload/image/Management Team/Dr.StuartPalmer.jpg" alt="" /></div>
<h3 style="color:#4d6fd2;">Professional Experiences</h3>
<p style="font-size:14px;list-style:none;">Dr. Palmer has over 30 years of scientific and executive management experience in biotechnology operations and in vitro diagnostic assay development. Prior to joining PlexBio Co., Ltd., he was the Vice President of Technical Operations for Roche Molecular System, Inc., a subsidiary of Hoffmann-La Roche, Inc. and held various positions of increasing responsibility at Abbott Diagnostics, a division of Abbott Laboratories. Dr. Palmer is also the founder and Principal Consultant of BioConsulting International, LLC. Dr. Palmer received his Ph.D. in Microbiology, a Joint Degree from Rutgers University and the University of Medicine and Dentistry of New Jersey.</p>
</div>
<a class="lightbox-close" href="#"></a>
</div>
<div class="lightbox-target" id="Ms.Lipi-Yeh">
<div class="content"><div style="width:100%;text-align:center;"><img src="../../upload/image/Management Team/Ms.LipiYeh.jpg" alt="" /></div>
<h3 style="color:#4d6fd2;">Professional Experiences</h3>
<p style="font-size:14px;list-style:none;">Ms. Yeh has over 28 years of experience in finance and operations management working for several large multi-national companies. Prior to joining PlexBio, Co. Ltd. she was Chief Operating Officer at Precious Mountain Ent. Corp., one of the largest manufacturers of PVC gloves. Earlier, Ms. Yeh was CFO at Howteh Technology Co., Ltd. where she also held senior executive positions leading sales and finance teams within the company. She is a graduate of Providence University (Taiwan).</p>
</div>
<a class="lightbox-close" href="#"></a>
</div>
<div class="lightbox-target" id="Mr.Willie-Koh">
<div class="content"><div style="width:100%;text-align:center;"><img src="http://www.freeiconspng.com/uploads/person-icon-5.png" alt="" /></div>
<h3 style="color:#4d6fd2;">Professional Experiences</h3>
<p style="font-size:14px;list-style:none;">Mr. Koh has over 15 years of sales experience in medical and other technology sectors. Prior to joining PlexBio Co., Ltd. he was the lead sales manager for Lite-On Technology Corp., a leading supplier of IVD equipment in the Middle East and Asian markets. Previously Mr. Koh held various sales positions for large companies leading sales and marketing teams to achieve strategic goals and develop new business across Asia and Middle East markets. He is a graduate of the Japan Singapore Technical Institute.</p>
</div>
<a class="lightbox-close" href="#"></a>
</div>
<div class="lightbox-target" id="Mr.Aidan-Coe">
<div class="content"><div style="width:100%;text-align:center;"><img src="http://www.freeiconspng.com/uploads/person-icon-5.png" alt="" /></div>
<h3 style="color:#4d6fd2;">Professional Experiences</h3>
<p style="font-size:14px;list-style:none;">Mr. Coe has over 10 years of sales experience in various technology and consumer sectors. Prior to joining PlexBio Co., Ltd. he was a lead sales manager for Techtronic Industries in North America where he consistently delivered on aggressive growth goals while taking on several roles of increasing responsibility. Mr. Coe is a Business Administration and International Marketing graduate of the University of California (Riverside).</p>
</div>
<a class="lightbox-close" href="#"></a>
</div>
<!--add by gemini | source code https://codepen.io/andytran/pen/BKOOQy -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment