Pierwszy commit - dodanie plików
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
/temp
|
||||
11
.htaccess
Normal file
@ -0,0 +1,11 @@
|
||||
### PROTECT FILES ###
|
||||
<FilesMatch "\.(htaccess|htpasswd|ini|fla|psd|log|sh)$">
|
||||
Order Allow,Deny
|
||||
Allow from all
|
||||
</FilesMatch>
|
||||
|
||||
RewriteEngine on
|
||||
RewriteCond %{HTTPS} !on
|
||||
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
|
||||
|
||||
Header set Strict-Transport-Security „max-age=31536000” env=HTTPS
|
||||
1
css/aos.css
Normal file
1390
css/bootstrap-icons.css
vendored
Normal file
7
css/bootstrap.min.css
vendored
Normal file
351
css/magnific-popup.css
Normal file
@ -0,0 +1,351 @@
|
||||
/* Magnific Popup CSS */
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8; }
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1043;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.mfp-container:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none; }
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045; }
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress; }
|
||||
|
||||
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out; }
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none; }
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important; }
|
||||
|
||||
.mfp-preloader {
|
||||
color: #CCC;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1044; }
|
||||
.mfp-preloader a {
|
||||
color: #CCC; }
|
||||
.mfp-preloader a:hover {
|
||||
color: #FFF; }
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none; }
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none; }
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation; }
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
padding: 0 0 18px 10px;
|
||||
color: #FFF;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace; }
|
||||
.mfp-close:hover,
|
||||
.mfp-close:focus {
|
||||
opacity: 1; }
|
||||
.mfp-close:active {
|
||||
top: 1px; }
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333; }
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: #FFF;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%; }
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #CCC;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap; }
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.mfp-arrow:active {
|
||||
margin-top: -54px; }
|
||||
.mfp-arrow:hover,
|
||||
.mfp-arrow:focus {
|
||||
opacity: 1; }
|
||||
.mfp-arrow:before,
|
||||
.mfp-arrow:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: medium inset transparent; }
|
||||
.mfp-arrow:after {
|
||||
border-top-width: 13px;
|
||||
border-bottom-width: 13px;
|
||||
top: 8px; }
|
||||
.mfp-arrow:before {
|
||||
border-top-width: 21px;
|
||||
border-bottom-width: 21px;
|
||||
opacity: 0.7; }
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0; }
|
||||
.mfp-arrow-left:after {
|
||||
border-right: 17px solid #FFF;
|
||||
margin-left: 31px; }
|
||||
.mfp-arrow-left:before {
|
||||
margin-left: 25px;
|
||||
border-right: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0; }
|
||||
.mfp-arrow-right:after {
|
||||
border-left: 17px solid #FFF;
|
||||
margin-left: 39px; }
|
||||
.mfp-arrow-right:before {
|
||||
border-left: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px; }
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px; }
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
top: -40px; }
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%; }
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #000; }
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto; }
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure {
|
||||
line-height: 0; }
|
||||
.mfp-figure:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444; }
|
||||
.mfp-figure small {
|
||||
color: #BDBDBD;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; }
|
||||
.mfp-figure figure {
|
||||
margin: 0; }
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #F3F3F3;
|
||||
word-wrap: break-word;
|
||||
padding-right: 36px; }
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%; }
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer; }
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px; }
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
box-sizing: border-box; }
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px; }
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0; } }
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75); }
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0; }
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%; }
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px; } }
|
||||
736
css/templatemo-nomad-force.css
Normal file
@ -0,0 +1,736 @@
|
||||
/*
|
||||
|
||||
TemplateMo 567 Nomad Force
|
||||
|
||||
https://templatemo.com/tm-567-nomad-force
|
||||
|
||||
*/
|
||||
|
||||
/*---------------------------------------
|
||||
CUSTOM PROPERTIES ( VARIABLES )
|
||||
-----------------------------------------*/
|
||||
:root {
|
||||
--white-color: #FFFFFF;
|
||||
--primary-color: #ca4c03;
|
||||
--section-bg-color: #f9f9f9;
|
||||
--dark-color: #000000;
|
||||
--grey-color: #fcfeff;
|
||||
--text-secondary-white-color: rgba(255, 255, 255, 0.98);
|
||||
--title-color: #565758;
|
||||
--p-color: #717275;
|
||||
|
||||
--body-font-family: 'Montserrat', sans-serif;
|
||||
|
||||
--h1-font-size: 72px;
|
||||
--h2-font-size: 42px;
|
||||
--h3-font-size: 25px;
|
||||
--h4-font-size: 32px;
|
||||
--h5-font-size: 24px;
|
||||
--h6-font-size: 22px;
|
||||
--p-font-size: 20px;
|
||||
--copyright-text-font-size: 14px;
|
||||
--custom-link-font-size: 12px;
|
||||
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--white-color);
|
||||
font-family: var(--body-font-family);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
TYPOGRAPHY
|
||||
-----------------------------------------*/
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--dark-color);
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: var(--font-weight-black);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--h1-font-size);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--h2-font-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--h3-font-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--h4-font-size);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--h5-font-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--h6-font-size);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--p-color);
|
||||
font-size: var(--p-font-size);
|
||||
font-weight: var(--font-weight-light);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.text-secondary-white-color {
|
||||
color: var(--text-secondary-white-color);
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
touch-action: manipulation;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--p-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--dark-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.custom-underline {
|
||||
border-bottom: 2px solid var(--white-color);
|
||||
color: var(--white-color);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.videoWrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.custom-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: linear-gradient(to top, #000, transparent 90%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
CUSTOM LINK
|
||||
-----------------------------------------*/
|
||||
.custom-links {
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
.custom-link {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||||
}
|
||||
|
||||
.custom-link::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.custom-link:hover::after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.custom-link:hover,
|
||||
.custom-link:hover::after {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
NAVIGATION
|
||||
-----------------------------------------*/
|
||||
|
||||
.navbar {
|
||||
z-index: 9;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--primary-color);
|
||||
font-size: 24px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link::after {
|
||||
content: "";
|
||||
font-family: bootstrap-icons;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: var(--primary-color);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
-webkit-transform: translateY(10px);
|
||||
-moz-transform: translateY(10px);
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: var(--p-color);
|
||||
font-size: 18px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover::after,
|
||||
.navbar-nav .nav-item.active .nav-link::after {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item.active .nav-link,
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.nav-link:focus {
|
||||
color: var(--p-color);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navbar-toggler:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
|
||||
transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
|
||||
transition: top 300ms 50ms ease, transform 300ms 350ms ease;
|
||||
transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.navbar-toggler .navbar-toggler-icon {
|
||||
background: var(--dark-color);
|
||||
transition: background 10ms 300ms ease;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-toggler .navbar-toggler-icon:before,
|
||||
.navbar-toggler .navbar-toggler-icon:after {
|
||||
transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
|
||||
transition: top 300ms 350ms ease, transform 300ms 50ms ease;
|
||||
transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: var(--dark-color);
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.navbar-toggler .navbar-toggler-icon:before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.navbar-toggler .navbar-toggler-icon:after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
HERO
|
||||
-----------------------------------------*/
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.hero {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.custom-video,
|
||||
.news-detail-image {
|
||||
object-fit: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sticky-wrapper {
|
||||
position: relative;
|
||||
bottom: 76px;
|
||||
}
|
||||
}
|
||||
|
||||
.heroText {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 85%;
|
||||
text-align: center;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
ABOUT & TEAM MEMBERS
|
||||
-----------------------------------------*/
|
||||
.about-image,
|
||||
.team-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 635px;
|
||||
min-height: 475px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.team-thumb {
|
||||
background: var(--white-color);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 65%;
|
||||
padding: 22px 32px 32px 32px;
|
||||
}
|
||||
|
||||
.carousel-control-next,
|
||||
.carousel-control-prev {
|
||||
top: auto;
|
||||
bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.carousel-control-prev {
|
||||
right: 4rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.carousel-control-next-icon,
|
||||
.carousel-control-prev-icon {
|
||||
background-color: var(--dark-color);
|
||||
background-size: 50% 50%;
|
||||
border-radius: 100px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
PORTFOLIO
|
||||
-----------------------------------------*/
|
||||
.portfolio-thumb {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-info {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
NEWS & EVENTS
|
||||
-----------------------------------------*/
|
||||
|
||||
.news,
|
||||
.related-news {
|
||||
background: var(--section-bg-color);
|
||||
}
|
||||
|
||||
.news-thumb {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news-category {
|
||||
background: var(--white-color);
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 4px 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.news-text-info {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.news-title-link {
|
||||
color: var(--title-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.news-title-link:hover {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.portfolio-image,
|
||||
.news-image {
|
||||
display: block;
|
||||
transition: transform 0.6s ease-out;
|
||||
}
|
||||
|
||||
.news-image-hover {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||||
padding-bottom: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news-image-hover::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 4px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
|
||||
background: #198754;
|
||||
}
|
||||
|
||||
.news-image-hover-warning::after {
|
||||
background: #ffc107;
|
||||
}
|
||||
|
||||
.news-image-hover-primary::after {
|
||||
background: #0d6efd;
|
||||
}
|
||||
|
||||
.news-image-hover-success::after {
|
||||
background: #198754;
|
||||
}
|
||||
|
||||
.news-image-hover:hover::after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.image-popup:hover .portfolio-image,
|
||||
.news-image-hover:hover .news-image {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.news-two-column {
|
||||
min-height: 199px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.news-two-column .news-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.social-share-link,
|
||||
.social-share-link + span {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
SECTION
|
||||
-----------------------------------------*/
|
||||
.section-padding {
|
||||
padding-top: 7rem;
|
||||
padding-bottom: 7rem;
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
CONTACT
|
||||
-----------------------------------------*/
|
||||
.contact-info {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.contact-form .form-control {
|
||||
border-radius: 0;
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.contact-form button[type='submit'] {
|
||||
background: var(--dark-color);
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
color: var(--white-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
padding: 16px;
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
.contact-form button[type='submit']:hover {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: var(--p-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.map-iframe {
|
||||
display: block;
|
||||
filter: grayscale(100);
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
SITE FOOTER
|
||||
-----------------------------------------*/
|
||||
.site-footer {
|
||||
background: var(--dark-color);
|
||||
padding-top: 4.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.site-footer .custom-link {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: var(--p-font-size);
|
||||
}
|
||||
|
||||
.site-footer .custom-link:hover,
|
||||
.site-footer .social-icon-link:hover {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: var(--copyright-text-font-size);
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
SOCIAL ICON
|
||||
-----------------------------------------*/
|
||||
.social-icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.social-icon li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.social-icon-link {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.social-icon-link:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/*---------------------------------------
|
||||
RESPONSIVE STYLES
|
||||
-----------------------------------------*/
|
||||
@media screen and (min-width: 1600px) {
|
||||
.news-two-column {
|
||||
min-height: 232.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.team-thumb {
|
||||
left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.news-two-column {
|
||||
height: auto !important;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.news .col-12 .news-two-column:first-child {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.news-detail-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.heroText p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 359px) {
|
||||
.news-detail-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.orange{
|
||||
color: #ca4c03;
|
||||
}
|
||||
|
||||
.white{
|
||||
color: #b1a6a6;
|
||||
}
|
||||
|
||||
BIN
favicon.ico
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
fonts/bootstrap-icons.woff
Normal file
BIN
fonts/bootstrap-icons.woff2
Normal file
BIN
images/elena-rabkina-eVVzwsNhNf4-unsplash.jpg
Normal file
|
After Width: | Height: | Size: 332 KiB |
BIN
images/news/caroline-lm-uqveD8dYPUM-unsplash.jpg
Normal file
|
After Width: | Height: | Size: 177 KiB |
BIN
images/news/jean-philippe-delberghe-MmanXAs1sKw-unsplash.jpeg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
images/news/maria-stewart-p4tj0g-_aMM-unsplash.jpeg
Normal file
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 330 KiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 290 KiB |
|
After Width: | Height: | Size: 352 KiB |
BIN
images/people/working-business-lady.jpg
Normal file
|
After Width: | Height: | Size: 228 KiB |
BIN
images/portfolio/severin-candrian-nn3uIZqmUtE-unsplash.jpeg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
images/portfolio/thought-catalog-gv-T-OjLe4c-unsplash.jpeg
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
images/portfolio/tyler-nix-Y1drF0Y3Oe0-unsplash.jpeg
Normal file
|
After Width: | Height: | Size: 67 KiB |
BIN
images/portfolio/visuals-Y4qzW3AsvqI-unsplash.jpeg
Normal file
|
After Width: | Height: | Size: 23 KiB |
495
index.html
Normal file
@ -0,0 +1,495 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YZWF8WELHP"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-YZWF8WELHP');
|
||||
</script>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Beyond IT</title>
|
||||
|
||||
<!-- CSS FILES -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/magnific-popup.css">
|
||||
|
||||
<link href="css/aos.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="favicon.ico"/>
|
||||
<link href="css/templatemo-nomad-force.css" rel="stylesheet">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WTLG38ZZ"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
|
||||
<main>
|
||||
|
||||
<section class="hero" id="hero">
|
||||
<div class="heroText">
|
||||
<h1 class="text-white mt-5 mb-lg-4" data-aos="zoom-in" data-aos-delay="800">
|
||||
Witaj w <span class="orange">B<span class="white">eyond</span> IT</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-secondary-white-color" data-aos="fade-up" data-aos-delay="1000">
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="videoWrapper">
|
||||
<video autoplay="" loop="" muted="" class="custom-video" poster="videos/792bd98f3e617786c850493560e11c45.jpg">
|
||||
<source src="videos/814dc43e870597176cad645798825c03.mp4" type="video/mp4">
|
||||
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="overlay"></div>
|
||||
</section>
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-light shadow-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<strong>B<span class="white">eyond</span> IT</strong>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<!-- <li class="nav-item active">
|
||||
<a class="nav-link" href="#hero">Home</a>
|
||||
</li> -->
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#about">O Beyond IT</a>
|
||||
</li>
|
||||
|
||||
<!-- <li class="nav-item">
|
||||
<a class="nav-link" href="#portfolio">Usługi</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#news">Lorem</a>
|
||||
</li> -->
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#contact">Kontakt</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="section-padding pb-0" id="about">
|
||||
<div class="container mb-5 pb-lg-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="mb-3" data-aos="fade-up">O Beyond IT</h2>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12 mt-3 mb-lg-5">
|
||||
<p class="me-4" data-aos="fade-up" data-aos-delay="300">Beyond IT zajmuje się wsparciem informatycznym dla małych firm i osób prywatnych. Zapoznaj się ofertą. </p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12 mt-lg-3 mb-lg-5">
|
||||
<p data-aos="fade-up" data-aos-delay="500"></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-12 p-0">
|
||||
<img src="images/elena-rabkina-eVVzwsNhNf4-unsplash.jpg" class="img-fluid about-image" alt="">
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-12 bg-dark">
|
||||
<div class="d-flex flex-column flex-wrap justify-content-center h-100 py-5 px-4 pt-lg-4 pb-lg-0">
|
||||
<h3 class="text-white mb-3" data-aos="fade-up">Posiadam wieloletnie doświadczenie w świadczeniu usług informatycznych.</h3>
|
||||
|
||||
<p class="text-secondary-white-color" data-aos="fade-up"></p>
|
||||
|
||||
<div class="mt-3 custom-links">
|
||||
|
||||
<a href="#news" class="text-white custom-link" data-aos="zoom-in" data-aos-delay="100"></a>
|
||||
|
||||
<a href="#contact" class="text-white custom-link" data-aos="zoom-in" data-aos-delay="300"></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12 p-0">
|
||||
<section id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/people/studio-shot-beautiful-happy-retired-caucasian-female-with-pixie-hairdo-crossing-arms-her-chest-having-confident-look-smiling-broadly.jpg" class="img-fluid team-image" alt="">
|
||||
|
||||
<div class="team-thumb bg-warning">
|
||||
<h3 class="text-white mb-0">Tworzę strony</h3>
|
||||
|
||||
<p class="text-secondary-white-color mb-0">WWW</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="images/people/project-leder-with-disabilities-looking-front-sitting-immobilized-wheelchair-business-office-room.jpg" class="img-fluid team-image" alt="">
|
||||
|
||||
<div class="team-thumb bg-primary">
|
||||
<h3 class="text-white mb-0">Naprawiam</h3>
|
||||
|
||||
<p class="text-secondary-white-color mb-0">komputery</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="images/people/asia-business-woman-feeling-happy-smiling-looking-camera-while-relax-home-office.jpg" class="img-fluid team-image" alt="">
|
||||
|
||||
<div class="team-thumb bg-success">
|
||||
<h3 class="text-white mb-0">Konfiguruję</h3>
|
||||
|
||||
<p class="text-secondary-white-color mb-0">sieci komputerowe</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="images/people/happy-african-american-professional-manager-smiling-looking-camera-headshot-portrait.jpg" class="img-fluid team-image" alt="">
|
||||
|
||||
<div class="team-thumb bg-info">
|
||||
<h3 class="text-white mb-0">Pomagam</h3>
|
||||
|
||||
<p class="text-secondary-white-color mb-0">wdrażać nowe rozwiązania</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="images/people/working-business-lady.jpg" class="img-fluid team-image" alt="">
|
||||
|
||||
<div class="team-thumb bg-danger">
|
||||
<h3 class="text-white mb-0">Zadbam o</h3>
|
||||
|
||||
<p class="text-secondary-white-color mb-0">Twoje bezpieczeństwo IT.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <section class="section-padding" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<h2 class="mb-5 text-center" data-aos="fade-up">Portfolio</h2>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="portfolio-thumb mb-5" data-aos="fade-up">
|
||||
<a href="images/portfolio/visuals-Y4qzW3AsvqI-unsplash.jpeg" class="image-popup">
|
||||
<img src="images/portfolio/visuals-Y4qzW3AsvqI-unsplash.jpeg" class="img-fluid portfolio-image" alt="">
|
||||
</a>
|
||||
|
||||
<div class="portfolio-info">
|
||||
<h4 class="portfolio-title mb-0">Effortless</h4>
|
||||
|
||||
<p class="text-danger">Branding</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-thumb" data-aos="fade-up">
|
||||
<a href="images/portfolio/severin-candrian-nn3uIZqmUtE-unsplash.jpeg" class="image-popup">
|
||||
<img src="images/portfolio/severin-candrian-nn3uIZqmUtE-unsplash.jpeg" class="img-fluid portfolio-image" alt="">
|
||||
</a>
|
||||
|
||||
<div class="portfolio-info">
|
||||
<h4 class="portfolio-title mb-0">Health technology</h4>
|
||||
|
||||
<p class="text-success">Art Direction</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="portfolio-thumb mt-5 mt-lg-0 mb-5" data-aos="fade-up">
|
||||
<a href="images/portfolio/tyler-nix-Y1drF0Y3Oe0-unsplash.jpeg" class="image-popup">
|
||||
<img src="images/portfolio/tyler-nix-Y1drF0Y3Oe0-unsplash.jpeg" class="img-fluid portfolio-image" alt="">
|
||||
</a>
|
||||
|
||||
<div class="portfolio-info">
|
||||
<h4 class="portfolio-title mb-0">Maki</h4>
|
||||
|
||||
<p class="text-warning">Website</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-thumb" data-aos="fade-up">
|
||||
<a href="images/portfolio/thought-catalog-gv-T-OjLe4c-unsplash.jpeg" class="image-popup">
|
||||
<img src="images/portfolio/thought-catalog-gv-T-OjLe4c-unsplash.jpeg" class="img-fluid portfolio-image" alt="">
|
||||
</a>
|
||||
|
||||
<div class="portfolio-info">
|
||||
<h4 class="portfolio-title mb-0">The gig economy</h4>
|
||||
|
||||
<p class="text-info">Graphic</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<!-- <section class="news section-padding" id="news">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<h2 class="mb-5 text-center" data-aos="fade-up">News & Events</h2>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12 mb-5 mb-lg-0">
|
||||
<div class="news-thumb" data-aos="fade-up">
|
||||
<a href="news-detail.html" class="news-image-hover news-image-hover-warning">
|
||||
<img src="images/news/caroline-lm-uqveD8dYPUM-unsplash.jpg" class="img-fluid large-news-image news-image" alt="">
|
||||
</a>
|
||||
|
||||
<div class="news-category bg-warning text-white">News</div>
|
||||
|
||||
<div class="news-text-info">
|
||||
<h5 class="news-title">
|
||||
<a href="news-detail.html" class="news-title-link">The rise of the gig economy spells the end for these workers the old system</a>
|
||||
</h5>
|
||||
|
||||
<span class="text-muted">22 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="news-thumb news-two-column d-flex flex-column flex-lg-row" data-aos="fade-up">
|
||||
<div class="news-top w-100">
|
||||
|
||||
<a href="news-detail.html" class="news-image-hover news-image-hover-primary">
|
||||
<img src="images/news/jean-philippe-delberghe-MmanXAs1sKw-unsplash.jpeg" class="img-fluid news-image" alt="">
|
||||
</a>
|
||||
|
||||
<div class="news-category bg-primary text-white">Events</div>
|
||||
</div>
|
||||
|
||||
<div class="news-bottom w-100">
|
||||
<div class="news-text-info">
|
||||
<h5 class="news-title">
|
||||
<a href="news-detail.html" class="news-title-link">Job Opportunities: Digital, Marketing</a>
|
||||
</h5>
|
||||
|
||||
<div class="d-flex flex-wrap">
|
||||
<span class="text-muted me-2">
|
||||
<i class="bi-geo-alt-fill me-1 mb-2 mb-lg-0"></i>
|
||||
Alaska,
|
||||
</span>
|
||||
|
||||
<span class="text-muted">August 6, 2021</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-thumb news-two-column d-flex flex-column flex-lg-row" data-aos="fade-up">
|
||||
<div class="news-top w-100" data-aos="fade-up">
|
||||
|
||||
<a href="news-detail.html" class="news-image-hover news-image-hover-success">
|
||||
<img src="images/news/maria-stewart-p4tj0g-_aMM-unsplash.jpeg" class="img-fluid news-image" alt="">
|
||||
</a>
|
||||
|
||||
<div class="news-category bg-success text-white">News</div>
|
||||
</div>
|
||||
|
||||
<div class="news-bottom w-100">
|
||||
<div class="news-text-info">
|
||||
<h5 class="news-title">
|
||||
<a href="news-detail.html" class="news-title-link">What happened to new viral video?</a>
|
||||
</h5>
|
||||
|
||||
<span class="text-muted">6 days ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<section class=" contact section-padding" id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-7 col-12 mx-auto">
|
||||
|
||||
<h2 class="mb-4 text-center" data-aos="fade-up">Jeśli masz pytania napisz lub zadzwoń.</h2>
|
||||
|
||||
<!-- <form action="mail.php" method="post" class="contact-form" role="form" data-aos="fade-up">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 col-6">
|
||||
<label for="name" class="form-label">Imię <sup class="text-danger">*</sup></label>
|
||||
|
||||
<input type="text" name="name" id="name" class="form-control" placeholder="Imię" required>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-6">
|
||||
<label for="email" class="form-label">Email <sup class="text-danger">*</sup></label>
|
||||
|
||||
<input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Adres email" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-4">
|
||||
<label for="message" class="form-label">Jak możemy Tobie pomóc?</label>
|
||||
|
||||
<textarea name="message" rows="6" class="form-control" id="message" placeholder="Napisz..." required></textarea>
|
||||
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<label for="services" class="form-label">Services<sup class="text-danger">*</sup></label>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="col-lg-4 col-12">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="checkbox1" name="checkbox1" class="form-check-input">
|
||||
|
||||
<label class="form-check-label" for="checkbox1">Branding</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-12 my-2 my-lg-0">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="checkbox2" name="checkbox2" class="form-check-input">
|
||||
|
||||
<label class="form-check-label" for="checkbox2">Digital Experiences</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="checkbox3" name="checkbox3" class="form-check-input">
|
||||
|
||||
<label class="form-check-label" for="checkbox3">Web Development</label>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-lg-5 col-12 mx-auto mt-5">
|
||||
<button type="submit" class="form-control">Wyślij</button>
|
||||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <section class="google-map">
|
||||
<iframe src="https://maps.google.com/maps?q=Av.+L%C3%BAcio+Costa,+Rio+de+Janeiro+-+RJ,+Brazil&t=&z=13&ie=UTF8&iwloc=&output=embed" class="map-iframe" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</section> -->
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<p class="white">
|
||||
Tel: 605-165-821
|
||||
</p>
|
||||
|
||||
<p class="white">
|
||||
boructomek@gmail.com<br>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-6">
|
||||
<p class="copyright-text mb-0">Copyright © Beyond IT 2024
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-5 ms-auto">
|
||||
<!-- <ul class="social-icon">
|
||||
<li><a href="#" class="social-icon-link bi-facebook"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-twitter"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-whatsapp"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-instagram"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-youtube"></a></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<!-- JAVASCRIPT FILES -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/jquery.sticky.js"></script>
|
||||
<script src="js/aos.js"></script>
|
||||
<script src="js/jquery.magnific-popup.min.js"></script>
|
||||
<script src="js/magnific-popup-options.js"></script>
|
||||
<script src="js/scrollspy.min.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
7
js/bootstrap.bundle.min.js
vendored
Normal file
44
js/custom.js
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
(function ($) {
|
||||
|
||||
"use strict";
|
||||
|
||||
// AOS ANIMATIONS
|
||||
AOS.init();
|
||||
|
||||
// NAVBAR
|
||||
$('.navbar-nav .nav-link').click(function(){
|
||||
$(".navbar-collapse").collapse('hide');
|
||||
});
|
||||
|
||||
// NEWS IMAGE RESIZE
|
||||
function NewsImageResize(){
|
||||
$(".navbar").scrollspy({ offset: -76 });
|
||||
|
||||
var LargeImage = $('.large-news-image').height();
|
||||
|
||||
var MinusHeight = LargeImage - 6;
|
||||
|
||||
$('.news-two-column').css({'height' : (MinusHeight - LargeImage / 2) + 'px'});
|
||||
}
|
||||
|
||||
$(window).on("resize", NewsImageResize);
|
||||
$(document).on("ready", NewsImageResize);
|
||||
|
||||
$('a[href*="#"]').click(function (event) {
|
||||
if (
|
||||
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
if (target.length) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: target.offset().top - 66
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(window.jQuery);
|
||||
|
||||
|
||||
4
js/jquery.magnific-popup.min.js
vendored
Normal file
4
js/jquery.min.js
vendored
Normal file
219
js/jquery.sticky.js
Normal file
@ -0,0 +1,219 @@
|
||||
// Sticky Plugin v1.0.3 for jQuery
|
||||
// =============
|
||||
// Author: Anthony Garand
|
||||
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
|
||||
// Improvements by Leonardo C. Daronco (daronco)
|
||||
// Created: 02/14/2011
|
||||
// Date: 07/20/2015
|
||||
// Website: http://stickyjs.com/
|
||||
// Description: Makes an element on the page stick on the screen as you scroll
|
||||
// It will only set the 'top' and 'position' of your element, you
|
||||
// might need to adjust the width in some cases.
|
||||
|
||||
(function($) {
|
||||
var slice = Array.prototype.slice; // save ref to original slice()
|
||||
var splice = Array.prototype.splice; // save ref to original slice()
|
||||
|
||||
var defaults = {
|
||||
topSpacing: 0,
|
||||
bottomSpacing: 0,
|
||||
className: 'is-sticky',
|
||||
wrapperClassName: 'sticky-wrapper',
|
||||
center: false,
|
||||
getWidthFrom: '',
|
||||
widthFromWrapper: true, // works only when .getWidthFrom is empty
|
||||
responsiveWidth: false
|
||||
},
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
sticked = [],
|
||||
windowHeight = $window.height(),
|
||||
scroller = function() {
|
||||
var scrollTop = $window.scrollTop(),
|
||||
documentHeight = $document.height(),
|
||||
dwh = documentHeight - windowHeight,
|
||||
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
|
||||
|
||||
for (var i = 0; i < sticked.length; i++) {
|
||||
var s = sticked[i],
|
||||
elementTop = s.stickyWrapper.offset().top,
|
||||
etse = elementTop - s.topSpacing - extra;
|
||||
|
||||
//update height in case of dynamic content
|
||||
s.stickyWrapper.css('height', s.stickyElement.outerHeight());
|
||||
|
||||
if (scrollTop <= etse) {
|
||||
if (s.currentTop !== null) {
|
||||
s.stickyElement
|
||||
.css({
|
||||
'width': '',
|
||||
'position': '',
|
||||
'top': ''
|
||||
});
|
||||
s.stickyElement.parent().removeClass(s.className);
|
||||
s.stickyElement.trigger('sticky-end', [s]);
|
||||
s.currentTop = null;
|
||||
}
|
||||
}
|
||||
else {
|
||||
var newTop = documentHeight - s.stickyElement.outerHeight()
|
||||
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
|
||||
if (newTop < 0) {
|
||||
newTop = newTop + s.topSpacing;
|
||||
} else {
|
||||
newTop = s.topSpacing;
|
||||
}
|
||||
if (s.currentTop != newTop) {
|
||||
var newWidth;
|
||||
if (s.getWidthFrom) {
|
||||
newWidth = $(s.getWidthFrom).width() || null;
|
||||
} else if (s.widthFromWrapper) {
|
||||
newWidth = s.stickyWrapper.width();
|
||||
}
|
||||
if (newWidth == null) {
|
||||
newWidth = s.stickyElement.width();
|
||||
}
|
||||
s.stickyElement
|
||||
.css('width', newWidth)
|
||||
.css('position', 'fixed')
|
||||
.css('top', newTop);
|
||||
|
||||
s.stickyElement.parent().addClass(s.className);
|
||||
|
||||
if (s.currentTop === null) {
|
||||
s.stickyElement.trigger('sticky-start', [s]);
|
||||
} else {
|
||||
// sticky is started but it have to be repositioned
|
||||
s.stickyElement.trigger('sticky-update', [s]);
|
||||
}
|
||||
|
||||
if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
|
||||
// just reached bottom || just started to stick but bottom is already reached
|
||||
s.stickyElement.trigger('sticky-bottom-reached', [s]);
|
||||
} else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
|
||||
// sticky is started && sticked at topSpacing && overflowing from top just finished
|
||||
s.stickyElement.trigger('sticky-bottom-unreached', [s]);
|
||||
}
|
||||
|
||||
s.currentTop = newTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resizer = function() {
|
||||
windowHeight = $window.height();
|
||||
|
||||
for (var i = 0; i < sticked.length; i++) {
|
||||
var s = sticked[i];
|
||||
var newWidth = null;
|
||||
if (s.getWidthFrom) {
|
||||
if (s.responsiveWidth === true) {
|
||||
newWidth = $(s.getWidthFrom).width();
|
||||
}
|
||||
} else if(s.widthFromWrapper) {
|
||||
newWidth = s.stickyWrapper.width();
|
||||
}
|
||||
if (newWidth != null) {
|
||||
s.stickyElement.css('width', newWidth);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods = {
|
||||
init: function(options) {
|
||||
var o = $.extend({}, defaults, options);
|
||||
return this.each(function() {
|
||||
var stickyElement = $(this);
|
||||
|
||||
var stickyId = stickyElement.attr('id');
|
||||
var stickyHeight = stickyElement.outerHeight();
|
||||
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName
|
||||
var wrapper = $('<div></div>')
|
||||
.attr('id', wrapperId)
|
||||
.addClass(o.wrapperClassName);
|
||||
|
||||
stickyElement.wrapAll(wrapper);
|
||||
|
||||
var stickyWrapper = stickyElement.parent();
|
||||
|
||||
if (o.center) {
|
||||
stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
|
||||
}
|
||||
|
||||
if (stickyElement.css("float") == "right") {
|
||||
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
|
||||
}
|
||||
|
||||
stickyWrapper.css('height', stickyHeight);
|
||||
|
||||
o.stickyElement = stickyElement;
|
||||
o.stickyWrapper = stickyWrapper;
|
||||
o.currentTop = null;
|
||||
|
||||
sticked.push(o);
|
||||
});
|
||||
},
|
||||
update: scroller,
|
||||
unstick: function(options) {
|
||||
return this.each(function() {
|
||||
var that = this;
|
||||
var unstickyElement = $(that);
|
||||
|
||||
var removeIdx = -1;
|
||||
var i = sticked.length;
|
||||
while (i-- > 0) {
|
||||
if (sticked[i].stickyElement.get(0) === that) {
|
||||
splice.call(sticked,i,1);
|
||||
removeIdx = i;
|
||||
}
|
||||
}
|
||||
if(removeIdx != -1) {
|
||||
unstickyElement.unwrap();
|
||||
unstickyElement
|
||||
.css({
|
||||
'width': '',
|
||||
'position': '',
|
||||
'top': '',
|
||||
'float': ''
|
||||
})
|
||||
;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('scroll', scroller, false);
|
||||
window.addEventListener('resize', resizer, false);
|
||||
} else if (window.attachEvent) {
|
||||
window.attachEvent('onscroll', scroller);
|
||||
window.attachEvent('onresize', resizer);
|
||||
}
|
||||
|
||||
$.fn.sticky = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.sticky');
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.unstick = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method ) {
|
||||
return methods.unstick.apply( this, arguments );
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.sticky');
|
||||
}
|
||||
};
|
||||
$(function() {
|
||||
setTimeout(scroller, 0);
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
$(document).ready(function(){
|
||||
$(".navbar").sticky({topSpacing:0});
|
||||
});
|
||||
32
js/magnific-popup-options.js
Normal file
@ -0,0 +1,32 @@
|
||||
$(document).ready(function() {
|
||||
// MagnificPopup
|
||||
var magnifPopup = function() {
|
||||
$('.image-popup').magnificPopup({
|
||||
type: 'image',
|
||||
removalDelay: 300,
|
||||
mainClass: 'mfp-with-zoom',
|
||||
gallery:{
|
||||
enabled:true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true, // By default it's false, so don't forget to enable it
|
||||
|
||||
duration: 300, // duration of the effect, in milliseconds
|
||||
easing: 'ease-in-out', // CSS transition easing function
|
||||
|
||||
// The "opener" function should return the element from which popup will be zoomed in
|
||||
// and to which popup will be scaled down
|
||||
// By defailt it looks for an image tag:
|
||||
opener: function(openerElement) {
|
||||
// openerElement is the element on which popup was initialized, in this case its <a> tag
|
||||
// you don't need to add "opener" option if this code matches your needs, it's defailt one.
|
||||
return openerElement.is('img') ? openerElement : openerElement.find('img');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Call the functions
|
||||
magnifPopup();
|
||||
|
||||
});
|
||||
1
js/scrollspy.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
!function($,window,document,undefined){$.fn.extend({scrollspy:function(options){var defaults={namespace:"scrollspy",activeClass:"active",animate:!1,duration:1e3,offset:0,container:window,replaceState:!1};options=$.extend({},defaults,options);var add=function(ex1,ex2){return parseInt(ex1,10)+parseInt(ex2,10)},findElements=function(links){for(var elements=[],i=0;i<links.length;i++){var link=links[i],hash=$(link).attr("href"),element=$(hash);if(element.length>0){var top=Math.floor(element.offset().top),bottom=top+Math.floor(element.outerHeight());elements.push({element:element,hash:hash,top:top,bottom:bottom})}}return elements},findLink=function(links,hash){for(var i=0;i<links.length;i++){var link=$(links[i]);if(link.attr("href")===hash)return link}},resetClasses=function(links){for(var i=0;i<links.length;i++)$(links[i]).parent().removeClass(options.activeClass)},scrollArea="";return this.each(function(){for(var element=this,container=$(options.container),links=$(element).find("a"),i=0;i<links.length;i++){var link=links[i];$(link).on("click",function(e){var target=$(this).attr("href"),$target=$(target);if($target.length>0){var top=add($target.offset().top,options.offset);options.animate?$("html, body").animate({scrollTop:top},options.duration):window.scrollTo(0,top),e.preventDefault()}})}resetClasses(links);var elements=findElements(links),trackChanged=function(){for(var link,position={top:add($(this).scrollTop(),Math.abs(options.offset)),left:$(this).scrollLeft()},i=0;i<elements.length;i++){var current=elements[i];if(position.top>=current.top&&position.top<current.bottom){var hash=current.hash;if(link=findLink(links,hash)){options.onChange&&scrollArea!==hash&&(options.onChange(current.element,$(element),position),scrollArea=hash),options.replaceState&&history.replaceState({},"","/"+hash),resetClasses(links),link.parent().addClass(options.activeClass);break}}}!link&&"exit"!==scrollArea&&options.onExit&&(options.onExit($(element),position),resetClasses(links),scrollArea="exit",options.replaceState&&history.replaceState({},"","/"))};container.bind("scroll."+options.namespace,function(){trackChanged()}),$(document).ready(function(e){trackChanged()})})}})}(jQuery,window,document);
|
||||
18
mail.php
Normal file
@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
// Zdefiniuj dane odbiorcy
|
||||
$adres = "info@beyondit.pl";
|
||||
$tytul = "Wiadomość ze strony";
|
||||
|
||||
// Pobierz dane z formularza
|
||||
$imie = $_POST['name'];
|
||||
$email = $_POST['email'];
|
||||
$wiadomosc = $_POST['message'];
|
||||
|
||||
// Utwórz treść wiadomości
|
||||
$tresc = "Wiadomość od: $imie ($email)\n\n$wiadomosc";
|
||||
|
||||
// Wyślij wiadomość
|
||||
mail($adres, $tytul, $tresc);
|
||||
|
||||
?>
|
||||
217
news-detail.html
Normal file
@ -0,0 +1,217 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Nomad Force HTML Template - News Page</title>
|
||||
|
||||
<!-- CSS FILES -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/magnific-popup.css">
|
||||
|
||||
<link href="css/aos.css" rel="stylesheet">
|
||||
|
||||
<link href="css/templatemo-nomad-force.css" rel="stylesheet">
|
||||
<!--
|
||||
|
||||
TemplateMo 567 Nomad Force
|
||||
|
||||
https://templatemo.com/tm-567-nomad-force
|
||||
|
||||
-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="hero" id="hero">
|
||||
<div class="heroText">
|
||||
<h1 class="news-detail-title text-white mt-lg-5 mb-lg-4" data-aos="zoom-in" data-aos-delay="300">
|
||||
What happened to new viral video?
|
||||
</h1>
|
||||
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<a href="#" class="text-secondary-white-color social-share-link">
|
||||
<i class="bi-chat-square-fill me-1"></i>
|
||||
128
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-share-link bi-bookmark-fill ms-3 me-4"></a>
|
||||
|
||||
<span>21 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="videoWrapper">
|
||||
<img src="images/news/caroline-lm-uqveD8dYPUM-unsplash.jpg" class="img-fluid news-detail-image" alt="">
|
||||
</div>
|
||||
|
||||
<div class="overlay"></div>
|
||||
</section>
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-light shadow-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<strong>Nomad Force</strong>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="index.html#hero">Home</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html#about">Our Studio</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html#portfolio">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html#news">News & Events</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html#contact">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="news-detail section-padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-10 mx-auto">
|
||||
<h2 class="mb-3" data-aos="fade-up">What happened to new viral video?</h2>
|
||||
|
||||
<p class="me-4" data-aos="fade-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan.</p>
|
||||
|
||||
<p data-aos="fade-up">Nullam id lorem commodo, pharetra sapien ut, accumsan ligula. Sed sit amet sem pulvinar, imperdiet eros quis, vestibulum felis. Pellentesque posuere scelerisque sodales.</p>
|
||||
|
||||
<div class="clearfix my-4 mt-lg-0 mt-5">
|
||||
<div class="col-md-6 float-md-end mb-3 ms-md-3" data-aos="fade-up">
|
||||
<figure class="figure">
|
||||
<img src="images/news/jean-philippe-delberghe-MmanXAs1sKw-unsplash.jpeg" class="img-fluid news-image" alt="">
|
||||
|
||||
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<p data-aos="fade-up">
|
||||
Morbi scelerisque urna in orci elementum, nec mollis ligula luctus. Proin ullamcorper pulvinar commodo. Quisque tortor nunc, ultricies efficitur ex sit amet, tempus rutrum libero. In nec faucibus tellus.
|
||||
</p>
|
||||
|
||||
<p data-aos="fade-up">
|
||||
Donec justo orci, pretium ultricies ante eget, bibendum semper enim. Nunc efficitur purus suscipit leo placerat, a ultricies purus gravida. Sed sollicitudin ornare porta. Mauris convallis sit amet purus sed rutrum.
|
||||
</p>
|
||||
|
||||
<p data-aos="fade-up">
|
||||
This Bootstrap 5 layout is provided by TemplateMo website and it is free to use for any of your website. You are allowed to edit it in any way you like. However, please do not redistribute this template ZIP file for a template download purpose on any other website such as Free CSS collection websites.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="social-share d-flex mt-5">
|
||||
<span class="me-4" data-aos="zoom-in">Share this article:</span>
|
||||
|
||||
<a href="#" class="social-share-icon bi-facebook" data-aos="zoom-in"></a>
|
||||
|
||||
<a href="#" class="social-share-icon bi-twitter mx-3" data-aos="zoom-in"></a>
|
||||
|
||||
<a href="#" class="social-share-icon bi-envelope" data-aos="zoom-in"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="related-news section-padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-8 col-10 mx-auto text-center">
|
||||
<span class="d-block" data-aos="zoom-in">Next article</span>
|
||||
|
||||
<h3 class="news-title" data-aos="fade-up">
|
||||
<a href="news-detail.html" class="news-title-link">Job Opportunities - Digital Marketing</a>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<h5 class="text-white">
|
||||
<i class="bi-geo-alt-fill me-2"></i>
|
||||
State of Rio de Janeiro, Brazil
|
||||
</h5>
|
||||
|
||||
<a href="mailto:info@company.com" class="custom-link mt-3 mb-5">
|
||||
info@company.com
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<p class="copyright-text mb-0">Copyright © Nomad Force 2021
|
||||
|
||||
<br><br>Design: <a href="https://templatemo.com/page/1" target="_parent">TemplateMo</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-5 ms-auto">
|
||||
<ul class="social-icon">
|
||||
<li><a href="#" class="social-icon-link bi-facebook"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-twitter"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-whatsapp"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-instagram"></a></li>
|
||||
|
||||
<li><a href="#" class="social-icon-link bi-youtube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<!-- JAVASCRIPT FILES -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/jquery.sticky.js"></script>
|
||||
<script src="js/aos.js"></script>
|
||||
<script src="js/jquery.magnific-popup.min.js"></script>
|
||||
<script src="js/magnific-popup-options.js"></script>
|
||||
<script src="js/scrollspy.min.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||