Skip to content
GitLab
Commit 6b94a08c authored by Anton's avatar Anton
Browse files

2021-03-16 fix3

parent ff6092b9
hungary-21
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 186 additions and 122 deletions
+186 -122
index.html
+ 12
- 6
View file @ 6b94a08c
......@@ -133,7 +133,8 @@
<source src="/uploads/workshops/projects/hungary21/video/region_talking_head_01.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Обучайтесь и&nbsp;зарабатывайте баллы: в&nbsp;каждом видео я&nbsp;лично расскажу и&nbsp;покажу вам, чем Венгрия очаровывает туристов. Нас ждет большое онлайн-путешествие, и&nbsp;его первая остановка&nbsp;&mdash; славная столица Венгрии Будапешт.</div>
<div class="balloon__text"><b>Обучайтесь и&nbsp;зарабатывайте баллы</b>
в&nbsp;каждом видео я&nbsp;лично расскажу и&nbsp;покажу вам, чем Венгрия очаровывает туристов. Нас ждет большое онлайн-путешествие, и&nbsp;его первая остановка&nbsp;&mdash; славная столица Венгрии Будапешт.</div>
</div>
</div>
<div class="map__point-1">
......@@ -151,7 +152,8 @@
<source src="/uploads/workshops/projects/hungary21/video/region_talking_head_02.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Пристегните ремни, следующая остановка Дебрецен! Город, известный не&nbsp;только санаториями, но&nbsp;и&nbsp;как идеальное направление выходного дня. Здесь дешево, вкусно, атмосферно и&nbsp;любопытно!</div>
<div class="balloon__text"><b>Пристегните ремни, следующая остановка Дебрецен!</b>
Город, известный не&nbsp;только санаториями, но&nbsp;и&nbsp;как идеальное направление выходного дня. Здесь дешево, вкусно, атмосферно и&nbsp;любопытно!</div>
</div>
</div>
<div class="map__point-2">
......@@ -502,7 +504,8 @@
<source src="/uploads/workshops/projects/hungary21/video/schedule_talking_head.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Также я&nbsp;подготовил для вас вебинары с&nbsp;представителями турбизнеса Венгрии. Каждый месяц вас ждут эфиры, где вы&nbsp;сможете пообщаться с&nbsp;экспертами онлайн, задать им&nbsp;любые вопросы, узнать новости рынка и&nbsp;обменяться контактами с&nbsp;партнерами по&nbsp;работе с&nbsp;направлением.</div>
<div class="balloon__text"><b>Также я&nbsp;подготовил для вас вебинары с&nbsp;представителями турбизнеса Венгрии.</b>
Каждый месяц вас ждут эфиры, где вы&nbsp;сможете пообщаться с&nbsp;экспертами онлайн, задать им&nbsp;любые вопросы, узнать новости рынка и&nbsp;обменяться контактами с&nbsp;партнерами по&nbsp;работе с&nbsp;направлением.</div>
<div class="balloon__point">
<div class="balloon__point-num">1200</div>
<div class="balloon__point-hint">баллов<br> Loyalty</div>
......@@ -523,7 +526,8 @@
<source src="/uploads/workshops/projects/hungary21/video/helpful_talking_head.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Обучающие разделы&nbsp;&mdash; это та&nbsp;часть нашего приключения, которая навсегда останется вашей карманной шпаргалкой по&nbsp;Венгрии. Здесь собрано все: от&nbsp;базовой информации о&nbsp;стране до&nbsp;отельной базы и&nbsp;СПО от&nbsp;проверенных туроператоров. Изучайте, сохраняйте и&nbsp;пользуйтесь, когда туристы придут к&nbsp;вам с&nbsp;запросом на&nbsp;путешествие!</div>
<div class="balloon__text"><b>Обучающие разделы&nbsp;&mdash; это та&nbsp;часть нашего приключения, которая навсегда останется вашей карманной шпаргалкой по&nbsp;Венгрии.</b>
Здесь собрано все: от&nbsp;базовой информации о&nbsp;стране до&nbsp;отельной базы и&nbsp;СПО от&nbsp;проверенных туроператоров. Изучайте, сохраняйте и&nbsp;пользуйтесь, когда туристы придут к&nbsp;вам с&nbsp;запросом на&nbsp;путешествие!</div>
</div>
</div>
<a href="{{ workshop_path(workshop.id, 'Hungary') }}" class="helpful__section-1">
......@@ -566,8 +570,10 @@
<source src="/uploads/workshops/projects/hungary21/video/prizes_talking_head.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Чтобы выиграть призы первой главы нашего путешествия, посмотрите четыре видео о&nbsp;регионах Венгрии, присоединяйтесь онлайн к&nbsp;вебинарам с&nbsp;партнерами и&nbsp;наберите
<span class="text_green">1&nbsp;600 баллов Loyalty!</span></div>
<div class="balloon__text">
<b>Как выиграть призы первой главы нашего путешествия?</b>
<span>Посмотрите четыре видео о&nbsp;регионах Венгрии, присоединяйтесь онлайн к&nbsp;вебинарам с&nbsp;партнерами и&nbsp;наберите <span class="text_green">1&nbsp;600 баллов Loyalty!</span></span>
</div>
</div>
</div>
<div class="prizes-wrapper">
......
index.html.twig
+ 27
- 15
View file @ 6b94a08c
......@@ -113,7 +113,7 @@
<section id="map">
<div class="map__region-1">
<figure class="map__region-1-bg">
<img class="btn btn_play" src="/uploads/workshops/projects/hungary21/img/btn_play.svg" data-role="show-popup" data-target="#player" data-vid="nsMcJZlw2VI" alt="">
<div class="btn btn_play" data-role="show-popup" data-target="#player-1"></div>
<img class="map__region-img" src="/uploads/workshops/projects/hungary21/img/map_region_01.png" alt="">
</figure>
<div class="talking-head">
......@@ -121,7 +121,8 @@
<source src="/uploads/workshops/projects/hungary21/video/region_talking_head_01.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Обучайтесь и&nbsp;зарабатывайте баллы: в&nbsp;каждом видео я&nbsp;лично расскажу и&nbsp;покажу вам, чем Венгрия очаровывает туристов. Нас ждет большое онлайн-путешествие, и&nbsp;его первая остановка&nbsp;&mdash; славная столица Венгрии Будапешт.</div>
<div class="balloon__text"><b>Обучайтесь и&nbsp;зарабатывайте баллы</b>
в&nbsp;каждом видео я&nbsp;лично расскажу и&nbsp;покажу вам, чем Венгрия очаровывает туристов. Нас ждет большое онлайн-путешествие, и&nbsp;его первая остановка&nbsp;&mdash; славная столица Венгрии Будапешт.</div>
</div>
</div>
<div class="map__point-1">
......@@ -131,7 +132,7 @@
</div>
<div class="map__region-2">
<figure class="map__region-2-bg">
<img class="btn btn_play" src="/uploads/workshops/projects/hungary21/img/btn_play.svg" data-role="show-popup" data-target="#player" data-vid="Kr24yyrIqus" alt="">
<div class="btn btn_play" data-role="show-popup" data-target="#player-2"></div>
<img class="map__region-img" src="/uploads/workshops/projects/hungary21/img/map_region_02.png" alt="">
</figure>
<div class="talking-head">
......@@ -139,7 +140,8 @@
<source src="/uploads/workshops/projects/hungary21/video/region_talking_head_02.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Пристегните ремни, следующая остановка Дебрецен! Город, известный не&nbsp;только санаториями, но&nbsp;и&nbsp;как идеальное направление выходного дня. Здесь дешево, вкусно, атмосферно и&nbsp;любопытно!</div>
<div class="balloon__text"><b>Пристегните ремни, следующая остановка Дебрецен!</b>
Город, известный не&nbsp;только санаториями, но&nbsp;и&nbsp;как идеальное направление выходного дня. Здесь дешево, вкусно, атмосферно и&nbsp;любопытно!</div>
</div>
</div>
<div class="map__point-2">
......@@ -171,10 +173,10 @@
<div class="schedule">
<h2 class="text_dark-blue tac">Знакомьтесь с турбизнесом Венгрии</h2>
<p class="tac">Присоединяйтесь к&nbsp;эфирам онлайн и&nbsp;получайте <b class="text_dark-blue">+300 баллов Loyalty</b> за&nbsp;каждый</p>
{% if currentTimetable is not empty %}
<div id="scheduleWizard" data-verify-profile-url="{{ path('verify_workshop_user_profile') }}" data-get-profile-form-url="{{ path('get_workshop_profile_form') }}" data-event-registration-url="subscribe_event_user" data-event-action-subscribe="{{ constant('Smirik\\WebsiteBundle\\Entity\\Webinar::ACTION_SUBSCRIBE') }}" data-event-action-revoke="{{ constant('Smirik\\WebsiteBundle\\Entity\\Webinar::ACTION_REVOKE') }}" data-event-action-watch="{{ constant('Smirik\\WebsiteBundle\\Entity\\Webinar::ACTION_WATCH') }}" data-event-action-subscribe-text="{{ subscribeText }}" data-event-action-revoke-text="{{ revokeText }}" data-event-action-watch-text="{{ watchWebinarText }}"></div>
{% endif %}
<div class="schedule-wrapper">
{% if currentTimetable is not empty %}
<div id="scheduleWizard" data-verify-profile-url="{{ path('verify_workshop_user_profile') }}" data-get-profile-form-url="{{ path('get_workshop_profile_form') }}" data-event-registration-url="subscribe_event_user" data-event-action-subscribe="{{ constant('Smirik\\WebsiteBundle\\Entity\\Webinar::ACTION_SUBSCRIBE') }}" data-event-action-revoke="{{ constant('Smirik\\WebsiteBundle\\Entity\\Webinar::ACTION_REVOKE') }}" data-event-action-watch="{{ constant('Smirik\\WebsiteBundle\\Entity\\Webinar::ACTION_WATCH') }}" data-event-action-subscribe-text="{{ subscribeText }}" data-event-action-revoke-text="{{ revokeText }}" data-event-action-watch-text="{{ watchWebinarText }}"></div>
{% endif %}
{% for day in currentTimetable %}
<div id="date_{{ day.date|date('jn') }}" class="schedule__day">
{% for item in day.items %}
......@@ -183,7 +185,7 @@
<div class="schedule__event-label">
<img src="/uploads/workshops/projects/hungary21/img/schedule_date_bg.svg" alt="">
<time datetime="{{ w.date|date("Y-m-d") }}T{{ w.date|date("H:i:s") }}+04:00">
<span class="schedule__event-date">{{ day.date|date("j.n") }}</span>
<span class="schedule__event-date">{{ day.date|date("j.m") }}</span>
<span class="schedule__event-time">в {{ w.date|date("G.i") }} (мск)</span>
</time>
</div>
......@@ -292,7 +294,8 @@
<source src="/uploads/workshops/projects/hungary21/video/schedule_talking_head.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Также я&nbsp;подготовил для вас вебинары с&nbsp;представителями турбизнеса Венгрии. Каждый месяц вас ждут эфиры, где вы&nbsp;сможете пообщаться с&nbsp;экспертами онлайн, задать им&nbsp;любые вопросы, узнать новости рынка и&nbsp;обменяться контактами с&nbsp;партнерами по&nbsp;работе с&nbsp;направлением.</div>
<div class="balloon__text"><b>Также я&nbsp;подготовил для вас вебинары с&nbsp;представителями турбизнеса Венгрии.</b>
Каждый месяц вас ждут эфиры, где вы&nbsp;сможете пообщаться с&nbsp;экспертами онлайн, задать им&nbsp;любые вопросы, узнать новости рынка и&nbsp;обменяться контактами с&nbsp;партнерами по&nbsp;работе с&nbsp;направлением.</div>
<div class="balloon__point">
<div class="balloon__point-num">1200</div>
<div class="balloon__point-hint">баллов<br> Loyalty</div>
......@@ -314,7 +317,8 @@
<source src="/uploads/workshops/projects/hungary21/video/helpful_talking_head.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Обучающие разделы&nbsp;&mdash; это та&nbsp;часть нашего приключения, которая навсегда останется вашей карманной шпаргалкой по&nbsp;Венгрии. Здесь собрано все: от&nbsp;базовой информации о&nbsp;стране до&nbsp;отельной базы и&nbsp;СПО от&nbsp;проверенных туроператоров. Изучайте, сохраняйте и&nbsp;пользуйтесь, когда туристы придут к&nbsp;вам с&nbsp;запросом на&nbsp;путешествие!</div>
<div class="balloon__text"><b>Обучающие разделы&nbsp;&mdash; это та&nbsp;часть нашего приключения, которая навсегда останется вашей карманной шпаргалкой по&nbsp;Венгрии.</b>
Здесь собрано все: от&nbsp;базовой информации о&nbsp;стране до&nbsp;отельной базы и&nbsp;СПО от&nbsp;проверенных туроператоров. Изучайте, сохраняйте и&nbsp;пользуйтесь, когда туристы придут к&nbsp;вам с&nbsp;запросом на&nbsp;путешествие!</div>
</div>
</div>
<a href="{{ workshop_path(workshop.id, 'Hungary') }}" class="helpful__section-1">
......@@ -357,8 +361,10 @@
<source src="/uploads/workshops/projects/hungary21/video/prizes_talking_head.mp4">
</video>
<div class="balloon">
<div class="balloon__text">Чтобы выиграть призы первой главы нашего путешествия, посмотрите четыре видео о&nbsp;регионах Венгрии, присоединяйтесь онлайн к&nbsp;вебинарам с&nbsp;партнерами и&nbsp;наберите
<span class="text_green">1&nbsp;600 баллов Loyalty!</span></div>
<div class="balloon__text">
<b>Как выиграть призы первой главы нашего путешествия?</b>
<span>Посмотрите четыре видео о&nbsp;регионах Венгрии, присоединяйтесь онлайн к&nbsp;вебинарам с&nbsp;партнерами и&nbsp;наберите <span class="text_green">1&nbsp;600 баллов Loyalty!</span></span>
</div>
</div>
</div>
<div class="prizes-wrapper">
......@@ -391,7 +397,7 @@
<p class="text_white tac">Найдите себя в&nbsp;рейтинге проекта и&nbsp;узнайте, насколько вы&nbsp;близки к&nbsp;выигрышу призов!</p>
<div class="user-rating__hint tar">Ваш результат:</div>
{{ include('@SmirikWebsite/Workshop/user_rating_with_avatar.html.twig') }}
{{ include('@SmirikWebsite/Workshop/rating_wide.html.twig') }}
{{ include('@SmirikWebsite/Workshop/rating_wide.html.twig', {'sourceId': workshop.id}) }}
</div>
</section>
{% endif %}
......@@ -428,7 +434,12 @@
</footer>
<div id="modal" style="display:none">
<div id="popup">
<div class="popup" id="player" style="display:none"></div>
<div class="popup" id="player-1" style="display:none">
{{ include('@SmirikWebsite/Workshop/video.html.twig', {'workshopId': workshop.id, 'videoIds': '27'}) }}
</div>
<div class="popup" id="player-2" style="display:none">
{{ include('@SmirikWebsite/Workshop/video.html.twig', {'workshopId': workshop.id, 'videoIds': '28'}) }}
</div>
<div class="popup" id="prize-rules" style="display:none">
<div class="popup__body">
<h2 class="text_dark-blue tac">ПРАВИЛА РОЗЫГРЫША ПРИЗОВ НА СПЕЦПРОЕКТЕ «ВЕНГРИЯ: ГЛАВА I»</h2>
......@@ -488,4 +499,5 @@
</a>
</div>
</div>
{{ include('@SmirikWebsite/Workshop/registration_form.html.twig') }}
\ No newline at end of file
{{ include('@SmirikWebsite/Workshop/registration_form.html.twig') }}
<script type="text/javascript" src="{{ asset('build/workshop/video/app.js') }}"></script>
\ No newline at end of file
source/base.js
+ 18
- 29
View file @ 6b94a08c
......@@ -31,18 +31,7 @@ $(function() {
.on('click', function() {
const $t = $(this),
trg = $t.data('target'),
vid = $t.data('vid'),
$trg = $(trg);
if (trg === '#player') {
$trg.append(
$('<iframe/>').attr({
src: 'https://www.youtube.com/embed/' + vid,
frameborder: 0,
allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
allowfullscreen: ''
})
);
}
$trg.show();
$('html,body').css('overflow', 'hidden');
$modal.fadeIn(300);
......@@ -88,24 +77,24 @@ $(function() {
});
}
const $folder = $('[data-role="folder"]');
$('[data-role="folder-body"]').hide();
$folder
.on('click', '[data-role="folder-btn"]', function(e) {
const $t = $(this),
$p = $t.parents('[data-role="folder"]').eq(0),
$b = $('[data-role="folder-body"]', $p);
e.stopPropagation();
$('.slick-initialized', $b).slick('refresh');
if ($t.hasClass('open')) {
$('.open', $p).removeClass('open');
$b.slideUp(300);
} else {
$t.addClass('open');
$b.eq(0).slideDown(300);
}
});
// const $folder = $('[data-role="folder"]');
// $('[data-role="folder-body"]').hide();
// $folder
// .on('click', '[data-role="folder-btn"]', function(e) {
// const $t = $(this),
// $p = $t.parents('[data-role="folder"]').eq(0),
// $b = $('[data-role="folder-body"]', $p);
//
// e.stopPropagation();
// $('.slick-initialized', $b).slick('refresh');
// if ($t.hasClass('open')) {
// $('.open', $p).removeClass('open');
// $b.slideUp(300);
// } else {
// $t.addClass('open');
// $b.eq(0).slideDown(300);
// }
// });
console.log('Document ready');
});
\ No newline at end of file
source/buttons.sass
+ 3
- 3
View file @ 6b94a08c
......@@ -92,11 +92,11 @@
&:hover
background: #ee7b83
&_play
width: 22.5vw
height: 22.5vw
padding: 9.38vw
width: 3.74vw
height: 3.74vw
object-position: center
object-fit: contain
background: url(../img/btn_play.svg) center / 3.74vw 3.74vw no-repeat
&_close
width: 65px
height: 65px
......
source/helpful.sass
+ 11
- 2
View file @ 6b94a08c
......@@ -101,11 +101,20 @@
top: 26.96vw
padding: .86vw .78vw .78vw .86vw
.balloon
width: 27.58vw
width: 31.72vw
left: -6.12vw
bottom: 18.36vw
padding: 2.81vw 2.11vw 2.81vw 2.97vw
font-size: .94vw
line-height: 1.25
&__text
display: grid
grid-gap: 1.09vw
font-size: .78vw
line-height: 1.6
b
font-size: 1.09vw
line-height: 1.22
color: $dark-blue
&:after
left: 50%
\ No newline at end of file
left: 14vw
\ No newline at end of file
source/map.sass
+ 19
- 5
View file @ 6b94a08c
......@@ -12,8 +12,22 @@
height: 9.77vw
position: absolute
padding: .55vw .55vw .47vw .47vw
.balloon
&__text
display: grid
grid-gap: 1.09vw
font-size: .78vw
line-height: 1.6
b
font-size: 1.09vw
line-height: 1.22
color: $dark-blue
.btn_play
width: 22.5vw
height: 22.5vw
position: absolute
padding: 9.38vw
border-radius: 50%
z-index: 2
&:hover + .map__region-img
transform: scale(1.2)
......@@ -43,7 +57,7 @@
left: 0
top: 12.97vw
.balloon
width: 19.3vw
width: 21.88vw
padding: 1.88vw 2.03vw 2.19vw 2.58vw
left: 0
bottom: 12.11vw
......@@ -67,14 +81,14 @@
left: 24.84vw
top: -2.89vw
.balloon
width: 19.3vw
width: 27.34vw
padding: 1.88vw 2.03vw 2.19vw 2.58vw
right: 0
bottom: 11.72vw
font-size: .94vw
line-height: 1.25
&:after
left: 14vw
left: 22vw
&__point
width: 4.53vw
height: 6.49vw
......@@ -97,8 +111,8 @@
top: 1.72vw
&-2
@extend .map__point
left: 6.33vw
top: -6.64vw
left: .5vw
top: -5vw
&__train
width: 73.05vw
position: absolute
......
source/popup.sass
+ 16
- 5
View file @ 6b94a08c
......@@ -14,14 +14,16 @@
z-index: 9999
#popup
overflow: hidden
width: 900px
max-width: 100%
height: 600px
max-height: 100%
position: relative
background: #fff
border-radius: 14px
.popup
width: 900px
height: 500px
max-width: 100%
max-height: 100%
position: relative
font-size: .94vw
line-height: 1.33
......@@ -47,12 +49,21 @@
li
margin: 1.25vw 0
iframe
width: 900px
max-width: 100%
height: 600px
max-height: 100%
.video
&-wrapper
width: 100%
height: 100%
&-poster
display: flex
justify-content: center
width: 100%
height: 100%
align-items: center
background: center / cover no-repeat
#prize-rules
overflow-x: hidden
overflow-y: auto
max-height: 100%
height: 600px !important
padding: 1.88vw 4.68vw 2.19vw
source/prizes.sass
+ 11
- 12
View file @ 6b94a08c
......@@ -11,16 +11,6 @@
line-height: 1.5
text-align: center
perspective: 600px
//&__front
// pointer-events: none
// grid-column-start: 1
// grid-row-start: 1
// max-width: 100%
// max-height: 100%
// object-position: center
// object-fit: contain
// backface-visibility: hidden
// transition: .6s
&__front
pointer-events: none
grid-column-start: 1
......@@ -76,13 +66,22 @@
.balloon
width: 36.64vw
left: 12.81vw
top: .7vw
top: 0
padding: 1.72vw 1.26vw 1.72vw 1.88vw
font-size: .94vw
line-height: 1.5
&__text
display: grid
grid-gap: 1.09vw
font-size: .78vw
line-height: 1.6
b
font-size: 1.09vw
line-height: 1.22
color: $green-1
&:after
width: 2.81vw
height: 1.72vw
left: -1.9vw
bottom: 3vw
bottom: 4vw
transform: rotate(90deg)
\ No newline at end of file
source/schedule.sass
+ 69
- 45
View file @ 6b94a08c
......@@ -14,17 +14,7 @@
z-index: 1
&-wrapper
margin-top: 17.58vw
&__event
display: grid
grid-template-columns: 11.17vw 1fr 13.05vw
grid-gap: .55vw 2.34vw
margin-top: 1.17vw
padding: .78vw 2.34vw 2.34vw
font-size: .94vw
line-height: 1.22
background: #fff
border-radius: 1.56vw
box-shadow: 0 4px 10px rgba(0, 0, 0, .25)
&__day
&:nth-child(1)
margin-left: 14.14vw
&:nth-child(2)
......@@ -36,6 +26,28 @@
&:nth-child(4)
margin-left: 7.1vw
margin-right: 7.02vw
&__event
display: grid
grid-template-columns: 11.17vw 1fr 13.05vw
grid-gap: 1.17vw 2.34vw
margin-top: 1.17vw
padding: .78vw 2.34vw 2.34vw
font-size: .94vw
line-height: 1.22
background: #fff
border-radius: 1.56vw
box-shadow: 0 4px 10px rgba(0, 0, 0, .25)
//&:nth-child(1)
// margin-left: 14.14vw
//&:nth-child(2)
// margin-left: 11.8vw
// margin-right: 2.34vw
//&:nth-child(3)
// margin-left: 9.45vw
// margin-right: 4.68vw
//&:nth-child(4)
// margin-left: 7.1vw
// margin-right: 7.02vw
&-label
display: grid
justify-items: center
......@@ -171,8 +183,6 @@
display: grid
grid-template-columns: 4.14vw 1fr
grid-gap: .78vw 1.17vw
font-size: .94vw
line-height: 1
text-decoration: none
color: inherit
&-avatar
......@@ -189,8 +199,13 @@
object-position: center
object-fit: cover
border-radius: 50%
&-name
font-size: .94vw
line-height: 1
&-position
align-self: start
font-size: .78vw
line-height: 1.5
color: $grey-3
&-prev
width: 5.16vw
......@@ -257,36 +272,45 @@
position: absolute
right: 0
bottom: -18.75vw
.talking-head
width: 11.8vw
height: 11.8vw
position: absolute
left: 1.09vw
top: 22.03vw
padding: .7vw .7vw .55vw .55vw
.balloon
.talking-head
width: 11.8vw
height: 11.8vw
position: absolute
left: 1.09vw
top: 22.03vw
padding: .7vw .7vw .55vw .55vw
.balloon
display: grid
grid-template-columns: 1fr 4.77vw
grid-gap: .78vw
width: 49.45vw
padding: 1.88vw 3.13vw 1.56vw 4vw
bottom: 14vw
font-size: .94vw
line-height: 1.5
&__text
display: grid
grid-template-columns: 1fr 4.77vw
grid-gap: .78vw
width: 49.45vw
padding: 1.88vw 3.13vw 1.56vw 4vw
bottom: 14vw
font-size: .94vw
line-height: 1.5
&:after
left: 5.5vw
&__point
width: 4.77vw
height: 6.8vw
padding: .2vw 0
font-size: .55vw
font-weight: bold
line-height: 1.25
text-align: center
background: url(../img/balloon_point.svg) center bottom / contain no-repeat
color: #fff
&-num
margin: 1.1vw 0
font-family: 'PlayfairDisplay', Arial, sans-serif
font-size: 1.25vw
font-weight: 900
grid-gap: 1.09vw
font-size: .78vw
line-height: 1.6
b
font-size: 1.09vw
line-height: 1.22
color: $dark-blue
&:after
left: 5.5vw
&__point
width: 4.77vw
height: 6.8vw
padding: .2vw 0
font-size: .55vw
font-weight: bold
line-height: 1.25
text-align: center
background: url(../img/balloon_point.svg) center bottom / contain no-repeat
color: #fff
&-num
margin: 1.1vw 0
font-family: 'PlayfairDisplay', Arial, sans-serif
font-size: 1.25vw
font-weight: 900
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment