Skip to content

Commit 87170e4

Browse files
nicodevsnicodevs
authoredApr 28, 2022
Update Vue School offer banner (#3741)
* docs(docs): Update Vue School offer banner * docs(docs): Add Vue School banner asset
·
v3.6.5v3.5.4
1 parent 5e8425e commit 87170e4

File tree

4 files changed

+368
-141
lines changed

4 files changed

+368
-141
lines changed
 

‎docs/.vuepress/public/images/vueschool/vs-fw-bg-small.svg

+183
Loading

‎docs/.vuepress/public/images/vueschool/vs-iso.svg

+5-8
Loading

‎docs/.vuepress/public/images/vueschool/vs-logo.svg

+6-11
Loading

‎docs/.vuepress/theme/components/VueSchool/BannerTop.vue

+174-122
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<a
33
id="vs"
4-
href="https://vueschool.io/free-weekend?friend=vuerouter"
4+
href="https://vueschool.io/sales/price-increase-22?friend=vuerouter"
55
target="_blank"
66
rel="noreferrer"
77
>
@@ -11,15 +11,17 @@
1111
</div>
1212
<div class="vs-core">
1313
<div class="vs-slogan">
14-
<div class="vs-slogan-subtitle">
15-
VUE 3 MASTERCLASS - FREE WEEKEND
16-
</div>
1714
<div class="vs-slogan-title">
18-
Register at <strong>vueschool.io/free-weekend</strong>
15+
Get up to <strong>40% off</strong> your Vue School Subscription
16+
</div>
17+
<div class="vs-slogan-subtitle">
18+
Time Limited Offer
1919
</div>
2020
</div>
2121
<div class="vs-button">
22-
Free Access
22+
<div class="vs-button-inside">
23+
GET OFFER
24+
</div>
2325
</div>
2426
</div>
2527
<div id="vs-close" class="vs-close" @click.stop.prevent="$emit('close')">
@@ -29,128 +31,178 @@
2931
</template>
3032

3133
<style lang="stylus">
32-
$topBannerHeight ?= 5rem
33-
$topBannerHeightMobile ?= 5rem
34-
$navbarHeight ?= 3.6rem
35-
$contentClass = '.theme-default-content'
34+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
35+
36+
#vs {
37+
align-items: center;
38+
background-color: #000c19;
39+
box-sizing: border-box;
40+
color: #fff;
41+
display: flex;
42+
font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
43+
justify-content: center;
44+
position: fixed;
45+
padding: 0 10px;
46+
left: 0;
47+
right: 0;
48+
top: 0;
49+
z-index: 100;
50+
height: 5rem;
51+
line-height: 1;
52+
background-image: url(/images/vueschool/vs-fw-bg-small.svg);
53+
background-size: cover;
54+
background-repeat: no-repeat;
55+
}
56+
57+
#vs:hover {
58+
text-decoration: none;
59+
}
60+
61+
#vs .vs-logo {
62+
position: absolute;
63+
left: 20px;
64+
top: 20px;
65+
}
66+
67+
#vs .vs-logo .logo-big {
68+
display: none;
69+
}
70+
71+
#vs:hover .vs-core .vs-button-inside {
72+
background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%);
73+
}
3674
37-
@import url('https://fonts.googleapis.com/css?family=Archivo:400,600')
38-
39-
// Banner
40-
#vs
41-
align-items: center
42-
background-color: #000c19
43-
box-sizing: border-box
44-
color: #fff
45-
display: none
46-
font-family 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif
47-
justify-content: center
48-
position: fixed
49-
padding: 0 10px
50-
left: 0
51-
right: 0
52-
top: 0
53-
z-index: 100
54-
line-height: 1
55-
height: $topBannerHeightMobile
56-
background-image: url(/images/vueschool/vs-fw-bg.svg)
57-
background-size: cover
58-
background-repeat: no-repeat
59-
@media (min-width: 680px)
60-
height: $topBannerHeight
61-
justify-content: center
62-
63-
&:hover
64-
.vs-core
65-
.vs-button
66-
background: linear-gradient(261deg, #e61463 100%, #db5248 3%)
67-
border-color: #e61463
68-
69-
.vs-logo {
70-
position: absolute
71-
left: 20px
72-
top: 20px
73-
74-
.logo-small {
75-
display: none
76-
@media (min-width: 680px) {
77-
display: inline-block
78-
}
79-
@media (min-width: 1024px) {
80-
display: none
81-
}
82-
}
83-
84-
.logo-big {
85-
display: none
86-
@media (min-width: 1024px) {
87-
display: inline-block
88-
}
89-
}
75+
#vs .vs-core .vs-slogan {
76+
color: #fff;
77+
margin-left: 8px;
78+
text-align: center;
79+
}
80+
81+
#vs .vs-core {
82+
width: 190px;
83+
align-items: center;
84+
display: flex;
85+
justify-content: center;
86+
}
87+
88+
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
89+
font-size: 14px;
90+
color: #cdc5dc;
91+
margin-top: 8px;
92+
}
93+
94+
#vs .vs-core .vs-slogan .vs-slogan-title {
95+
font-size: 16px;
96+
font-weight: 800;
97+
}
98+
99+
#vs .vs-core .vs-slogan .vs-slogan-title strong {
100+
color: #fdc722;
101+
}
102+
103+
#vs .vs-core .vs-button {
104+
background: linear-gradient(0deg, #ffdf4c, #e29d0a);
105+
padding: 2px;
106+
margin-right: 18px;
107+
margin-left: 16px;
108+
border-radius: 30px;
109+
display: none;
110+
}
111+
112+
#vs .vs-core .vs-button-inside {
113+
color: #000;
114+
padding: 7px 10px;
115+
font-weight: 800;
116+
font-size: 22px;
117+
white-space: nowrap;
118+
border-radius: 30px;
119+
background: linear-gradient(90deg, #FFC828, #E19C0E);
120+
text-transform: uppercase;
121+
}
122+
123+
#vs .vs-close {
124+
right: 6px;
125+
position: absolute;
126+
}
127+
128+
#vs .vs-close:hover {
129+
color: #56d8ff;
130+
}
131+
132+
@media (min-width: 680px) {
133+
#vs {
134+
background-image: url(/images/vueschool/vs-fw-bg.svg);
135+
background-position: top right -110px;
90136
}
91137
92-
.vs-core
93-
display: flex
94-
align-items: center
95-
96-
.vs-slogan
97-
font-family: Archivo
98-
color: #FFF
99-
margin-left: 8px
100-
text-align: center
101-
@media (min-width: 680px)
102-
margin-left: 24px
103-
.vs-slogan-subtitle
104-
font-size: 14px
105-
color: #47b785
106-
font-weight: bold
107-
@media (min-width: 680px)
108-
font-size: 19px
109-
.vs-slogan-title
110-
margin-top: 6px
111-
font-size: 16px
112-
font-weight: 400
113-
@media (min-width: 680px)
114-
font-size: 18px
115-
strong
116-
color: #48a0ff
117-
font-weight: 400
118-
119-
.vs-button
120-
color: #fff
121-
padding: 7px 10px
122-
font-weight: 600
123-
white-space: nowrap
124-
margin-right: 18px
125-
margin-left: 16px
126-
font-family: 'Archivo', sans-serif
127-
object-fit: contain
128-
border-radius: 30px
129-
border-style: solid
130-
border-width: 2px
131-
background-image: linear-gradient(255deg, #d457d0 98%, #ed81eb 2%), linear-gradient(to bottom, #b349b0, #db61d9)
132-
text-transform: uppercase
133-
border-color: #B349B0
134-
display: none
135-
@media (min-width: 680px)
136-
display: inline-block
137-
margin-right: 0
138-
padding: 8px 24px
139-
margin-left: 22px
140-
@media (min-width: 1024px)
141-
margin-left: 69px
142-
143-
.vs-close
144-
right: 6px
145-
position: absolute
146-
@media (min-width: 680px)
147-
padding: 10px
148-
right: 20px
149-
&:hover
150-
color: #56D8FF
138+
#vs .vs-core .vs-slogan {
139+
margin-left: 24px;
140+
width: auto;
141+
}
142+
143+
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
144+
font-size: 16px;
145+
}
146+
147+
#vs .vs-core .vs-slogan .vs-slogan-title {
148+
font-size: 18px;
149+
}
150+
151+
#vs .vs-core .vs-button {
152+
display: inline-block;
153+
margin-right: 0;
154+
margin-left: 22px;
155+
}
156+
157+
#vs .vs-core .vs-button-inside {
158+
padding: 8px 24px;
159+
}
160+
161+
#vs .vs-close {
162+
padding: 10px;
163+
right: 20px;
164+
}
165+
}
166+
167+
@media (min-width: 768px) {
168+
#vs .vs-logo .logo-small {
169+
display: none;
170+
}
171+
172+
#vs .vs-logo .logo-big {
173+
display: inline-block;
174+
}
175+
176+
#vs .vs-core {
177+
width: 430px;
178+
}
179+
}
180+
181+
@media (min-width: 1024px) {
182+
#vs {
183+
background-position: top right;
184+
}
185+
186+
#vs .vs-core .vs-slogan .vs-slogan-title {
187+
font-size: 24px;
188+
}
189+
190+
#vs .vs-core .vs-button {
191+
margin-left: 69px;
192+
}
193+
194+
#vs .vs-core {
195+
width: auto;
196+
}
197+
}
151198
152199
/************************************/
153200
201+
$topBannerHeight ?= 5rem
202+
$topBannerHeightMobile ?= 5rem
203+
$navbarHeight ?= 3.6rem
204+
$contentClass = '.theme-default-content'
205+
154206
// Show banner only if the container has class "has-top-banner"
155207
.main-container.has-top-banner
156208
#vs

0 commit comments

Comments
 (0)
Please sign in to comment.