<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,cyrillic' rel='stylesheet'>

       <input class="open" id="top-box" type="checkbox" hidden>
       <label class="btn" for="top-box"></label>
        <div class="top-panel">
            <div class="message">
                <h1>
Согласно последним исследованиям
                </h1>
                <h2>
Например, большинство поисков в Google начинаются с неопределенного или не фирменного термина.
                </h2>

            </div>
        </div>
        <div class="container">
            <h1>
                Здесь первое описание!
            </h1>
            <h2>
                Также в описание выставляем ключевое слово под ссылка для перехода.
            </h2>

h1 {
    font-weight: 300;
    font-size: 175%;
    color: #191919;
    -webkit-font-smoothing: antialiased
}

h2 {
    font-weight: 300;
    font-size: 130%;
    color: #888;
    padding: 5px 0
}

.fa {
    color: #fd6969
}
@media only screen and (max-width: 400px) {
    body {
        font-size: 90%
    }
}

@media only screen and (max-width: 800px) {
    body {
        font-size: 100%
    }
}

@media only screen and (min-width: 1100px) {
    body {
        font-size: 120%
    }
}

.top-panel {
    background: #39464e;
    position: absolute;
    top: -250px;
    left: 0;
    width: 100%;
    height: 250px;
    padding: 0;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   
}
/* Блок сообщения */
.message {
    color: #fff;
    font-weight: 300;
    position: relative;
    padding: 3em 2em;
    margin: 0 auto;
    max-width: 980px
}
/* Заголовок 1 уровня */
.message h1 {
    color: #fff
}
/* Заголовок 2 уровня */
.message h2 {
    color: #888
}
.message p {
    margin: 1em 0
}
.message a {
    text-decoration: none;
    color: #748b74
}
.message a:hover {
    color: #95984b
}
/* Переключатель панели */
label.btn {
    display: block;
    position: absolute;
    right: 50px;
    top: 0;
    cursor: pointer;
    background: #2bbbad;
    width: 50px;
    border-radius: 0 0 5px 5px;
    padding: 8px 5px;
    color: #FFF;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    z-index: 9999
}
/* Переключатель при наведении */
label.btn:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
}
/* Стрелка переключателя вниз */
label.btn:after {
    content: '\f078';
    font: normal 18px/1 FontAwesome;
    text-decoration: inherit
}
/* Активация панели */
.open:checked ~ .top-panel {
    top: 0
}

.open:checked ~ label.btn {
    top: 250px
}
/* Смещение контейнера контента страницы */
.open:checked ~ .container {
    margin-top: 300px
}
/* Цвет переключателя при клике */
.open:checked + label.btn {
    background: #dd6149
}
/* Стрелка переключателя вверх*/
.open:checked + label.btn:after {
    content: '\f077';
    font: normal 18px/1 FontAwesome
}
/* Контейнер контента */
.container {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
    padding: 5em 3em
}