Difference between revisions of "Template:KUAS Korea/Team/Team"

(Created page with "<html> <style> #services { background: #f6f8f1; background-size: cover; padding: 60px 0 40px 0; } #services .box { margin-bottom: 30px; } #services .icon { float:...")
 
(Undo revision 83005 by Garten Choi (talk))
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
#services {
 
−
  background: #f6f8f1;
 
−
  background-size: cover;
 
−
  padding: 60px 0 40px 0;
 
−
}
 
  
−
#services .box {
+
    /* Testimonials Section
−
  margin-bottom: 30px;
+
    --------------------------------*/
−
}
+
    #testimonials {
 +
        padding: 60px 0;
 +
    }
  
−
#services .icon {
+
    #testimonials .section-header {
−
  float: left;
+
        margin-bottom: 40px;
−
}
+
    }
  
−
#services .icon i {
+
    #testimonials .testimonial-item {
−
  color: #a54040;
+
        text-align: center;
−
  font-size: 36px;
+
    }
−
  line-height: 1;
+
−
  transition: 0.5s;
+
−
}
+
  
−
#services .title {
+
    #testimonials .testimonial-item .testimonial-img {
−
  margin-left: 60px;
+
        width: 120px;
−
  font-weight: 700;
+
        border-radius: 50%;
−
  margin-bottom: 15px;
+
        border: 4px solid #f6f8f1;
−
  font-size: 18px;
+
        margin: 0 auto;
−
}
+
    }
  
−
#services .title a {
+
    #testimonials .testimonial-item h3 {
−
  color: #28272c;
+
        font-size: 20px;
−
}
+
        font-weight: bold;
 +
        margin: 10px 0 5px 0;
 +
        color: #28272c;
 +
    }
  
−
#services .box:hover .title a {
+
    #testimonials .testimonial-item h4 {
−
  color: #a54040;
+
        font-size: 14px;
−
}
+
        color: #c2bcb9;
 +
        margin: 0 0 15px 0;
 +
    }
  
−
#services .description {
+
    #testimonials .testimonial-item .quote-sign-left {
−
  font-size: 14px;
+
        margin-top: -15px;
−
  margin-left: 60px;
+
        padding-right: 10px;
−
  line-height: 24px;
+
        display: inline-block;
−
  margin-bottom: 0;
+
        width: 37px;
−
}
+
    }
  
−
#facts {
+
    #testimonials .testimonial-item .quote-sign-right {
−
  background: url("/template/img/facts-bg.jpg") center top no-repeat fixed;
+
        margin-bottom: -15px;
−
  background-size: cover;
+
        padding-left: 10px;
−
  padding: 60px 0 0 0;
+
        display: inline-block;
−
  position: relative;
+
        max-width: 100%;
−
}
+
        width: 37px;
 +
    }
  
−
#facts::before {
+
    #testimonials .testimonial-item p {
−
  content: '';
+
        font-style: italic;
−
  position: absolute;
+
        margin: 0 auto 15px auto;
−
  left: 0;
+
    }
−
  right: 0;
+
−
  top: 0;
+
−
  bottom: 0;
+
−
  background: rgba(255, 255, 255, 0.88);
+
−
  z-index: 9;
+
−
}
+
  
−
#facts .container {
+
    @media (min-width: 992px) {
−
  position: relative;
+
        #testimonials .testimonial-item p {
−
  z-index: 10;
+
            width: 80%;
−
}
+
        }
 +
    }
  
−
#facts .counters span {
+
    #testimonials .owl-nav, #testimonials .owl-dots {
−
  font-family: "Montserrat", sans-serif;
+
        margin-top: 5px;
−
  font-weight: bold;
+
        text-align: center;
−
  font-size: 48px;
+
    }
−
  display: block;
+
−
  color: #a54040;
+
−
}
+
  
−
#facts .counters p {
+
    #testimonials .owl-dot {
