Content

public/css/style.css

@@ -0,0 +1,180 @@
+@font-face { font-family: 'Lato';
+    src: url('/assets/font/Lato-Regular.ttf') format('truetype'); }
+@font-face { font-family: 'Lato';
+    src: url('/assets/font/Lato-Bold.ttf') format('truetype'); 
+    font-weight: bold;
+    }
+@font-face { font-family: 'Lato';
+    src: url('/assets/font/Lato-Italic.ttf') format('truetype'); 
+    font-style: italic;
+    }
+@font-face { font-family: 'Lato';
+    src: url('/assets/font/Lato-BoldItalic.ttf') format('truetype'); 
+    font-weight: bold;
+    font-style: italic;
+    }
+    
+
+body { 		
+font-family: Lato;
+scroll-behavior: smooth;
+text-align:center;	
+}
+
+span {font-family: Lato;}
+.it  {font-style: italic;}
+.bo  {font-weight: bold;}
+
+* {
+box-sizing: border-box;
+}
+
+img{
+max-width: 100%;
+}
+
+/* Wrapper für die gesammte Seite*/
+#wrapper{
+max-width: 1200px;
+margin: auto;
+}
+
+/* Style the header */
+#header {
+background-color: #f1f1f1;
+position: -webkit-sticky;
+position: sticky;
+margin-top:10px;
+margin-bottom: 10px;
+}
+/* leerzeile nach dem header*/
+#header:after {
+content: "";
+display: table;
+clear: both;
+}
+
+/*Header links*/
+#title{
+max-width:25%;
+float:left;
+background-color: #f1f1f1;
+}
+
+#titellogo{
+width:30px;
+}
+
+/*Header links (Menü)*/
+#menu {
+background-color: #f1f1f1;
+top:0px;
+max-width:75%;
+float:right;
+}
+
+/*Hauptmenü*/
+ul#navigation {
+margin: 0px;
+padding: 0px;
+list-style-type: none;
+}
+
+ul#navigation li {
+padding: 0px;
+margin: 0px;
+display: inline;
+}
+
+ul#navigation li a:link {
+border: 1px solid #000;
+background-color: #CCCCCC;
+padding: 2px 5px 2px 5px;
+font-size: 12px;
+color: #000;
+text-decoration: none;
+}
+
+ul#navigation li a:hover {
+border: 1px solid #000;
+background-color: #333333;
+padding: 2px 5px 2px 5px;
+color: #fff;
+}
+
+/*Content wrapper*/
+.content{
+padding-top:75px;
+}
+
+/* Create three unequal columns that floats next to each other */
+.column {
+float: left;
+padding: 10px;
+}
+
+/* Left and right column */
+.column.side {
+width: 25%;
+}
+
+/* Middle column */
+.column.middle {
+width: 50%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+content: "";
+display: table;
+clear: both;
+}
+
+/* Footer*/
+#foot{
+background-color: #f1f1f1;
+}
+
+.foot {
+background-color: #f1f1f1;
+float: left;
+padding: 10px;
+}
+
+.foot.lside{
+text-align: left;
+width: 33%;
+}
+
+.foot.middle{
+text-align: center;
+width: 33%;
+}
+
+.foot.rside{
+text-align: right;
+width: 33%;
+}
+
+/*Footermenü*/
+ul#footmenu{
+list-style-type: none;
+}
+
+ul#footmenu li{
+}
+
+ul#footmenu li a:link{
+text:black;
+}
+
+ul#footmenu li a:hover{
+
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media (max-width: 600px) {
+.column.side, .column.middle {
+width: 100%;
+}
+}