Я окошко для мозиллы
✖
Я окошко для оперы
✖
Я окошко для landscape
✖
Контакты
Planning Your Gap Year Abroad
ИНСТРУКЦИЯ
The hard truth about volunteering
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Travel
Why every designer should visit Rotterdam?
After initial crisis re-construction the center of Rotterdam has become the site of ambitious new architecture.
Culture
Let your culture be your brand
A brand in order to be relevant to consumers and sustainable over time must operate much like a culture.
Style
Nordic nature and Scandinavian lifestyle
The ways that vast empty spaces affect how you feel and how to spend your summer the Scandinavian way.
Movies
An urbanist's guide to the best cities to visit
Learn how to get there, where to stay and how to have the best time.
Culture
10 summer festivals from Berlin to Leipzig
Films are chosen in each category by a section director with the advice of a committee of film experts.
Design
Back to purity, back to simplicity
Simplicity is about subtracting the obvious and adding the meaningful.
Инструкция
(скрыть)
!Важно поместить блоки для браузеров и горизонтальной мобилки в самом верху, как и их код. Иначе при загрузке страницы блоки будут кратковременно появляться на странице.


  1. Сделай в трех зеро-блоках окна для мозилы и оперы, а также окно для горизонтальной мобилки. Оформить можно как угодно, но нужно обязательно добавить в блок иконку, которая будет закрывать блок и задать ей класс button--close (подробнее в видео)
  2. Зеро блоку для мозилы задай класс uc-moz, а блоку для оперы задай класс uc-opera. Блоку для горизонтальной ориентации класс uc-landscape.
  3. Кнопку помести в отдельный блок и задай ему класс uc-sticky.
  4. Блоку, перед которым кнопка должна исчезать задай в настройках блока класс uc-stop.
  5. Укажи в форму количество пикселей, которые нужно промотать, чтобы кнопка появилась.
  6. Скопируй код 1 и 2 и вставь в блок T123.


Важно

  1. Проверь, присвоены ли классы блокам. Открой консоль в режиме разработчика на странице. Если каких-то блоков нет, то там высветится ошибка.
  2. Скинь мне ссылку на страницу.
<!-- Code by Fedyaeva -->
<style>
    .uc-moz,.uc-opera,.uc-landscape{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000}.button--close{cursor:pointer}@media screen and (orientation:landscape){.uc-landscape{display:block}}@media screen and (orientation:portrait){.uc-landscape{display:none}}@media screen and (min-width:980px){.uc-landscape{display:none}}
    .uc-sticky{position:fixed;top:0;left:0;width:100%;z-index:100;will-change:transform;transition:transform 0.3s ease-in;transform:translateY(-100%)}.uc-sticky.show{transform:translateY(0)}.uc-sticky.hide{transform:translateY(-100%)}
</style>
<script>
document.addEventListener('DOMContentLoaded',(event)=>{let sBrowser,sUsrAg=navigator.userAgent;let mozBlock=document.querySelector('.uc-moz');let Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false);let opBlock=document.querySelector('.uc-opera');let landBlock=document.querySelector('.uc-landscape');let buttonClose=document.querySelectorAll('.button--close')
mozBlock.style.display="none";opBlock.style.display="none";if(sUsrAg.indexOf("Firefox")>-1){mozBlock.style.display="block"}else if(Opera){opBlock.style.display="block"}
buttonClose.forEach(e=>{e.addEventListener('click',(evt)=>{mozBlock.style.display="none";opBlock.style.display="none";landBlock.style.display="none"})});let stickyBlock=document.querySelector('.uc-sticky');let stopBlock=document.querySelector('.uc-stop');const scrollD=450;let elementOffset;window.addEventListener('scroll',function(e){let top=window.pageYOffset;let distance,height,slide;elementOffset=stopBlock.offsetTop;distance=elementOffset-top;height=stickyBlock.clientHeight;slide=height-distance;if(top>=scrollD){stickyBlock.classList.add('show');stickyBlock.classList.remove('hide')}else{stickyBlock.classList.remove('show');stickyBlock.classList.add('hide')}
if(distance<=height){stickyBlock.classList.remove('show');stickyBlock.classList.add('hide')}})})
</script>
Made on
Tilda