Приміщення з ЕОМ, крім приміщень, в яких розміщуються ЕОМ типу ЕС, СМ та інші великі ЕОМ загального призначення, повинні бути оснащені системою автоматичної пожежної сигналізації відповідно до вимог Переліку однотипних за призначенням об'єктів, які підлягають обладнанню автоматичними установками пожежегасіння та пожежної сигналізації, затвердженого наказом Міністерства внутрішніх справ України від 20.11.97 №779 і зареєстрованого в Міністерстві юстиції України 28.11.97 за №567/2371, та СНиП 2.04.09-84 „Пожарная автоматика зданий и сооружений” з димовими пожежними сповіщувачами та переносними вуглекислотними вогнегасниками з розрахунку 2 шт. На кожні 20 м² площі приміщення з урахуванням гранично допустимих концентрацій вогнегасної рідини відповідно до вимог Правил пожежної безпеки в Україні. В інших приміщеннях допускається встановлювати теплові пожежні сповіщувачі.

Приміщення, в яких розміщуються ЕОМ типу ЄС, СМ та інші великі ЕОМ загального призначення, обладнуються системою автоматичної пожежної сигналізації та засобами пожежегасіння відповідно до вимог Переліку однотипних за призначенням об'єктів, які підлягають обладнанню автоматичними установками пожежегасіння та пожежної сигналізації, СНиП 2.04.09-84, СН 512-78, Правил пожежної безпеки в Україні та вимог нормативно-технічної та експлуатаційної документації заводу-виробника.

Піходи до засобів пожежегасіння повинні бути вільними.

Приміщення для відпочинку осіб, які працюють з ЕОМ, призначені для приймання їжі, психологічного розвантаження, та інші побутові приміщення повинні обладнуватись відповідно до вимог СНиП 2.09.04-87 „Административніе и бітовіе здания”, з урахуванням максимальної кількості працівників, що одночасно працюють у зміні.

Власник організує проведення досліджень шкідливих та небезпечних факторів виробничого середовища і трудового процесу на робочих місцях осіб, які працюють з ЕОМ, відповідно до чинних законодавчих та інших нормативно-правових актів і Порядку проведення атестації робочих місць за умовами праці, затвердженого постановою Кабінету Міністрів України від 01.08.92 №442.

Санітарно-гігієнічні вимоги

Умови праці осіб, які працюють з ЕОМ, повинні відповідати І або ІІ класу згідно з Гігієнічною класифікацією праці за показниками шкідливості та небезпечності факторів виробничого середовища, важкості та напруженості трудового процесу №4137-86, затвердженою МОЗ СРСР 12.08.86.

Вимоги до освітлення

Приміщення з ЕОМ повинні мати природне і штучне освітлення відповідно до СПиП ІІ-4-79 „Естественное и искусственное освещение”.

Природне світло повинно проникати через бічні світлопрорізи, зорієнтовані, як правило, на північ чи північний схід, і забезпечувати коефіцієнт природної освітленості (КПО) не нижче 1,5%. Розрахунки КПО проводяться відповідно до СНиП ІІ-4-79.

При виробничій потребі дозволяється експлуатувати ЕОМ у приміщеннях без природного освітлення за узгодженням з органами державного нагляду за охороною праці органами та установами санітарно-епідеміологічної служби.

Вікна приміщень з відеотерміналами повинні мати регулювальні пристрої для відкривання, а також жалюзі, штори, зовнішні козирки тощо.

Штучне освітлення приміщення з робочими місцями, обладнаними відеотерміналами ЕОМ загального та персонального користування, має бути обладнане системою загального рівномірного освітлення. У виробничих та адміністративно-громадських приміщеннях, де переважають роботи з документами, допускається вживати систему комбінованого освітлення (додатково до загального освітлення встановлюються світильники місцевого освітлення).

Загальне освітлення має бути виконане у вигляді суцільних або переривчастих ліній світильників, що розміщуються збоку від робочих місць (переважно зліва) паралельно лінії зору працівників. Допускається застосувати світильники таких класів світлорозподілу:

- світильники прямого світла - П;

- переважно прямого світла - Н;

- переважно відбитого світла - В.

При розташуванні відеотерміналів ЕОМ за периметром приміщення лінії світильників штучного освітлення повинні розміщуватися локально над робочими міцями.

