root
/
css-mastery-16-master


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Linear gradient profile box</title>

  <style>
    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
      background-color: #ddd;
    }
    .profile-box {
      position: relative;
      height: 600px;
      background-image: -webkit-linear-gradient(#cfdfee, #8da9cf);
      background-image: -moz-linear-gradient(#cfdfee, #8da9cf);
      background-image: -o-linear-gradient(#cfdfee, #8da9cf);
      background-image: linear-gradient(#cfdfee, #8da9cf);
      /* same as...
      background-image: linear-gradient(to bottom, #cfdeee 0%, #8da9cf 100%);
      */
    }
    .profile-photo {
      width: 160px;
      min-height: 200px;
      position: absolute;
      bottom: -60px;
      left: 5%;
      padding: .5em;
      -webkit-border-radius: .5em;
      border-radius: .5em;
      background-color: #fff;
      box-shadow: .25em .25em .5em rgba(0, 0, 0, 0.3);
    }
    .profile-photo img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .username {
      font-size: 20px;
      color: #666;
      margin: .35em 0 0;
    }
  </style>
</head>
<body>
  <header class="profile-box" role="banner">
    <div class="profile-photo">
      <img src="img/profile.jpg" alt="Charles the Cat">
      <h1 class="username">@CharlesTheCat</h1>
    </div>
  </header>
</body>
</html>