CI Sammlung

Die ist eine Sammlung von Logos und Code Vorlagen:

Logos

https://assets.ziegenhagel.com/{{url}}

{{info.replace("/",", ")}}

Fonts

<style> @font-face { font-family: "Futura"; src: url("https://assets.ziegenhagel.com/fonts/futura_normal.ttf");font-weight:normal; } @font-face { font-family: "Futura"; src: url("https://assets.ziegenhagel.com/fonts/futura_bold.ttf"); font-weight:bold;} * { font-family: "Futura"; } </style>

Boilerplate Header

HTML <header id="nav-top" class="is-dark mobile-not-collapsed"><div class="container"><a href="https://ziegenhagel.com/" class="nolink"><div class="nav-left"><img id="logo-anim" alt="Ziegenhagel Media Logo" src="https://assets.ziegenhagel.com/img/logo.png"> <div class="nav-logo-text">Ziegenhagel <span style="color: rgb(119, 119, 119);">Media</span></div></div></a> <div class="nav-hamburger"><div id="nav-icon2" class="closed"><span></span><span></span><span></span><span></span><span></span><span></span></div></div> <div class="nav-right"><a target="_blank" href="https://ziegenhagel.com/support"> Support</a></div></div></header> CSS <style>#nav-top.is-dark { background: rgba(0, 0, 0, .8); box-shadow: none; } #logo-anim { height: 3rem; margin: .4em 0; } #nav-top { box-shadow: 0 0 30px -15px rgba(0, 0, 0, .3); font-size: 1.3rem; z-index: 101; top: 0; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); left: 0; right: 0; transition: .4s; } .nav-left #logo-anim { width: 55px; height: 55px; transition: .4s; border-radius: 50%; } #nav-top.is-dark .nav-logo-text, #nav-top.is-dark a.active, #nav-top.is-dark a:not(.nolink):active, #nav-top.is-dark a:not(.nolink):hover { color: #fff; } .nav-logo-text { margin-left: 1rem; } #nav-top.is-dark .nav-logo-text, #nav-top.is-dark a.active, #nav-top.is-dark a:not(.nolink):active, #nav-top.is-dark a:not(.nolink):hover { color: #fff; } #nav-top.is-dark .nav-logo-text, #nav-top.is-dark a.active, #nav-top.is-dark a:not(.nolink):active, #nav-top.is-dark a:not(.nolink):hover { color: #fff; } logo-text, #nav-top.is-dark a.active, #nav-top.is-dark a:not(.nolink):active, #nav-top.is-dark a:not(.nolink):hover { color: #fff; } #nav-top a.active, #nav-top a:not(.nolink):active, #nav-top a:not(.nolink):hover, .text ol p { color: #777; transition: background-color .1s, color .1s; text-decoration: none; } #nav-top.is-dark a:not(.nolink) { color: #ddd; } #nav-top a:not(.nolink) { padding: .4em 1em; transition: background-color .4s, color .4s; color: #333; } #nav-top a.active, #nav-top a:not(.nolink):active, #nav-top a:not(.nolink):hover, .text ol p { color: #777; transition: background-color .1s, color .1s; text-decoration: none; } #nav-top a:not(.nolink):hover, .text ol p { color: #777; transition: background-color .1s, color .1s; text-decoration: none; } #nav-top a { text-decoration: none; } #nav-top a:not(.nolink) { padding: .4em 1em; transition: background-color .4s, color .4s; color: #333; } #nav-top .nav-right { margin-right: 1em; margin-left: auto; display: flex; align-items: center; } .form-control, .badge, .btn { padding: .4em .8em; border-radius: 8px; margin-right: .2em; box-shadow: none; display: inline-block; transition: .0s; } .badge, .btn { cursor: pointer; } .btn.btn-info { background: #444; border-width: 2px; color: #25cff2; } .btn.btn-info:hover { background: #333; } .btn.btn-info:active { filter: brightness(95%) } #comment-section .btn { margin-top: .5em; margin-left: 0 } .btn.btn-primary { border: none; background: #00b0d3; } .btn.btn-primary-outline:hover { background: rgba(0, 0, 0, .06666666666666667); } .btn.btn-primary-outline { border: 2px solid #444; } :active, a:hover { outline-width: 0; } .nav-left { display: flex; } .nav-left { align-items: center; } .nav-left:hover #logo-anim { filter: invert(100%); transform: rotate(-180deg); } .nav-left #logo-anim { width: 55px; height: 55px; transition: .4s; border-radius: 50%; } #nav-top { position: fixed;top:0;} #nav-top .container {margin:auto;max-width:1200px;display: flex;} </style>

Quasar <q-header class="fixed-top" elevated> <q-toolbar> <a href="https://ziegenhagel.com"> <q-avatar> <img src="https://assets.ziegenhagel.com/img/logo.png"> </q-avatar> <q-toolbar-title>Ziegenhagel <span>Media</span></q-toolbar-title> </a> <q-tabs v-model="nav"> <q-tab name="support" label="Support" /> </q-tabs> </q-toolbar> </q-header> CSS .fixed-bottom, .fixed-top { position: fixed; bottom: 0; right:0; left:0; z-index: 99; } .fixed-top { top:0;bottom:auto; } .q-toolbar {margin: auto; display:flex; justify-content: space-between; max-width: 1200px;} .q-avatar { width: 55px; height: 55px; transition: .4s; border-radius: 50%; } .q-toolbar__title span { opacity:.5; } .q-tab,.q-btn {text-transform: none;} .q-btn { padding: .4em .8em; border-radius: 8px; margin: 0 .2em; display: inline-block; transition: background .1s; cursor: pointer; } .q-toolbar > a { display: flex; align-items: center; color:white;text-decoration: none;} .q-toolbar > a .q-avatar__content img{ transition:.3s; } .q-toolbar > a:hover .q-avatar__content img{ transform:rotate(-180deg); filter:invert(1); } .q-toolbar > a:hover .q-toolbar__title span { opacity:1 } .q-toolbar > a:hover .q-toolbar__title { opacity:.5 } .q-toolbar > a:hover {cursor: pointer;} .q-header .q-toolbar__title, .q-header .q-tabs .q-tab__label { font-size: 23px; color:#222; padding-top:12px;padding-bottom:12px; } .q-header .q-tabs .q-tab__label:hover { color:#777; } .q-header { background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .q-header .q-tab__indicator { background:#9b2; height:5px }