Для загального освітлення необхідно застосовувати світильники із розсіювачами та дзеркальними екранними сітками або віддзеркалювачами, укомплектовані високочастотними пускорегулювальними апаратами (ВЧ ПРА). Допускається застосовувати світильники без ВЧ ПРА тільки при використанні моделі з технічною назвою „Кососвет”. Застосування світильників без розсіювачів та екранних сіток забороняється.

Як джерело світла при штучному освітленні повинні застосовуватися, як правило, люмінесцентні лампи типу ЛБ. При обладнанні відбивного освітлення у виробничих та адміністративно-громадських приміщеннях можуть застосовуватися металогалогенові лампи потужності до 250 Вт. Допускається у світильниках місцевого освітлення застосовувати лампи розжарення.

Яскравість світильників загального освітлення в зоні кутів випромінювання від 50ъ до 90ъ відносно вертикалі в подовжній і поперечній площинах повинна складати не більше 200 кд/м2, а захисний кут світильників повинен бути не більшим за 40ъ.

Коефіцієнт запасу (Кз) відповідно до СНиП ІІ-4-79 для освітлювальної установки загального освітлення слід приймати рівним 1,4.

Коефіцієнт пульсації повинен не перевищувати 5% і забезпечуватися застосуванням газорозрядних ламп у світильниках загального і місцевого освітлення.

При відсутності світильників або розташовані поруч світильники загального освітлення необхідно підключати до різних фаз трифазної мережі.

Рівень освітленості на робочому столі в зоні розташування документів має бути в межах 300-500 лк. У разі неможливості забезпечити даний рівень освітленості системою загального освітлення допускається застосування світильників місцевого освітлення, але при цьому не повинно бути відблисків на поверхні екрану та збільшення освітленості екрану більше ніж 300 лк.

Світильники місцевого освітлення повинні мати напівпрозорий відбивач світла з захисним кутом не меншим за 40ъ.

Необхідно передбачити обмеження прямої близькості від джерела природного та штучного освітлення, при цьому яскравість поверхонь, що світяться (вікна, джерела штучного світла) і перебувають у полі зору, повинна бути не більшою за 200 кд/м2.

Необхідно обмежувати відбитий блиск шляхом правильного вибору типу світильників та розміщення робочих місць відносно джерел природного та штучного освітлення. При цьому яскравість відблисків на екрані відеотермінала не повинна перевищувати 40 кд/м2.

Необхідно обмежувати нерівномірність розподілу яскравості в полі зору осіб, що працюють з відеотерміналом, при цьому відношення значень яскравості робочих поверхонь не повинно перевищувати 3:1, а робочих поверхонь і навколишніх предметів (стіни, обладнання) - 5:1.

Необхідно використовувати систему вимикачів, що дозволяє регулювати інтенсивність штучного освітлення залежно від інтенсивності природного, а також дозволяє освітлювати тільки потрібні для роботи зони приміщення.

Для забезпечення нормованих значень освітлення в приміщеннях з відеотерміналами ЕОМ загального та персонального користування необхідно очищати віконне скло та світильники не рідше ніж 2 рази на рік, та своєчасно проводити заміну ламп, що перегоріли.

4.2 Вимоги техніки безпеки при експлуатації комп'ютерних систем

Користувачі комп'ютерних систем повинні слідкувати за тим, щоб відеотермінали, комп'ютерних систем, периферійні пристрої комп'ютерних систем та устаткування для обслуговування, ремонту та налагодження комп'ютерних систем були справними і випробуваними відповідно до чинних нормативних документів.

Щоденно перед початком роботи необхідно проводити очищення екрану відеотерміналу від пилу та інших забруднень.

Після закінчення роботи відеотермінал та персональна комп'ютерних систем повинні бути відключені від електричної мережі.

У разі виникнення аварійної ситуації необхідно негайно відключити відеотермінал та комп'ютерні системи від електричної мережі.

При використанні комп'ютерних систем та відеотерміналами лазерних принтерів потрібно дотримуватись вимог Санітарних норм та правил устрою та експлуатації лазерів №5804-91, затверджених Міністерством охорони здоров'я СРСР в 1991р.

При потребі, для захисту від електромагнітних, електростатичних та інших полів можуть застосовуватися спеціальні технічні засоби, що мають відповідний сертифікат або санітарно-гігієнічний висновок акредитованих органів щодо їх захисних властивостей.

Є неприпустимими такі дії:

- виконання обслуговування, ремонту;

- налагодження комп'ютерних систем безпосередньо на робочому місці користувача комп'ютерної системи;

