Веб-мастерская Ларисы ВоронинойОдностраничник «Детективное агентство».
WEB-мастерская Ларисы Ворониной logo

Одностраничник «Детективное агентство». Дек 21 2016


В этой статье вы можете скачать HTML CSS шаблон одностраничного сайта "Детективное агентство", а также макет дизайна в Photoshop.

Скачать макет в Photoshop.
Одностраничник – это сайт, который состоит всего из одной страницы (index.html), на которой и содержится весь контент.

Главное меню располагается вверху в виде кнопок.

Меню сайдбара находится в левой панели.

В нужных местах контента (в заголовках) стоят «якоря», ссылки на которые располагаются в пунктах меню.

Правильный переход к якорям обеспечивает библиотека JQuery и код JavaScript. Такой подход создаёт эффект многостраничного сайта.

Посмотреть как выглядит и работает сайт вы можете по этой ссылке.

Дизайн.

Дизайн сайта выполнен в чёрно-белых тонах. Картинки для дизайна взяты с бесплатного фотостока  www.firestock.ru.

Скачать макет сайта в Фотошопе вы можете вот здесь.

Верстка.

Как делать нарезку изображений в Фотошопе вы можете прочитать в этой статье.

Для корректной работы необходима библиотека JQuery. Скачиваем здесь и помещаем её в папку js.

Сам сайт состоит из двух файлов index.html и style.css.

index.html

<!DOCTYPE html>
<html>
     <head>
          <title>Детективное агентство</title>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" />
          <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
     </head>
     <body>
          <div class="wrapper">
               <div class="sidebar">
                    <div class="logo"> </div>
                    <ul>
                         <li><a href="#sid1">Наблюдение и слежка</a></li><br>
                         <li><a href="#sid2">Розыск людей</a></li><br>
                         <li><a href="#sid3">Розыск имущества</a></li><br>
                         <li><a href="#sid4">Расследование угроз</a></li><br>
                         <li><a href="#sid5">Помощь в решении семейных проблем</a></li>
                    </ul>
               </div>
               <div class="content">
                    <div class="header">
                         <img src="images/img1.png">
                         <p>Детективное агентство «Город» предлагает качественные и профессиональные услуги частного детектива.</p>
                         <ul>
                              <li><a href="#about">Главная</a></li>
                              <li><a href="#service">Услуги</a></li>
                              <li><a href="#contact">Контакты</a></li>
                         </ul>
                         <div class="line"></div>
                    </div>
                    <div class="content-main">
                         <div style="height:230px"></div>
                         <div class="about">
                              <h2 id="about">О нас</h2>
                              <p>Детективное агентство "Город" поможет Вам разобраться в сложных ситуациях, собрать для вас достоверную информацию, проверить партнёров по бизнесу, выявить измену супруга и образ жизни подростка.
                              </p>
                              <p>В Нашем агентстве работают только профессионалы своего дела с большим опытом частного сыска.
                              </p>
                              <p>Мы гарантируем Вам 100 процентную конфиденциальность и предельную осторожность!
                              </p>
                         </div>
                         <div style="height:270px"></div>
                         <div class="service">
                              <h2 id="service">Наши услуги</h2>
                              <ul>
                                   <li><a href="#sid1">- Наблюдение и слежка</a></li>
                                   <li><a href="#sid2">- Розыск людей</a></li>
                                   <li><a href="#sid3">- Розыск имущества</a></li>
                                   <li><a href="#sid4">- Расследование угроз</a></li>
                                   <li><a href="#sid5">- Помощь в решении семейных проблем</a></li>
                             </ul>
                         </div>
                         <div style="height:270px"></div>
                         <div class="contact">
                              <h2 id="contact">Контакты</h2>
                              <p>Вы можете обратиться к нам по телефону: 8(495)000-00-00, менеджер Анна</p>
                              <p>Или же по адресу:</p>
                              <p>г. Москва, ул. Верхняя Солнечная, дом 25 аудитория 30</p>
                              <p>Также вы можете написать нам письмо 000@gmail.com</p>
                         </div>
                         <div style="height:270px"></div>
                         <div class="sid1">
                              <h2 id="sid1">Наблюдение и слежка</h2>
                              <p>Скрытое наблюдение и слежка это самый древний и один из самых эффективных способов получения информации об интересующим Вас человеке.</p>
                              <p>Слежка за объектом производится двумя способами:</p>
                              <ul>
                                   <li>- Наружное наблюдение за объектом профессиональным детективом.</li>
                                   <li>- Скрытое наблюдение с помощью подслушивающих устройств а также слежение с применением других технических средств</li>
                              </ul>
                         </div>
                         <div style="height:270px"></div>
                         <div class="sid2">
                              <h2 id="sid2">Розыск людей</h2>
                              <p>Наше детективное агентство окажет Вам помощь в поиске пропавших родных и близких людей. Так же займутся и розыском должников. Наши детективы работают качественно и оперативно, стоимость обговаривается с каждым клиентом индивидуально и зависит от сложности дела.</p>
                         </div>
                         <div style="height:270px"></div>
                         <div class="sid3">
                              <h2 id="sid3">Розыск имущества</h2>
                              <p>Одним из направлений работы нашего детективного агентства является розыск имущества должника. Должник не хочет возвращать долг? Скрывается сам? Изо всех сил пытается скрыть имущество, принадлежащее ему? Наши детективы помогут Вам решить все трудности по розыску имущества,и самого должника.</p>
                        </div>
                        <div style="height:270px"></div>
                        <div class="sid4">
                             <h2 id="sid4">Расследование угроз</h2>
                             <p>Угрозой является акт запугивания, обещания нанести кому-либо вред.</p>
                             <p>Запугивания, поступившие в Ваш адрес либо адрес Ваших родных, требуют незамедлительной адекватной реакции.Промедление в данном вопросе может закончиться весьма печально.</p>
                             <p>Обращение в правоохранительные органы не всегда дают положительных результатов.</p>
                             <p>Наше детективное агенство поможет Вам найти источник угроз и предпримет меры по устранению угроз.</p>                         </div>
                         <div style="height:270px"></div>
                         <div class="sid5">
                              <h2 id="sid5">Помощь в решении семейных проблем</h2>
                              <p>Вы подозреваете супруга в измене? Вы хотите выяснить где пропадает Ваш ребёнок? Вас настораживает неадекватное поведение члена Вашей семьи?</p>
                              <p>Наше детективное агентство поможет Вам разобраться в решении семейных проблем. Мы поможем установить истинную причину неадекватного поведения близкого человека, нежелательные контакты и нейтрализовать их.</p>
                         </div>
                         <div style="height:270px"></div>
                    </div>
               </div>
          </div>
     <script>
