CSS
.box{
margin:9px auto;
width:360px;
height:480px;
background-color:#778899;
}
.box1{
padding:1px;
background:rgb(65,56,122);
}
.box1 h1{
/* Set text color to white */
color:white;
/* Set text alignment to center */
text-align:center;
/* Convert Text to Upper Case */
text-transform: uppercase;
}
#avatar {
/* Set avatar margin 15 pixels and bring to center */
margin: 15px auto;
/* This image is 960 wide by 960 tall, similar to your aspect ratio */
background-image: url('https://cdn1.truelancer.com/user-picture/309986-5a01706b86c66.jpg');
/* make a square container */
width: 150px;
height: 150px;
/* fill the container, preserving aspect ratio, and cropping to fit */
background-size: cover;
/* center the image vertically and horizontally */
background-position: center;
/* round the edges to a circle with border radius 1/2 container size */
border-radius: 50%;
border:5px solid white;
}