- зберігання біля відеотермінала та комп'ютерних систем паперу, дискет, інших носіїв інформації, запасних блоків, деталей тощо, якщо вони не використовуються для поточної роботи;

- відключення захисних пристроїв, самочинне проведення змін у конструкції та складі комп'ютерних систем, устаткування або їх технічне налагодження;

- робота з відеотерміналами, в яких під час роботи з'являються нехарактерні сигнали, нестабільне зображення на екрані тощо;

- праця на матричному принтері зі знятою (трохи піднятою) верхньою кришкою

Вплив шуму

Відомо, що шум він несприятливо діє на слуховий аналізатор та інші органи та системи організму людини. Визначальне значення щодо такої дії має інтенсивність шуму, його частотний склад, тривалість щоденного впливу, індивідуальні особливості людини, а також специфіка виробничої діяльності. Ті види діяльності, у яких поєднується напружена розумова робота та інтенсивне використання комп'ютера (редагування тексту, верстка оригіналу, "запуск" та відлагодження програм тощо) характеризується відчутним впливом навіть незначних рівнів шуму. Цей вплив виражається у зниженні розумової працездатності, швидкій втомлюваності, послабленні уваги, появі головного болю та ін.

Основними заходами та засобами боротьби з шумом є:

- зниження рівнів шуму в джерелі його утворення (застосовується, як правило, в процесі проектування);

- використання звукопоглинаючих та звукоізолюючих засобів;

- раціональне планування виробничих приміщень та робочих місць.

На комп'ютеризованих робочих місцях основними джерелами шуму є вентилятори системного блоку, накопичувачі, принтери ударної дії. Для зниження рівнів шуму на робочих місцях рекомендується розмістити друкувальні пристрої ударної дії (матричні, шрифтові принтери тощо) в іншому приміщенні, або огородити їх звукоізолюючими екранами.

Під час виконання робіт з ВДТ і ПК у виробничих приміщеннях значення характеристик вібрації на робочих місцях не повинні перевищувати допустимих значень, визначених СН 3044-84 та ГОСТ 12.1.012-90.

Для зниження вібрації обладнання, пристрої, пристосування необхідно встановлювати на спеціальні амортизуючі прокладки, передбачені нормативними документами.

Головним небезпечним фактором небезпеки при експлуатації та ремонті пристрою є електробезпека.

Електрика -- сукупність явищ, зумовлених існуванням, рухом взаємодією електрична заряджених тіл або часток. Електричний струм -- це упорядкований (спрямований) рух електрична заряджених часток. Струм у металах зумовлений наявністю вільних електронів, у електролітах -- іонів. Звичайно силою, яка викликає такий рух, є сила з боку електричного поля усередині провідника, яке визначається електричною напругою на кінцях провідника.

Наявність електричного струму в провідниках призводить до їх нагрівання, зміни хімічного складу, створення магнітного поля.

Електричні прилади, установки, обладнання, з яким людина має справу, становлять для неї велику потенційну небезпеку, яка посилюється тим, що органи чуття людини не можуть на відстані виявити наявність електричної напруги, як, наприклад, теплову, світлову чи механічну енергію. Тому захисна реакція організму виявляється тільки після безпосереднього потрапляння під дію електричного струму. Другою особливістю дії електричного струму на організм людини є те, що струм, проходячи через людину, діє не тільки в місцях контактів і на шляху протікання через організм, а й викликає рефлекторні порушення нормальної діяльності окремих органів (серцево-судинної системи, системи дихання). Третя особливість -- це можливість одержання електротравм без безпосереднього контакту із струмопровідними частинами -- при переміщенні по землі поблизу ушкодженої електроустановки (у випадку замикання на землю), ураження через електричну дугу.

Електричний струм, проходячи через тіло людини, зумовлює перетворення поглинутої організмом електричної енергії в інші види і спричиняє термічну, електролітичну, механічну і біологічну дію. Найбільш складною є біологічна дія, яка притаманна тільки живим організмам.

Статистика свідчить, що більше половини всіх електротравм становлять опіки. Вони важко піддаються лікуванню, тому що глибоко проникають у тканини організму. В електроустановках напругою до 1 кВ найчастіше спостерігаються опіки контактного виду при дотиканні тіла до струмопровідних частин.

Опіки можливі при проходженні через тіло людини струму більше 1 А. Тільки при великому струмі тканини, які уражаються, нагріваються до температури 60--70°С і вище, при якій згортається білок і з'являються опіки.

