root
/
css-mastery-16-master


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

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
      background-color: #ddd;
    }
    .profile-box {
      position: relative;
      height: 600px;
      background-image: url(img/big-cat.jpg);
      background-size: cover;
      background-position: 50% 30%;
      border-bottom: 1px solid #666;
    }

    .profile-photo {
      width: 160px;
      min-height: 200px;
      position: absolute;
      bottom: -60px;
      left: 5%;
      padding: .5em;
      -webkit-border-top-left-radius: 1em;
              border-top-left-radius: 1em;
      background-color: #fff;
    }
    .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>