Jabont Grid – Card

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <style>
      body{
        background:#eee;
        margin:1em;
        font-family:sans-serif;
      }
      h3{
        margin:0;
        padding:0;
      }
      div{
        word-wrap:break-word;
      }
      .cover {
        background-image: url(https://images.unsplash.com/photo-1492724724894-7464c27d0ceb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80);
        background-size: cover;
        height:8em;
      }
      .avatar{
        height:5em;
        text-align:center;
        /*         background:yellow; */
      }
      .avatar>img {
        height: 170%;
        top: -70%;
        position: relative;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 100%;
        border: 5px solid white;
        box-shadow: 0px 3px 7px #0003;
        box-sizing:border-box;
      }
      .namecard{
        width:100%;
        overflow:hidden;
        background:white;
        border-radius:10px;
        box-shadow:0px 0px 10px #0003;
        max-width:400px;
        margin:auto;
      }
      .fullname{
        padding:1.2em 0 .5em;
        text-align:center;
      }
      .username{
        padding-bottom:1em;
        text-align:center;
        opacity:.6;
      }
      .social{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:3em 3em;
        /*         grid-template-columns:1fr 2fr; */
        /*         grid-template-rows:repeat(3,2em); */
        background:#222;
        grid-auto-flow: column dense;
      }
      .social-label{
        /*         grid-area:lb; */
        /*         background:red; */
        align-self:end;
        justify-self:center;
        font-size:2em;
        color:white;
        text-shadow:0px 2px 0px #000;
      }
      .social-link{
        /*         grid-area:lk; */
        /*         background:pink; */
        align-self:center;
        justify-self:center;
        padding:1em;
        font-size:.7em;
        color:white;
        text-shadow:0px 2px 0px #000;
      }
      /*-- Mobile Version --*/
      @media (max-width: 768px) {
        .social{
          grid-template-columns:1fr 1.6fr;
          grid-template-rows:repeat(3,3em);
           grid-auto-flow: row;
          grid-column-gap:.5em;
        }
        .social-label{
          font-size:1.5rem;
          align-self:center;
          justify-self:end;
        }
        .social-link{
          justify-self:start;
        }
      }
    </style>
  </head>
  <body>
    <div class="namecard">
      <div class="cover">
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=666&q=80">
      </div>
      <div class="fullname">
        <h3>
          Pimwaree Heeprachachon
        </h3>
      </div>
      <div class="username">
        @sspim
      </div>
      <div class="social">
        <div class="social-label">
          <i class="fas fa-envelope">
          </i>
        </div>
        <div class="social-link">
          epim@edok.com
        </div>
        <div class="social-label">
          <i class="fas fa-phone">
          </i>
        </div>
        <div class="social-link">
          0812345678
        </div>
        <div class="social-label">
          <i class="fab fa-github">
          </i>
        </div>
        <div class="social-link">
          @sspim_freecode
        </div>
      </div>
    </div>
  </body>
</html>