-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (178 loc) · 15.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!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"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Custom Tattoo</title>
<meta name="description" content="">
<!-- Bootstrap v4 -->
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
<!-- Header CSS (First Sections of Website: compress & paste after release from _header.css here) -->
<style>@font-face{font-family:"Bernier";src:url("fonts/Bernier/BERNIER.ttf")}body{color:#fff;min-width:320px;position:relative;line-height:1.6;overflow-x:hidden;background-color:#242424;-webkit-font-smoothing:antialiased; -webkit-overflow-scrolling:touch}h1,h2,h3,h4,h5,h6,#menuToggle,.headerbutton{font-family:"Bernier";font-weight:300}.menu{position:fixed;left:-200px;width:260px;height:100%;top:0;z-index:15;text-align:right}.menu.menu-open{left:0px}.menu-wrap{position:absolute;top:0;right:60px;background:#1a1a1a;width:200px;height:100%}.menu h1.logo a{font-size:30px;font-weight:700;letter-spacing:0.15em;line-height:40px;text-transform:uppercase;color:#fff;margin-top:20px}.menu h1.logo a:hover{color:#f85c37}.menu img.logo{margin:20px 0;max-width:160px}.menu a{margin-right:20px;color:#808080;display:block;font-size:12px;font-weight:700;line-height:40px;letter-spacing:0.1em;text-transform:uppercase}.menu a:hover{color:#fff}.menu a:active{color:#fff}.menu a >i{float:right;display:inline-block;vertical-align:middle;text-align:right;width:25px;font-size:14px;line-height:40px;margin:25px 2px}.menu-close{cursor:pointer;display:block;position:absolute;font-size:14px;color:#808080;width:40px;height:40px;line-height:40px;top:20px;left:5px;-webkit-transition:all .1s ease-in-out; -moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.menu-close:hover{color:#fff;-webkit-transition:all .1s ease-in-out; -moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.body-push{overflow-x:hidden;position:relative;right:0}.body-push-toright{right:0px}.body-push-toleft{right:-200px}.menu,.body-push{-webkit-transition:all .3s ease; -moz-transition:all .3s ease;transition:all .3s ease}#menuToggle{position:absolute;top:20px;right:-30px;z-index:11;display:block;text-align:center;font-size:30px;color:#fff;width:70px;height:40px;line-height:40px;cursor:pointer;background:rgba(0,0,0,0.25);-webkit-transition:all .1s ease-in-out; -moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#menuToggle:hover{color:#fff;background:rgba(0,0,0,0.2);-webkit-transition:all .1s ease-in-out; -moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#headerwrap{background:url(img/header.jpg) no-repeat center top; padding-top:20px;text-align:center;background-attachment:scroll;background-position:50% 50%;height:100vh; background-size:100%; background-size:cover; position:relative; z-index:2}#headerwrap h1{color:white;font-size:70px;font-weight:700}#headerwrap h3{color:white;font-size:30px;font-weight:100; font-style:oblique}#headerwrap .logo{text-align:left;margin-left:20px;margin-top:15px}.pattern{height:100%;width:100%;background:-webkit-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,0.5),rgba(36,36,36,1));background:-moz-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,0.5),rgba(36,36,36,1));background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5),rgba(36,36,36,1));z-index:9;position:absolute;top:0;left:0}.full{height:100%}.up{z-index:10}.headerbutton{position:absolute;top:20px;right:30px;z-index:10;padding:0 20px;background-color:#FA6161;border-radius:5px}.headerbutton a{color:#fff;font-size:25px}.headerbutton a:hover{text-decoration:none;color:#000}</style>
<!-- Load CSS Compilled without JS -->
<noscript><link rel="stylesheet" href="compiled.css"></noscript>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favicon/icon.png" 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">
</head>
<body data-spy="scroll" data-offset="0" data-target="#theMenu">
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo"><a href="index.html#home">Custom tattoo</a></h1>
<a href="#home" class="smoothScroll">Home</a>
<a href="#about" class="smoothScroll">About</a>
<a href="#portfolio" class="smoothScroll">Portfolio</a>
<a href="#contact" class="smoothScroll">Contact</a>
<a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</div>
<!-- Menu button -->
<div id="menuToggle">MENU</div>
</nav>
<a href="#home" class="button_top smoothScroll"><i class="fa fa-angle-double-up"></i></a>
<!-- ========== HOME SECTION ========== -->
<section id="home" name="home"></section>
<div id="headerwrap">
<div class="headerbutton"><a href="#contact" class="smoothScroll">Make an appointment</a></div>
<div class="pattern"></div>
<div class="container full">
<div class="row align-items-center full">
<div class="col-12 up"><img src="img/logo.png" alt="">
</div>
</div>
</div><!-- /container -->
</div>
<!-- ========== ABOUT SECTION ========== -->
<section id="about" name="about"></section>
<div class="f">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12"><h3>ABOUT US</h3>
<p class="centered"><i class="icon icon-circle"></i><i class="icon icon-circle"></i><i class="icon icon-circle"></i></p></div>
<!-- INTRO INFORMATIO-->
<div class="col-lg-9 col-md-10 col-sm-9 col-8 circle">
<h4>Tattoo Studio - Custom Tattoo</h4>
<img src="img/studio.jpg" alt="" class="img-fluid m-top-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cupiditate, non facilis nesciunt similique maiores pariatur aut adipisci iusto obcaecati modi ullam beatae ad molestias eos delectus officia sapiente quas eaque iste aperiam! Sunt ut debitis dignissimos ad fuga architecto, ducimus qui voluptatem obcaecati commodi omnis quidem distinctio doloribus adipisci. Quisquam veniam, eaque minima. Dicta, consectetur modi autem labore quo.</p>
<hr/>
<h4 class="t-a-left">Tatiana KARA - head master</h4>
<img src="img/personal/1.jpg" alt="" class="rounded-circle float-left m-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus officia nemo numquam, at, ex assumenda consectetur maxime omnis quo fugiat. Deleniti amet repudiandae ipsa voluptatibus nostrum provident alias velit, incidunt consectetur iste, repellat! Id, repellendus delectus nulla corporis qui voluptas? Libero ex natus repellendus accusamus quaerat consequuntur doloribus cumque ratione officia, eligendi, eveniet, repellat maxime quidem obcaecati consequatur quae, totam.</p>
<hr/>
<h4 class="t-a-right">Zina SONG - master</h4>
<img src="img/personal/2.jpg" alt="" class="rounded-circle float-right m-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque at sit eos consequuntur! Nemo nulla amet dolorum quis provident, perferendis enim in, suscipit quasi ratione asperiores distinctio harum sapiente illo. Sit blanditiis minima officiis quidem illum alias, totam pariatur dolorem neque iusto tempora ipsam possimus aliquam? Debitis magni et, officia beatae, laudantium, architecto qui doloribus in voluptas quidem iusto accusantium.</p>
<hr/>
<h4 class="t-a-left">Kira TARA - student of master</h4>
<img src="img/personal/3.jpg" alt="" class="rounded-circle float-left m-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto blanditiis consequatur enim incidunt sint suscipit totam laudantium, nesciunt ullam harum similique eos tempore quam eligendi, odit nihil magni tempora odio praesentium, a laborum. Exercitationem perspiciatis eius cum ea beatae explicabo repellat recusandae voluptatum natus tempore inventore, itaque aspernatur rem minus vitae doloribus! Modi ad error incidunt ipsa placeat porro iusto!</p>
<hr/>
<h4 class="t-a-right">Zara FIREOVA - administrator</h4>
<img src="img/personal/4.jpg" alt="" class="rounded-circle float-right m-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum corporis soluta eligendi veniam perferendis deserunt totam aliquam fuga optio autem aperiam saepe dolorem, facere facilis animi, laboriosam nam. Quia optio vitae dolorem rerum natus tenetur praesentium repudiandae adipisci, laborum officia. Eaque, accusantium odit ea animi temporibus nostrum deserunt nemo quis, natus, quia quae illum facere corporis id facilis ex error.</p>
<hr/>
<p class="centered">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quo, sequi rerum. Minus ratione reiciendis expedita laudantium odit in numquam temporibus tempore nam quos! Minus unde aspernatur, amet, totam repellendus delectus assumenda accusamus rerum, aperiam vero nemo dolores laborum eaque!</p>
<a href="#contact" class="btn btn-warning smoothScroll">CONTACT US NOW</a>
</div>
</div>
</div><!-- /container -->
</div><!-- /f -->
<!-- ========== PORTFOLIO SECTION ========== -->
<div class="f p-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-12"><h3>OUR WORKS</h3>
<p class="centered"><i class="icon icon-circle"></i><i class="icon icon-circle"></i><i class="icon icon-circle"></i></p>
</div>
</div><!-- row -->
</div><!-- container -->
<section id="portfolio" name="portfolio"></section>
<div class="container-fluid">
<div class="row d-block">
<div class="masonry-container">
<div class="col-sm-3 col-6 item"><a href="img/portfolio/1.jpg" class="popupimg"><img src="img/portfolio/1.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/2.jpg" class="popupimg"><img src="img/portfolio/2.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/3.jpg" class="popupimg"><img src="img/portfolio/3.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/4.jpg" class="popupimg"><img src="img/portfolio/4.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/5.jpg" class="popupimg"><img src="img/portfolio/5.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/6.jpg" class="popupimg"><img src="img/portfolio/6.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/7.jpg" class="popupimg"><img src="img/portfolio/7.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/8.jpg" class="popupimg"><img src="img/portfolio/8.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/9.jpg" class="popupimg"><img src="img/portfolio/9.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/10.jpg" class="popupimg"><img src="img/portfolio/10.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/11.jpg" class="popupimg"><img src="img/portfolio/11.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/12.jpg" class="popupimg"><img src="img/portfolio/12.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/13.jpg" class="popupimg"><img src="img/portfolio/13.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/14.jpg" class="popupimg"><img src="img/portfolio/14.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/15.jpg" class="popupimg"><img src="img/portfolio/15.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/16.jpg" class="popupimg"><img src="img/portfolio/16.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/17.jpg" class="popupimg"><img src="img/portfolio/17.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/18.jpg" class="popupimg"><img src="img/portfolio/18.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/19.jpg" class="popupimg"><img src="img/portfolio/19.jpg" alt=""></a></div>
<div class="col-sm-3 col-6 item"><a href="img/portfolio/20.jpg" class="popupimg"><img src="img/portfolio/20.jpg" alt=""></a></div>
</div>
</div>
</div>
</div> <!-- f -->
<!-- ========== CONTACT SECTION ========== -->
<section id="contact" name="contact"></section>
<div class="footer">
<div class="footer_pattern"></div>
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-8 up">
<h3>CONTACT US</h3>
<p class="centered"><i class="icon icon-circle"></i><i class="icon icon-circle"></i><i class="icon icon-circle"></i></p>
<p>Lenin Street, 21<br/>Omsk, Russia<br/>+7 7678-5678</p>
<p>[email protected]</p>
<p><button type="button" class="btn btn-warning">YEAH! CONTACT US NOW!</button></p>
</div>
</div>
</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]-->
<!-- Load CSS -->
<!--<script>
function loadCSS(hf) {
var ms=document.createElement("link");ms.rel="stylesheet";
ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
}
loadCSS("libs/font-awesome/font-awesome.min.css"); //Load Libs CSS: Font Awesome CSS
loadCSS("libs/magnific-popup/magnific-popup.css"); //Magnific-Popup
//loadCSS("libs/animate/animate.css"); //Load Libs CSS: Animate CSS
//loadCSS("_header.css"); //Header Styles (compress & paste to header after release)
loadCSS("_main.css"); //User Styles: Main
loadCSS("_media.css"); //User Styles: Media
</script>-->
<!-- Load CSS compiled without Bootstrap & Header styles (after release) -->
<script>var ms=document.createElement("link");ms.rel="stylesheet";
ms.href="compiled.css";document.getElementsByTagName("head")[0].appendChild(ms);
</script>
<!-- Load Scripts -->
<script>var scr = {"scripts":[
{"src" : "libs/modernizr/modernizr.js", "async" : false},
{"src" : "libs/jquery/jquery-3.1.1.min.js", "async" : false},
{"src" : "libs/smoothscroll/smoothscroll.js", "async" : false},
{"src" : "libs/plugins-scroll/plugins-scroll.js", "async" : false},
{"src" : "libs/imagesloaded/imagesloaded.pkgd.min.js", "async" : false},
{"src" : "libs/imagefill/jquery-imagefill.js", "async" : false},
{"src" : "libs/masonry/masonry.pkgd.min.js", "async" : false},
{"src" : "libs/magnific-popup/jquery.magnific-popup.min.js", "async" : false},
{"src" : "js/common.js", "async" : false}
]};!function(t,n,r){"use strict";var c=function(t){if("[object Array]"!==Object.prototype.toString.call(t))return!1;for(var r=0;r<t.length;r++){var c=n.createElement("script"),e=t[r];c.src=e.src,c.async=e.async,n.body.appendChild(c)}return!0};t.addEventListener?t.addEventListener("load",function(){c(r.scripts);},!1):t.attachEvent?t.attachEvent("onload",function(){c(r.scripts)}):t.onload=function(){c(r.scripts)}}(window,document,scr);
</script>
</body>
</html>