vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

topbar summersale added

pull/1340/head
Tuğçe Küçükoğlu 2021-06-11 10:14:03 +03:00
parent a9484ff654
commit 572a9c39c1
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -3,10 +3,11 @@
<div class="layout-news" v-if="newsActive"> <div class="layout-news" v-if="newsActive">
<div class="layout-news-container"> <div class="layout-news-container">
<a href="https://www.primefaces.org/store" target="_blank"> <a href="https://www.primefaces.org/store" target="_blank">
<img class="layouts-news-mockup-image" src="./assets/images/topbar-freya-mockup.png"> <img class="layouts-news-mockup-image" src="./assets/images/topbar-summersale.png">
</a> </a>
<a href="https://www.primefaces.org/store" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button"> <a href="https://www.primefaces.org/store" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
LEARN MORE LEARN MORE
<i class="pi pi-angle-right"></i>
</a> </a>
<a tabindex="0" class="layout-news-close" @click="hideNews"> <a tabindex="0" class="layout-news-close" @click="hideNews">
<i class="pi pi-times"></i> <i class="pi pi-times"></i>

BIN
src/assets/images/topbar-summersale.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

16
src/assets/styles/app/_news.scss
View File

@ -4,7 +4,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 250px; margin-left: 250px;
background-image: url("./assets/images/topbar-freya-bg.png"); background-image: linear-gradient(90deg,#2a206c,#221b5c);
.layout-news-container { .layout-news-container {
width: 100%; width: 100%;
@ -16,16 +16,22 @@
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
a {
display: flex;
justify-content: center;
align-items: center;
}
img.layouts-news-mockup-image { img.layouts-news-mockup-image {
max-width: 500px; height: 50px;
} }
.layout-news-button { .layout-news-button {
border: 2px solid #ffffff; border: 1px solid #ffffff;
color: #ffffff; color: #ffffff;
font-size: 15px; font-size: 15px;
padding: 0.5em 1em; padding: 0.3em 0.3em 0.5em 1em;
font-weight: bolder; font-weight: 700;
border-radius: 3px; border-radius: 3px;
display: flex; display: flex;
justify-content: center; justify-content: center;