мастер алекс

Очень нравится общий вид этого шаблона :http://www.templatemo.com/live/templatemo_423_artcore Но в нем много для меня лишнего. Помогите отсечь не нужное но не повредить его работоспособность. Этап 1: На главной странице в нижней части слайдер из 3х изображений, которые не меняются сами. Мне нужно убрать два скрытых изображения и тем самым упразднить слайдер - сделать обычную область с фоновым изображением и текстом. Секция отвечающая за слайдер: <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image: url(images/slide1.jpg);"> <div class="overlay-s"></div> <div class="slider-caption"> <div class="inner-content"> <h2>Earth New House Project</h2> <p>Artcore is free HTML5 template by <b class="blue">template</b><b class="green">mo</b>. Credit goes to <a rel="nofollow" href="http://unsplash.com">Unsplash</a> for photos.</p> <a href="#" class="main-btn white">View Projects</a> </div> <!-- /.inner-content --> </div> <!-- /.slider-caption --> </div> <!-- /.swier-slide --> <div class="swiper-slide" style="background-image: url(images/slide2.jpg);"> <div class="overlay-s"></div> <div class="slider-caption"> <div class="inner-content"> <h2>Hotel and Residence Concept in Montenegro</h2> <p>We come with new fresh and unique ideas.</p> <a href="#" class="main-btn white">View Projects</a> </div> <!-- /.inner-content --> </div> <!-- /.slider-caption --> </div> <!-- /.swier-slide --> <div class="swiper-slide" style="background-image: url(images/slide3.jpg);"> <div class="overlay-s"></div> <div class="slider-caption"> <div class="inner-content"> <h2>Natural 3d Architecture Design</h2> <p>Natural concrete is a material which is calm and clean.</p> <a href="#" class="main-btn white">View Projects</a> </div> <!-- /.inner-content --> </div> <!-- /.slider-caption --> </div> <!-- /.swier-slide --> </div> <!-- /.swiper-wrapper --> </div> <!-- /.swiper-container -->CSS .swiper-container { overflow: hidden; width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;}@media screen and (max-width: 768px) { .swiper-container { top: 120px; } .swiper-container a.main-btn { display: none; }}.swiper-wrapper { width: 100%; height: 100%;}.swiper-slide { background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; position: relative; z-index: 8;}.overlay-s { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9;}.slider-caption { position: absolute; overflow: hidden; z-index: 10; width: 100%; top: 53%; color: white;}.slider-caption h2 { color: white; text-transform: uppercase; font-weight: 300; font-size: 2.5em; margin-bottom: 20px;}.slider-caption p { margin-bottom: 30px; font-size: 1.5em; font-weight: 300;}.slider-caption .inner-content { width: 60%; margin: 0 auto;}.slider-caption a { color: white;}.slider-caption a.main-btn:hover { background-color: rgba(255, 255, 255, 0.1);}@media screen and (min-width: 769px) and (max-width: 991px) { .slider-caption h2 { font-size: 1.7em; } .slider-caption p { font-size: 1em; }}@media screen and (max-width: 768px) { .slider-caption { top: 47%; } .slider-caption h2 { font-size: 1.7em; } .slider-caption p { font-size: 1em; }} Этап 2: Меню. При уменьшении разрешения экрана, меню собирается в квадрат и скрывает пункты меню. В моем варианте предполагается всего 4 пункта меню и они вполне гармонично на другом шаблоне размещаются друг под другом. Как заставить меню не собираться в квадрат а просто при сжатии выстраиваться столбиком?

Класс)))))))))))). Сейчас попробую детально изучить. Но я так понимаю если по верх этих картинок нужно будет написать краткий текст к примеру "фотографии 2014", то тут лучше будет divы использовать, или я ошибаюсь? А чуметь)). Линия реализована через "бордер")? Думал по готовому разберусь, но уже когда "before" увидел, понял, что моих примитивных знаний маловато будет).

Собственно никак не получается выкроить время на полноценное освоение материала по верстке. Хотел попросить помощи. Думаю со временем разберусь уже по готовой странице. Есть задумка небольшой галереи для дальних родственников, из шаблонов выбрал приблизительно, что хочу получить на выходе. Оказалось реализовать это с точностью, как в шаблоне, не по моим знаниям. Пробовал писать сайты лет 5 назад, но уже знаний не осталось - попытка вспамнить и освоить новые знания ни к чему не привели ( http://htmlforum.ru/index.php?showtopic=54188 ). Помогите наставлениями и протыкайте носом. Если нужно с меня "спасибо" в материальном эквиваленте. 1я страница должна быть такой: 2я страница (после нажатия на один из маленьких квадратиков): Сегодня начал все с нуля https://jsfiddle.net/4Lxe564o/ Но точно раньше получалось выстраивать блоки по середине родительских))), а сейчас ступор с маленькими дивами под фотки. Изначально думал сделать две колонки с лева и права от центральной-вертикальной линии (эффект дерева классный)). Теперь думаю проще маленькие блоки разместить по центру среднего блока+ так проще будет с позиционировать их при изменении разрешения экрана (показывать родственникам на планшете). Разбираясь как сделать все вокруг этих линий и масштабируемо(адаптивно), забыл напрочь основы(((.

То есть пустой див с линией, и как понимаю его абсолютно позиционировать по середине?

Прикинул примерное размещение блоков. У блоков (div-a, div-b, div-c) сделаю хвостики в нужных местах(линии). Поскольку они будут привязаны к самим блокам, и когда блоки будут изменять размер, подстраиваясь под разрешение, то думаю линии останутся на тех местах на которых нужно. А центральную-вертикальную линию, думаю проще, сделать частью фона ровно в центре по границе левой и правой части контента. Пробовал понять как в родном шаблоне это реализовано ( http://html5up.net/overflow ), пока не осилил.

Учусь делать страницу с галереей. Изображение взято по примеру одного из шаблонов. На данном этапе изучения начал писать код: https://jsfiddle.net/sh642v1b/ Хотел спросить совета: как реализуется это дерево из белых линий между блоками. Видел примеры с подложенным изображением, но делаю страничку которая будет меняться при изменении размера окна и как понял фон может не попадать на блоки.