├── README.md ├── css └── style.css ├── favicon.ico ├── img ├── cover │ ├── contact.jpg │ └── home.jpg ├── team │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg └── work │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.jpg ├── index.html ├── js └── script.js └── work.html /README.md: -------------------------------------------------------------------------------- 1 | Merlin 2 | ====== 3 | Free template with [Twitter Bootstrap](http://getbootstrap.com/) framework. 4 | 5 | ### Download 6 | 7 | [https://github.com/halibegic/merlin/archive/master.zip](https://github.com/halibegic/merlin/archive/master.zip) 8 | 9 | ### Credits 10 | * [jQuery](http://jquery.com/) 11 | * [Tether](http://tether.io/) 12 | * [Bootstrap](http://getbootstrap.com/) 13 | * [Font Awesome](http://fortawesome.github.io/Font-Awesome/) 14 | * [Isotope](https://github.com/desandro/isotope) 15 | * [ImagesLoaded](https://github.com/desandro/imagesloaded) 16 | * [Animate.css](http://daneden.github.io/animate.css/) 17 | * [jQuery Scroll To](http://flesler.blogspot.com/2007/10/jqueryscrollto.html) 18 | * [jQuery One Page Nav](https://github.com/davist11/jQuery-One-Page-Nav) 19 | * [jQuery Appear](https://github.com/morr/jquery.appear) 20 | * [VenoBox](http://lab.veno.it/venobox/) 21 | * [Gratisography](http://www.gratisography.com/) 22 | 23 | ### Copyright and License 24 | 25 | Copyright 2018 [Hasan Alibegić](https://halibegic.info/) 26 | 27 | GNU General Public License v2 or later. [http://www.gnu.org/licenses/gpl-2.0.html](http://www.gnu.org/licenses/gpl-2.0.html) 28 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Merlin - Responsive One Page Template 3 | Version: 1.0 4 | By: Hasan Alibegic, hasan461@gmail.com 5 | License: Apache License v2.0 6 | */ 7 | 8 | body { 9 | font-family: "Source Sans Pro", sans-serif; 10 | } 11 | 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6 { 18 | font-weight: 300; 19 | letter-spacing: -.02rem; 20 | } 21 | 22 | *, 23 | *:focus { 24 | outline: none !important; 25 | } 26 | 27 | a { 28 | color: #2d2d2d; 29 | cursor: pointer; 30 | } 31 | 32 | a:hover, 33 | a:focus { 34 | color: #0c86b6; 35 | text-decoration: none; 36 | } 37 | 38 | .hiding { 39 | opacity: 0; 40 | } 41 | 42 | .showing { 43 | opacity: 1; 44 | } 45 | 46 | .img-rounded { 47 | -webkit-border-radius: 8px; 48 | -moz-border-radius: 8px; 49 | border-radius: 8px; 50 | } 51 | 52 | .btn { 53 | font-size: 1rem; 54 | font-weight: 600; 55 | text-transform: uppercase; 56 | -webkit-border-radius: 2px; 57 | -moz-border-radius: 2px; 58 | border-radius: 2px; 59 | -webkit-transition: all .2s; 60 | -moz-transition: all .2s; 61 | -ms-transition: all .2s; 62 | transition: all .2s; 63 | } 64 | 65 | .btn-blue { 66 | color: #fff; 67 | background: #227fe8; 68 | } 69 | 70 | .btn-blue:hover, 71 | .btn-blue:focus { 72 | color: #fff; 73 | background: #233b6f; 74 | } 75 | 76 | .btn-green { 77 | color: #fff; 78 | background: #f5b76a; 79 | } 80 | 81 | .btn-green:hover, 82 | .btn-green:focus { 83 | color: #fff; 84 | background: #233b6f; 85 | } 86 | 87 | .btn-dark { 88 | color: #fff; 89 | background: #233b6f; 90 | } 91 | 92 | .btn-dark:hover, 93 | .btn-dark:focus { 94 | color: #fff; 95 | background: #233b6f; 96 | } 97 | 98 | .list-inline-item:not(:last-child) { 99 | margin-right: 1rem; 100 | } 101 | 102 | .loader { 103 | position: fixed; 104 | z-index: 999; 105 | width: 100%; 106 | height: 100%; 107 | background: #fff; 108 | } 109 | 110 | .loading { 111 | position: absolute; 112 | top: 50%; 113 | left: 50%; 114 | width: 4rem; 115 | height: 4rem; 116 | margin: -2rem 0 0 -2rem; 117 | text-indent: -9999rem; 118 | border-radius: 50%; 119 | background: #233b6f; 120 | background: -moz-linear-gradient(left, #233b6f 10%, rgba(35,59,111, 0) 42%); 121 | background: -webkit-linear-gradient(left, #233b6f 10%, rgba(35,59,111, 0) 42%); 122 | background: -o-linear-gradient(left, #233b6f 10%, rgba(35,59,111, 0) 42%); 123 | background: -ms-linear-gradient(left, #233b6f 10%, rgba(35,59,111, 0) 42%); 124 | background: linear-gradient(to right, #233b6f 10%, rgba(35,59,111, 0) 42%); 125 | -webkit-animation: loading 1s infinite linear; 126 | animation: loading 1s infinite linear; 127 | -webkit-transform: translateZ(0); 128 | -ms-transform: translateZ(0); 129 | transform: translateZ(0); 130 | } 131 | 132 | .loading:before { 133 | position: absolute; 134 | top: 0; 135 | left: 0; 136 | width: 50%; 137 | height: 50%; 138 | content: ""; 139 | background: #233b6f; 140 | border-radius: 100% 0 0 0; 141 | } 142 | 143 | .loading:after { 144 | position: absolute; 145 | top: 0; 146 | left: 0; 147 | bottom: 0; 148 | right: 0; 149 | margin: auto; 150 | width: 94%; 151 | height: 94%; 152 | content: ""; 153 | background: #fff; 154 | border-radius: 50%; 155 | } 156 | 157 | .navbar-light { 158 | margin-bottom: 0; 159 | background: #fff; 160 | -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); 161 | -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); 162 | box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); 163 | } 164 | 165 | .navbar-light .navbar-brand { 166 | font-weight: 600; 167 | color: #666; 168 | text-transform: uppercase; 169 | } 170 | 171 | .navbar-light .navbar-nav .nav-link { 172 | font-weight: 600; 173 | text-transform: uppercase; 174 | } 175 | 176 | .navbar-light .navbar-nav .active > .nav-link, 177 | .navbar-light .navbar-nav .active > .nav-link:hover, 178 | .navbar-light .navbar-nav .active > .nav-link:focus { 179 | color: #227fe8; 180 | background: transparent; 181 | } 182 | 183 | .navbar-light .navbar-toggler { 184 | border-color: transparent; 185 | } 186 | 187 | .navbar-light.fixed { 188 | position: fixed; 189 | top: 0; 190 | z-index: 99; 191 | width: 100%; 192 | border-bottom-color: transparent; 193 | } 194 | 195 | .page { 196 | position: relative; 197 | overflow: hidden; 198 | } 199 | 200 | .page .content { 201 | margin-top: 4rem; 202 | margin-bottom: 4rem; 203 | } 204 | 205 | .page .content.cover { 206 | margin-top: 8rem; 207 | margin-bottom: 8rem; 208 | } 209 | 210 | .page .border { 211 | width: 6rem; 212 | height: 2px; 213 | margin-left: auto; 214 | margin-right: auto; 215 | background: #f5b76a; 216 | } 217 | 218 | .page.overlay:after { 219 | position: absolute; 220 | top: 0; 221 | left: 0; 222 | width: 100%; 223 | height: 100%; 224 | content: ""; 225 | background: rgba(0, 0, 0, 0.2); 226 | } 227 | 228 | .page.overlay .content { 229 | position: relative; 230 | z-index: 1; 231 | } 232 | 233 | #home { 234 | padding: 0; 235 | color: #fff; 236 | background-image: url(../img/cover/home.jpg); 237 | background-repeat: no-repeat; 238 | background-position: center center; 239 | background-size: cover; 240 | } 241 | 242 | #home h1 { 243 | font-size: 4rem; 244 | line-height: 1; 245 | } 246 | 247 | #services { 248 | background: #f5f5f5; 249 | border-bottom: 1px solid #e7e7e7; 250 | } 251 | 252 | #services .service i { 253 | margin-top: 4rem; 254 | } 255 | 256 | #services .service:hover i { 257 | color: #f5b76a; 258 | } 259 | 260 | #work .heading p { 261 | margin-bottom: 4rem; 262 | } 263 | 264 | #portfolio { 265 | width: 100%; 266 | } 267 | 268 | #portfolio .filters { 269 | margin-top: 4rem; 270 | margin-bottom: 4rem; 271 | } 272 | 273 | #portfolio .filters li a { 274 | color: #999; 275 | font-weight: 600; 276 | text-transform: uppercase; 277 | } 278 | 279 | #portfolio .filters li a:hover, 280 | #portfolio .filters li a:focus { 281 | color: #333; 282 | } 283 | 284 | #portfolio .filters li a.active { 285 | color: #227fe8; 286 | } 287 | 288 | #portfolio .items li { 289 | position: relative; 290 | float: left; 291 | width: 100%; 292 | overflow: hidden; 293 | } 294 | 295 | #portfolio .items li a img { 296 | width: 100%; 297 | -webkit-transition: all .4s ease-in-out; 298 | -moz-transition: all .4s ease-in-out; 299 | -o-transition: all .4s ease-in-out; 300 | transition: all .4s ease-in-out; 301 | } 302 | 303 | #portfolio .items li a .overlay { 304 | position: absolute; 305 | top: 0; 306 | left: 0; 307 | width: 100%; 308 | height: 100%; 309 | background: #000; 310 | background: rgba(0, 0, 0, .6); 311 | -webkit-transition: all .4s ease-in-out; 312 | -moz-transition: all .4s ease-in-out; 313 | -o-transition: all .4s ease-in-out; 314 | transition: all .4s ease-in-out; 315 | opacity: 0; 316 | } 317 | 318 | #portfolio .items li a .overlay span { 319 | position: absolute; 320 | left: 1rem; 321 | bottom: 1rem; 322 | color: #fff; 323 | text-transform: uppercase; 324 | } 325 | 326 | #portfolio .items li a:hover .overlay { 327 | opacity: 1; 328 | } 329 | 330 | #portfolio .items li a:hover img { 331 | -webkit-transform: scale(1.1); 332 | -moz-transform: scale(1.1); 333 | -ms-transform: scale(1.1); 334 | -o-transform: scale(1.1); 335 | transform: scale(1.1); 336 | } 337 | 338 | #clients { 339 | color: #fff; 340 | background: #233b6f; 341 | } 342 | 343 | #testimonials .item { 344 | margin-bottom: 2rem; 345 | } 346 | 347 | #testimonials .quote { 348 | padding: 0 2rem; 349 | } 350 | 351 | #testimonials .quote:before { 352 | margin-right: 1rem; 353 | font-family: fontawesome; 354 | content: "\f10d"; 355 | } 356 | 357 | #testimonials .client { 358 | color: #ccc; 359 | } 360 | 361 | #testimonials .carousel-indicators { 362 | bottom: 0; 363 | margin-bottom: 0; 364 | } 365 | 366 | #testimonials .carousel-indicators li { 367 | width: .8rem; 368 | max-width: .8rem; 369 | height: .8rem; 370 | background: transparent; 371 | border: 1px solid #a6a6a6; 372 | -webkit-border-radius: 2px; 373 | -moz-border-radius: 2px; 374 | border-radius: 2px; 375 | -webkit-transition: all .25s linear; 376 | -moz-transition: all .25s linear; 377 | -o-transition: all .25s linear; 378 | transition: all .25s linear; 379 | } 380 | 381 | #testimonials .carousel-indicators li:hover, 382 | #testimonials .carousel-indicators li:focus { 383 | border-color: #fff; 384 | } 385 | 386 | #testimonials .carousel-indicators .active { 387 | background: #f5b76a; 388 | border-color: #fff; 389 | } 390 | 391 | #about .content { 392 | margin-bottom: 0; 393 | } 394 | 395 | #about .teammate { 396 | margin-top: 4rem; 397 | margin-bottom: 4rem; 398 | } 399 | 400 | #about .teammate .profile-photo { 401 | overflow: hidden; 402 | } 403 | 404 | #about .teammate .profile-photo img { 405 | -webkit-transition: all .4s ease; 406 | -moz-transition: all .4s ease; 407 | -ms-transition: all .4s ease; 408 | -o-transition: all .4s ease; 409 | transition: all .4s ease; 410 | } 411 | 412 | #about .teammate:hover .profile-photo img, 413 | #about .teammate:focus .profile-photo img { 414 | -webkit-transform: scale(1.1); 415 | -moz-transform: scale(1.1); 416 | -ms-transform: scale(1.1); 417 | -o-transform: scale(1.1); 418 | transform: scale(1.1); 419 | } 420 | 421 | #about .teammate .bio .border { 422 | height: 1px; 423 | } 424 | 425 | #about .teammate .bio ul { 426 | margin-bottom: 0; 427 | } 428 | 429 | #about .teammate .bio a { 430 | color: #666; 431 | } 432 | 433 | #about .teammate .bio a:hover, 434 | #about .teammate .bio a:focus { 435 | color: #222; 436 | } 437 | 438 | #contact { 439 | background: url(../img/cover/contact.jpg); 440 | background-repeat: no-repeat; 441 | background-position: center center; 442 | background-size: cover; 443 | } 444 | 445 | #contact, 446 | #contact a, 447 | #contact a:hover, 448 | #contact a:focus { 449 | color: #fff 450 | } 451 | 452 | #contact .heading .border { 453 | background: #fff 454 | } 455 | 456 | #contact a { 457 | display: block; 458 | } 459 | 460 | #contact i { 461 | margin: 4rem 0 1rem; 462 | } 463 | 464 | #footer { 465 | padding: 4rem 0; 466 | color: #ccc; 467 | text-align: center; 468 | background: #233b6f; 469 | } 470 | 471 | #footer a, 472 | #footer a:hover, 473 | #footer a:focus { 474 | color: #fff; 475 | } 476 | 477 | #footer .social { 478 | margin-bottom: 1rem; 479 | } 480 | 481 | #footer .social li .facebook:hover, 482 | #footer .social li .facebook:focus { 483 | color: #3b5998 484 | } 485 | 486 | #footer .social li .twitter:hover, 487 | #footer .social li .twitter:focus { 488 | color: #00aced 489 | } 490 | 491 | #footer .social li .google-plus:hover, 492 | #footer .social li .google-plus:focus { 493 | color: #d34836 494 | } 495 | 496 | #footer .social li .dribbble:hover, 497 | #footer .social li .dribbble:focus { 498 | color: #ea4c89 499 | } 500 | 501 | #footer .copyright { 502 | margin-bottom: 0; 503 | } 504 | 505 | .work .title { 506 | color: #222; 507 | } 508 | 509 | 510 | /* Venobox */ 511 | 512 | .vbox-container { 513 | overflow: hidden; 514 | } 515 | 516 | 517 | /* Animations */ 518 | 519 | @-webkit-keyframes loading { 520 | 0% { 521 | -webkit-transform: rotate(0deg); 522 | transform: rotate(0deg); 523 | } 524 | 100% { 525 | -webkit-transform: rotate(360deg); 526 | transform: rotate(360deg); 527 | } 528 | } 529 | 530 | @keyframes loading { 531 | 0% { 532 | -webkit-transform: rotate(0deg); 533 | transform: rotate(0deg); 534 | } 535 | 100% { 536 | -webkit-transform: rotate(360deg); 537 | transform: rotate(360deg); 538 | } 539 | } 540 | 541 | /* Responsive style */ 542 | 543 | @media (min-width: 576px) { 544 | .page .content.cover { 545 | margin-top: 12rem; 546 | margin-bottom: 12rem; 547 | } 548 | #portfolio .items li { 549 | width: 50%; 550 | } 551 | #testimonials .quote { 552 | padding: 0 4rem; 553 | } 554 | } 555 | 556 | @media (min-width: 768px) { 557 | .page .content.cover { 558 | margin-top: 14rem; 559 | margin-bottom: 14rem; 560 | } 561 | #portfolio .items li { 562 | width: 25%; 563 | } 564 | #testimonials .quote { 565 | padding: 0 8rem; 566 | } 567 | } 568 | 569 | @media (min-width: 992px) { 570 | .page .content.cover { 571 | margin-top: 16rem; 572 | margin-bottom: 16rem; 573 | } 574 | .navbar-light .navbar-nav .nav-link { 575 | padding-right: 1rem; 576 | padding-left: 1rem; 577 | font-weight: 600; 578 | text-transform: uppercase; 579 | } 580 | #testimonials .quote { 581 | padding: 0 12rem; 582 | } 583 | } 584 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/favicon.ico -------------------------------------------------------------------------------- /img/cover/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/cover/contact.jpg -------------------------------------------------------------------------------- /img/cover/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/cover/home.jpg -------------------------------------------------------------------------------- /img/team/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/team/1.jpg -------------------------------------------------------------------------------- /img/team/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/team/2.jpg -------------------------------------------------------------------------------- /img/team/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/team/3.jpg -------------------------------------------------------------------------------- /img/team/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/team/4.jpg -------------------------------------------------------------------------------- /img/work/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/1.jpg -------------------------------------------------------------------------------- /img/work/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/2.jpg -------------------------------------------------------------------------------- /img/work/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/3.jpg -------------------------------------------------------------------------------- /img/work/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/4.jpg -------------------------------------------------------------------------------- /img/work/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/5.jpg -------------------------------------------------------------------------------- /img/work/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/6.jpg -------------------------------------------------------------------------------- /img/work/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/7.jpg -------------------------------------------------------------------------------- /img/work/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halibegic/merlin/91886f151ebef71d171efd4eb8aa59766bd699f2/img/work/8.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Merlin 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |

We Are Merlin

34 | Find more 35 |

We Have Made A Lot Of Friends.

36 |
37 |
38 |
39 |
40 |
41 | 74 |
75 |
76 |
77 |
78 |

What we love doing.

79 |
80 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, alias enim placeat earum quos ab.

81 |
82 |
83 |
84 | 85 |

Web Design

86 |

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.

87 |
88 |
89 | 90 |

Web Development

91 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque lau dantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.

92 |
93 |
94 | 95 |

Mobile Development

96 |

Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus.

97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |

This is how we do it.

107 |
108 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, alias enim placeat earum quos ab.

109 |
110 |
111 |
112 | 194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 | 230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |

About Us.

240 |
241 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.

242 |
243 |
244 |
245 |
246 | 247 |
248 |
249 |
John Doe
250 |

Web Developer

251 |
252 |

Lorem ipsum dolor sit, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore.

253 | 275 |
276 |
277 |
278 |
279 | 280 |
281 |
282 |
Clarinda Gratia
283 |

Designer

284 |
285 |

Lorem ipsum dolor sit, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore.

286 | 303 |
304 |
305 |
306 |
307 | 308 |
309 |
310 |
Mandeep Eimear
311 |

Mobile Developer

312 |
313 |

Lorem ipsum dolor sit, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore.

314 | 331 |
332 |
333 |
334 |
335 | 336 |
337 |
338 |
Wigstan Fergus
339 |

QA Engineer

340 |
341 |

Lorem ipsum dolor sit, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore.

342 | 359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 |

Getting in touch.

370 |
371 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

372 |
373 |
374 |
375 | 376 | Mostar, Bosnia and Herzegovina 377 |
378 |
379 | 380 | (987) 654-3210 381 |
382 |
383 | 384 | john.doe@mail.com 385 |
386 |
387 |
388 |
389 |
390 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 444 | 445 | 446 | 447 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | function initNavbar() { 2 | 3 | var SCROLL_SPEED = 750; 4 | var SCROLL_OFFSET = 50; 5 | var EASING = "swing"; 6 | 7 | var $navTop = $("#navbar-top"); 8 | var $navBar = $(".navbar"); 9 | var $navExternal = $(".nav-external"); 10 | 11 | $navBar.onePageNav({ 12 | currentClass: "active", 13 | changeHash: false, 14 | scrollSpeed: SCROLL_SPEED, 15 | scrollOffset: SCROLL_OFFSET, 16 | scrollThreshold: 0.5, 17 | filter: ":not(.external)", 18 | easing: EASING 19 | }); 20 | 21 | $(window).on("scroll", function(event) { 22 | 23 | var scroll = $(window).scrollTop(); 24 | 25 | if (scroll >= $("#home").height()) { 26 | $navBar.addClass("fixed"); 27 | } else { 28 | $navBar.removeClass("fixed"); 29 | } 30 | }).trigger("scroll"); 31 | 32 | $navExternal.click(function(e) { 33 | e.preventDefault(); 34 | 35 | $("html, body").stop().animate({ 36 | scrollTop: $($(this).attr("href")).offset().top - SCROLL_OFFSET 37 | }, SCROLL_SPEED, EASING); 38 | }); 39 | } 40 | 41 | function initPortfolio() { 42 | 43 | var $portfolio = $("#portfolio"); 44 | var $items = $portfolio.find(".items"); 45 | var $filters = $portfolio.find(".filters li a"); 46 | 47 | $items.imagesLoaded(function() { 48 | 49 | $items.isotope({ 50 | itemSelector: ".item", 51 | layoutMode: "fitRows", 52 | transitionDuration: "0.7s" 53 | }); 54 | }); 55 | 56 | $filters.click(function() { 57 | 58 | var $el = $(this); 59 | 60 | $filters.removeClass("active"); 61 | 62 | $el.addClass("active"); 63 | 64 | var selector = $el.attr("data-filter"); 65 | 66 | $items.isotope({ 67 | filter: selector 68 | }); 69 | 70 | return false; 71 | }); 72 | 73 | $items.find(".item a").venobox({ 74 | border: "2rem", 75 | closeBackground: "transparent" 76 | }); 77 | } 78 | 79 | function initAnimations() { 80 | var $animated = $(".animated"); 81 | 82 | $animated.appear({ 83 | force_process: true 84 | }); 85 | 86 | $animated.on("appear", function() { 87 | 88 | var $el = $(this); 89 | 90 | var animation = $el.data("animation"); 91 | var delay = $el.data("delay"); 92 | 93 | // Mofile fix 94 | if ($(window).width() < 768) { 95 | delay = 0; 96 | } 97 | 98 | if (delay) { 99 | 100 | setTimeout(function() { 101 | $el.addClass(animation); 102 | $el.addClass("showing"); 103 | $el.removeClass("hiding"); 104 | }, delay); 105 | } else { 106 | 107 | $el.addClass(animation); 108 | $el.addClass("showing"); 109 | $el.removeClass("hiding"); 110 | } 111 | }); 112 | 113 | // Service hover animation 114 | $(".service").hover(function() { 115 | $("i", this).addClass("animated tada"); 116 | }, function() { 117 | $("i", this).removeClass("animated tada"); 118 | }); 119 | } 120 | 121 | $(document).ready(function() { 122 | 123 | initNavbar(); 124 | initPortfolio(); 125 | initAnimations(); 126 | }); 127 | 128 | $(window).on("load", function() { 129 | 130 | var $loader = $(".loader"); 131 | 132 | $loader.find(".loading").fadeOut(); 133 | $loader.fadeOut("slow"); 134 | }); 135 | -------------------------------------------------------------------------------- /work.html: -------------------------------------------------------------------------------- 1 |
2 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit...

4 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

5 |
--------------------------------------------------------------------------------