HamSter

<div class="box">
  <svg><line x1="0" y1="100%" x2="100%" y2="0" stroke-width="1" stroke="#fff"></line></svg>
</div>

.box {
  width: 100%;
  height: 500px;
  position: relative;
}

svg {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
}

Владение ООП
Знание основ PHP, MySQL

logo-and-menu
container-skills-and-photo

body {
font-family: 'PT Sans Caption', sans-serif;
font-size: 11px;
line-height: 120%;
font-weight: normal;
text-decoration: underline;
letter-spacing: 0px;
font-style:normal;
}

<div class="text">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
    <defs>
      <mask id="mask" x="0" y="0" width="100%" height="100%" >
        <rect x="0" y="0" width="100%" height="100%" />
        <text text-anchor="middle" x="140" y="50" dy="1">Text</text>
        </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

* {
  box-sizing: border-box;
}

.text {
  width: 100%;
  height: 250px;
  z-index: 10;
  background: url(https://image.freepik.com/free-photo/blue-sky-with-clouds_1127-282.jpg) no-repeat top center;
  background-size: cover;
  position: relative;
  padding: 20px;
}

svg { 
  width: 100%;
  text-align: center;
}
svg text {
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 38px;
}
svg rect {
  fill: white;
}
svg > rect {
    -webkit-mask: url(#mask);
    mask: url(#mask);
}