Improve and update website banner

Signed-off-by: Michael Opdenacker <michael.opdenacker@bootlin.com>
This commit is contained in:
Michael Opdenacker 2020-02-04 10:51:24 +01:00
parent 7eae101760
commit 3de325ca86
2 changed files with 16 additions and 24 deletions

View file

@ -1,16 +1,16 @@
.message-banner-desktop {
position: absolute;
padding: 10px;
padding: 5px;
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
font-size: 30px;
font-size: 14;
font-family: Arial;
font-weight: bold;
left: 10px;
bottom: 30px;
width: 150px;
height: 120px;
width: 215px;
height: 100px;
text-align: center;
border-radius: 20px;
background: rgba(255,255,255,1);
@ -23,27 +23,17 @@
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}
.message-banner-desktop p.title {
font-size: 30px;
font-size: 14px;
margin: 0;
margin-top: 5px;
margin-bottom: 8px;
}
.message-banner-desktop .subtitle {
width: 150px;
width: 210px;
padding: 0 10px;
background: #fe003e;
-webkit-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
-moz-box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
box-shadow: -2px 0px 15px 1px rgba(0,0,0,0.69);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
font-size: 15px;
font-size: 11px;
position: relative;
top: -10px;
z-index: 29;
color: #fff;
}
.message-banner-mobile {

View file

@ -1,13 +1,15 @@
<header class="header">
<div class="message-banner-mobile">
<p class="title">New training</p>
<p class="subtitle">Linux graphics course</p>
<a class="message-link" target="_blank" href="https://bootlin.com/blog/new-training-course-displaying-and-rendering-graphics-with-linux/"></a>
<p class="title">Training sessions</p>
<p class="subtitle">Kernel and Embedded Linux</p>
<a class="message-link" target="_blank" href="https://bootlin.com/training/sessions/"></a>
</div>
<div class="message-banner-desktop">
<p class="title">New training</p>
<div class="subtitle"><p>Linux graphics course</p></div>
<a class="message-link" target="_blank" href="https://bootlin.com/blog/new-training-course-displaying-and-rendering-graphics-with-linux/"></a>
<p class="title">Next training sessions</p>
<div class="subtitle">Linux Kernel: March 16-20</div>
<div class="subtitle">Embedded Linux: May 11-15</div>
<div class="subtitle">and on-site sessions</div>
<a class="message-link" target="_blank" href="https://bootlin.com/training/sessions/"></a>
</div>
<h1>
<object data="/images/bootlin-logo-white.svg" type="image/svg+xml">