<div fxLayout="row">
  <div class="profile m-r-20" fxFlex="340px">
    <mat-card fxFlex>
      <div mat-card-image class="profile-image"></div>
      <div class="profile-image-avatar text-center">
        <img class="avatar" src="https://lh5.googleusercontent.com/-hcRNe540rco/AAAAAAAAAAI/AAAAAAAAAAk/DfS45tpAR-A/photo.jpg">
      </div>
      <mat-card-content class="text-center">
        <h4 class="mat-card-title">stbui</h4>
        <h6 class="mat-card-subtitle">前端工程师</h6>
      </mat-card-content>
      <mat-card-actions>
        <stbui-github-button type="link|star|fork"></stbui-github-button>
      </mat-card-actions>
    </mat-card>
  </div>

  <mat-card fxFlex>
    <mat-card-title>我的信息</mat-card-title>
    <mat-card-content>
      <form fxLayout="column" #formContact="ngForm">
        <mat-form-field class="display-block">
          <input matInput placeholder="您的名字" name="name" ngModel required minlength="4" maxlength="10">
        </mat-form-field>
        <mat-form-field class="display-block">
          <input matInput placeholder="您的邮箱" name="email" ngModel required>
        </mat-form-field>
        <mat-form-field class="display-block">
          <input matInput placeholder="您的手机" name="phone" ngModel required>
        </mat-form-field>
        <mat-form-field class="display-block">
          <input matInput placeholder="请您的网址" name="website ngModel" required>
        </mat-form-field>
        <mat-form-field class="display-block">
          <textarea matInput placeholder="留言" rows="3" name="message" ngModel required></textarea>
        </mat-form-field>
        <button mat-raised-button color="primary" type="submit" [disabled]="!formContact.valid">更新资料</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

:host {
  display: block;
  margin: 24px;
}

.display-block {
  display: block;
}

.profile-image {
  background: linear-gradient(90deg, #00d9bf, #00d977);
  height: 180px;
}
.profile-image-avatar {
  margin-top: -80px;
  margin-bottom: 20px;

  > .avatar {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }
}