Skip to content

Commit 77f8708

Browse files
nicodevsnicodevs
authored
Update Vue School offer banner (#1380)
1 parent e560f30 commit 77f8708

File tree

4 files changed

+303
-114
lines changed

4 files changed

+303
-114
lines changed

‎docs/.vitepress/components/VueSchool/BannerTop.vue‎

Lines changed: 109 additions & 95 deletions
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,15 +31,15 @@
2931
</template>
3032

3133
<style>
32-
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');
34+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
3335
3436
#vs {
3537
align-items: center;
3638
background-color: #000c19;
3739
box-sizing: border-box;
3840
color: #fff;
39-
display: none;
40-
font-family: 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
41+
display: flex;
42+
font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
4143
justify-content: center;
4244
position: fixed;
4345
padding: 0 10px;
@@ -47,139 +49,151 @@
4749
z-index: 100;
4850
height: 5rem;
4951
line-height: 1;
50-
background-image: url(/images/vueschool/vs-fw-bg.svg);
52+
background-image: url(/images/vueschool/vs-fw-bg-small.svg);
5153
background-size: cover;
5254
background-repeat: no-repeat;
5355
}
56+
5457
#vs:hover {
5558
text-decoration: none;
5659
}
60+
5761
#vs .vs-logo {
5862
position: absolute;
5963
left: 20px;
6064
top: 20px;
6165
}
62-
#vs .vs-logo .logo-small {
63-
width: 30px;
64-
margin-left: -5px;
65-
margin-top: 5px;
66-
}
66+
6767
#vs .vs-logo .logo-big {
6868
display: none;
6969
}
70-
@media (min-width: 768px) {
71-
#vs .vs-logo .logo-small {
72-
width: auto;
73-
margin: 0;
74-
}
75-
}
76-
@media (min-width: 1024px) {
77-
#vs .vs-logo .logo-small {
78-
display: none;
79-
}
80-
#vs .vs-logo .logo-big {
81-
display: inline-block;
82-
}
83-
}
84-
@media (min-width: 680px) {
85-
#vs {
86-
height: 5rem;
87-
}
88-
}
89-
#vs:hover .vs-core .vs-button {
90-
background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
91-
border-color: #e61463;
92-
}
93-
@media (min-width: 680px) {
94-
#vs .vs-core {
95-
display: flex;
96-
align-items: center;
97-
}
70+
71+
#vs:hover .vs-core .vs-button-inside {
72+
background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%);
9873
}
74+
9975
#vs .vs-core .vs-slogan {
100-
font-family: Archivo;
10176
color: #fff;
10277
margin-left: 8px;
10378
text-align: center;
10479
}
105-
@media (min-width: 680px) {
106-
#vs .vs-core .vs-slogan {
107-
margin-left: 24px;
108-
}
80+
81+
#vs .vs-core {
82+
width: 190px;
83+
align-items: center;
84+
display: flex;
85+
justify-content: center;
10986
}
87+
11088
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
11189
font-size: 14px;
112-
color: #47b785;
113-
font-weight: bold;
114-
}
115-
@media (min-width: 680px) {
116-
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
117-
font-size: 18px;
118-
}
90+
color: #cdc5dc;
91+
margin-top: 8px;
11992
}
93+
12094
#vs .vs-core .vs-slogan .vs-slogan-title {
121-
margin-top: 6px;
12295
font-size: 16px;
96+
font-weight: 800;
12397
}
124-
@media (min-width: 680px) {
125-
#vs .vs-core .vs-slogan .vs-slogan-title {
126-
font-size: 18px;
127-
}
128-
}
98+
12999
#vs .vs-core .vs-slogan .vs-slogan-title strong {
130-
color: #48a0ff;
131-
font-weight: 400;
100+
color: #fdc722;
132101
}
102+
133103
#vs .vs-core .vs-button {
134-
color: #fff;
135-
padding: 7px 10px;
136-
font-weight: 600;
137-
white-space: nowrap;
104+
background: linear-gradient(0deg, #ffdf4c, #e29d0a);
105+
padding: 2px;
138106
margin-right: 18px;
139107
margin-left: 16px;
140-
font-family: 'Archivo', sans-serif;
141-
object-fit: contain;
142108
border-radius: 30px;
143-
border-style: solid;
144-
border-width: 2px;
145-
background-image: linear-gradient(255deg, #d457d0 98%, #ed81eb 2%), linear-gradient(to bottom, #b349b0, #db61d9);
146-
text-transform: uppercase;
147-
border-color: #B349B0;
148109
display: none;
149110
}
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+
150132
@media (min-width: 680px) {
133+
#vs {
134+
background-image: url(/images/vueschool/vs-fw-bg.svg);
135+
background-position: top right -110px;
136+
}
137+
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+
151151
#vs .vs-core .vs-button {
152152
display: inline-block;
153153
margin-right: 0;
154-
padding: 8px 24px;
155154
margin-left: 22px;
156155
}
157-
}
158-
@media (min-width: 1024px) {
159-
#vs .vs-core .vs-button {
160-
margin-left: 69px;
161-
}
162-
}
163-
.vs-tag {
164-
margin-left: 10px
165-
}
166-
@media (min-width: 1024px) {
167-
.vs-tag {
168-
margin-left: 30px
156+
157+
#vs .vs-core .vs-button-inside {
158+
padding: 8px 24px;
169159
}
170-
}
171-
#vs .vs-close {
172-
right: 6px;
173-
position: absolute;
174-
}
175-
@media (min-width: 680px) {
160+
176161
#vs .vs-close {
177162
padding: 10px;
178163
right: 20px;
179164
}
180165
}
181-
#vs .vs-close:hover {
182-
color: #56d8ff;
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+
}
183197
}
184198
185199
/************************************/

0 commit comments

Comments
 (0)