diff --git a/Dokumentation.txt b/Dokumentation.txt index ccca268d955d714af93f5d93b8bafe3cbea2fd2f..275b22148b9ef650421230635fa8928329ba7675 100644 --- a/Dokumentation.txt +++ b/Dokumentation.txt @@ -31,5 +31,13 @@ und CSS eingewiesen (Aufbau HTML-File, Einbindung und Verwendung von CSS). Nicolas und Andreas wurden Grundkenntnisse über Photoshop und Indesign von Julia vermittelt (Erstellen/Speichern Datei, Toolbar, Ebenen). -Bis zum nächsten Treffen werden Nicolas und Andi ein Grundgerüst der Website aufbauen. Julia sammelt weiteres Bildmaterial für die Seite. +Bis zum nächsten Treffen werden Nicolas und Andreas ein Grundgerüst der Website aufbauen. Julia sammelt weiteres Bildmaterial für die Seite. + + +16.03.2018 - 2. Treffen +---------------------------- +Finales Treffen. Andreas zeigte seine Grundgerüst der Website vor. Die Gruppe war mit dem durchdachten Aufbau zufrieden. Die Website wurde bei +diesem Treffen fertiggestellt und auf den Webspace hochgeladen. Es wurde das Burgermenu hinzugefügt und die Bilder auf der Seite verlinkt. +Julia fertigte weitere Mockups der Website an. Alle nötigen Dateien wurden auf Git hochgeladen. +Die Ordnerstruktur auf Git wurde aufgeräumt, alle unnützen Dateien wurden von Git gelöscht. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000000000000000000000000000000000000..af2fba69297126e6958eaaefd9d73b358350583f --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + Projekt_Mediengestaltung + + + + + + + + + + + + + +
+ +
+
+
+
+
+ +
+ +
+

KRAFT

+
+ +
+ + + +
+ + +
+

WERK

+
+
+ + + + + + + diff --git a/media/Bild_Gelb.png b/media/Bild_Gelb.png new file mode 100644 index 0000000000000000000000000000000000000000..b97cb921d80d05c8cd637e1f8292590fc643ffe4 Binary files /dev/null and b/media/Bild_Gelb.png differ diff --git a/media/Website_mediendesign.psd b/media/Website_mediendesign.psd new file mode 100644 index 0000000000000000000000000000000000000000..f03aa46230f7cb9535d175561ed4aafffaf47e59 Binary files /dev/null and b/media/Website_mediendesign.psd differ diff --git a/media/kraftwerk-3dkatalog.jpg b/media/kraftwerk-3dkatalog.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9548ce6f1d62b6e7ad70b7921c98ea5df102788d Binary files /dev/null and b/media/kraftwerk-3dkatalog.jpg differ diff --git a/media/menu-512.png b/media/menu-512.png new file mode 100644 index 0000000000000000000000000000000000000000..93e75c58773fabd31eddbc155166ab14005b6439 Binary files /dev/null and b/media/menu-512.png differ diff --git a/media/yellow_text.png b/media/yellow_text.png new file mode 100644 index 0000000000000000000000000000000000000000..1be312604de19ef34242772c9e602c816f67343e Binary files /dev/null and b/media/yellow_text.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000000000000000000000000000000000000..3a11c133505ced093469b98ee4f8311ab7d35777 --- /dev/null +++ b/script.js @@ -0,0 +1,9 @@ +$('.burger').on('click', function() { + //if menu is open, slide up + if ($('.menu').hasClass('open')) { + $('.menu').removeClass('open'); + } else { + //if menu is closed, slide down + $('.menu').addClass('open'); + } +}); \ No newline at end of file diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000000000000000000000000000000000000..7951721981542095978ffb9b592d092d86ba2d8c --- /dev/null +++ b/style/style.css @@ -0,0 +1,132 @@ +body {display: flex;} + +#site { + height: 1080px; + width: 1920px; + margin: auto; +} + +#pic { + width: 1276px; + height: 900px; + background-image: url("../media/kraftwerk-3dkatalog.jpg"); + background-size: contain; + background-repeat: no-repeat; + z-index: -1 !important; + margin-left: 483px; +} + + + +#down { + height: 230px; + width: 1076px; + z-index: 1; + display: flex; + margin-top: 11%; + margin-left: 936px; + font-family: 'Raleway', sans-serif; + padding-left: 22px;} + +p { + height: auto; + font-size: 20em; + margin: 0; + padding: 0; + font-weight: bold; + margin-bottom: 3px !important; + margin-top: -2%; + letter-spacing: 11px; + margin-top: -73px; + margin-left: -19px; + color:blue; +} + +#top { + width: 1062px; + z-index: 2 !important; + display: flex; + margin-top: -42.5%; + font-family: 'Raleway', sans-serif; + height: 230px; + padding-left: 0; +} + +#yellow { + height: 35em; + width: 35em; + background-color: yellow; + margin-bottom: -48%; + z-index: 1; + margin-left: 20%; + margin-top: 22%;} + +#yellow p {font-size: 20px; + color: red;} + +#yellowtext {background-image: url("../media/yellow_text.png"); + background-repeat: no-repeat; + background-size: contain; + width: 100px; + height: 560px;} + +.burger {margin-left: 1613px; +height: 60px; +width: 60px; +display: block; +float: left; +margin-top: -231px; +background-color: blue; +background-image: url("../media/menu-512.png"); +background-repeat: no-repeat; +background-size: contain;} + +nav li { + list-style-type:none; +} + +nav ul{} + +nav li a:link { + text-decoration: none; + font-weight: bold; + display: block; + background: #6C6; + width: 5em; + padding: 0.2em; +} + + .menu { + height: 0; + overflow: hidden; + padding-left: 0px; + } + .open { + height: 400px; +width: 400px; +margin-top: 60px; +margin-left: -85px; +text-align: right; + } + + .open li {width: 400px;} + + .open ul {height: 300px;} + + nav li a:link { + + text-decoration: none; + font-weight: bold; + display: block; + background: blue; + width: 5em; + padding: 0.2em; + font-size: 26px; + color:white; + padding-right: 10px; + font-family: 'Vollkorn', serif;; + } + + nav li a:visited { + color: white; + } \ No newline at end of file