Team Slider Style 7

Date: August 25, 2023
Developed By: Alister Carvalho

DEBJANI CHOWDHURY

Founder

An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.

View Source

HTML

<section>
<div class="ot-container"> 
	<div class="ot-row">
		<div class="ot-column">
			<div class="ot-column-1">
				<div class="ot-element"></div>
				<div class="ot-element-1"></div>
				<div class="ot-img">
					<img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Debjani1-248x300.png">
				</div>
				<div class="ot-icon"><img src="https://nuitwebtek.com/wp-content/uploads/2023/08/linkedin.png"></div>
				<div class="ot-element-2"><img src="https://nuitwebtek.com/wp-content/uploads/2023/08/dots.png"></div>
			</div>
			<div class="ot-column-2">
				<div class="box">
					<div class="title"><h2>DEBJANI CHOWDHURY</h2></div>
					<div class="desig"><p>Founder</p></div>
					<div class="content"><p>An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.</p></div>
				</div>
				<div class="ot-button">
					<button>Read More</button>
				</div>
			</div>
		</div>
	</div>
</div>
</section>

CSS

body{
font-family: 'Poppins', sans-serif !important;
}
p{
	margin: 0px;
}
h2{
	margin: 0px;
}
.ot-container{
	margin: 100px 100px;
}
.ot-row{
	padding: 0px 250px;
}
.ot-column{
	margin: auto;
	display: flex;
	width: 100%;
}
.ot-icon img{
width: 75px;
height: 75px;
position: absolute;
bottom: 18px;
left: 10px;
z-index: 5;
}
.ot-img img{
 width: 100%;
 border-radius: 40px;
 position: relative;
 z-index: 4;
}
.ot-column-1{
width: 50%;
position: relative;
}
.ot-column-2{
width: 50%;
}
.ot-element{
	content: '';
	background-color: white;
	height: 100%;
	width: 100%;
	border-radius: 40px;
	z-index: 2;
	position: absolute;
	top: -10px;
	left: -10px;
}
.ot-element-1{
	content: '';
	background-color: #006900;;
	height: 100%;
	width: 100%;
	border-radius: 40px;
	z-index: 1;
	position: absolute;
	top: -20px;
	left: -20px;
}

.ot-element-2 img{
	position: absolute;
	bottom: -10px;
	right: 20px;
	z-index: 5;
}
.ot-column-2{
	position: relative;
}
.ot-column-2 .box{
position: absolute;
border-radius: 32px;
background: #365341;
height: 70%;
padding: 15px 20px 0px 50px;
left: -31px;
top: 38px;
}
.ot-column-2 .box .title{
color: #FFF;
font-family: 'Bebas Neue', sans-serif !important;
font-size: 35px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding: 10px 0px;
}
.ot-column-2 .box .desig{
	color: #74A563;
font-size: 27.022px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding: 5px 0px;
}
.ot-column-2 .box .desig:after{
content: '';
position: absolute;
background: #74A563;
width: 110px;
height: 2px;
flex-shrink: 0;
}

.ot-column-2 .box .content{
	color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: normal;
padding: 10px 0px;
}
.ot-button{
	display: flex;
	justify-content: right;
	position: absolute;
    bottom: 17px;
    right: 0px;
}
.ot-button button{
	border-radius: 15px;
background: #365341;
padding: 10px 30px;
color: #FFF;
font-size: 20.267px;
font-style: normal;
font-weight: 600;
line-height: normal;
transition: 0.4s;
}
.ot-button button:hover{
scale: 1.1;
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
    .ot-column{
	   margin: auto;
	   display: block;
	   width: 100%;
    }
    .ot-column-1{
width: 100%;
position: relative;
}
.ot-column-2{
width: 100%;
}
.ot-container{
	margin: 49px 30px;
}
.ot-row{
	padding: 0px 10px;
}
.ot-icon img{
width: 50px;
height: 50px;
}
.ot-element-2 img{
width: 29%;
}
.ot-column-2 .box{
position: relative;
height: 70%;
padding: 15px 10px;
left: 0px;
top: -21px;
}
.ot-element{
	left: 0px;
}
.ot-element-1{
	left: 0px;
}
.ot-button{
	bottom: 0px;
	position: relative;
	justify-content: center;
}
.ot-column-2 .box{
	left: 0px;
    top: -21px;
}
.ot-column-2 .box .title {
    font-size: 20px;
}
.ot-column-2 .box .desig {
    font-size: 20.022px;
}
.ot-column-2 .box .content {
    font-size: 15px;
}
.ot-button button{
padding: 7px 24px;
font-size: 16px;
}
}
          
 
@media (min-width: 481px) and (max-width: 1024px) {
   .ot-row {
    padding: 0px 29px;
}
 .ot-container {
    margin: 119px 10px;
}
.ot-column-2 .box .title{
	font-size: 29px;
}
.ot-column-2 .box .desig{
 font-size: 25.022px;
}      
.ot-column-2 .box .content{
font-size: 17px;	
}
}

Links

<!--fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;600&display=swap" rel="stylesheet">