My goal is to create a logo similar to the image below, with the black rectangle as an image and the text as real text. I have tried the code below (also available on jsfiddle http://jsfiddle.net/ueZ2H/ and it seems to be working. However, I am unsure if this is the most efficient way to achieve this. Any advice would be greatly appreciated. Thank you.
<div id="header">
<div id="logo">
<div class="name">Dave Black</div>
<div class="address">Address in Paris</div>
<div class="job">Job</div>
</div>
</div
CSS:
/***********/
/*! Reset */
/***********/
* {
margin: 0;
padding: 0;
border: 0;
}
Html, body {
margin: 0;
padding: 0;
background: #fff;
font-family:'Open Sans', sans-serif;
}
/************/
/*! Header */
/************/
#header {
width: 100%;
height: 280px;
}
#logo {
float: left;
margin-left: 20px;
color: #000;
height: 95px;
font-size: 20px;
background-image: url("http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg");
background-repeat: no-repeat;
}
#logo .name {
padding-left:90px;
color: red;
}
#logo .address {
padding-left:90px;
color: green;
}
#logo .job {
padding-left:90px;
color: purple;
}