В електроустановках напругою вище 1 кВ опіки можуть виникнути при випадковому наближенні частин тіла людини до струмопровідних частин на небезпечну відстань; при цьому збільшується напруга електричного поля і внаслідок ударної іонізації діелектрика (повітряного проміжку) опір цього проміжку зменшується, його «пробиває» електричний розряд -- електрична дуга, температура якої досягає приблизно 4000'С. Електричний струм протікає через дугу і тіло людини. За такої високої температури і великої кількості тепла, яка виділяється при проходженні струму через тіло, потерпілий одержує тяжкі опіки, його м'язи скорочуються, дуга і ланцюг струму розриваються.

Майже у всіх випадках включення людини в електричний ланцюг на її тілі і в місцях дотикання спостерігаються «електричні знаки» сіро-жовтого кольору круглої або овальної форми.

При опіках від впливу електричної дуги можлива металізація шкіри частками металу дугової плазми. Уражена ділянка шкіри стає твердою, набуває кольору солей металу, які потрапили в шкіру.

Електролітична дія струму виявляється у розкладанні органічної рідини, в тому числі крові, яка є електролітом, та в порушенні її фізико-хімічного складу.

Біологічна дія струму виявляється через подразнення і збудження живих тканин організму, а також порушення внутрішніх біологічних процесів.

Механічна дія струму призводить до розриву тканин організму внаслідок електродинамічного ефекту, а також миттєвого вибухоподібного утворення пари з тканинної рідини і крові.

Внаслідок дії електричного струму або електричної дуги виникає електротравма. Електротравми умовно поділяють на загальні і місцеві. До місцевих травм належать опіки, електричні знаки, електрометалізація шкіри, механічні пошкодження, а також електрофтальмія, запалення очей внаслідок впливу ультрафіолетових променів електричної дуги). Загальні електротравми називають також електричними ударами. Вони є найбільш небезпечним видом електротравм. При електричних ударах виникає збудження живих тканин, судомне скорочення м'язів, параліч м'язів опорно-рухового апарату, м'язів грудної клітки (дихальних), м'язів шлуночків серця. У першому випадку судомне скорочення м'язів не дозволяє людині самостійно уникнути дотикання з електроустановкою. При паралічі дихання припиняється газообмін і постачання організму киснем, внаслідок чого наступає задуха. При паралічі серця його функції або припиняються повністю, або деякий час продовжуються в режимі тріпотіння (фібриляції). Фібриляція -- це безладдя в скороченні серцевих м'язів. При цьому порушується кровообмін, що також спричиняє смерть. Медичною практикою встановлено, що після припинення роботи серця і дихання внаслідок кисневого голодування через 5--б хвилин гинуть клітини центральної нервової системи, відбувається втрата свідомості і припиняється управління функціями всіх органів тіла. Цей стан має назву «клінічна (уявна) смерть», оскільки клітини інших органів тіла ще живі. Але при більшій тривалості відсутності дихання і кровообміну відбувається припинення життєдіяльності решти клітин і органів і наступає біологічна смерть. Отже, якщо відразу після звільнення людини з-під впливу електричного струму, не пізніше перших 5--6 хвилин, приступити до долікарської допомоги шляхом штучного дихання і непрямого масажу серця, то існує ймовірність запобігти смерті потерпілого.

Розрізняють три ступені впливу струму при проходженні через організм людини (змінний струм):

- відчутний струм -- початок болісних відчуттів (до 0--1,5мА);

- невідпускний струм -- судоми і біль, важке дихання (10--15 мА);

- фібриляційний струм -- фібриляція серця при тривалості дії струму 2--Зс, параліч дихання (90--100мА).

Змінний струм небезпечніший за постійний. При струмі 20--25 мА пальці судомно стискають узятий в руку предмет, який опинився під напругою, а м'язи передпліччя паралізуються і людина не може звільнитися від дії струму. У багатьох паралізуються голосові зв'язки: вони не можуть покликати на допомогу.

За статистикою, найменший струм, за якого наступає смерть, становить 0,8 мА, можливість смерті людей від слабкого струму пояснюється тим, що результат електроураження залежить не тільки від дії струму на серце або органи дихання, але і від впливу на нервову систему з її індивідуальними особливостями.

