Simple Dark Futuristic Ui design source code

HTML SOURCE CODE

<div  class="main">
<div class="box">
<div  class="for_all">
<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="for_all">
<p id="username">Harendra Singh</p>
</div>
  <div  class="for_all">
<p id="location">Dehradun</p>
</div>
<div  class="for_all">
<p id="about">User interface designer and front-end developer</p>
</div>
<div  class="for_all">
<p id="btn1">Message</p>
<p id="btn2">Following </p>
</div>
<div class="subbox">
<div  class="skills">
<p id="btn">UX/UI</p>
<p id="btn">Python </p>
<p id="btn">java</p>
<p id="btn">c++</p>
<p id="btn">node.js</p>
</div>
</div>
</div>

<div class="box">
<div  class="for_all">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0U8cw1E3HB4XFwVEp7Trpxf8pAkeZWPLeuT2ET5jqb4ulllHKujes0kVczXeyoZmA-X0wEgHns0Xop5DcNTRqb959j8sX46TPp7GfKuVcDVKI45IxLnTh01395gxMWsoyEMIh6cTBRWk/s1600/PicsArt_01-21-12.05.02.jpg">
</div>
<div  class="for_all">
<p id="username">Jatin Raypa</p>
</div>
  <div  class="for_all">
<p id="location">Dehradun</p>
</div>
<div  class="for_all">
<p id="about">User interface designer and front-end developer</p>
</div>
<div  class="for_all">
<p id="btn1">Message</p>
<p id="btn2">Following </p>
</div>
<div class="subbox">
<div  class="skills">
<p id="btn">UX/UI</p>
<p id="btn">Python </p>
<p id="btn">JavaScript</p>
<p id="btn">c++</p>

</div>
</div>
</div>
</div>

CSS SOURCE CODE

body{

 background:black;
 }
 .main{
 width:100%;
 height:630px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
 }
 .box {
  width:320px;
 height:430px;
 background:black;
 border-radius:5px;
 overflow: hidden;
 padding-top:30px;
 border:0.5px solid #08E1E9;
 box-sizing: border-box;
 margin:10px;
 }

 .for_all{
 display:flex;
 justify-content: center;

 }
 img{
 width:100px;
 height:100px;
 border:1px solid #08E1E9;
 border-radius:50%;
 padding:5px;
 }

 p{
 color:#D5C5E1;
 }
 #username{
 font-size:22px;
 letter-spacing: 0.2px;
 font-weight:600;
 }
 #location{
 font-size:14px;
 margin-top:-14px;
 font-weight:500;
 letter-spacing: 0.7px;
 text-transform: uppercase;
 color:#08E1E9
 }
 #about{
 text-align:center;
 font-size:16px;
 padding:0px 50px;
 margin-top:3px;
 word-spacing:1px;
 }
#btn1{
border:1px solid #08E1E9;
margin:3px;
padding:9px 22px;
font-size:14px;
border-radius:3px;
color:#08E1E9;
transition:all .3s ease-in-out .2s;
}
#btn1:hover{
background:#08E1E9;
color:black;
}
#btn2{
border:1px solid #08E1E9;
margin:3px;
padding:9px 22px;
font-size:14px;
border-radius:3px;
background:#08E1E9;
color:black;
transition:all .3s ease-in-out .2s;
}
#btn2:hover{
background:none;
color:#08E1E9
}
.subbox{
width:100;
height:80px;
background: black;
margin-top:23px;
padding:5px;
display:flex;
justify-content: center;
align-items:center;
border-top:0.5px solid #08E1E9;

}

#btn{
display:inline;
border:0.3px solid #8B898E;
padding:6px 8px;
margin:4px;
border-radius:1px;
color:#8B898E;
font-size:14px;
transition:all .3s ease-in-out .1s;
}
#btn:hover{
color:#08E1E9;
border:0.5px solid #08E1E9;
}