Pierwszy commit - dodanie plików

This commit is contained in:
Tomasz Boruc 2025-05-30 19:54:20 +02:00
commit 8cb4e342fd
36 changed files with 3539 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
/temp

11
.htaccess Normal file
View 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

File diff suppressed because one or more lines are too long

1390
css/bootstrap-icons.css vendored Normal file

File diff suppressed because it is too large Load Diff

7
css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

351
css/magnific-popup.css Normal file
View 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; } }

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
fonts/bootstrap-icons.woff Normal file

Binary file not shown.

BIN
fonts/bootstrap-icons.woff2 Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

495
index.html Normal file
View 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>

1
js/aos.js Normal file

File diff suppressed because one or more lines are too long

7
js/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

44
js/custom.js Normal file
View 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

File diff suppressed because one or more lines are too long

4
js/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

219
js/jquery.sticky.js Normal file
View 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});
});

View 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
View 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
View 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
View 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>

BIN
videos/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.