Our teams section source code


HTML SOURCE CODE

<div class="main"  id="harry7">
<div class="submain">
<div class="box">
<img src="https://i.imgur.com/9ic7GLo.jpg">
<div class="maintext">
<h3>harendra singh</h3>
<p class="pera">Founder and CEO</p>
<p  class="about">Hi i am harendra and i'm web designer . if you want to learn web development than...<a href="#"><span>Read More</span></a></p>
   <ul>
            <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
        </ul>
</div>
</div>
</div>
</div>



<div class="main">
<div class="submain">
<div class="box">
<img src="https://i.imgur.com/MpbtEuw.jpg">
<div class="maintext">
<h3>harendra singh</h3>
<p class="pera">Developer </p>
<p  class="about">Hii i am harendra and i'm web designer . if you want to learn web development than...<a href="#"><span>Read More</span></a></p>
   <ul>
            <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
        </ul>
</div>
</div>
</div>
</div>

CSS SOURCE CODE

.main{
 margin-bottom:20px;
 display:flex;
 justify-content:center;
 }

 .submain{
 width:350px;
 height:180px;
 background:white;
 box-shadow:2px 2px 14px lightgray;
 }
 .box{
 display:flex;
 justify-content:center;
 }
 img{
 width:150px;
 height:180px;
 }
 .maintext{
 margin-left:12px;
 }
 h3{font-size:16px;
color:#696969;
text-transform: uppercase;
letter-spacing:1px;
margin-bottom:-10px;
}
.pera{
font-size:13px;
color:#808000;
  text-transform: uppercase;
}
 .about{
color:gray;
font-size:14px;
}
.about span{
color:#808000;
}
.about span:hover{
color:#DC143C;
}
.about  a{
text-decoration:none;
}
 ul
{
    margin: 0;
    padding: 0;
    display: inline-block;
}
 ul li
{
    list-style: none;
    float: left;
 
}
 ul li a
{
    display: block;
    color: #aaa;
    margin: 0 8px;
    font-size: 20px;
    transition: 0.5s;
    color:#808000;
    text-align: center;
}
 ul li:hover a
{
    transform: rotateY(360deg);
    color:brown;
}

Post a Comment

0Comments

Please Select Embedded Mode To show the Comment System.*