diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..262059b --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "Font-Awesome"] + path = Font-Awesome + url = https://github.com/FortAwesome/Font-Awesome.git diff --git a/Font-Awesome b/Font-Awesome new file mode 160000 index 0000000..57f1632 --- /dev/null +++ b/Font-Awesome @@ -0,0 +1 @@ +Subproject commit 57f1632d7303fbcd8974425882ffd9919fc4041b diff --git a/css/footer.css b/css/footer.css index 58a0349..5869198 100644 --- a/css/footer.css +++ b/css/footer.css @@ -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; } \ No newline at end of file diff --git a/css/header.css b/css/header.css index 41d9905..c05870d 100644 --- a/css/header.css +++ b/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-container { + display: block; } - .header-items .header-item { + + .home { + width: 100vw; + } + + .menu-icon { + display: block; + position: fixed; + top: 30px; + right: 30px; + } + + .menu-icon .hide { display: none; } - .header-items a.menu-icon { - float: right; - display: block; + + .small-icon { + top: 20px; } -} - -@media screen and (max-width: 600px) { - .header-items.responsive {position: relative;} - .header-items.responsive .menu-icon { - position: absolute; - right: 0; - top: 0; + + .header-items { + display: none; } - .header-items.responsive a { - float: none; - display: block; - text-align: left; - } - .header-items.responsive .dropdown {float: none;} - .header-items.responsive .dropdown-content {position: relative;} - .header-items.responsive .dropdown .dropbtn { - display: block; - width: 100vw; - text-align: left; + + .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 .dropdown { + float: none; + } + .header-items.responsive .dropdown-content { + position: relative; + box-shadow: none; + } + .header-items.responsive .dropdown .dropbtn { display: block; width: 100vw; text-align: left; } + } \ No newline at end of file diff --git a/css/index.css b/css/index.css index 24ffdf8..a1ab48e 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,169 @@ +/* html { + scroll-behavior: smooth; +} */ + +html, body { + height: 100%; +} + body { - margin: 0px + 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; } \ No newline at end of file diff --git a/css/progressbar.css b/css/progressbar.css new file mode 100644 index 0000000..b665fd4 --- /dev/null +++ b/css/progressbar.css @@ -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; +} \ No newline at end of file diff --git a/css/slider.css b/css/slider.css new file mode 100644 index 0000000..056f479 --- /dev/null +++ b/css/slider.css @@ -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; +} \ No newline at end of file diff --git a/css/totop.css b/css/totop.css index 5a8c276..777d59f 100644 --- a/css/totop.css +++ b/css/totop.css @@ -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 { - cursor: pointer; - background-color: #333; +@media screen and (min-width: 600px) { + .totop:hover { + cursor: pointer; + background-color: black; + } } \ No newline at end of file diff --git a/images/133200.jpg b/images/133200.jpg new file mode 100644 index 0000000..2e416e1 Binary files /dev/null and b/images/133200.jpg differ diff --git a/images/39612.jpg b/images/39612.jpg new file mode 100644 index 0000000..21caa7b Binary files /dev/null and b/images/39612.jpg differ diff --git a/images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg b/images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg new file mode 100644 index 0000000..58071d8 Binary files /dev/null and b/images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg differ diff --git a/images/7046.jpg b/images/7046.jpg new file mode 100644 index 0000000..b64926c Binary files /dev/null and b/images/7046.jpg differ diff --git a/images/NBank_logo.png b/images/NBank_logo.png new file mode 100644 index 0000000..c428bbd Binary files /dev/null and b/images/NBank_logo.png differ diff --git a/images/logo_dicke_eiche.png b/images/logo_dicke_eiche.png new file mode 100644 index 0000000..3c26e63 Binary files /dev/null and b/images/logo_dicke_eiche.png differ diff --git a/images/logo_gemuesegaertner.png b/images/logo_gemuesegaertner.png new file mode 100644 index 0000000..b8de199 Binary files /dev/null and b/images/logo_gemuesegaertner.png differ diff --git a/images/logo_meyer_zu_theenhausen.jpg b/images/logo_meyer_zu_theenhausen.jpg new file mode 100644 index 0000000..7b73455 Binary files /dev/null and b/images/logo_meyer_zu_theenhausen.jpg differ diff --git a/index.html b/index.html index 809782c..73b69bd 100644 --- a/index.html +++ b/index.html @@ -2,39 +2,186 @@ - + - + + + + - -
- -
- Über uns - Blog -
- -
- Tauschmärkte - Konsumkritischer Stadtrundgang - Workshops +
+ +
+
+
+
+ + + +
+ +
+ +
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+

Onlineshop

+
+
+

Bewerben Sie Ihre Produkte online und geben Sie Ihren Kunden die Möglichkeit diese zu bestellen.

+
+
+
+ +
+
+
+

Das Team

+
+
+
+ Avatar +

Julian Hörnschemeyer

+

Entwicklung

+

Finanzen

+ +
+
+ Avatar +

Julian Hörnschemeyer

+

Entwicklung

+

Finanzen

+ +
+
+ Avatar +

Julian Hörnschemeyer

+

Entwicklung

+

Finanzen

+ +
+ +
+
+
+
+
+

Unsere Referenzen

+
+
+
+ + + +
+
+
+ +
+
+
+

Gefördert duch

+
+
+
+ +
+
+
+
+

Test

+
+
+

+ 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! + +

+
+
-
+ \ No newline at end of file