Saksaha Logo w/ Mark

by Jonathan McGlone

HTML

<!-- Questrial -->
<!-- <p class="questrial">Questrial</p> -->
<div class="masthead"> <a href="#" title="Saksaha: A Journal of Manchu Studies">
        <div class="mark"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/getuken-120px.png" height="115px" alt="Saksaha logo"/></div>
        <div class="logo questrial">Saksaha</div>
    <div class="subtitle lato questrial_spacing">
    <h1>A Journal of Manchu Studies</h1>
    </div>
    </a>

</div>
<div class="masthead"> <a href="#" title="Saksaha: A Journal of Manchu Studies">
         <div class="mark"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/cover-120px.png" height="100px" alt="Saksaha logo"/></div>
        <div class="logo questrial" style="margin-left: 10px;">Saksaha</div>
    <div class="subtitle lato questrial_spacing" style="margin-left: 10px;">
    <h1>A Journal of Manchu Studies</h1>
    </div>
    </a>

</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Questrial);
 @import url(http://fonts.googleapis.com/css?family=Muli:400);
 @import url(http://fonts.googleapis.com/css?family=Roboto:400);
 @import url(http://fonts.googleapis.com/css?family=Didact+Gothic);
 @import url(http://fonts.googleapis.com/css?family=Lato:300);
 @import url(http://fonts.googleapis.com/css?family=Lato:700);
body { background: #FFF; }
.masthead {
    margin: 20px;
    padding: 20px;
    height: 150px;
    width: 430px;
}
p {
    padding: 20px 0px 0px 20px;
    font-size: 18px;
}
.mark {
    float: left;
}
.logo {
    font-size: 64px;
    margin: 0px 0px 0px -10px;
    letter-spacing: 7px;
    text-transform: uppercase;
    float: left;
}
.subtitle {
    float: left;
    font-size: 18px;
    text-transform: uppercase;
    margin-left: -10px; 
}
.questrial {
    font-family:'Questrial', sans-serif;
}
.questrial_spacing {
    word-spacing: 13px;
}

.lato700 {
    font-family:'Lato', sans-serif;
    font-weight: 700;
}
.lato700_spacing {
    word-spacing: 15px;
}
.didact {
    font-family:'Didact Gothic', sans-serif;
}
.didact_spacing {
    word-spacing: 4px;
}
.muli400 {
    font-family:'Muli', sans-serif;
    font-weight: 400;
}
.muli400_spacing {
    word-spacing: 15px;
}
.roboto400 {
    font-family:'Roboto', sans-serif;
    font-weight: 400;
}
.roboto400_spacing {
    word-spacing: 12px;
}
.lato {
    font-family:'Lato', sans-serif;
    font-weight: 300;
}
a, a:hover {
    text-decoration: none;
}
a .logo {
    color: #34272C;
}
a:hover .logo {
    color: #D03F39;
}
a .subtitle {
    color: #D03F39;
}