−
  padding: 0;
+
        display: inline-block;
−
  margin: 0 0 20px 0;
+
        margin: 0 5px;
−
  font-family: "Montserrat", sans-serif;
+
        width: 12px;
−
  font-size: 14px;
+
        height: 12px;
−
  color: #28272c;
+
        border-radius: 50%;
−
}
+
        background-color: #c2bcb9;
 +
    }
  
−
#facts .facts-img {
+
    #testimonials .owl-dot.active {
−
  text-align: center;
+
        background-color: #a54040;
−
  padding-top: 30px;
+
    }
−
}
+
  
−
#portfolio {
+
    /* Team Section
−
  padding: 60px 0;
+
    --------------------------------*/
−
}
+
    #team {
 +
        background: #f6f8f1;
 +
        padding: 60px 0;
 +
    }
  
−
#portfolio #portfolio-flters {
+
    #team .member {
−
  padding: 0;
+
        text-align: center;
−
  margin: 5px 0 35px 0;
+
        margin-bottom: 20px;
−
  list-style: none;
+
        background: #f6f8f1;
−
  text-align: center;
+
        position: relative;
−
}
+
    }
  
−
#portfolio #portfolio-flters li {
+
    #team .member .member-info {
−
  cursor: pointer;
+
        opacity: 0;
−
  margin: 15px 15px 15px 0;
+
        display: flex;
−
  display: inline-block;
+
        justify-content: center;
−
  padding: 10px 20px;
+
        align-items: center;
−
  font-size: 12px;
+
        position: absolute;
−
  line-height: 20px;
+
        bottom: 0;
−
  color: #582d32;
+
        top: 0;
−
  border-radius: 4px;
+
        left: 0;
−
  text-transform: uppercase;
+
        right: 0;
−
  background: #f6f8f1;
+
        transition: 0.2s;
−
  margin-bottom: 5px;
+
    }
−
  transition: all 0.3s ease-in-out;
+
−
}
+
  
−
#portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active {
+
    #team .member .member-info-content {
−
  background: #a54040;
+
        margin-top: -50px;
−
  color: #f6f8f1;
+
        transition: margin 0.2s;
−
}
+
    }
  
−
#portfolio #portfolio-flters li:last-child {
+
    #team .member:hover .member-info {
−
  margin-right: 0;
+
        background: rgba(0, 0, 0, 0.7);
−
}
+
        opacity: 1;
 +
        transition: 0.4s;
 +
    }
  
−
#portfolio .portfolio-wrap {
+
    #team .member:hover .member-info-content {
−
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
+
        margin-top: 0;
−
  transition: 0.3s;
+
        transition: margin 0.4s;
−
}
+
    }
  
−
#portfolio .portfolio-wrap:hover {
+
    #team .member h4 {
−
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
+
        font-weight: 700;
−
}
+
        margin-bottom: 2px;
 +
        font-size: 18px;
 +
        color: #f6f8f1;
 +
    }
  
−
#portfolio .portfolio-item {
+
    #team .member span {
−
  position: relative;
+
        font-style: italic;
−
  height: 360px;
+
        display: block;
−
  overflow: hidden;
+
        font-size: 14px;
−
}
+
        color: #f6f8f1;
 +
    }
 +
    #team .member p {
 +
        display: block;
 +
        margin-top:20px;
 +
        font-size: 13px;
 +
        color: #f6f8f1;
 +
    }
  
−
#portfolio .portfolio-item figure {
+
    #team .member .social {
−
  background: #28272c;
+
        margin-top: 15px;
−
  overflow: hidden;
+
    }
−
  height: 240px;
+
−
  position: relative;
+
−
  border-radius: 4px 4px 0 0;
+
−
  margin: 0;
+
−
}
+
  
−
#portfolio .portfolio-item figure:hover img {
+
    #team .member .social a {
−
  opacity: 0.4;
+
        transition: none;
−
  transition: 0.3s;
