Skip to content

Instantly share code, notes, and snippets.

@o0

o0/07-accordion-based-markdown.html

Last active May 30, 2020 10:46
Show Gist options
  • Save o0/5ed6ff49289ca2718c0a5c91e7574473 to your computer and use it in GitHub Desktop.
Save o0/5ed6ff49289ca2718c0a5c91e7574473 to your computer and use it in GitHub Desktop.
Download ZIP
Разметка страницы, адаптированная под стандартный компонент аккордеона
Raw
07-accordion-based-markdown.html
<html lang="ru" class="page">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./accordion.css">
<meta property="og:type" content="website">
<meta property="og:title" content="OneBootcamp">
<meta property="og:site_name" content="Онлайн-буткемп по веб-разработке">
<meta property="og:site_url" content="https://onebootcamp.typeform.com/to/KqN0Ak">
<title>OneBootcamp</title>
</head>
<body class="page__body">
<header class="header">
<div class="logo">
<h1 class="logo__title">OneBootcamp</h1>
<p class="logo__description">Обучение разработке на практике</p>
</div>
</header>
<main class="main Accordion">
<section class="section">
<h2 class="section__title">
<button class="Accordion-trigger" aria-expanded="true" aria-controls="sect1" id="accordion1id">Преимущества</button>
</h2>
<ul class="section__features section__features_dashed" id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel">
<li>Подготовка по настоящим требованиям от компаний с рынка</li>
<li>Упор на практику: четыре практических проекта</li>
<li>Работа в группе</li>
<li>Консультации и код-ревью от менторов — практикующих разработчиков</li>
</ul>
</section>
<section class="section section_special" style="background-position: 0 0">
<h2 class="section__title">
<button class="Accordion-trigger" aria-expanded="false" aria-controls="sect2" id="accordion2id">Программа</button>
</h2>
<ol class="section__features" id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
<li>Работа в команде: скрам, системы контроля версий</li>
<li>Мобильная верстка</li>
<li>Адаптивная верстка</li>
<li>Шаблонизация: Pug</li>
<li>JavaScript, модульность, UI-киты</li>
<li>React</li>
<li>Шаблонизация: Next.js</li>
<li>Деплой: статика, GitHub Pages, now.sh, Docker</li>
<li>Карьерная неделя: подготовка резюме, отклики на вакансии</li>
</ol>
</section>
<section class="section">
<h2 class="section__title">
<button class="Accordion-trigger" aria-expanded="false" aria-controls="sect3" id="accordion3id">Условия</button>
</h2>
<ul class="section__features section__features_dashed" id="sect3" role="region" aria-labelledby="accordion3id" class="Accordion-panel" hidden>
<li>150000 рублей</li>
<li>Рассрочка оплаты</li>
<li>Возможна оплата после обучения</li>
</ul>
<a class="section__button" href="https://onebootcamp.typeform.com/to/KqN0Ak">Записаться</a>
</section>
</main>
<footer class="footer">
<p>&copy; 2020 <a href="https://onebootcamp.typeform.com/to/KqN0Ak">OneBootcamp</a></p>
</footer>
<script src="https://www.w3.org/TR/wai-aria-practices/examples/accordion/js/accordion.js"></script>
<script>
let sectionToAnimate = document.querySelector('.section_special');
window.addEventListener('scroll', function() {
sectionToAnimate.style.backgroundPosition = `-${document.body.scrollTop}px 0`;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment