changes
This commit is contained in:
hoernschen
parent
cbcb89f9fa
commit
34ce60164a
17 changed files with 607 additions and 82 deletions
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "Font-Awesome"]
|
||||
path = Font-Awesome
|
||||
url = https://github.com/FortAwesome/Font-Awesome.git
|
||||
1
Font-Awesome
Submodule
1
Font-Awesome
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 57f1632d7303fbcd8974425882ffd9919fc4041b
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
.footer {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: #333;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
.social-media-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -20,6 +22,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
@ -32,7 +35,7 @@
|
|||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
font-size: small;
|
||||
}
|
||||
125
css/header.css
125
css/header.css
|
|
@ -1,34 +1,47 @@
|
|||
.header {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
font-size: large;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
flex-shrink: 0;
|
||||
background: white;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
width: 100%;
|
||||
max-width: 1152px;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.small-logo {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: none;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.header-items {
|
||||
margin: auto;
|
||||
/* padding-right: 1rem;
|
||||
margin-right: 0px; */
|
||||
margin-left: 0px;
|
||||
display: flex;
|
||||
float: right;
|
||||
right: 0px;
|
||||
align-items: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header-items .menu-icon {
|
||||
display: none;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
|
|
@ -36,7 +49,6 @@
|
|||
}
|
||||
|
||||
.dropdown {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -48,20 +60,16 @@
|
|||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
position: fixed;
|
||||
background-color: #ffffff;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
|
|
@ -73,40 +81,65 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.header-items .dropdown .dropbtn {
|
||||
display: none;
|
||||
}
|
||||
.header-items .header-item {
|
||||
display: none;
|
||||
}
|
||||
.header-items a.menu-icon {
|
||||
float: right;
|
||||
.header-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.header-items.responsive {position: relative;}
|
||||
.header-items.responsive .menu-icon {
|
||||
.home {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.menu-icon .hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.small-icon {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.header-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-items.responsive {
|
||||
position: relative;
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.header-items.responsive .header-item {
|
||||
display: block;
|
||||
margin-left: 0rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.header-items.responsive .icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.header-items.responsive a {
|
||||
|
||||
.header-items.responsive .dropdown {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.header-items.responsive .dropdown {float: none;}
|
||||
.header-items.responsive .dropdown-content {position: relative;}
|
||||
.header-items.responsive .dropdown-content {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
}
|
||||
.header-items.responsive .dropdown .dropbtn {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
text-align: left;
|
||||
}
|
||||
.header-items.responsive .header-item {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
170
css/index.css
170
css/index.css
|
|
@ -1,3 +1,169 @@
|
|||
body {
|
||||
margin: 0px
|
||||
/* html {
|
||||
scroll-behavior: smooth;
|
||||
} */
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
text-transform: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.col-1 {width: 8.33%;}
|
||||
.col-2 {width: 16.66%;}
|
||||
.col-3 {width: 25%;}
|
||||
.col-4 {width: 33.33%;}
|
||||
.col-5 {width: 41.66%;}
|
||||
.col-6 {width: 50%;}
|
||||
.col-7 {width: 58.33%;}
|
||||
.col-8 {width: 66.66%;}
|
||||
.col-9 {width: 75%;}
|
||||
.col-10 {width: 83.33%;}
|
||||
.col-11 {width: 91.66%;}
|
||||
.col-12 {width: 100%;}
|
||||
|
||||
[class*="col-"] {
|
||||
float: left;
|
||||
padding: 15px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.row::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.content {
|
||||
border: 2px;
|
||||
border-color: black;
|
||||
flex: 1 0 auto;
|
||||
max-width: 1152px;
|
||||
align-self: center;
|
||||
padding: 3rem 1.5rem;
|
||||
padding-top: 8rem;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 3px;
|
||||
border-radius: 50px;
|
||||
background: tomato;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: large;
|
||||
padding-bottom: 1rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.videoWrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
border: 5px dotted tomato;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* max-width: 640px; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* Team */
|
||||
|
||||
.team {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.teammember {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid tomato;
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.teammember-title {
|
||||
font-size: x-large;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.5em;
|
||||
padding-top: 1rem;
|
||||
color: #333;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
/* Funding */
|
||||
|
||||
.funding-logo {
|
||||
width: 15rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.reference-logo {
|
||||
max-height: 15rem;
|
||||
max-width: 15rem;
|
||||
padding: 1.5rem;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
min-width: 300px;
|
||||
justify-content: center;
|
||||
}
|
||||
9
css/progressbar.css
Normal file
9
css/progressbar.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/* default CSS variables */
|
||||
.progress {
|
||||
background: linear-gradient(to right, tomato var(--scroll), transparent 0);
|
||||
background-repeat: no-repeat;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
z-index: 1000;
|
||||
}
|
||||
134
css/slider.css
Normal file
134
css/slider.css
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-stop: inherit;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
scroll-snap-points-x: repeat(300px);
|
||||
scroll-snap-type: mandatory;
|
||||
}
|
||||
.slides::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.slides::-webkit-scrollbar-thumb {
|
||||
background: black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.slides::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.slides > div {
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
margin-right: 50px;
|
||||
border-radius: 10px;
|
||||
background: #eee;
|
||||
transform-origin: center center;
|
||||
transform: scale(1);
|
||||
transition: transform 0.5s;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide > img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slide-links {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 35rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.slide-links > a {
|
||||
display: inline-flex;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: tomato;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 0 0 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slider-navigation-left {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
height: inherit;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: tomato;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.slider-navigation-left:hover {
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.slider-navigation-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
height: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
color: tomato;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.slider-navigation-right:active > i {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.slider-navigation-right:hover {
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.slide-links > a:hover {
|
||||
cursor: pointer;
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.slide-links > a:active {
|
||||
top: 1px;
|
||||
}
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
border-radius: 50%;
|
||||
margin: 30px;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
transition: background-color .3s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
|
@ -25,7 +25,9 @@
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.totop:hover {
|
||||
@media screen and (min-width: 600px) {
|
||||
.totop:hover {
|
||||
cursor: pointer;
|
||||
background-color: #333;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
BIN
images/133200.jpg
Normal file
BIN
images/133200.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 877 KiB |
BIN
images/39612.jpg
Normal file
BIN
images/39612.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 806 KiB |
BIN
images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg
Normal file
BIN
images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
images/7046.jpg
Normal file
BIN
images/7046.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
BIN
images/NBank_logo.png
Normal file
BIN
images/NBank_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
images/logo_dicke_eiche.png
Normal file
BIN
images/logo_dicke_eiche.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
images/logo_gemuesegaertner.png
Normal file
BIN
images/logo_gemuesegaertner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
images/logo_meyer_zu_theenhausen.jpg
Normal file
BIN
images/logo_meyer_zu_theenhausen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
202
index.html
202
index.html
|
|
@ -2,17 +2,21 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<link rel="stylesheet" href="css/totop.css">
|
||||
<script src="https://kit.fontawesome.com/7de2ddcd5c.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="css/slider.css">
|
||||
<link rel="stylesheet" href="css/progressbar.css">
|
||||
<link rel="stylesheet" href="Font-Awesome/css/all.min.css">
|
||||
<!-- <script src="https://kit.fontawesome.com/7de2ddcd5c.js" crossorigin="anonymous"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<a href="#"><img class="logo" src="images/NEO Logo.png"></a>
|
||||
<div class="progress"></div>
|
||||
<header class="header" id="header">
|
||||
<div class="header-container">
|
||||
<a class="home" href="#"><img id="logo" class="logo" src="images/NEO Logo.png"></a>
|
||||
<div class="header-items" id="header-items">
|
||||
<a class="header-item" href="#">Über uns</a>
|
||||
<a class="header-item" href="#">Blog</a>
|
||||
|
|
@ -26,15 +30,158 @@
|
|||
<a href="#">Workshops</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="menu-icon" onclick="myFunction()">☰</a>
|
||||
</div>
|
||||
<a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="myFunction()">☰</a>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="section">
|
||||
<div class="slider">
|
||||
<div class=slide-links>
|
||||
<a onclick="scrollToSlide(0)"></a>
|
||||
<a onclick="scrollToSlide(1)"></a>
|
||||
<a onclick="scrollToSlide(2)"></a>
|
||||
</div>
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<div class="slide" id="slide-1">
|
||||
<img src="images/133200.jpg">
|
||||
<span class="slider-navigation-right" onclick="scrollToSlide(1)">
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</span>
|
||||
<span class="slider-navigation-left" onclick="scrollToSlide(2)">
|
||||
<i class="fas fa-angle-left"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="slide" id="slide-2">
|
||||
<img src="images/39612.jpg">
|
||||
<span class="slider-navigation-right" onclick="scrollToSlide(2)">
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</span>
|
||||
<span class="slider-navigation-left" onclick="scrollToSlide(0)">
|
||||
<i class="fas fa-angle-left"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="slide" id="slide-3">
|
||||
<img src="images/7046.jpg">
|
||||
<span class="slider-navigation-right" onclick="scrollToSlide(0)">
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</span>
|
||||
<span class="slider-navigation-left" onclick="scrollToSlide(1)">
|
||||
<i class="fas fa-angle-left"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="videoWrapper">
|
||||
<iframe class="video" src="https://kompetenzzentrum-lingen.digital/wp-content/uploads/2020/08/200818-Video-Hof-Langenberg-Kompetenzzentrum-Lingen.mp4?_=5" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="services">
|
||||
<div class="service-icon col-4">
|
||||
<img src="images/logo_meyer_zu_theenhausen.jpg">
|
||||
</div>
|
||||
<div class="service-description col-8">
|
||||
<div class="title">
|
||||
<h1 class="content-title">Onlineshop</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<p>Bewerben Sie Ihre Produkte online und geben Sie Ihren Kunden die Möglichkeit diese zu bestellen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="team">
|
||||
<div class="title">
|
||||
<h1 class="content-title">Das Team</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<div class="teammember">
|
||||
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
|
||||
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
|
||||
<p>Entwicklung</p>
|
||||
<p>Finanzen</p>
|
||||
<div class="social-media">
|
||||
<span>
|
||||
<a href="https://twitter.com/jhoernschen"><i href="#" class="fab fa-twitter"></i></a>
|
||||
<a href="https://chaos.social/@hoernschen"><i href="#" class="fab fa-mastodon"></i></a>
|
||||
<a href="https://github.com/hoernschen"><i href="#" class="fab fa-github"></i></a>
|
||||
<a href="#"><i href="#" class="fab fa-xing"></i></a>
|
||||
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teammember">
|
||||
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
|
||||
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
|
||||
<p>Entwicklung</p>
|
||||
<p>Finanzen</p>
|
||||
<div class="social-media">
|
||||
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teammember">
|
||||
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
|
||||
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
|
||||
<p>Entwicklung</p>
|
||||
<p>Finanzen</p>
|
||||
<div class="social-media">
|
||||
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div><a href="#"> > Weitere Teammitglieder < </a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="references">
|
||||
<div class="title">
|
||||
<h1 class="content-title">Unsere Referenzen</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<div class="reference-logos">
|
||||
<img class="reference-logo" src="images/logo_gemuesegaertner.png" alt="Die Gemüsegärtner">
|
||||
<img class="reference-logo" src="images/logo_meyer_zu_theenhausen.jpg" alt="Meyer zu Theenhausen">
|
||||
<img class="reference-logo" src="images/logo_dicke_eiche.png" alt="Dicke Eiche">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="funding">
|
||||
<div class="title">
|
||||
<h1 class="content-title">Gefördert duch</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<div class="funding-logos">
|
||||
<img class="funding-logo" src="images/NBank_logo.png" alt="NBank">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h1 class="content-title">Test</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<p>
|
||||
A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. This feature is useful for users because it enables them to easily find their way out of a page no matter where they are. Without easy access to the navigational panel, the user experience can become stressful. Like most things, when a problem is solved well, the problem and solution both go by unnoticed. That’s what we want! Personally, I’ve left websites solely because simple navigation options were not available, and in some cases I’d even rather call the company than deal with their website.
|
||||
|
||||
In this tutorial we’ll go over how to make a sticky header using HTML and CSS. For advanced animated effects, we’ll add some Javascript at the end. For those who don’t already know, HTML is what sets the structure of the website, CSS gives it color and traits, and Javascript adds animations and behaviors — as explained in W3Schools. In terms of browser compatibility, it looks like everything in this tutorial is compatible with current browsers. A good tip for web development is to test along the way, not just after you’re done adding the coding that you think you need. Otherwise, something could go wrong and it’ll take longer to pinpoint exactly what the problem is. So, take it slow. Now, let’s get to the coding and building!
|
||||
A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. This feature is useful for users because it enables them to easily find their way out of a page no matter where they are. Without easy access to the navigational panel, the user experience can become stressful. Like most things, when a problem is solved well, the problem and solution both go by unnoticed. That’s what we want! Personally, I’ve left websites solely because simple navigation options were not available, and in some cases I’d even rather call the company than deal with their website.
|
||||
|
||||
In this tutorial we’ll go over how to make a sticky header using HTML and CSS. For advanced animated effects, we’ll add some Javascript at the end. For those who don’t already know, HTML is what sets the structure of the website, CSS gives it color and traits, and Javascript adds animations and behaviors — as explained in W3Schools. In terms of browser compatibility, it looks like everything in this tutorial is compatible with current browsers. A good tip for web development is to test along the way, not just after you’re done adding the coding that you think you need. Otherwise, something could go wrong and it’ll take longer to pinpoint exactly what the problem is. So, take it slow. Now, let’s get to the coding and building!
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="social-media">
|
||||
<div class="social-media-footer">
|
||||
<span>
|
||||
<a href="#"><i href="#" class="fab fa-facebook"></i></a>
|
||||
<a href="#"><i href="#" class="fab fa-instagram"></i></a>
|
||||
|
|
@ -43,11 +190,11 @@
|
|||
<a href="#"><i href="#" class="fab fa-mastodon"></i></a>
|
||||
<a href="#"><i href="#" class="fab fa-github"></i></a>
|
||||
<a href="#"><i href="#" class="fab fa-lastfm"></i></a>
|
||||
<a href="#"><i href="#" class="fab fa-xing"></i></a>
|
||||
<a href="#"><i href="#" class="fab fa-linkedin"></i></a>
|
||||
<a href="#"><i href="#" class="fas fa-rss-square"></i></a>
|
||||
<a href="#"><i href="#" class="fas fa-link"></i></a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<ul class="links">
|
||||
|
|
@ -63,15 +210,30 @@
|
|||
</div>
|
||||
</footer>
|
||||
<a class="totop hide" id="totop"><i href="#" class="fas fa-chevron-up"></i></a>
|
||||
<script>
|
||||
function scrollToSlide(slideNr) {
|
||||
const slider = document.querySelector('.slider');
|
||||
const slides = slider.querySelector('.slides');
|
||||
const width = slider.querySelector('.slide').clientWidth;
|
||||
slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
const scrollToTopButton = document.getElementById('totop');
|
||||
|
||||
const logo = document.getElementById('logo');
|
||||
const header = document.getElementById("header");
|
||||
const menuIcon = document.getElementById("menu-icon");
|
||||
var sticky = header.offsetTop;
|
||||
const scrollFunc = () => {
|
||||
let y = window.scrollY;
|
||||
if (y > 0) {
|
||||
scrollToTopButton.className = "totop show";
|
||||
logo.className = "small-logo"
|
||||
menuIcon.classList.add("small-icon")
|
||||
} else {
|
||||
scrollToTopButton.className = "totop hide";
|
||||
logo.className = "logo"
|
||||
menuIcon.classList.remove("small-icon")
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -91,12 +253,24 @@
|
|||
}
|
||||
|
||||
function myFunction() {
|
||||
var x = document.getElementById("header-items");
|
||||
if (x.className === "header-items") {
|
||||
x.className += " responsive";
|
||||
var headerItems = document.getElementById("header-items");
|
||||
if (headerItems.className === "header-items") {
|
||||
headerItems.classList.add("responsive")
|
||||
} else {
|
||||
x.className = "header-items";
|
||||
headerItems.classList.remove("responsive")
|
||||
}
|
||||
}
|
||||
|
||||
var h = document.documentElement,
|
||||
b = document.body,
|
||||
st = 'scrollTop',
|
||||
sh = 'scrollHeight',
|
||||
progress = document.querySelector('.progress'),
|
||||
scroll;
|
||||
|
||||
document.addEventListener('scroll', function() {
|
||||
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
|
||||
progress.style.setProperty('--scroll', scroll + '%');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
Reference in a new issue