+
        color: #f6f8f1;
−
}
+
    }
  
−
#portfolio .portfolio-item figure .link-preview, #portfolio .portfolio-item figure .link-details {
+
    #team .member .social a:hover {
−
  position: absolute;
+
        color: #a54040;
−
  display: inline-block;
+
    }
−
  opacity: 0;
+
−
  line-height: 1;
+
−
  text-align: center;
+
−
  width: 36px;
+
−
  height: 36px;
+
−
  background: #f6f8f1;
+
−
  border-radius: 50%;
+
−
  transition: 0.2s linear;
+
−
}
+
  
−
#portfolio .portfolio-item figure .link-preview i, #portfolio .portfolio-item figure .link-details i {
+
     #team .member .social i {
−
  padding-top: 6px;
+
        font-size: 18px;
−
  font-size: 22px;
+
        margin: 0 2px;
−
  color: #28272c;
+
    }
−
}
+
−
 
+
−
#portfolio .portfolio-item figure .link-preview:hover, #portfolio .portfolio-item figure .link-details:hover {
+
−
  background: #a54040;
+
−
}
+
−
 
+
−
#portfolio .portfolio-item figure .link-preview:hover i, #portfolio .portfolio-item figure .link-details:hover i {
+
−
  color: #f6f8f1;
+
−
}
+
−
 
+
−
#portfolio .portfolio-item figure .link-preview {
+
−
  left: calc(50% - 38px);
+
−
  top: calc(50% - 18px);
+
−
}
+
−
 
+
−
#portfolio .portfolio-item figure .link-details {
+
−
  right: calc(50% - 38px);
+
−
  top: calc(50% - 18px);
+
−
}
+
−
 
+
−
#portfolio .portfolio-item figure:hover .link-preview {
+
−
  opacity: 1;
+
−
  left: calc(50% - 44px);
+
−
}
+
−
 
+
−
#portfolio .portfolio-item figure:hover .link-details {
+
−
  opacity: 1;
+
−
  right: calc(50% - 44px);
+
−
}
+
−
 
+
−
#portfolio .portfolio-item .portfolio-info {
+
−
  background: #f6f8f1;
+
−
  text-align: center;
+
−
  padding: 30px;
+
−
  height: 90px;
+
−
  border-radius: 0 0 3px 3px;
+
−
}
+
−
 
+
−
#portfolio .portfolio-item .portfolio-info h4 {
+
−
  font-size: 18px;
+
−
  line-height: 1px;
+
−
  font-weight: 700;
+
−
  margin-bottom: 18px;
+
−
  padding-bottom: 0;
+
−
}
+
−
 
+
−
#portfolio .portfolio-item .portfolio-info h4 a {
+
−
  color: #28272c;
+
−
}
+
−
 
+
−
#portfolio .portfolio-item .portfolio-info h4 a:hover {
+
−
  color: #a54040;
+
−
}
+
−
 
+
−
#portfolio .portfolio-item .portfolio-info p {
+
−
  padding: 0;
+
−
  margin: 0;
+
−
  color: #c2bcb9;
+
−
  font-weight: 500;
+
−
  font-size: 14px;
+
−
  text-transform: uppercase;
+
−
}
+
−
 
+
−
/* Testimonials Section
+
−
--------------------------------*/
+
−
#testimonials {
+
−
  padding: 60px 0;
+
−
}
+
−
 
+
−
#testimonials .section-header {
+
−
  margin-bottom: 40px;
+
−
}
+
−
 
+
−
#testimonials .testimonial-item {
+
−
  text-align: center;
+
−
}
+
−
 
+
−
#testimonials .testimonial-item .testimonial-img {
+
−
  width: 120px;
+
−
  border-radius: 50%;
+
−
  border: 4px solid #f6f8f1;
+
−
  margin: 0 auto;
+
−
}
+
−
 
