Feedback-Box (Notice)
CODE
×
HTML
<div class='feedback-notice'> <div class='feedback-notice-1'></div> <div class='feedback-notice-2' role="note">Hier könnte ein hilfreicher Hinweis oder Tipp stehen.</div> <div class='close-icon' tabindex='0'></div> </div>
CSS
div.close-icon { background-image: url('../img/close-icon.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 24px; height: 24px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.feedback-notice-1 { text-align:center; font-size: 65px; line-height: 74px; letter-spacing: 0.02rem; word-spacing: 0.04rem; background-color: var(--blue); color: var(--white); padding-top: 6px; width: 85px; height: 85px; min-height: 85px; display:table-cell; vertical-align:top; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxNyAxNyI+DQogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OTggLTY4NCkiPg0KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4NyAtNDYpIj4NCiAgICAgIDxwYXRoIGQ9Ik04LjUsMEE4LjUsOC41LDAsMCwxLDE3LDguNWE4Ljc0Niw4Ljc0NiwwLDAsMS0xLjE0MSw0LjI1NkE4LjM3Nyw4LjM3NywwLDAsMSw4LjUsMTdhOC41LDguNSwwLDAsMSwwLTE3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTExIDczMCkiIGZpbGw9IiMxNzc1ZDMiLz4NCiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNS45OSA3MTguNTM4KSI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjI5MyAxNS42NjcpIj4NCiAgICAgICAgICA8cGF0aCBkPSJNLjI0LDE1LjRhLjg2Ljg2LDAsMCwxLC4zNTguMDc3TDguMDQsMTguOTA4YS44NjMuODYzLDAsMCwxLDAsMS41NjhMLjYsMjMuOTA5YS44NTUuODU1LDAsMCwxLS4zNjIuMDc5Ljg1OC44NTgsMCwwLDEtLjY3My0uMzIzQS44NTkuODU5LDAsMCwxLS41LDIyLjY3M0wuODQ4LDE5LjY5Mi0uNSwxNi43MUEuODYzLjg2MywwLDAsMSwuMjQsMTUuNFptNi43NDMsNC4zTC44MzQsMTYuODU0bDEuMTczLDIuNmEuNTc3LjU3NywwLDAsMSwwLC40NzVsLTEuMTczLDIuNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNjI2IC0xNS4zOTUpIiBmaWxsPSIjZmZmIi8+DQogICAgICAgIDwvZz4NCiAgICAgIDwvZz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } div.feedback-notice-2 { display:table-cell; vertical-align:middle; background-color: rgba(233,242,251,1); color: var(--black); padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; max-width: 800px; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 300; padding-right: 75px; } div.feedback-notice > div.close-icon { position: absolute; top: 24px; right: 24px; } div.close-icon:hover, div.close-icon:focus { -webkit-transform: scale(1.68); -ms-transform: scale(1.68); transform: scale(1.68); } @media screen and (max-width: 767px) { div.feedback-notice-1 { background-size: 30px !important; width: 40px !important; } div.feedback-notice-2 { padding-top: 18px; padding-bottom: 18px; padding-left: 20px; padding-right: 20px; max-width: 790px; font-size: 15px; line-height: 24px; padding-right: 60px; } div.feedback-notice > div.close-icon { top: 18px; right: 18px; } }
JS
Feedback-Box (Notice)
Erstellt: 12.06.2024 - 11:29 Uhr
Letzte Änderung: 12.06.2024 - 13:46 Uhr
×
Hier könnte ein hilfreicher Hinweis oder Tipp stehen.