Feedback-Box (Warning)
CODE
×
HTML
<div class='feedback-warning'> <div class='feedback-warning-1'></div> <div class='feedback-warning-2' role="alert">Hier steht ein <strong>Warn-Hinweis</strong>. Die Hintergrundfarbe entspricht 10% vom Warn-Hinweis-Orange (#DD6600) - das ist der Hex-Wert: #FCEFE5</div> </div>
CSS
div.feedback-warning-2 { display:table-cell; vertical-align:middle; background-color: rgba(252,239,229,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-warning-1 { text-align:center; font-size: 65px; line-height: 74px; letter-spacing: 0.02rem; word-spacing: 0.04rem; background-color: var(--orange); 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiIHk9IjAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE3IDE3Ij4NCiAgPHN0eWxlPg0KICAgIC5zdDB7ZmlsbDojZGQ2NjAwfQ0KICAgIC5zdDF7ZmlsbDojZmZmfQ0KICA8L3N0eWxlPg0KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjg1IC04MzcpIj4NCiAgICA8Y2lyY2xlIGN4PSIyOTMuNSIgY3k9Ijg0NS41IiByPSI4LjUiIGNsYXNzPSJzdDAiLz4NCiAgICA8cGF0aCBkPSJNMjk0LjQ3NzAyMDMsODQ3LjI1Mjk5MDdoLTEuNzc5MDIyMmwtMC4xOTk5ODE3LTcuMTM4MDAwNWgyLjE3ODk4NTZMMjk0LjQ3NzAyMDMsODQ3LjI1Mjk5MDd6IiBjbGFzcz0ic3QxIi8+DQogICAgPGNpcmNsZSBjeD0iMjkzLjU2NjAwOTUiIGN5PSI4NTAuMDE5OTU4NSIgcj0iMS4wNjYiIGNsYXNzPSJzdDEiLz4NCiAgPC9nPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } @media screen and (max-width: 767px) { div.feedback-warning-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-warning-1 { background-size: 30px !important; width: 40px !important; } } div.feedback-warning-1 { background-size: 60px; background-position: center 20px; }
JS
Feedback-Box (Warning)
Erstellt: 12.06.2024 - 10:55 Uhr
Letzte Änderung: 12.06.2024 - 12:58 Uhr
×
Hier steht ein
Warn-Hinweis
. Die Hintergrundfarbe entspricht 10% vom Warn-Hinweis-Orange (#DD6600) - das ist der Hex-Wert: #FCEFE5