root
/
css-mastery-16-master


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
							<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Profile</title>

  <style>
    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
      background-color: #ddd;
    }
    .profile-box {
      position: relative;
      height: 600px;
      background-image: -webkit-radial-gradient(#cfdfee, #2c56a1, #cfdfee, #2c56a1, #cfdfee, #2c56a1);
      background-image: -moz-radial-gradient(#cfdfee, #2c56a1, #cfdfee, #2c56a1, #cfdfee, #2c56a1);
      background-image: -o-radial-gradient(#cfdfee, #2c56a1, #cfdfee, #2c56a1, #cfdfee, #2c56a1);
      background-image: radial-gradient(#cfdfee, #2c56a1, #cfdfee, #2c56a1, #cfdfee, #2c56a1);
    }
    .profile-photo {
      width: 160px;
      min-height: 200px;
      position: absolute;
      bottom: -60px;
      left: 5%;
      padding: .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>