-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 14.3 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Diversant210215</title><link rel="stylesheet" href="./lib.css"><link rel="stylesheet" href="./styles.css"></head><body id="body"><header class="site-header"><nav class="navbar fixed-top navbar-toggleable-md navbar-light bg-faded" id="navbar"><div class="container py-0"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand py-auto" href="#"><img src="./img/logo-icon.svg" alt="Colorful Flat">Colorful Flat</a><div class="collapse navbar-collapse" id="navbarToggler"><ul class="navbar-nav ml-auto mt-2 mt-md-0"><li class="nav-item"><a class="nav-link smooth-scroll" href="#body">Home </a></li><li class="nav-item"><a class="nav-link smooth-scroll" href="#services">Services</a></li><li class="nav-item"><a class="nav-link smooth-scroll" href="#portfolio">Portfolio</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#" data-toggle="modal" data-target="#scopeModal">Post type 1</a><a class="dropdown-item" href="#" data-toggle="modal" data-target="#scopeModal">Post type 2</a><a class="dropdown-item" href="#" data-toggle="modal" data-target="#scopeModal">Post type 3</a></div></li><li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#scopeModal">Contact</a></li></ul></div></div></nav></header><section id="hero"><div class="hero-slick"><div class="hero-slide slide-1"><div class="container"><div class="grid_8"><h2>This Template<br>is Awesome!</h2><p>In has brute virtute, mundi facete perfecto ius ne. Cu tota evertitur necessitatibus nec. Ei quo rebum zril electram, accusata iracundia ei his. Ad qui recusabo deseruisse, cu per odio nihil. Eu vide mucius mei. Maiorum tractatos instructior ut eos, graece graecis vix an, consul impetus mediocrem an his. Possit pericula argumentum vix ex.</p><a class="btn btn-secondary" href="#" data-toggle="modal" data-target="#scopeModal">Read more</a></div></div></div><div class="hero-slide slide-2"><div class="container"><div class="grid_8"><h2>A Lot of Epic Ideas<br>in One Template</h2><p>In has brute virtute, mundi facete perfecto ius ne. Cu tota evertitur necessitatibus nec. Ei quo rebum zril electram, accusata iracundia ei his. Ad qui recusabo deseruisse, cu per odio nihil. Eu vide mucius mei. Maiorum tractatos instructior ut eos, graece graecis vix an, consul impetus mediocrem an his. Possit pericula argumentum vix ex.</p><a class="btn btn-secondary" href="#" data-toggle="modal" data-target="#scopeModal">Read more</a></div></div></div><div class="hero-slide slide-3"><div class="container"><div class="grid_8"><h2>Explore new<br>Possibilities</h2><p>In has brute virtute, mundi facete perfecto ius ne. Cu tota evertitur necessitatibus nec. Ei quo rebum zril electram, accusata iracundia ei his. Ad qui recusabo deseruisse, cu per odio nihil. Eu vide mucius mei. Maiorum tractatos instructior ut eos, graece graecis vix an, consul impetus mediocrem an his. Possit pericula argumentum vix ex.</p><a class="btn btn-secondary" href="#" data-toggle="modal" data-target="#scopeModal">Read more</a></div></div></div></div></section><section id="services"><div class="container text-center"><div class="row"><div class="grid_4 flat"><h3>Flat Design</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam est. Mauris faucibus tellus ac auctor posuere.</p></div><div class="grid_4 ideas"><h3>Great Ideas</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam est. Mauris faucibus tellus ac auctor posuere.</p></div><div class="grid_4 browser"><h3>Browser Compatibility</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam est. Mauris faucibus tellus ac auctor posuere.</p></div></div></div></section><section id="portfolio"><div class="container text-center"><h2>Recent templates</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam est. Mauris faucibus tellus ac auctor posuere.</p><ul class="nav nav-pills justify-content-center" role="tablist"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#dueeu" role="tab">Due eu</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#noster" role="tab">Noster</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#quaeque" role="tab">Quaeque</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#delicata" role="tab">Delicata</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#aliquando" role="tab">Aliquando</a></li></ul><div class="tab-content"><div class="tab-pane active" id="dueeu" role="tabpanel"><div class="row"><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-1"><img src="./img/template-1.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-2"><img src="./img/template-2.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-3"><img src="./img/template-3.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-4"><img src="./img/template-4.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-5"><img src="./img/template-5.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-6"><img src="./img/template-6.png"></a></div></div></div><div class="tab-pane" id="noster" role="tabpanel"><div class="row"><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-2"><img src="./img/template-2.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-3"><img src="./img/template-3.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-4"><img src="./img/template-4.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-5"><img src="./img/template-5.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-6"><img src="./img/template-6.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-1"><img src="./img/template-1.png"></a></div></div></div><div class="tab-pane" id="quaeque" role="tabpanel"><div class="row"><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-3"><img src="./img/template-3.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-4"><img src="./img/template-4.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-5"><img src="./img/template-5.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-6"><img src="./img/template-6.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-1"><img src="./img/template-1.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-2"><img src="./img/template-2.png"></a></div></div></div><div class="tab-pane" id="delicata" role="tabpanel"><div class="row"><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-4"><img src="./img/template-4.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-5"><img src="./img/template-5.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-6"><img src="./img/template-6.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-1"><img src="./img/template-1.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-2"><img src="./img/template-2.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-3"><img src="./img/template-3.png"></a></div></div></div><div class="tab-pane" id="aliquando" role="tabpanel"><div class="row"><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-5"><img src="./img/template-5.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-6"><img src="./img/template-6.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-1"><img src="./img/template-1.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-2"><img src="./img/template-2.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-3"><img src="./img/template-3.png"></a></div><div class="grid_4"><a href="#" data-toggle="modal" data-target="#lightboxModal" data-whatever="template-4"><img src="./img/template-4.png"></a></div></div></div></div><a class="btn btn-secondary" href="#" data-toggle="modal" data-target="#scopeModal">Show more</a><div class="modal fade" id="lightboxModal" tabindex="-1" role="dialog" aria-labelledby="lightboxModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><img id="lightboxImg" src="./img/template-1.png"></div></div></div></section><section id="faq"><div class="container"><div class="text-center"><h2>FAQ'S</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam est. Mauris faucibus tellus ac auctor posuere.</p></div><div class="row"><div class="grid_4"><h3><a href="#vivamus" data-toggle="collapse" aria-expanded="false" aria-controls="vivamus">Vivamus eget nibh. Etiam cursus leo vel metus. Nulla </a></h3><div class="collapse show" id="vivamus"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo</p></div><h3><a href="#diam" data-toggle="collapse" aria-expanded="false" aria-controls="diam">Diam utinam ridens has ex, an veri putant</a></h3><div class="collapse" id="diam"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo</p></div></div><div class="grid_4"><h3><a href="#noster1" data-toggle="collapse" aria-expanded="false" aria-controls="noster1">Noster indoctum his no, apeirian torquatos</a></h3><div class="collapse" id="noster1"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo</p></div><h3><a href="#noster2" data-toggle="collapse" aria-expanded="false" aria-controls="noster2">Noster indoctum his no, apeirian torquatos</a></h3><div class="collapse" id="noster2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo</p></div></div><div class="grid_4"><h3><a href="#diam2" data-toggle="collapse" aria-expanded="false" aria-controls="diam2">Diam utinam ridens has ex, an veri putant</a></h3><div class="collapse" id="diam2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo</p></div><h3><a href="#diam3" data-toggle="collapse" aria-expanded="false" aria-controls="diam3">Diam utinam ridens has ex, an veri putant</a></h3><div class="collapse" id="diam3"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo</p></div></div></div></div></section><div class="modal fade" id="scopeModal" tabindex="-1" role="dialog" aria-labelledby="scopeModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">This part is beyond the scope of the task</h5><button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><ol><li>Сверстать необходимо первые три экрана (блока).</li><li>При верстке макета необходимо использовать нашу сетку grid.css</li><li>Страница должна быть адаптивна (вплоть до 320px) и кросс-браузерна (Safari,</li><li>ome, Firefox) с валидным HTML и без ошибок в консоли</li><li>Использование в проекте gulp и заливка готового кода на git будет плюсом</li><li>На странице необходимо реализовать:</li><ol type="a"><li>Sticky menu</li><li>Drop down</li><li>Smooth scroll to anchor</li><li>Slider</li><li>Pop up</li><li>Tabs</li><li>Lightbox</li><li>Accordion</li></ol></ol></div><div class="modal-footer"><button class="btn btn-secondary" type="button">Save changes</button><button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button></div></div></div></div><script src="./main.js"></script></body></html>