DARK MODE MODERN UI DESIGN SOURCE CODE

HTML SOURCE CODE

<div class="main">
<div  class="box">

<div class="img1">
<img src="https://www.itl.cat/pngfile/big/5-52772_alone-men-in-window.jpg">
</div>

<!--  #### second image start from here #### -->


<div class="blu_ray">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqYEMK3SIfZWh-tgQUddEe7roGUm8o3Iy1mu3cu2ksPWTNRpSvc5d38-obS7cB5Ry_zMfuC5WWamgxfXy4NIx6ONFnbNP9JzhhV6iwsUseRvdAYV8m4oTth49gCkx7vTaKwd197LtUP0/s1600/PicsArt_02-28-01.35.15.png">
</div>

<!--  #### third image start from here #### -->

<div class="profile">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuSW4jcxd3IerzkNtquTjzoflQsdID-t_oCF9K5tr5haRzr4db0HrkkkTsVCS6dilxR5ffPdqF5XMx_AsI00MP6rFQ11y0e_1vuddyZ4q6_TV3OkNU1vLOtiMVOWgWFClzmi_X5FPqNRs/s1600/PicsArt_01-18-04.58.18.png">
</div>
<div class="profile">
<h3>Harendra Singh</br><span>UX/Ui Designer</span></h3>
</div>
<!--  #### forth image start from here #### -->
<div class="bottom_lyr">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0ieesHtPvpLQqfgADxOiUndKG2-C6wA985bjnxMb9PgeQcjzBVOxnEsVo9gdyYAt2TjCT3rRnFcBtfD01uQjhA3DHQiXqATTznzJwjH1Vcw0kVWKgkP52P3Z1VdYqSqxX5Sq46T5V_k/s1600/PicsArt_02-28-12.31.54.png">
</div>
<p>Lorem ipsum dolor sit amet, consectetur consectetur adipisicing elit..</br>  <span><a href="#">Read more</a></span></p>
<div class="data">
<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-google-plus" 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-instagram" aria-hidden="true"></i></a></li>
        </ul>
</div>
</div>

<div  class="box">

<div class="img1">
<img src="https://images.pexels.com/photos/1105766/pexels-photo-1105766.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
</div>

<!--  #### second image start from here #### -->


<div class="blu_ray">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqYEMK3SIfZWh-tgQUddEe7roGUm8o3Iy1mu3cu2ksPWTNRpSvc5d38-obS7cB5Ry_zMfuC5WWamgxfXy4NIx6ONFnbNP9JzhhV6iwsUseRvdAYV8m4oTth49gCkx7vTaKwd197LtUP0/s1600/PicsArt_02-28-01.35.15.png">
</div>

<!--  #### third image start from here #### -->

<div class="profile">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyppUOReU6shJO3OLSgbvVLLeghlGHjXO164rDx3Vrsu8A7yXCsfJP9NDZQAfutswB9rB5fuhRcuosHTdacP8x9lvP4llyb3KLcaWm5EbF6NEVd9rw01lRg4a-ulSJghjlV1DmUZ2EUw/s320/PicsArt_01-21-07.26.07.png">
</div>
<div class="profile">
<h3>Jatin raypa</br><span> Developer</span></h3>
</div>
<!--  #### forth image start from here #### -->
<div class="bottom_lyr">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0ieesHtPvpLQqfgADxOiUndKG2-C6wA985bjnxMb9PgeQcjzBVOxnEsVo9gdyYAt2TjCT3rRnFcBtfD01uQjhA3DHQiXqATTznzJwjH1Vcw0kVWKgkP52P3Z1VdYqSqxX5Sq46T5V_k/s1600/PicsArt_02-28-12.31.54.png">
</div>
<p id="pera">Lorem ipsum dolor sit amet, consectetur consectetur adipisicing elit..</br>  <span><a href="#">Read more</a></span></p>
<div class="data">
<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-google-plus" 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-instagram" aria-hidden="true"></i></a></li>
        </ul>
</div>
</div>

</div>

CSS SOURCE CODE

.main{
 display:flex;
 justify-content: center;
 align-items: center;
 width:100%;
 height:600px;
 flex-wrap:wrap;

 }
 .box{
 width:330px;
 overflow:hidden;
 height:450px;
 background: black;
 border-radius:10px;
 box-sizing:border-box;
 margin:30px 0px;
 box-shadow:4px 4px 5px black;
 }

 img{
 width:330px;
 height:300px;
 }

 .blu_ray{
 width:330px;
 margin-top:-320px;
 opacity:0.7;
}
.profile{
display:flex;
justify-content: center;
}
.profile img{
 width:90px;
 height:auto;
 margin-top:-250px;
 position:absolute;
 border-radius:50%;
 border:1.3px solid #15AAC9;;
 padding:6px;
}

.profile h3{
color:white;
position: absolute;
margin-top:-135px;
text-align: center;
font-size:18px;
text-transform: uppercase;
letter-spacing:0.7px;
color:lightgray;
}
h3  span{
font-size:14px;
margin-top:30px;
color:#15AAC9;
}

.bottom_lyr img{
 width:100%;
 height:auto;
 margin-top:-100px;
 opacity:0.8;
 }

 .data{
 margin-top:-5px;
 display:flex;
justify-content: center;
color:white;
 }
 p{
 position: absolute;
 font-size:14px;
 color:white;
 text-align: center;
 padding:30px 20px;
 margin-top:-80px;
 line-height:22px;
 }
 p a{
 text-decoration:none;
 color:#00BFFF;
 font-size:15px;
 }
 p a:hover{
 color:#ED9121;
 }
 ul{
    margin-top: 39px;
    padding: 0;
    display: inline-block;
    position: absolute;
}
ul li{
    list-style: none;
    float: left;
}
ul li a{
    display: block;
    color: #aaa;
    margin: 0 10px;
    font-size: 20px;
    transition: 0.5s;
    text-align: center;
    color:#15AAC9;
}
ul li:hover a{
    color:#ED9121;
    transform: rotateY(360deg);
}