<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="main z-depth-3">
<center>
<p class="head">MEET OUR TEAM</p>
</center><br>
<div class="row light-blue lighten-5 z-depth-4">
<div class="col-sm-3">
<img class="circle" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561047952/men-testicular-cancer-670x402.jpg">
</div>
<div class="col-sm-9">
<p class="name">David Samson <i class="fa fa-twitter"></i> <i class="fa fa-linkedin"></i></p>
<p class="post"><b>Chief Technical Officer</b></p>
<p>Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class</p>
</div>
</div><br>
<div class="row red lighten-5 z-depth-4">
<div class="col-sm-3">
<img class="circle" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561047985/images.jpg">
</div>
<div class="col-sm-9">
<p class="name">Iggy Azelea <i class="fa fa-twitter"></i> <i class="fa fa-linkedin"></i></p>
<p class="post"><b>Human Resources Manager</b></p>
<p>Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class</p>
</div>
</div><br>
<div class="row yellow lighten-5 z-depth-4">
<div class="col-sm-3">
<img class="circle" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561048025/images.jpg">
</div>
<div class="col-sm-9">
<p class="name">Mark Rosio <i class="fa fa-twitter"></i> <i class="fa fa-linkedin"></i></p>
<p class="post"><b>Experienced Developer</b></p>
<p>Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class</p>
</div>
</div>
</div>
.main {
width: 50vw;
height: auto;
margin: auto;
background-color: white;
position: relative;
top: 5vh;
padding: 1vw;
border-radius: 0vw
}
body {
background-color: #000;
font-family: 'Saira Semi Condensed', sans-serif
}
.circle {
width: 8vw;
height: 8vw
}
.head {
font-size: 2vw;
font-family: 'Saira Semi Condensed', sans-serif
}
.name {
font-size: 1.3vw
}
.post {
font-size: 1.5vw
}
.fa {
color: #039be5
}
.row {
padding-top: 1vw
}
@media only screen and (max-width: 425px) {
.main {
width: 90vw;
height: 300vw
}
.circle {
width: 24vw;
height: 24vw
}
.name {
position: relative;
top: 2vw;
font-size: 5vw
}
.post {
font-size: 6vw
}
.head {
font-size: 8vw
}
}