Електричний опір людини в основному визначається опором рогового шару шкіри, який можна розглядати як тонкий і недосконалий діелектрик, а м'язи і кров -- як провідник. Опір шкіри залежить від площі поверхні і щільності контакту, а також від сили струму і тривалості його дії. Чим вони більші, тим менший опір шкіри (із збільшенням тривалості протікання струму збільшується нагрівання шкіри, потовиділення, в ній відбуваються електролітичні зміни). Опір шкіри також залежить від прикладеної напруги, оскільки вже при напрузі 10--38В пробивається верхній роговий шар шкіри, вона втрачає властивості діелектрика і стає провідником -- через тіло людини проходить струм. При напрузі 127--220В і вище шкіра вже майже не впливає на опір тіла. Суха шкіра має опір приблизно 100 кОм. Опір внутрішніх органів, тканин і судин значно менший (приблизно 800 Ом). При розрахунках опір тіла людини приймають за 1 кОм.

Має значення шлях струму через тіло і особливо місця входу і виходу струму. Із можливих шляхів проходження струму через тіло людини найбільш небезпечним є той, при якому уражається головний мозок (голова -- руки, голова -- ноги), серце і легені (руки -- ноги). Але відомі випадки смертельних уражень електричним струмом, коли струм зовсім не проходив через серце, легені, а йшов, наприклад, через палець або через дві точки на гомілці. Це пояснюється існуванням на тілі людини особливо уразливих точок, які використовують при лікуванні голкотерапією.

Вплив електричного струму на організм людини залежить і від фізичного і психічного стану людини. Нездоров'я, втома, голод, сп'яніння та емоційне збудження призводять до зниження опору.

Несприятливий мікроклімат (підвищена температура, вологість, струмопровідний пил) збільшують небезпеки ураження струмом, тому що волога (піт), пил знижують опір шкіри. При ураженні електричним струмом насамперед необхідно надати потерпілому першу долікарську допомогу.

Висновки

Під час виконання дипломної роботи був розроблений сайт інтренет-порфоліо для фотографа, за допомогою якого користувач цього сайту може переглядати роботи виконавця, інформацію про нього та дізнатися контакти фотографа та скористатися ними при необхідності.

Реалізована програма має інтуїтивно зрозумілий інтерфейс, також дизайн сайта є адаптивним.

Реалізований сайт вдало використовуєтся фотографом для знаходження потенційних клієнтів та звичайними користувачами мережі інтернет.

Література

1 Закон України Про оплату праці.

2 Закон України Про підприємництво.

3 Закон України Про оподаткування прибутку підприємств.

4 ГОСТ 19.001-77 ЄСПД. Загальні положення.

5 ГОСТ 19.002-80 ЄСПД. Схеми алгоритмів і програм. Правила виконання.

6 ГОСТ 19.003-80 ЄСПД. Схеми алгоритмів і програм. Позначення умовні графічні.

7 ГОСТ 19.105-78 ЄСПД. Загальні вимоги до програмних документів.

8 ДСТУ - 2293 - 93. Система стандартів безпеки праці. Охорона праці. Терміни та визначення.

14 СН 4088-86 Мікроклімат виробничих приміщень.

15 А.Матросов. HTML 4.

16 Кузнецов М.В. и Симдянов И.В. Учебник PHP ГОСТ 19.401-78 ЄСПД. Текст програми. Вимоги до змісту і оформлення.

9 ГОСТ 19.402-78 ЄСПД. Опис програми.

10 ГОСТ 19.504-79 ЄСПД. Інструкція програміста.

11 ГОСТ 19.505-79 ЄСПД. Інструкція оператора.

12 ГОСТ 19.506-79 ЄСПД. Опис мови. Вимоги до змісту і оформлення

13 Бойко В., Савинков В. Проектирование баз данніх информационніх систем. -М.: Финансі и статистика, 1989.

14 Дейт К. Введение в систему баз данніх.- М.:Мир, 1998.

15 Джексон Г. Проектирование реляционніх баз данніх. -М.: Мир, 1991.

16 Джудит С. Боуман, Сандра Л. Эмерсон, Марси Дарновски. Практическое руководство по SQL. - М.: Вильямс, 2001. - 336 с.

17 Константайн Л., Локвуд Л. Разработка программного обеспечения: Пер. с англ. - Питер, 2004, -470 с.

Додатки

КОД ПРОГРАМИ

<!DOCTYPE html>

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->

<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->

<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->

<!--[if (gte IE 9)|!(IE)]><!--><html lang="ru" class="no-js"> <!--<![endif]-->

<head>

<meta charset="utf-8" />

<title>Главная страница</title>

<meta content="" name="description" />

<link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon" />

<link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png" />

<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-touch-icon-72x72.png" />

<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-touch-icon-114x114.png" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />

