Quay lại

Yêu cầu

Bootraps 4.5 Jquery

What Clients Say About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

01

Consumer Analyst

Why I say old chap that is spiffing barney, nancy boy bleeder chimney pot Richard cheers the little rotter so I said

02

Marketing Analyst

Why I say old chap that is spiffing barney, nancy boy bleeder chimney pot Richard cheers the little rotter so I said

03

Sales Analyst

Why I say old chap that is spiffing barney, nancy boy bleeder chimney pot Richard cheers the little rotter so I said

...
<div class="section1">
    <div class="card">
<img src="https://i.ibb.co/MfkDg6r/06.png" style="width:100px;" alt="">
<span class="tag">01</span>
<h1>Consumer Analyst</h1>
<p>Why I say old chap that is spiffing barney, nancy boy bleeder chimney pot Richard cheers the little rotter so I said</p>
</div>
</div>
...
<style>





/*SECTION1*/
.section1{
width:100%;
padding:4rem 2rem;
background-color:#fff;
}

.section1 section{
display:flex;
align-items:center;
justify-content:Center;
}

.section1 .card{
padding:2rem;
position:relative;
width:100%;
border-radius:10px;
margin:10px;
background-image:url("images/pattern.png");
background-repeat:no-repeat;
background-position:top left;
text-align:center;
box-shadow:0px 1px 2px -1px rgba(1,1,1,0.5);
transition:0.5s;
}

.section1 .card:hover{
box-shadow:0px 4px 14px -4px rgba(1,1,1,0.5);
}

.section1 .card .tag{
position:absolute;
background-color:var(--lite);
display:flex;
align-items:center;
justify-content:center;
padding:10px;
border-radius:50%;
position:absolute;
top:2%;
right:2%;
height: 45px; 
    width: 45px;
}

.section1 .card img{
width:100px;
display:block;
margin:auto;
}

.section1 .card h1{
font-size:1.5em;
}

.section1 .card p{
color:rgba(1,1,1,0.7);
line-height:1.8em;
}


@media (max-width:820px){
.section1 section{
width:100%;
padding:2rem 1rem;
display:block;
}
.section1 .card{
padding:1rem;
margin:20px 0;
}
}
</style>  
<script>
</script>