Header

For logo you can use an image, plain text or both combined together.

Image Logo

Acceptable formats for logo image are svg | jpg | gif | png.

Svg is the more recommended format,
because it has retina screens support. Retina screens aim to display text and images as sharp as possible,
with no pixels visible to the naked eye.

<a id="crt-logo" class="crt-logo" href="index.html">
    <img src="logo.svg" alt="certy">
</a>

For the PNG | JPG | GIF formats to add retina displays support you should have 2x, 3x, 4x larger logo images
with the good quality and use following html markup:

<a id="crt-logo" class="crt-logo" href="index.html">
    <img src="logo.png" srcset="logo-2x.png 2x" alt="certy">
</a>

Usually only 2x is enough, but if you want more strength retina support, than create 3x and 4x images too,
and use following markup:

<a id="crt-logo" class="crt-logo" href="index.html">
    <img src="logo.png" srcset="logo-2x.png 2x, logo-3x.png 3x, logo-4x.png 4x" alt="certy">
</a>

NOTE: for the site performance, responsive and site design reasons don’t use too large image
for logo, max acceptable size is 250×45 for the regular resolution displays, so for 2x 500×90, for 3x 750×135, for 4x 1000×180

Text Logo

For text logo you can change font family or make some part bold by using <strong> tag

<!-- Just text logo -->
<a id="crt-logo" class="crt-logo" href="index.html">
    <span>Certy</span>
</a>

<!-- Make some part of text bold -->
<a id="crt-logo" class="crt-logo" href="index.html">
    <span><strong>My</strong>Certy</span>
</a>

Image + Text Logo

<!-- Image & Text -->
<a id="crt-logo" class="crt-logo" href="index.html">
    <img src="logo.svg" alt="certy"><span>Certy</span>
</a>

<!-- Image & Text with the bold part -->
<a id="crt-logo" class="crt-logo" href="index.html">
    <img src="logo.svg" alt="certy"><span><strong>My</strong>Certy</span>
</a>

When side box is available logo can have “out” and “in” positions (default position is “in”). Use .crt-logo-in
and .crt-logo-out classes for logo positioning.

<header id="crt-header" class="crt-logo-in">
    ...
</header>

<header id="crt-header" class="crt-logo-out">
    ...
</header>