Редактирование шаблона HTML

361
18 июля 2017, 19:29

Доброго времени суток! Помогите пожалуйста отредактировать HTML шаблон, а конкретнее добавить по 7 вкладок справа, слева и снизу (таких как вверху страницы), заранее спасибо. Вот код:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 <style> 
* { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: rgba(255,255,255,0); 
} 
body { 
  line-height: 1.5; 
  font-family: "futura-pt", 'Century Gothic', 'Arial', sans-serif; 
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
  color: #fff; 
  background: #1a1a1a; 
} 
a { 
  text-decoration: none; 
  color: inherit; 
} 
ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
} 
.css-tab { 
  will-change: transform; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 1; 
  background: #1a1a1a; 
  -webkit-transform: translateY(-100%); 
          transform: translateY(-100%); 
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab--active { 
  -webkit-transform: translateY(0); 
          transform: translateY(0); 
} 
.css-tab__list { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
} 
.css-tab__item { 
  -webkit-box-flex: 1; 
  -webkit-flex: 1; 
      -ms-flex: 1; 
          flex: 1; 
  position: relative; 
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab__item:hover { 
  opacity: 0.75; 
} 
.css-tab__thumb { 
  display: block; 
  height: 80px; 
  background: #dc143c; 
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab__thumb:before { 
  content: attr(data-letter); 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%, -50%); 
          transform: translate(-50%, -50%); 
  font-size: 70px; 
  text-transform: uppercase; 
  opacity: 0; 
} 
.css-tab__label { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%, -50%); 
          transform: translate(-50%, -50%); 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  color: #e6e6e6; 
  margin: 0; 
} 
@media (max-width: 850px) { 
  .css-tab__label { 
    font-size: 14px; 
  } 
} 
@media (max-width: 720px) { 
  .css-tab__label { 
    display: none; 
  } 
  .css-tab__thumb { 
    height: 60px; 
  } 
  .css-tab__thumb:before { 
    font-size: 24px; 
    opacity: 0.7; 
  } 
} 
.tab-content { 
  height: 100vh; 
  will-change: transform; 
  -webkit-perspective: 400px; 
          perspective: 400px; 
  overflow: hidden; 
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.section { 
  will-change: transform; 
  position: absolute; 
  width: 100%; 
  top: 0; 
  left: 0; 
  height: 100vh; 
  overflow: hidden; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
      -ms-flex-align: center; 
          align-items: center; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  text-align: center; 
  background: #fff; 
  -webkit-transform: translateX(100%); 
          transform: translateX(100%); 
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); 
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.section--hidden { 
  -webkit-transform: translateX(-100%); 
          transform: translateX(-100%); 
} 
.section--active { 
  -webkit-transform: translateX(0) rotateY(0); 
          transform: translateX(0) rotateY(0); 
  z-index: 2; 
} 
.section__wrapper { 
  width: 100%; 
  max-width: 800px; 
  padding: 0 8vw; 
  position: relative; 
} 
.section__title { 
  margin: 0 0 25px 0; 
  font-size: 48px; 
  font-weight: normal; 
  text-transform: uppercase; 
  letter-spacing: 5px; 
} 
.section__title:before { 
  content: ''; 
  position: absolute; 
  top: 5rem; 
  left: 45%; 
  margin: auto; 
  width: 10%; 
  height: 2px; 
  background: #fff; 
} 
@media (max-width: 720px) { 
  .section__title { 
    font-size: 28px; 
  } 
  .section__title:before { 
    top: 3.25rem; 
  } 
} 
.section p { 
  margin: 0 0 25px 0; 
  font-family: 'Georgia'; 
  font-size: 18px; 
  color: #fff; 
  opacity: 0.55; 
} 
@media (max-width: 720px) { 
  .section p { 
    font-size: 16px; 
  } 
} 
.section p:last-child { 
  margin-bottom: 0; 
} 
.color1 { 
  background: #1b1f25; 
} 
.color2 { 
  background: #e74c3c; 
} 
.color3 { 
  background: #3498db; 
} 
.color4 { 
  background: #9b59b6; 
} 
.color5 { 
  background: #1bc885; 
} 
.color6 { 
  background: #dfb816; 
} 
.color7 { 
  background: #008B8B; 
} 
.logo { 
  position: fixed; 
  top: 100px; 
  right: 20px; 
  z-index: 2; 
} 
@media (max-width: 720px) { 
  .logo { 
    top: 110px; 
    right: 50%; 
    margin-right: -20px; 
  } 
} 
.logo img { 
  width: 45px; 
  -webkit-transform: rotate(0); 
          transform: rotate(0); 
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.logo img:hover { 
  -webkit-transform: rotate(180deg) scale(1.1); 
          transform: rotate(180deg) scale(1.1); 
} 
 
 </style> 
</head> 
<body> 
<nav class="css-tab css-tab--active"> 
  <ul class="css-tab__list"> 
    <li class="css-tab__item"> 
      <a href="" class="css-tab__link"> 
        <div class="css-tab__thumb color1" data-letter="Г"></div> 
        <p class="css-tab__label">1</p> 
      </a> 
    </li> 
    <li class="css-tab__item"> 
      <a href="" class="css-tab__link"> 
        <div class="css-tab__thumb color2" data-letter="П"></div> 
        <p class="css-tab__label">2</p> 
      </a> 
    </li> 
    <li class="css-tab__item"> 
      <a href="" class="css-tab__link"> 
        <div class="css-tab__thumb color3" data-letter="А"></div> 
        <p class="css-tab__label">3</p> 
      </a> 
    </li> 
    <li class="css-tab__item"> 
      <a href="" class="css-tab__link"> 
        <div class="css-tab__thumb color4" data-letter="В"></div> 
        <p class="css-tab__label">4</p> 
      </a> 
    </li> 
    <li class="css-tab__item"> 
      <a href="" class="css-tab__link"> 
        <div class="css-tab__thumb color5" data-letter="Ч"></div> 
        <p class="css-tab__label">5</p> 
      </a> 
    </li> 
    <li class="css-tab__item"> 
      <a href="" class="css-tab__link"> 
        <div class="css-tab__thumb color6" data-letter="Ф"></div> 
        <p class="css-tab__label">6</p> 
      </a> 
    </li> 
	 <li class="css-tab__item"> 
      <a href="" class="css-tab__link"> 
        <div class="css-tab__thumb color7" data-letter="И.Ф"></div> 
        <p class="css-tab__label">7</p> 
      </a> 
    </li> 
  </ul> 
  
   
   <a href="http://www.jquery-az.com" class="logo" target="_blank"> 
   <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />  
  </a> 
</nav> 
 
<div class="tab-content"> 
  <section class="section section--active color1" data-letter="a"> 
    <article class="section__wrapper"> 
      <h1 class="section__title">1</h1> 
      <section id="about"> 
		      <h2><a href="#about">1</a></h2> 
		      <p>Test 
			  </p> 
		  </section> 
    </article> 
  </section> 
  <section class="section color2" data-letter="p"> 
    <article class="section__wrapper"> 
      <h1 class="section__title">2</h1> 
      <p>2</p> 
    </article> 
  </section> 
  <section class="section color3" data-letter="q"> 
    <article class="section__wrapper"> 
      <h1 class="section__title">3</h1> 
      <p>3</p> 
    </article> 
  </section> 
  <section class="section color4" data-letter="e"> 
    <article class="section__wrapper"> 
      <h1 class="section__title">4</h1> 
      <p>4</p> 
    </article> 
  </section> 
  <section class="section color5" data-letter="s"> 
    <article class="section__wrapper"> 
      <h1 class="section__title">5</h1> 
      <p>5</p> 
    </article> 
  </section> 
  <section class="section color6"> 
    <article class="section__wrapper"> 
      <h1 class="section__title">6</h1> 
      <p>7</p> 
    </article> 
  </section> 
  <section class="section color7"> 
    <article class="section__wrapper"> 
      <h1 class="section__title">7</h1> 
      <p>7</p> 
    </article> 
  </section> 
</div> 
 
<script> 
var Nav = (function() { 
   
  var 
  	nav 		= $('.css-tab'), 
    section = $('.section'), 
    link		= nav.find('.css-tab__link'), 
    navH		= nav.innerHeight(), 
    isOpen 	= true, 
    hasT 		= false; 
   
  var toggleNav = function() { 
    nav.toggleClass('css-tab--active'); 
    shiftPage(); 
  }; 
   
   
  var switchPage = function(e) { 
    var self = $(this); 
    var i = self.parents('.css-tab__item').index(); 
    var s = section.eq(i); 
    var a = $('section.section--active'); 
    var t = $(e.target); 
     
    if (!hasT) { 
      if (i == a.index()) { 
        return false; 
      } 
      a 
      .addClass('section--hidden') 
      .removeClass('section--active'); 
 
      s.addClass('section--active'); 
 
      hasT = true; 
 
      a.on('transitionend webkitTransitionend', function() { 
        $(this).removeClass('section--hidden'); 
        hasT = false; 
        a.off('transitionend webkitTransitionend'); 
      }); 
    } 
 
    return false; 
  }; 
   
  var keyNav = function(e) { 
    var a = $('section.section--active'); 
    var aNext = a.next(); 
    var aPrev = a.prev(); 
    var i = a.index(); 
     
     
    if (!hasT) { 
      if (e.keyCode === 37) { 
       
        if (aPrev.length === 0) { 
          aPrev = section.last(); 
        } 
 
        hasT = true; 
 
        aPrev.addClass('section--active'); 
        a 
          .addClass('section--hidden') 
          .removeClass('section--active'); 
 
        a.on('transitionend webkitTransitionend', function() { 
          a.removeClass('section--hidden'); 
          hasT = false; 
          a.off('transitionend webkitTransitionend'); 
        }); 
 
      } else if (e.keyCode === 39) { 
 
        if (aNext.length === 0) { 
          aNext = section.eq(0) 
        }  
 
 
        aNext.addClass('section--active'); 
        a 
          .addClass('section--hidden') 
          .removeClass('section--active'); 
 
        hasT = true; 
 
        aNext.on('transitionend webkitTransitionend', function() { 
          a.removeClass('section--hidden'); 
          hasT = false; 
          aNext.off('transitionend webkitTransitionend'); 
        }); 
 
      } else { 
        return 
      } 
    }   
  }; 
     
  var bindActions = function() { 
    link.on('click', switchPage); 
    $(document).on('ready', function() { 
       page.css({ 
        'transform': 'translateY(' + navH + 'px)', 
         '-webkit-transform': 'translateY(' + navH + 'px)' 
      }); 
    }); 
    $('body').on('keydown', keyNav); 
  }; 
   
  var init = function() { 
    bindActions(); 
  }; 
   
  return { 
    init: init 
  }; 
   
}()); 
 
Nav.init(); 
</script> 
 
</body> 
</html>

READ ALSO
Заголовок с линией [дубликат]
CSS

Заголовок с линией [дубликат]

На данный вопрос уже ответили:

 257
Подстраивать footer под контент body
CSS

Подстраивать footer под контент body

Норм когда контент малый, когда велик налезает

 247
Архитектура DB для мессенджера
MySQL

Архитектура DB для мессенджера

Как грамотнее с точки зрения оптимизации сделать БД для мессенджера?

 348
Ошибка -bash: $: command not found
MySQL

Ошибка -bash: $: command not found

Читаю книжку по mysql и php, но встрял как убитый на следующем пункте: При попытке следовать инструкциям получаю ошибку, и не знаю как быть дальше:...

 339