xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="de">3
<head>4
<meta name="author" content="Rieder Dario">5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no" />7
8
9
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">10
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">11
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">12
<link rel="manifest" href="favicon/site.webmanifest">13
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">14
<meta name="msapplication-TileColor" content="#da532c">15
<meta name="theme-color" content="#ffffff">16
17
18
19
20
<!--Font imports -->21
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">22
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">23
24
<!--Style CSS -->25
<link href="css/style.css" rel="stylesheet">26
<link href="css/lightgallery.css" rel="stylesheet">27
<link href="css/jarallax.css" rel="stylesheet">28
<link href="vendor/fontawesome-free/css/all.css" rel="stylesheet" type="text/css">29
<!-- Bootstrap CSS -->30
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">31
32
<!-- Font Awesome -->33
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">34
<!-- Google Fonts -->35
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">36
<!-- Bootstrap core CSS -->37
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">38
<!-- Material Design Bootstrap -->39
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.0/css/mdb.min.css" rel="stylesheet">40
41
<!--JS imports -->42
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>43
<script src="js/smooth-scroll.js"></script>44
<script src="js/navclose.js"></script>45
<script src="js/lightgallery.js"></script>46
<script src="js/lazyload.min.js"></script>47
<script src="js/jarallax.min.js"></script>48
<script src="js/jarallax-element.min.js"></script>49
<script src="js/jarallax-video.min.js"></script>50
51
<!-- Bootstrap tooltips -->52
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>53
<!-- Bootstrap core JavaScript -->54
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>55
<!-- MDB core JavaScript -->56
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.0/js/mdb.min.js"></script>57
58
<!-- lightgallery plugins -->59
<script src="js/lightgallery plugins/lg-fullscreen.min.js"></script>60
<script src="js/lightgallery plugins/lg-thumbnail.min.js"></script>61
62
<!--Contactform imports -->63
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">64
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">65
66
67
<title>AR PhotoArt</title>68
69
</head>70
<body data-spy="scroll" data-target="#navspy" data-offset="49" id="page-top">71
72
73
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" id="navspy">74
<a class="navbar-brand" href="#page-top" data-scroll>AR PhotoArt</a>75
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"76
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">77
<div class="animated-icon1"><span></span><span></span><span></span></div>78
</button>79
80
<div class="collapse navbar-collapse" id="navbarSupportedContent">81
<ul class="navbar-nav ml-auto smooth-scroll">82
<li class="nav-item">83
<a class="nav-link" href="#about" data-scroll>LebensArt</a>84
</li>85
<li class="nav-item">86
<a class="nav-link" href="#studio" data-scroll>ArbeitsArt</a>87
</li>88
<li class="nav-item">89
<a class="nav-link" href="#portfolio" data-scroll>LichtArt</a>90
</li>91
<li class="nav-item dropdown">92
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-scroll-ignore>93
Mehr94
</a>95
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">96
<a class="dropdown-item" href="anleitung.html">Anleitung</a>97
<a class="dropdown-item" href="wettbewerb.html">Wettbewerb</a>98
<a class="dropdown-item" href="kurs.html">Kurs</a>99
<div class="dropdown-divider"></div>100
<a class="dropdown-item" href="#kontakt" data-scroll>Kontakt</a>101
</div>102
</li>103
</ul>104
</div>105
</nav>106
107
108
109
110
<header>111
<div id="start" data-jarallax data-speed="1" data-type="scale" data-zIndex="1" class="jarallax">112
<img class="jarallax-img lazy" data-src="img/backgrounddre.png" alt="">113
<img id="logoimg" class="lazy" data-src="img/andreasrieder_logo.png" alt="">114
</div>115
</header>116
117
<div class="sections">118
<section class="light" id="about">119
<div class="textinhalt">120
<div class="texthome" data-jarallax-element="-80">121
<h3>LebensArt</h3>122
</div>123
<div class="homecards">124
<div class="textjara" data-jarallax-element="-90">125
hallo hier ist ein beispieltext. warum sollte hier etwas anderes stehen?126
</div>127
<div class="textjara" data-jarallax-element="-90">128
hallo hier ist ein beispieltext. warum sollte hier etwas anderes stehen?129
</div>130
<div class="textjara" data-jarallax-element="-90">131
hallo hier ist ein beispieltext. warum sollte hier etwas anderes stehen?132
</div>133
</div>134
</div>135
</section>136
<section class="dark" id="studio">137
<div class="textinhalt jarallax" data-jarallax data-speed="0.5" data-type="scroll" data-zIndex="1">138
<img class="jarallax-img lazy" data-src="img/studiobackground.png" alt="">139
<div data-jarallax-element="-50">140
<h3>ArbeitsArt</h3>141
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.142
<br>143
</div>144
</div>145
</section>146
147
<section class="dark" id="kontakt">148
<div class="textinhalt2">149
<div class="bg-contact2 jarallax" data-jarallax data-speed="-0.5" data-type="scroll" data-zIndex="1">150
<img class="jarallax-img lazy" data-src="img/contact-bg.png" alt="">151
<div class="container-contact2">152
<div class="wrap-contact2">153
<form id="contactform" class="contact2-form validate-form" method="post" action="contact.php">154
<span class="contact2-form-title">155
Kontakt156
</span>157
158
<div class="wrap-input2 validate-input" data-validate="Geben Sie Ihren Namen ein">159
<input class="input2" id="name" type="text" name="name">160
<span class="focus-input2" data-placeholder="Name"></span>161
</div>162
163
<div class="wrap-input2 validate-input" data-validate = "Ungültige E-Mail Adresse">164
<input class="input2" id="email" type="email" name="email">165
<span class="focus-input2" data-placeholder="E-MAIL Adresse"></span>166
</div>167
168
<div class="wrap-input2 validate-input" data-validate = "Geben Sie Ihre Nachricht ein">169
<textarea class="input2" id="message" name="message"></textarea>170
<span class="focus-input2" data-placeholder="Nachricht"></span>171
</div>172
173
<div class="container-contact2-form-btn">174
<div class="wrap-contact2-form-btn">175
<div class="contact2-form-bgbtn"></div>176
<button id="submit" class="contact2-form-btn">177
Nachricht senden178
</button>179
</div>180
</div>181
</form>182
</div>183
</div>184
</div>185
</div>186
</section>187
</div>188
189
<footer id="footer">190
<div class="footerleft">191
<p class="textleft"> © Copyright 2019 AR </p>192
</div>193
<div class="footerright">194
<a id="fbook" href="https://www.facebook.com/Tscheggetta/" target="_blank" rel="noopener noreferrer" class="fab fa-facebook-square"></a>195
</div>196
</footer>197
198
<!-- jQuery first, then Tether, then Bootstrap JS. -->199
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>200
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>201
<!--Imports-->202
<script src="js/fastclick.js"></script>203
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>204
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>205
<script src="vendor/select2/select2.min.js"></script>206
<script src="js/contact.js"></script>207
208
</body>209
</html>xxxxxxxxxx1
body {2
position: relative;3
margin: 0;4
font-family: 'Raleway', sans-serif !important;5
height: 100vh;6
}7
8
/*========NavBar=======*/9
10
.fixed-top {11
z-index: 800 !important;12
}13
14
.navbar {15
padding-top: 0px !important;16
padding-bottom: 0px !important;17
}18
19
.navbar {20
background-color: rgba(30, 30, 36, 0.9);21
}22
23
.top-nav-collapse {24
background-color: rgba(30, 30, 36, 0.9);25
}26
27
@media only screen and (max-width: 768px) {28
.navbar {29
background-color: #303036;30
}31
}32
33
.nav-link.active {34
color: #DCDCDC !important;35
background-color: rgba(80, 80, 80, 0.6); 36
}37
38
.nav-link:hover {39
background-color: black !important;40
color: white !important;41
}42
43
.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand {44
font-size: 24px !important;45
}46
47
.navbar-expand-lg .navbar-nav .nav-link {48
font-size: 18px !important;49
height: 100% !important;50
padding-left: .9em !important;51
padding-right: .9em !important;52
padding-top: .9em !important;53
padding-bottom: .9em !important;54
}55
56
.portfolio-modal .modal-content {57
z-index: 1 !important;58
}59
60
/*Dropdown*/61
62
/* Icon 1 */63
64
.animated-icon1, .animated-icon2, .animated-icon3 {65
width: 30px;66
height: 20px;67
position: relative;68
margin: 0px;69
-webkit-transform: rotate(0deg);70
-moz-transform: rotate(0deg);71
-o-transform: rotate(0deg);72
transform: rotate(0deg);73
-webkit-transition: .5s ease-in-out;74
-moz-transition: .5s ease-in-out;75
-o-transition: .5s ease-in-out;76
transition: .5s ease-in-out;77
cursor: pointer;78
}79
80
.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {81
display: block;82
position: absolute;83
height: 3px;84
width: 100%;85
border-radius: 9px;86
opacity: 1;87
left: 0;88
-webkit-transform: rotate(0deg);89
-moz-transform: rotate(0deg);90
-o-transform: rotate(0deg);91
transform: rotate(0deg);92
-webkit-transition: .25s ease-in-out;93
-moz-transition: .25s ease-in-out;94
-o-transition: .25s ease-in-out;95
transition: .25s ease-in-out;96
}97
98
.animated-icon1 span {99
background: white;100
}101
102
.animated-icon1 span:nth-child(1) {103
top: 0px;104
}105
106
.animated-icon1 span:nth-child(2) {107
top: 10px;108
}109
110
.animated-icon1 span:nth-child(3) {111
top: 20px;112
}113
114
.animated-icon1.open span:nth-child(1) {115
top: 11px;116
-webkit-transform: rotate(135deg);117
-moz-transform: rotate(135deg);118
-o-transform: rotate(135deg);119
transform: rotate(135deg);120
}121
122
.animated-icon1.open span:nth-child(2) {123
opacity: 0;124
left: -60px;125
}126
127
.animated-icon1.open span:nth-child(3) {128
top: 11px;129
-webkit-transform: rotate(-135deg);130
-moz-transform: rotate(-135deg);131
-o-transform: rotate(-135deg);132
transform: rotate(-135deg);133
}134
135
.dropdown-item.active, .dropdown-item:active {136
color: black !important;137
background-color: grey !important;138
}139
140
.dropdown-item:focus, .dropdown-item:hover {141
background-color: grey !important;142
}143
144
.dropdown-menu {145
margin: 0 !important;146
border-top-right-radius: 0px !important;147
background-clip: unset !important;148
margin-bottom: 10px !important;149
}150
151
@media(max-width: 840px) {152
.dropdown-menu {153
border-top-right-radius: 0px !important;154
border-top-left-radius: 0px !important;155
}156
}157
158
.navbar-toggler {159
border: none !important;160
}161
162
163
/*========Aussehen Textinhalt========*/164
165
.light {166
background-color: #FFFFFF;167
}168
169
.dark {170
background-color: #E6E6E6;171
}172
173
.darkport {174
background-color: black;175
}176
177
.pagetoptext {178
color: black;179
text-decoration: none;180
display: flex;181
align-items: center;182
}183
184
#start {185
height: 100vh;186
background-color: darkgreen;187
}188
189
#logoimg {190
z-index: 5;191
position: relative;192
height: 55vh;193
max-width: 100%;194
top: 50%;195
left: 50%;196
/* bring your own prefixes */197
transform: translate(-50%, -50%);198
}199
200
.homecards {201
list-style: none;202
203
display: -webkit-box;204
display: -moz-box;205
display: -ms-flexbox;206
display: -webkit-flex;207
display: flex;208
209
-webkit-flex-flow: row wrap;210
justify-content: space-around;211
}212
213
.textjara {214
background: transparent;215
padding: 5px;216
padding-top: 15px;217
width: 200px;218
height: 100%;219
min-height: 100px;220
margin: 10px;221
color: black;222
text-align: center;223
}224
225
.textinhalt h3 {226
/*Titel Home/Über uns/Bilder/Kontakt*/227
padding-top: 3em;228
padding-bottom: 10px;229
}230
231
.textinhalt {232
color: black;233
padding-left: 20%;234
padding-right: 20%;235
padding-bottom: 4em;236
text-align: justify;237
font-size: 1.1em;238
239
}240
241
.textinhalt h3 {242
font-size: 1.8em;243
text-align: center;244
color: black;245
margin-bottom: 0.2em;246
}247
248
.textinhalt h2 {249
font-size: 25px;250
text-align: center;251
color: black;252
margin-bottom: 0.2em;253
padding-top: 10px;254
}255
256
#myCanvas {257
display: block;258
margin-left: auto;259
margin-right: auto;260
}261
262
263
.navbar-shrink {264
color: #6B654B;265
padding-top: 0;266
padding-bottom: 0;267
background-color: #12100E;268
}269
270
.flex-container {271
list-style: none;272
273
display: -webkit-box;274
display: -moz-box;275
display: -ms-flexbox;276
display: -webkit-flex;277
display: flex;278
279
-webkit-flex-flow: row wrap;280
justify-content: space-around;281
}282
283
.flex-item {284
background: #4A4B2F;285
padding: 5px;286
padding-top: 15px;287
width: 200px;288
height: 100%;289
min-height: 100px;290
margin: 10px;291
color: white;292
text-align: center;293
border-style: solid;294
border-width: 1px;295
border-color: black;296
border-radius: 3px 15px 5px 30px;297
}298
299
300
.flex-item h1 {301
font-size: 1.2em;302
font-weight: bold;303
padding-bottom: 10px;304
}305
306
.card {307
font-size: 16px;308
text-align: center;309
padding-bottom: 5px;310
display: inherit !important;311
background-color: transparent !important;312
border: none !important;313
}314
315
.card img {316
width: 150px;317
height: 100%;318
padding-top: 5px;319
padding-bottom: 5px;320
}321
322
footer {323
/*position: fixed;*/324
left: 0;325
bottom: 0;326
width: 100%;327
background-color: #6B654B;328
color: white;329
text-align: center;330
transition: 0.4s;331
}332
333
.footerleft {334
padding: 5px 0px;335
height: 100%;336
float: left;337
text-align: left;338
background-color: #12100E;339
width: 50%;340
}341
342
p {343
margin-bottom: 0 !important;344
}345
346
.footerright {347
padding: 5px 0px;348
height: 100%;349
float: right;350
text-align: right;351
background-color: #12100E;352
width: 50%;353
}354
355
.textleft {356
padding-left: 10px;357
}358
359
.fab {360
color: white;361
padding-right: 10px;362
font-size: 18px;363
}364
365
366
/*==========Verschiedene Ansichten für Phones/Tablets============*/367
@media (max-width: 840px) {368
.footerleft {369
padding: 20px 0px;370
}371
.footerright {372
padding: 20px 0px;373
}374
.textinhalt {375
padding-left: 10%;376
padding-right: 10%;377
}378
379
.imggallery:hover {380
z-index: 5;381
transform: scale(5);382
}383
}384
385
/*=================Style for Portfolio=====================*/386
#portfolio .portfolio-item {387
right: 0;388
margin: 0 0 15px;389
}390
391
#portfolio h3 {392
font-size: 1.8em;393
text-align: center;394
color: white;395
margin-bottom: 0.2em;396
padding-top: 3em;397
padding-bottom: 20px;398
}399
400
#portfolio .portfolio-item .portfolio-link {401
position: relative;402
display: block;403
max-width: 400px;404
margin: 0 auto;405
cursor: pointer;406
}407
408
#portfolio .portfolio-item .portfolio-link .portfolio-hover {409
position: absolute;410
z-index: 2;411
width: 100%;412
height: 100%;413
-webkit-transition: all ease 0.5s;414
transition: all ease 0.5s;415
opacity: 0;416
background: #12100E;417
}418
419
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {420
opacity: 0.7;421
}422
423
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {424
font-size: 20px;425
position: absolute;426
top: 50%;427
width: 100%;428
height: 20px;429
margin-top: -12px;430
text-align: center;431
color: white;432
}433
434
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {435
margin-top: -12px;436
}437
438
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,439
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {440
margin: 0;441
}442
443
#portfolio .portfolio-item .portfolio-caption {444
max-width: 400px;445
margin: 0 auto;446
padding: 25px;447
text-align: center;448
background-color: white;449
}450
451
#portfolio .portfolio-item h4 {452
position:absolute;453
bottom:0;454
left:0;455
background: rgba(14,14,14,0.6);456
color:#fff;457
font-size: 28px;458
padding-top: 5px;459
padding-bottom: 5px;460
width:100%;461
margin:0;462
margin: 0;463
text-transform: none;464
text-align: center;465
}466
467
#portfolio .portfolio-item .portfolio-caption p {468
font-size: 16px;469
font-style: italic;470
margin: 0;471
}472
473
#portfolio * {474
z-index: 1;475
}476
477
@media (min-width: 767px) {478
#portfolio .portfolio-item {479
margin: 0 0 30px;480
}481
}482
483
.portfolio-modal {484
padding-right: 0px !important;485
}486
487
.portfolio-modal .modal-dialog {488
margin: 1rem;489
max-width: 100vw;490
}491
492
.portfolio-modal .modal-content {493
z-index: 5;494
padding: 50px 0;495
text-align: center;496
}497
498
.portfolio-modal .modal-content h2 {499
color: white;500
font-size: 3em;501
margin-bottom: 15px;502
}503
504
.portfolio-modal .modal-content p {505
margin-bottom: 30px;506
}507
508
.portfolio-modal .modal-content p.item-intro {509
font-size: 16px;510
font-style: italic;511
margin: 20px 0 30px;512
}513
514
.portfolio-modal .modal-content ul.list-inline {515
margin-top: 0;516
margin-bottom: 30px;517
}518
519
.portfolio-modal .modal-content button {520
cursor: pointer;521
}522
523
.portfolio-modal .close-modal {524
position: absolute;525
top: 25px;526
right: 25px;527
width: 75px;528
height: 75px;529
cursor: pointer;530
background-color: transparent;531
z-index: 99;532
}533
534
@media (max-width: 900px) {535
.portfolio-modal .close-modal {536
position: absolute;537
top: 25px;538
right: 25px;539
width: 75px;540
height: 75px;541
cursor: pointer;542
background-color: transparent;543
z-index: 99;544
}545
}546
547
.portfolio-modal .close-modal:hover {548
opacity: 0.3;549
}550
551
.portfolio-modal .close-modal .lr {552
/* Safari and Chrome */553
z-index: 99;554
width: 1px;555
height: 75px;556
margin-left: 35px;557
/* IE 9 */558
-webkit-transform: rotate(45deg);559
transform: rotate(45deg);560
background-color: white;561
}562
563
.portfolio-modal .close-modal .lr .rl {564
/* Safari and Chrome */565
z-index: 99;566
width: 1px;567
height: 75px;568
/* IE 9 */569
-webkit-transform: rotate(90deg);570
transform: rotate(90deg);571
background-color: white;572
}573
574
.modal-body ul {575
display: flex;576
flex-wrap: wrap;577
margin: 0.5vmin;578
padding: 0;579
}580
581
.modal-body ul::after {582
content:'';583
display:block;584
flex-grow: 70;585
}586
587
.modal-body li {588
list-style-type: none;589
height: 25vh;590
flex-grow: 1;591
margin: 0.3vmin;592
}593
594
.modal-body li:last-child {595
flex-grow: 10;596
}597
598
.modal-body img {599
max-height: 100%;600
min-width: 100%;601
object-fit: cover;602
vertical-align: bottom;603
}604
605
@media (max-aspect-ratio: 1 / 1) {606
.modal-body li {607
height: 20vh;608
}609
}610
@media (max-height: 450px) {611
.modal-body li {612
height: 50vh;613
}614
}615
@media (max-aspect-ratio: 1 / 1) and (max-width: 480px) {616
.modal-body ul {617
flex-direction: row;618
}619
620
.modal-body li {621
height: auto;622
width: 100%;623
}624
625
.modal-body img {626
width: 100%;627
height: 25vh;628
max-height: 50vh;629
min-width: 0;630
}631
}632
633
.modal {634
z-index: 1000 !important;635
}636
637
.modal-backdrop {638
z-index: 990 !important;639
}640
641
.modal-content {642
position: relative;643
display: -ms-flexbox;644
display: flex;645
-ms-flex-direction: column;646
flex-direction: column;647
width: 100%;648
pointer-events: auto;649
background-color: #242424 !important;650
background-clip: padding-box;651
border: 1px solid rgba(0, 0, 0, 0.2);652
border-radius: 0.3rem;653
outline: 0;654
}655
656
.container {657
width: 100% !important;658
margin-right: auto !important;659
margin-left: auto !important;660
max-width: none !important;661
}662
663
.col-lg-8 {664
-ms-flex: 0 0 90% !important;665
flex: 0 0 90% !important;666
max-width: 90% !important;667
}668
669
.imggallery {670
transition: transform .7s;671
}672
673
.imggallery:hover {674
z-index: 5;675
transform: scale(1.1);676
}677
678
@media (max-width: 900px) {679
.imggallery:hover {680
z-index: 5;681
transform: none;682
}683
}684
685
/*Contactform*/686
input {687
outline: none;688
border: none;689
}690
691
textarea {692
outline: none;693
border: none;694
}695
696
textarea:focus, input:focus {697
border-color: transparent !important;698
}699
700
input:focus::-webkit-input-placeholder { color:transparent; }701
input:focus:-moz-placeholder { color:transparent; }702
input:focus::-moz-placeholder { color:transparent; }703
input:focus:-ms-input-placeholder { color:transparent; }704
705
textarea:focus::-webkit-input-placeholder { color:transparent; }706
textarea:focus:-moz-placeholder { color:transparent; }707
textarea:focus::-moz-placeholder { color:transparent; }708
textarea:focus:-ms-input-placeholder { color:transparent; }709
710
input::-webkit-input-placeholder { color: #999999; }711
input:-moz-placeholder { color: #999999; }712
input::-moz-placeholder { color: #999999; }713
input:-ms-input-placeholder { color: #999999; }714
715
textarea::-webkit-input-placeholder { color: #999999; }716
textarea:-moz-placeholder { color: #999999; }717
textarea::-moz-placeholder { color: #999999; }718
textarea:-ms-input-placeholder { color: #999999; }719
720
/*---------------------------------------------*/721
button {722
outline: none !important;723
border: none;724
background: transparent;725
}726
727
button:hover {728
cursor: pointer;729
}730
731
iframe {732
border: none !important;733
}734
735
736
737
738
739
/*//////////////////////////////////////////////////////////////////740
[ Contact 2 ]*/741
.bg-contact2 {742
width: 100%; 743
background-repeat: no-repeat;744
background-position: center center;745
background-size: cover;746
}747
748
.container-contact2 {749
width: 100%; 750
min-height: 100vh;751
display: -webkit-box;752
display: -webkit-flex;753
display: -moz-box;754
display: -ms-flexbox;755
display: flex;756
flex-wrap: wrap;757
justify-content: center;758
align-items: center;759
padding: 15px;760
background: rgba(83,83,83,0.8);761
background: -moz-linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(83,83,83,0.8) 100%);762
background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(83,83,83,0.8) 100%);763
background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(83,83,83,0.8) 100%);764
}765
766
.wrap-contact2 {767
width: 790px;768
background: #fff;769
border-radius: 10px;770
overflow: hidden;771
padding: 72px 55px 90px 55px;772
}773
774
775
/*------------------------------------------------------------------776
[ ]*/777
778
.contact2-form {779
width: 100%;780
}781
782
.contact2-form-title {783
display: block;784
font-size: 39px;785
color: #333333;786
line-height: 1.2;787
text-align: center;788
padding-bottom: 90px;789
}790
791
792
793
/*------------------------------------------------------------------794
[ ]*/795
796
.wrap-input2 {797
width: 100%;798
position: relative;799
border-bottom: 2px solid #adadad;800
margin-bottom: 37px;801
}802
803
.input2 {804
display: block;805
width: 100%;806
font-size: 15px;807
color: #555555;808
line-height: 1.2;809
}810
811
.focus-input2 {812
position: absolute;813
display: block;814
width: 100%;815
height: 100%;816
top: 0;817
left: 0;818
pointer-events: none;819
}820
821
.focus-input2::before {822
content: "";823
display: block;824
position: absolute;825
bottom: -2px;826
left: 0;827
width: 0;828
height: 2px;829
830
-webkit-transition: all 0.4s;831
-o-transition: all 0.4s;832
-moz-transition: all 0.4s;833
transition: all 0.4s;834
835
background: rgba(181,181,181,1);836
background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(181,181,181,1) 100%);837
background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(181,181,181,1) 100%);838
background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(181,181,181,1) 100%);839
}840
841
.focus-input2::after {842
content: attr(data-placeholder);843
display: block;844
width: 100%;845
position: absolute;846
top: 0px;847
left: 0;848
849
font-size: 13px;850
color: #999999;851
line-height: 1.2;852
853
-webkit-transition: all 0.4s;854
-o-transition: all 0.4s;855
-moz-transition: all 0.4s;856
transition: all 0.4s;857
}858
859
/*---------------------------------------------*/860
input.input2 {861
height: 45px;862
}863
864
input.input2 + .focus-input2::after {865
top: 16px;866
left: 0;867
}868
869
textarea.input2 {870
min-height: 115px;871
padding-top: 13px;872
padding-bottom: 13px;873
}874
875
textarea.input2 + .focus-input2::after {876
top: 16px;877
left: 0;878
}879
880
.input2:focus + .focus-input2::after {881
top: -13px;882
}883
884
.input2:focus + .focus-input2::before {885
width: 100%;886
}887
888
.has-val.input2 + .focus-input2::after {889
top: -13px;890
}891
892
.has-val.input2 + .focus-input2::before {893
width: 100%;894
}895
896
/*------------------------------------------------------------------897
[ Button ]*/898
.container-contact2-form-btn {899
display: -webkit-box;900
display: -webkit-flex;901
display: -moz-box;902
display: -ms-flexbox;903
display: flex;904
flex-wrap: wrap;905
justify-content: center;906
padding-top: 13px;907
}908
909
.wrap-contact2-form-btn {910
display: block;911
position: relative;912
z-index: 1;913
border-radius: 2px;914
width: auto;915
overflow: hidden;916
margin: 0 auto;917
}918
919
.contact2-form-bgbtn {920
position: absolute;921
z-index: -1;922
width: 300%;923
height: 100%;924
background: rgba(83,83,83,1);925
background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(83,83,83,1) 100%);926
background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(83,83,83,1) 100%);927
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(83,83,83,1) 100%);928
top: 0;929
left: -100%;930
931
-webkit-transition: all 0.4s;932
-o-transition: all 0.4s;933
-moz-transition: all 0.4s;934
transition: all 0.4s;935
}936
937
.contact2-form-btn {938
display: -webkit-box;939
display: -webkit-flex;940
display: -moz-box;941
display: -ms-flexbox;942
display: flex;943
justify-content: center;944
align-items: center;945
padding: 0 20px;946
min-width: 244px;947
height: 50px;948
949
950
951
font-size: 16px;952
color: #fff;953
line-height: 1.2;954
955
956
}957
958
.wrap-contact2-form-btn:hover .contact2-form-bgbtn {959
left: 0;960
}961
962
/*------------------------------------------------------------------963
[ Responsive ]*/964
965
@media (max-width: 576px) {966
.wrap-contact2 {967
padding: 72px 15px 90px 15px;968
}969
}970
971
972
973
/*------------------------------------------------------------------974
[ Alert validate ]*/975
976
.validate-input {977
position: relative;978
}979
980
.alert-validate::before {981
content: attr(data-validate);982
position: absolute;983
max-width: 70%;984
background-color: white;985
border: 1px solid #c80000;986
border-radius: 2px;987
padding: 4px 25px 4px 10px;988
top: 50%;989
-webkit-transform: translateY(-50%);990
-moz-transform: translateY(-50%);991
-ms-transform: translateY(-50%);992
-o-transform: translateY(-50%);993
transform: translateY(-50%);994
right: 0px;995
pointer-events: none;996
997
color: #c80000;998
font-size: 13px;999
line-height: 1.4;1000
text-align: left;1001
1002
visibility: hidden;1003
opacity: 0;1004
1005
-webkit-transition: opacity 0.4s;1006
-o-transition: opacity 0.4s;1007
-moz-transition: opacity 0.4s;1008
transition: opacity 0.4s;1009
}1010
1011
.alert-validate::after {1012
content: "\f12a";1013
font-family: FontAwesome;1014
display: block;1015
position: absolute;1016
color: #c80000;1017
font-size: 16px;1018
top: 50%;1019
-webkit-transform: translateY(-50%);1020
-moz-transform: translateY(-50%);1021
-ms-transform: translateY(-50%);1022
-o-transform: translateY(-50%);1023
transform: translateY(-50%);1024
right: 8px;1025
}1026
1027
.alert-validate:hover:before {1028
visibility: visible;1029
opacity: 1;1030
}1031
1032
@media (max-width: 992px) {1033
.alert-validate::before {1034
visibility: visible;1035
opacity: 1;1036
}1037
}xxxxxxxxxx1
$(document).ready(function(){2
3
// onclick close navbar4
$(".navbar-nav li a:not(.dropdown-toggle)").on('click', function() {5
$(".navbar-collapse").removeClass("show");6
$(".animated-icon1").removeClass("open");7
});8
});9
10
$(document).ready(function () {11
12
$('.first-button').on('click', function () {13
14
$('.animated-icon1').toggleClass('open');15
});16
}); Console errors: 0