$('a[href^="#"]').click(function () {
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top - 230 }, 00);
return false;
});
     </script>
     </body>
</html>

style.css

body {
background: #0e0e0e url(images/fon.jpg) no-repeat top center fixed;
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 850px;
}
.sidebar {
position:fixed;
background:#000;
width: 250px;
height: 100%;
float:left;
}
.sidebar ul li{
list-style:none;
margin: 0 20px 0 0;
}
.sidebar ul li a{
font:18px "Century Gothic";
color:#ccc;
text-decoration:none;
}
.sidebar ul li a:hover{
color:#fff;
font-weight: bold;
}
.logo {
background: url(images/logo.png)no-repeat ;
width: 270px;
height: 300px;
margin: 20px 0 0 20px;
}
.content {
float: right;
width: 600px;
background: #ccc;
}
.header {
background: #ccc;
position: fixed;
width: 600px;
height: 230px;
}
.header ul {
position: relative;
margin: 0 auto;
overflow: hidden;
width: 600px;
margin-top: -20px;
}
.header ul li {
display: inline-block;
list-style-type: none;
margin: 5px 25px 5px 25px;
padding: 5px 10px 5px 10px;
background: linear-gradient(to top, #000, #fff);
border-radius: 7px;
height: 25px;
width: 100px;
}
.header ul li a{
color: #fff;
font:18px "Century Gothic";
text-decoration:none;
padding: 10px;
}
.header ul li a:hover{
font-weight: bold;
}
.header p{
font:20px "Century Gothic";
}
.line {
background: url(images/line.png) no-repeat;
margin: 0 auto;
overflow: hidden;
width: 310px;
height: 100px;
}
span {
float: right;
margin: 10px 20px 0 0;
}h2 {
padding-left: 20px;
padding-bottom: 10px;
font:24px "Century Gothic";
color:#000;
}
p {
padding: 0 20px 20px 20px;
font:18px "Century Gothic";
}
img {
float: left;
margin: 20px;
}
.content-main ul li {
padding: 0 20px 20px 0px;
font:18px "Century Gothic";
list-style-type: none;}
.content-main ul li a {
text-decoration:none;
color: #000;
}
.content-main ul li a:hover {
font-weight: bold;
}

По аналогии вы можете создать свой собственный сайт.

Работу сайта смотрим вот здесь.


Рейтинг@Mail.ru