<link rel="stylesheet" href="libs/linea/styles.css" />

<link rel="stylesheet" href="libs/magnific-popup/magnific-popup.css" />

<link rel="stylesheet" href="css/fonts.css" />

<link rel="stylesheet" href="css/main.css" />

<link rel="stylesheet" href="css/media.css" />

</head>

<body>

<aside class="left_side">

<div class="btn_mnu" title="Меню">

<div class="btn_row"></div>

<div class="btn_row"></div>

<div class="btn_row"></div>

</div>

<div class="aside_content">

<div class="user_info">

<img src="img/L8e0XSHj1zM.jpg" alt="Владислав Ралько">

<h2>Владислав Ралько</h2>

<p>Фотограф, дизайнер, иллюстратор</p>

</div>

<nav>

<ul>

<li><a href="index.html" title="Портфолио">Портфолио</a></li>

<li><a href="about.html" title="Обо мне">Обо мне</a></li>

<li><a href="contacts.html" title="Контакты">Контакты</a></li>

</ul>

</nav>

</div>

</aside>

<div class="content gallery">

<a class="sv" href="img/images/1.jpg"><img src="img/dummy.pn" data-original="img/images/1.jpg" alt="Alt"></a>

<a class="dr" href="img/images/2.jpg"><img src="img/dummy.pn" data-original="img/images/2.jpg" alt="Alt"></a>

<a class="sv" href="img/images/3.jpg"><img src="img/dummy.pn" data-original="img/images/3.jpg" alt="Alt"></a>

<a class="sv" href="img/images/4.jpg"><img src="img/dummy.pn" data-original="img/images/4.jpg" alt="Alt"></a>

<a class="dr" href="img/images/5.jpg"><img src="img/dummy.pn" data-original="img/images/5.jpg" alt="Alt"></a>

<a class="dr" href="img/images/6.jpg"><img src="img/dummy.pn" data-original="img/images/6.jpg" alt="Alt"></a>

<a class="dr" href="img/images/7.jpg"><img src="img/dummy.pn" data-original="img/images/7.jpg" alt="Alt"></a>

<a class="sv" href="img/images/8.jpg"><img src="img/dummy.pn" data-original="img/images/8.jpg" alt="Alt"></a>

<a class="dr" href="img/images/9.jpg"><img src="img/dummy.pn" data-original="img/images/9.jpg" alt="Alt"></a>

<a class="dr" href="img/images/10.jpg"><img src="img/dummy.pn" data-original="img/images/10.jpg" alt="Alt"></a>

<a class="sv" href="img/images/1.jpg"><img src="img/dummy.pn" data-original="img/images/1.jpg" alt="Alt"></a>

<a class="dr" href="img/images/2.jpg"><img src="img/dummy.pn" data-original="img/images/2.jpg" alt="Alt"></a>

<a class="sv" href="img/images/3.jpg"><img src="img/dummy.pn" data-original="img/images/3.jpg" alt="Alt"></a>

<a class="sv" href="img/images/4.jpg"><img src="img/dummy.pn" data-original="img/images/4.jpg" alt="Alt"></a>

<a class="sv" href="img/images/5.jpg"><img src="img/dummy.pn" data-original="img/images/5.jpg" alt="Alt"></a>

<a class="dr" href="img/images/6.jpg"><img src="img/dummy.pn" data-original="img/images/6.jpg" alt="Alt"></a>

<a class="sv" href="img/images/7.jpg"><img src="img/dummy.pn" data-original="img/images/7.jpg" alt="Alt"></a>

<a class="sv" href="img/images/8.jpg"><img src="img/dummy.pn" data-original="img/images/8.jpg" alt="Alt"></a>

<a class="sv" href="img/images/9.jpg"><img src="img/dummy.pn" data-original="img/images/9.jpg" alt="Alt"></a>

<a class="sv" href="img/images/10.jpg"><img src="img/dummy.pn" data-original="img/images/10.jpg" alt="Alt"></a>

</div>

<div class="filter_items">

<button class="filter_label active">Все</button>

<button class="filter_label" data-filter=".sv">Свадьба</button>

<button class="filter_label" data-filter=".dr">День рождения</button>

</div>

<div class="hidden"></div>

<div class="loader">

<div class="loader_inner"></div>

</div>

<!--[if lt IE 9]>

<script src="libs/html5shiv/es5-shim.min.js"></script>

<script src="libs/html5shiv/html5shiv.min.js"></script>

<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>

