How to make it prettier: HTML+CSS or images?

D

Dmitry Podabed2016-09-24 15:09:47

css

Dmitry Podabed, 2016-09-24 15:09:47

Channel%2BArt%2BTemplate%2B%2528Photosho
There is such a header for the site in my head. With adaptability, the inscription "Caddy smells like trees" should remain top center and a little to the left should also be a tree, the rays that go from the word "smells" should rest against the edges of the visible area. The inscription and the tree, of course, should be resized to fit the ekaran. For all this, there is SVG and a font. There is a draft at caddysmelledliketrees.ru. If the central inscription was easy to make, then what to do with the tree and rays? Now I'm moving on to painting. Googled drawing a circle in CSS, stripes through <hr>. Here's what's so far:
CSS:

@import url('http://webfonts.ru/import/hagin.css');

html {
    text-align: center;
    background: #f4f4f4;
    color: #0a0a0a;
}

*::-webkit-selection {
    background: #0a0a0a;
    color: #f4f4f4;
}

*::-moz-selection {
    background: #0a0a0a;
    color: #f4f4f4;
}

*::-ms-selection {
    background: #0a0a0a;
    color: #f4f4f4;
}

*::-o-selection {
    background: #0a0a0a;
    color: #f4f4f4;
}

*::selection {
    background: #0a0a0a;
    color: #f4f4f4;
}

img {
    padding: 2em;
    width: 3em;
    display: inline-block;
}

.caddysmellsliketrees {
    margin: auto;
}

.caddy, .smells, .like_trees {
    font-family: 'Hagin Caps';
    font-weight: normal;
    text-transform: uppercase;
    line-height: 0.95em;
    text-align: center;
    width: auto;
}

.caddy {
    font-size: 6em;
    padding-top: 0.1em;
}

.smells {
    font-size: 5.3em;
}

.like_trees {
    font-size: 3.3em;
}

.filled_circle {
    background-color: #0a0a0a;
    height: 2em;
    width: 2em;
    -webkit-border-radius: 1em; /*50% of height and width*/
    -moz-border-radius: 1em; /*50% of height and width*/
}

hr {
    border: 0.2em solid #0a0a0a;
}

.half-open_line_segment_left {
    position: fixed;
    left: auto;
}

.half-open_line_segment_right {

}

.tree {

}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf8'>
        <meta content='Кэдди пахнет деревьями' name='description'>
        <title>Кэдди пахнет деревьями</title>
        <link rel='shortcut icon' href='./image/favicon.ico' />
        <link href='./css/main.css' rel='stylesheet'>
    </head>
    <body>
        <div class='half-open_line_segment_left'>
            <hr>
            <div class='filled_circle'>
            </div>
        </div>
        <div class='caddysmellsliketress'>
            <div class='caddy' title='Кэдди'>
                Кэдди
            </div>
            <div class='smells' title='пахнет'>
                пахнет
            </div>
            <div class='like_trees' title='деревьями'>
                деревьями
            </div>
        </div>
        <a href='https://vk.com/caddysmelledliketrees' title='https://vk.com/caddysmelledliketrees'><img src='./image/vk.svg' alt='VK'></a>
        <a href='https://instagram.com/caddysmellslike' title='https://instagram.com/caddysmellslike'><img src='./image/instagram.svg' alt='Instagra'></a>
        <a href='https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw' title='https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw'><img src='./image/youtube.svg' alt='YouTube'></a>
        <a href='http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8' title='http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8'><img src='./image/lastfm.svg' alt='LastFM'></a>
        <a href='https://soundcloud.com/caddysmelledliketrees' title='https://soundcloud.com/caddysmelledliketrees'><img src='./image/soundcloud.svg' alt='SoundCloud'></a>
        <a href='https://caddysmelledliketrees.bandcamp.com' title='https://caddysmelledliketrees.bandcamp.com'><img src='./image/bandcamp.svg' alt='BandCamp'></a>
    </body>
</html>

Actually, what's the best way to do it? Draw and position blocks? Or just post a picture?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

romy4, 2016-09-24
@romy4

Layers. For a responsive design.