CodePen

HTML

            
              <body>
 
<div class="purple-box">
  <span class="h1-sim">Threading</span><img src="http://www.unwrappedstudio.com/threading_bar.png"></img>
  <br />
  <br />
  <br />
  <h1>Nails</h1><img src="http://www.unwrappedstudio.com/threading_bar.png"></img>
</div>

</body>
            
          
!

CSS

            
              body {
  background-color: blue;
}

.purple-box {
  width: 400px;
  height: 200px;
  background-color: #D0579A;
  overflow: hidden;
}

.h1-sim {
  background-color: #D0579A;
  font-size: 36px;
	margin-left: 4.5%;
  color: #fff;
}

h1 {
  /*RESET*/
  margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
  
  font-size: 36px;
	margin-left: 4.5%;
  color: #fff;
  font-weight:normal;
}

img {
  float: left;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................