<script src="libs/respond/respond.min.js"></script>

<![endif]-->

<script src="libs/jquery/jquery-1.11.2.min.js"></script>

<script src="libs/modernizr/modernizr.js"></script>data-original

<script src="libs/bootstrap/js/bootstrap.min.js"></script>

<script src="libs/freewall/freewall.js"></script>

<script src="libs/magnific-popup/jquery.magnific-popup.min.js"></script>

<script src="libs/nicescroll/jquery.nicescroll.min.js"></script>

<script src="libs/lazyload/jquery.lazyload.min.js"></script>

<script src="js/common.js"></script>

</body>

</html>

body {

font-family: "RalewayRegular", sans-serif;

font-weight: normal;

font-size: 14px;

min-width: 320px;

position: relative;

line-height: 1.7;

-webkit-font-smoothing: antialised;

overflow-x: hidden;

background-color: #181818;

}

body input:focus:required:invalid,

body textarea:focus:required:invalid {

/*color: red;*/

}

body input:required:valid,

body textarea:required:valid {

/*color: green;*/

}

.hidden {

display: none;

}

.left_side {

background-color: #111;

position: fixed;

left: 0;

top: 0;

width: 50px;

height: 100%;

z-index: 10;

color: #fff;

overflow-x: hidden;

outline: none;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.left_side.active{

width: 300px;

}

/*Кнопка меню*/

.btn_mnu {

width: 50px;

height: 50px;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-color: tomato;

cursor: pointer;

position: relative;

}

.btn_row {

height: 2px;

width: 60%;

margin: 2px 0;

background-color: #fff;

position: relative;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.btn_mnu.active .btn_row:first-child {

-webkit-transform: rotate(-135deg);

-ms-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

top: 6px;

}

.btn_mnu.active .btn_row:last-child {

-webkit-transform: rotate(-225deg);

-ms-transform: rotate(-225deg);

-o-transform: rotate(-225deg);

transform: rotate(-225deg);

top: -6px;

}

.btn_mnu.active .btn_row:nth-child(2) {

opacity: 0;

}

.btn_mnu {

float: right;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.left_side.active .btn_mnu {

background-color: transparent;

}

.aside_content {

position: absolute;

top: 50px;

width: 100%;

padding: 25px 0;

}

.user_info {

text-align: center;

opacity: 0;

white-space: nowrap;

-webkit-transition: all .2s;

-o-transition: all .2s;

transition: all .2s;

}

.left_side.active .user_info{

opacity: 1;

}

.user_info img {

width: 120px;

height: 120px;

border-radius: 50%;

}

.user_info h2 {

font-size: 16px;

}

.user_info p {

font-size: 12px ;

letter-spacing: 1px;

color: #434343;

}

.aside_content nav{

margin: 35px 0;

position: relative;

z-index: 5;

}

.aside_content ul,

.aside_content li {

margin: 0;

padding: 0;

list-style-type: 0;

}

.aside_content li a {

border-bottom: 1px solid #212121;

color: #b2b2b2;

display: block;

padding: 10px 0 10px 70px;

white-space: nowrap;

background-color: #111;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.aside_content li a:first-child{

border-top: 1px solid #212121;

}

.aside_content li a:hover{

text-decoration: none;

background-color: tomato;

color: #fff;

}

.left_side.active .aside_content li a::before{

margin-left: -32px;

}

.left_side .aside_content nav{

margin-top: -110px;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.left_side.active .aside_content nav{

margin-top: 35px;

}

.left_side .aside_content li:hover a{

border-right-color: tomato;

}

.left_side.active .aside_content li:hover a{

text-indent: 5px;

}

.aside_content li a::before{

font-family: "linea-basic-10";

font-size: 25px;

line-height: 0;

margin-left: -58px;

margin-right: 13px;

margin-top: -4px;

vertical-align: middle;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.aside_content li:nth-child(1) a::before {

content: "u";

}

.aside_content li:nth-child(2) a::before {

content: "{";

}.aside_content li:nth-child(3) a::before {

content: "R";

}

.loader {

background: none repeat scroll 0 0 #ffffff;

bottom: 0;

height: 100%;

left: 0;

position: fixed;

right: 0;

top: 0;

width: 100%;

z-index: 9999;

}

.loader .loader_inner {

background-image: url("../img/preloader.gif");

background-size: cover;

background-repeat: no-repeat;

background-posirion: center center;

background-color: #fff;

height: 60px;

width: 60px;

margin-top: -30px;

margin-left: -30px;

left: 50%;

top: 50%;

position: absolute;

}

.content {

position: relative;

margin: 5px 5px 55px 55px;

left: 0;

-webkit-transition: all .4s;

-o-transition: all .4s;

transition: all .4s;

}

.gallery a {

overflow: hidden;

width: 320px;

display: block;

}

.gallery img {

display: block;

max-width: 100%;

-webkit-transition: all 15s;

-o-transition: all 15s;

transition: all 15s;

}

.gallery img:hover {

-webkit-transform: scale(5);

-ms-transform: scale(5);

-o-transform: scale(5);

transform: scale(5);

}

.left_side.active + .content {

left: 250px;

transition-delay: .5s;

}

.filter_items {

bottom: 0;

color: #fff;

padding: 10px 10px 0;

position: fixed;

right: 0;

text-align: right;

width: 100%;

background-color: #181818;

}

.filter_label {

background-color: transparent;

border-color: #fff;

padding: 5px 15px;

opacity: .4;

margin: 0 3px 15px;

font-size: 12px;

letter-spacing: 3px;

border: 1px #fff solid;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.filter_label:hover,

.filter_label.active {

background-color: tomato;

opacity: 1;

border-color: tomato;

}

.mfp-content {

width: 100%;

}

.mfp-container {

padding: 0;

}

img.mfp-img {

display: block;

height: auto;

max-height: none !important;

padding: 0;

max-width: 100%;

}

.mfp-figure button.mfp-close {

background-color: tomato;

height: 50px;

padding: 0;

position: fixed;

right: 15px;

text-align: center;

width: 50px;

}

/* magnific library opened */

.mfp-zoom-out-cur .content {

left: -100%;

}

.mfp-figure {

background-color: transparent;

}

.mfp-figure::after {

bottom: 0;

top: 0;

background-color: #181818;

}

.mfp-bottom-bar {

margin-left: -20px;

}

button.mfp-arrow {

display: none;

}

/* overlay at start */

.mfp-fade.mfp-bg {

opacity: 0;

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

transition-delay: .4s;

}

/* overlay animate in */

.mfp-fade.mfp-bg.mfp-ready {

opacity: 1;

}

/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {

opacity: 1;

}

/* content at start */

.mfp-fade.mfp-wrap .mfp-content {

left: 100%;

-webkit-transition: all .4s;

-o-transition: all .4s;

transition: all .4s;

}

/* content animate it */

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {

left: 0;

}

/* content animate out */

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {

left: 100%;

-webkit-transition: all .4s;

-o-transition: all .4s;

transition: all .4s;

}

.mfp-fade.mfp-wrap.mfp-removing .mfp-arrow {

display: none!important;

}

.inside {

background-color: #fafafa;

}

.inside .content {

padding: 70px 10% 50px;

}

.content_header {

text-align: center;

}

.content_header img {

width: 220px;

height: 220px;

border-radius: 50%;

margin-bottom: 35px;

}

.content_header p {

letter-spacing: 3px;

}

.content_body {

margin-top: 35px;

font-size: 16px;

}

.ul_contacts,

.ul_contacts li {

margin: 0;

padding: 0;

list-style-type: none;

}

.form_contacts {

margin-top: 50px;

padding: 0;

}

.ul_contacts {

padding: 15px;

}

.ul_contacts li {

margin-bottom: 40px;

}

.ul_contacts i {

font-size: 28px;

margin-right: 5px;

vertical-align: middle;

}

.ul_contacts h3 {

margin-bottom: 5px;

font-size: 20px;

}

.content_body a {

color: tomato;

text-decoration: underline;

}

.form_contacts form {

background-color: #181818;

color: #fff;

padding: 30px;

}

.callback h3 {

margin-top: 0;

text-align: center;

margin-bottom: 25px;

font-size: 22px;

font-weight: normal;

}

.form_contacts label {

color: #5b5b5b;

font size: 13px;

letter-spacing: 3px;

margin-bottom: 15px;

width: 100%;

}

.form_contacts input {

display: block;

width: 100%;

}

.form_contacts input,

.form_contacts textarea {

background-color: #2e2e2e;

border: 1px solid #484848;

color: #fff;

display: block;

margin-top: 5px;

padding: 10px;

width: 100%;

max-width: 100%;

font-size: 15px;

}

.button {

background-color: tomato;

border: medium none;

display: block;

line-height: 42px;

margin: 15px auto 10px;

padding: 0 20px;

}

Размещено на Allbest.ru