+
−
#testimonials .testimonial-item h3 {
+
−
  font-size: 20px;
+
−
  font-weight: bold;
+
−
  margin: 10px 0 5px 0;
+
−
  color: #28272c;
+
−
}
+
−
 
+
−
#testimonials .testimonial-item h4 {
+
−
  font-size: 14px;
+
−
  color: #c2bcb9;
+
−
  margin: 0 0 15px 0;
+
−
}
+
−
 
+
−
#testimonials .testimonial-item .quote-sign-left {
+
−
  margin-top: -15px;
+
−
  padding-right: 10px;
+
−
  display: inline-block;
+
−
  width: 37px;
+
−
}
+
−
 
+
−
#testimonials .testimonial-item .quote-sign-right {
+
−
  margin-bottom: -15px;
+
−
  padding-left: 10px;
+
−
  display: inline-block;
+
−
  max-width: 100%;
+
−
  width: 37px;
+
−
}
+
−
 
+
−
#testimonials .testimonial-item p {
+
−
  font-style: italic;
+
−
  margin: 0 auto 15px auto;
+
−
}
+
−
 
+
−
@media (min-width: 992px) {
+
−
  #testimonials .testimonial-item p {
+
−
     width: 80%;
+
−
  }
+
−
}
+
−
 
+
−
#testimonials .owl-nav, #testimonials .owl-dots {
+
−
  margin-top: 5px;
+
−
  text-align: center;
+
−
}
+
−
 
+
−
#testimonials .owl-dot {
+
−
  display: inline-block;
+
−
  margin: 0 5px;
+
−
  width: 12px;
+
−
  height: 12px;
+
−
  border-radius: 50%;
+
−
  background-color: #c2bcb9;
+
−
}
+
−
 
+
−
#testimonials .owl-dot.active {
+
−
  background-color: #a54040;
+
−
}
+
−
 
+
−
/* Team Section
+
−
--------------------------------*/
+
−
#team {
+
−
  background: #f6f8f1;
+
−
  padding: 60px 0;
+
−
}
+
−
 
+
−
#team .member {
+
−
  text-align: center;
+
−
  margin-bottom: 20px;
+
−
  background: #f6f8f1;
+
−
  position: relative;
+
−
}
+
−
 
+
−
#team .member .member-info {
+
−
  opacity: 0;
+
−
  display: flex;
+
−
  justify-content: center;
+
−
  align-items: center;
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  top: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  transition: 0.2s;
+
−
    margin-bottom:24px;
+
−
}
+
−
 
+
−
#team .member .member-info-content {
+
−
  margin-top: -50px;
+
−
  transition: margin 0.2s;
+
−
}
+
−
 
+
−
#team .member:hover .member-info {
+
−
  background: rgba(0, 0, 0, 0.7);
+
−
  opacity: 1;
+
−
  transition: 0.4s;
+
−
}
+
−
 
+
−
#team .member:hover .member-info-content {
+
−
  margin-top: 0;
+
−
  transition: margin 0.4s;
+
−
}
+
−
 
+
−
#team .member h4 {
+
−
  font-weight: 700;
+
−
  margin-bottom: 2px;
+
−
  font-size: 18px;
+
−
  color: #f6f8f1;
+
−
}
+
−
 
+
−
#team .member span {
+
−
  font-style: italic;
+
−
  display: block;
+
−
  font-size: 13px;
+
−
  color: #f6f8f1;
+
−
}
+
−
 
+
−
#team .member .social {
+
−
  margin-top: 15px;
+
−
}
+
−
 
+
−
#team .member .social a {
+
−
  transition: none;
+
−
  color: #f6f8f1;
+
−
}
+
−
 
+
−
#team .member .social a:hover {
+
−
  color: #a54040;
+
−
}
+
−
 
+
−
#team .member .social i {
+
−
  font-size: 18px;
+
−
  margin: 0 2px;
+
−
}
+
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 15:52, 5 August 2018