Linkedin profile card

linkedin profile card using css only

by vaheed akhtar

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card">
  <img src="https://ak8.picdn.net/shutterstock/videos/1290388/thumb/1.jpg" alt="John" style="width:100%">
    <div class="avatar">
     <img alt="" src="https://www.w3schools.com/w3images/avatar2.png">
    </div>

  <h1>Milly </h1>
  <p class="title">@milley</p>
  <p>Harvard University</p>
  <hr />
  <div>
    
  </div>
</div>

CSS

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.title {
  color: grey;
  font-size: 18px;
}

.card .avatar {
    position: relative;
    top: -50px;
    margin-bottom: -50px;
}

.card .avatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.5);
}

JavaScript

/* $(document).ready({
  $(.)
})https://jsfiddle.net/vahid_634/owun1jhq/20/# */