Files
phaten-audio/en/material/overrides/work-with-us/team.html
PhatenIoT-yan 3a5820f4e9 添加en和zh
2025-05-14 15:25:41 +08:00

480 lines
15 KiB
HTML

{% extends "overrides/main-styles.html" %}
<!-- Render hero under tabs -->
{% block tabs %}
{{ super() }}
<!-- Team Section Style -->
<style>
*{
box-sizing: border-box
}
body{
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: 100;
color: #777;
}
.container-testimonial{
background: rgb(237, 239, 240);
height: 30vh;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
margin-left: 150px;
margin-right: 150px;
}
.testimonial-header{
margin-top: 50px;
margin-bottom: 30px;
border-radius: 10px;
position: center;
justify-content:center;
font-size: 42px;
color: #2a978d;
}
.testimonial-card{
min-height: 300px;
width: 350px;
background-color: white;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0,0,0,.3);
display: flex;
flex-flow: column;
justify-content:space-between;
margin-left: 10px;
}
.text{
padding: 2em;
line-height: 1.7em;
position: relative;
font-size: 14px;
color: #181917;
margin-bottom: 50px;
}
.image{
background-color:tomato;
height: 140px;
width: 140px;
border-radius: 50%;
border: 5px solid white;
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
display:flex;
justify-content:center;
}
.footer{
background: linear-gradient(90deg, #181917 0%, #2a978d 100%);
height: 185px;
border-radius: 0 0 10px 10px;
position:relative;
}
.quote{
font-size: 400%;
float: right;
opacity: .1;
transform: rotate(10deg) translate(-10px, -40px);
color:#4D3FA3;
}
.person{
color:white;
position: absolute;
margin-top: 0px;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
font-size: 0.9rem;
font-weight: 550;
}
.person-title{
color:white;
position: absolute;
margin-top: 10px;
top: 90%;
left: 50%;
transform: translate(-50%, -100%);
font-size:0.65rem;
font-weight: 300;
}
@media screen and (max-width: 30em) {
.container-testimonial{
background: rgb(237, 239, 240);
height: 50vh;
display: table;
align-items: center;
justify-content: left;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 5px;
}
.testimonial-card {
min-height: 250px;
width: 350px;
background-color: white;
border-radius: 10px;
box-shadow: 0 8px 30px rgb(0 0 0 / 30%);
display: flex;
flex-flow: column;
justify-content: space-between;
margin-left: 10px;
margin-bottom: 5px;
}
.testimonial-header{
margin-top: 50px;
margin-bottom: 30px;
border-radius: 10px;
position: center;
justify-content:center;
font-size: 24px;
color: #2a978d;
}
.footer{
background: linear-gradient(90deg, #181917 0%, #2a978d 100%);
height: 165px;
border-radius: 0 0 10px 10px;
position:relative;
}
}
@media only screen and (min-width: 481px) and (max-width: 1600px) {
.container-testimonial{
background: rgb(237, 239, 240);
height: 30vh;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 80px;
margin-left: 150px;
margin-right: 150px;
}
}
</style>
<!-- 1st Section -->
<!-- BRAINTRUST AGENCY -->
<section class="tx-container-2">
<div class="md-grid md-typeset">
<div class="tx-hero__image-2">
<img
src="../../assets/images/logos/binbash-braintrust.png"
alt=""
width="800"
draggable="false"
align="left"
>
</div>
<div class="tx-hero">
<!-- Hero content -->
<div class="tx-hero__content-2">
<h1 id="braintrust-agency">Braintrust Agency</h1>
<p><br>
Find us at <b>Braintrust</b> talent platform<br>
<i>"Creating the future of work, to benefit enterprise and talent alike".</i>
</p>
<a
href="https://app.usebraintrust.com/agency/432/"
title="{{ page.next_page.title | e }}"
class="md-button md-button"
>
Hire us at Braintrust
</a>
</div>
</div>
</div>
</section>
<!-- 2nd Section -->
<!-- TEAM -->
<section class="tx-container-testimonial">
<div>
<!-- Titulo -->
<h1 class=testimonial-header id="testimonials" style="text-align: center">
Meet our Team
</h1>
</div>
<div class="container-testimonial">
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/marcos.pagnucco.bwc.png);">
</div>
<h3 class='person'>
Marcos Pagnucco
</h3>
<h5 class='person-title' style="text-align:center;">Co-Founder & DevOps Cloud Engineer<br>
<a href="https://www.linkedin.com/in/pagnucco/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/exequiel.barrirero.bwc.png);">
</div>
<h3 class='person'>
Exequiel Barrirero
</h3>
<h5 class='person-title' style="text-align:center;">Co-Founder & DevOps Cloud Engineer<br>
<a href="https://www.linkedin.com/in/barrireroexequiel/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/diego.ojeda.bwc.png);">
</div>
<h3 class='person'>
Diego A. Ojeda
</h3>
<h5 class='person-title' style="text-align:center;">DevOps Cloud Solutions Consultant<br>
<a href="https://www.linkedin.com/in/diegoaojeda/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/carolina.rey.bwc.png);">
</div>
<h3 class='person'>
Carolina Rey
</h3>
<h5 class='person-title' style="text-align:center;">Emotional Intelligence Coach<br>
<a href="https://www.linkedin.com/in/caroreyp/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
</div>
<div class="container-testimonial">
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/marcelo.beresvil.bwc.png);">
</div>
<h3 class='person'>
Marcelo Beresvil
</h3>
<h5 class='person-title' style="text-align:center;">CFO & BizDev Manager<br>
<a href="https://www.linkedin.com/in/marceloberesvil/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/luis.gallardo.bwc.png);">
</div>
<h3 class='person'>
Luis Gallardo
</h3>
<h5 class='person-title' style="text-align:center;">Cloud Solutions Architect<br>
<a href="https://www.linkedin.com/in/lgallard/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/angelo.fenoglio.bwc.png);">
</div>
<h3 class='person'>
Angelo Fenoglio
</h3>
<h5 class='person-title' style="text-align:center;">Software Engineer / DevOps Engineer<br>
<a href="https://www.linkedin.com/in/angelofenoglio/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/patricia.charlier.bwc.png);">
</div>
<h3 class='person'>
Patricia Charlier
</h3>
<h5 class='person-title' style="text-align:center;">Project Manager<br>
<a href="https://www.linkedin.com/in/patricia-charlier-653bb23b/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
</div>
<div class="container-testimonial">
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/matias.rodriguez.bwc.png);">
</div>
<h3 class='person'>
Matías Rodriguez
</h3>
<h5 class='person-title' style="text-align:center;">OSS Developer<br>
<a href="https://www.linkedin.com/in/rodriguezmatias/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
<div class="testimonial-card">
<div>
</div>
<div class="footer">
<div class="image" style=" background:no-repeat center/cover url(../../assets/images/team/alejandro.parise.bwc.png);">
</div>
<h3 class='person'>
Alejandro Parise
</h3>
<h5 class='person-title' style="text-align:center;">Business Advisor<br>
<a href="https://www.linkedin.com/in/aleparise/" style="color: aquamarine">
<img
class = icon
src="../../assets/images/logos/linkedin.png"
alt=""
width="20"
draggable="false"
>
LinkedIn</a><br>
</h5>
</div>
</div>
</div>
</section>
<!-- CERTS & APN -->
<section class="tx-container-3">
<div class="md-grid md-typeset">
<div class="tx-hero">
<!-- Hero image -->
<div class="tx-hero__image-4">
<img
src="../../assets/images/illustrations/home-section-7.png"
alt=""
width="800"
draggable="false"
>
</div>
</div>
</div>
</section>
{% endblock %}