Commit 5531db31 authored by Anton's avatar Anton
Browse files

+ map + prize

No related merge requests found
Showing with 646 additions and 16 deletions
+646 -16
$(function() {
function showPopup(selector, callback) {
const $popup = $(selector);
$('.popup', $modal).hide();
$popup.show();
$modal.fadeIn(300);
if (callback) callback();
}
function hidePopup() {
$modal.fadeOut(300, function() {
$('.popup', $modal).hide();
});
}
const $mSlider = $('.map__slider');
if ($mSlider) {
$mSlider.slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: false,
swipeToSlide: true,
prevArrow: '',
nextArrow: ''
});
}
const $modal = $('#modal');
$modal
.on('click', '[data-role="hide-popup"]', function() {
hidePopup();
return false;
})
.on('click', '#popup', function(e) {
e.stopPropagation();
})
.on('click', function() {
hidePopup();
return false;
});
const $showPopup = $('[data-role="show-popup"]');
$showPopup
.on('click', function() {
const selector = '#' + $(this).data('target');
showPopup(selector);
return false;
});
const $map = $('.map'),
mapItems = [
{
area: '<area shape="poly" coords="435.5,421.5 428.5,422.5 428.5,426.5 436.5,433.5 431.5,436.5 433.5,439.5 433.5,442.5 425.5,450.5 425.5,460.5 418.5,468.5 414.5,475.5 416.5,483.5 416.5,515.5 419.5,527.5 421.5,538.5 426.5,545.5 440.5,551.5 448.5,550.5 467.5,547.5 481.5,541.5 487.5,535.5 492.5,524.5 492.5,509.5 487.5,498.5 483.5,494.5 483.5,489.5 479.5,484.5 477.5,471.5 473.5,471.5 473.5,465.5 464.5,453.5 459.5,443.5 442.5,425.5 442.5,422.5" data-index="0">'
},
{
area: '<area shape="poly" coords="1093.395,140.509 1100.5,136.5 1103.5,137.5 1106.5,137.5 1107.5,127.5 1109.5,125.5 1115.5,125.5 1119.5,126.5 1123.5,123.5 1120.5,117.5 1121.5,116.5 1129.5,118.5 1135.5,113.5 1139.5,113.5 1144.5,119.5 1147.5,114.5 1152.5,114.5 1157.5,121.5 1159.5,122.5 1157.5,130.5 1154.5,135.5 1158.5,143.5 1162.5,142.5 1166.5,143.5 1171.5,138.5 1178.5,140.5 1181.5,138.5 1184.5,141.5 1181.5,145.5 1183.5,148.5 1184.5,154.5 1187.5,157.5 1184.5,163.5 1184.5,170.5 1181.5,174.5 1178.5,178.5 1182.5,181.5 1183.5,190.5 1177.5,199.5 1175.5,206.5 1182.5,208.5 1191.5,200.5 1198.5,194.5 1202.5,193.5 1203.5,188.5 1208.5,188.5 1213.5,182.5 1217.415,182.5 1227.5,189.5 1232.5,189.5 1232.5,193.5 1234.5,193.5 1241.5,186.5 1247.5,186.5 1247.5,181.5 1249.5,181.5 1250.5,177.5 1254.5,176.5 1252.5,173.5 1255.5,171.5 1266.5,171.5 1274.5,173.5 1278.5,172.5 1289.5,186.5 1297.5,193.5 1309.5,200.5 1309.5,209.5 1308.5,217.5 1309.491,229.39 1319.5,236.5 1320.5,241.5 1333.5,243.5 1332.5,248.5 1335.5,251.5 1340.5,251.5 1342.5,254.5 1341.5,262.5 1337.5,265.5 1341.5,266.5 1337.5,271.5 1342.5,277.5 1340.5,284.5 1340.5,292.5 1329.5,300.5 1325.5,304.5 1321.5,299.5 1312.5,299.5 1307.5,302.5 1290.5,303.5 1283.5,305.5 1275.5,303.5 1256.5,309.5 1251.5,313.5 1244.5,326.5 1239.5,331.5 1240.5,333.5 1237.5,335.5 1232.5,335.5 1232.5,345.5 1238.5,353.5 1239.5,360.5 1238.5,363.5 1249.5,370.5 1247.5,374.5 1247.5,380.5 1251.5,384.5 1255.5,391.5 1255.5,395.5 1253.5,391.5 1249.5,386.5 1243.5,379.5 1243.5,383.5 1238.5,381.5 1232.5,380.5 1231.5,376.5 1216.5,367.5 1212.5,365.5 1200.5,370.5 1196.5,368.5 1188.5,368.5 1184.5,371.5 1179.5,367.5 1181.5,363.5 1179.5,360.5 1181.5,356.5 1180.5,354.5 1181.5,346.5 1183.5,342.5 1173.5,342.5 1170.5,340.5 1167.5,342.5 1158.5,343.5 1151.5,346.5 1148.5,350.5 1153.5,354.5 1151.5,364.5 1149.5,368.5 1150.5,377.5 1152.5,385.5 1145.5,395.5 1144.5,401.5 1139.5,408.5 1137.5,419.5 1134.5,421.5 1135.5,429.5 1132.5,431.5 1126.5,441.5 1128.5,446.5 1123.5,447.5 1126.5,451.5 1123.5,455.5 1123.5,467.5 1129.5,477.5 1126.5,480.5 1128.5,483.5 1135.5,483.5 1140.5,479.5 1148.5,479.5 1150.5,482.5 1154.5,502.5 1161.5,508.5 1161.5,505.5 1166.5,511.5 1170.5,529.5 1175.5,542.5 1185.5,552.5 1194.5,555.5 1203.5,551.5 1214.5,554.5 1222.5,564.5 1234.5,571.5 1234.5,577.5 1229.5,582.5 1229.5,586.5 1224.5,590.5 1217.5,588.5 1215.5,585.5 1204.5,591.5 1200.5,595.5 1193.5,590.5 1195.5,585.5 1197.5,585.5 1196.5,578.5 1197.5,576.5 1187.5,576.5 1186.5,570.5 1176.5,570.5 1169.5,568.5 1167.5,563.5 1163.5,563.5 1163.5,572.5 1154.5,565.5 1145.5,559.5 1144.5,551.5 1140.5,549.5 1139.5,546.5 1131.5,544.5 1129.5,536.5 1124.5,532.5 1122.5,534.5 1119.5,531.5 1120.5,527.5 1116.5,523.5 1109.5,523.5 1107.5,515.5 1102.5,514.5 1099.5,519.5 1094.5,519.5 1091.5,516.5 1088.5,508.5 1090.5,499.5 1094.5,489.5 1094.5,480.5 1098.5,473.5 1099.5,463.5 1103.5,459.5 1104.5,454.5 1107.5,448.5 1109.5,441.5 1107.5,439.5 1108.5,436.5 1110.5,433.5 1115.5,432.5 1115.5,427.5 1118.5,427.5 1124.5,421.5 1128.5,413.5 1131.5,405.5 1135.5,404.5 1137.5,399.5 1134.5,396.5 1135.5,393.5 1131.5,388.5 1128.5,379.5 1128.5,374.5 1120.5,366.5 1117.5,359.5 1117.5,354.5 1120.5,354.5 1119.5,343.5 1116.5,333.5 1109.5,325.5 1095.5,315.5 1086.5,304.5 1082.5,293.5 1083.5,288.5 1087.5,286.5 1091.5,284.5 1096.5,284.5 1095.5,271.5 1096.5,261.5 1098.5,260.5 1104.5,258.5 1106.5,254.5 1107.5,250.5 1105.5,249.5 1100.5,255.5 1096.5,247.5 1091.5,240.5 1092.5,235.5 1090.5,231.5 1084.5,228.5 1078.5,221.5 1075.5,216.5 1066.5,209.5 1063.5,204.5 1065.5,198.5 1061.5,191.5 1060.5,188.5 1058.5,190.5 1055.5,188.5 1055.5,185.5 1052.5,181.5 1053.5,179.5 1055.5,181.5 1059.5,181.5 1061.5,179.5 1065.5,179.5 1064.5,170.5 1061.5,167.5 1067.5,161.5 1067.5,158.5 1065.5,156.5 1065.5,150.5 1068.5,145.5 1072.5,144.5 1074.5,137.5 1081.5,141.5" data-index="1">'
},
{
area: '<area shape="poly" coords="1213.5,33.5 1217,31 1225.5,32.5 1235.5,39.5 1239.5,33.5 1244.5,26.5 1251.5,32.5 1254.5,24.5 1266.5,32.5 1267.5,25.5 1274.5,21.5 1277.5,26.5 1283.5,20.5 1289.5,20.5 1292.5,15.5 1291.5,11.5 1294.5,7.5 1302.5,3.5 1306.5,-0.5 1316.5,5.5 1316.5,9.5 1322.5,9.5 1333.5,9.5 1340.5,12.5 1347.5,9.5 1358.5,12.5 1354.5,21.5 1351.5,21.5 1351.5,28.5 1355.5,29.5 1356.5,40.5 1363.5,39.5 1368.5,41.5 1368.5,44.5 1378.5,46.5 1379.5,49.5 1382.5,47.5 1384.5,49.5 1393.5,45.5 1401.5,49.5 1399.5,53.5 1398.5,50.5 1395.5,51.5 1394.5,55.5 1391.5,55.5 1389.5,59.5 1384.5,59.5 1382.5,62.5 1383.5,69.5 1376.5,73.5 1372.5,73.5 1368.5,75.5 1363.5,75.5 1365.5,82.5 1359.5,88.5 1360.5,95.5 1352.5,102.5 1345.5,110.5 1340.5,111.5 1339.5,118.5 1336.5,122.5 1337.5,134.5 1335.5,136.5 1334.5,141.5 1331.5,144.5 1335.5,148.5 1339.5,154.5 1350.5,165.5 1354.5,166.5 1359.5,170.5 1365.5,173.5 1363.5,179.5 1369.5,188.5 1381.5,197.5 1387.5,199.5 1392.5,206.5 1409.5,216.5 1413.5,218.5 1414.5,222.5 1418.5,222.5 1419.5,220.5 1423.5,220.5 1423.5,223.5 1427.5,223.5 1427.5,227.5 1430.5,225.5 1432.5,226.5 1430.5,229.5 1436.5,233.5 1447.5,245.5 1450.5,247.5 1452.5,246.5 1457.5,251.5 1455.5,255.5 1463.5,267.5 1464.5,273.5 1469.5,281.5 1469.5,286.5 1474.5,293.5 1473.5,303.5 1477.5,308.5 1475.5,311.5 1477.5,318.5 1484.5,325.5 1481.5,329.5 1484.5,332.5 1484.5,336.5 1480.5,333.5 1480.5,330.5 1475.5,335.5 1481.5,342.5 1479.5,344.5 1474.5,341.5 1477.5,346.5 1477.5,353.5 1480.5,356.5 1480.5,359.5 1477.5,360.5 1480.5,364.5 1476.5,370.5 1473.5,370.5 1473.5,377.5 1471.5,380.5 1466.5,380.5 1464.5,385.5 1458.5,386.5 1449.5,396.5 1443.5,397.5 1440.5,400.5 1439.5,405.5 1434.5,405.5 1422.5,414.5 1412.5,419.5 1410.5,417.5 1402.5,416.5 1399.5,413.5 1395.5,413.5 1394.5,418.5 1397.5,423.5 1395.5,425.5 1385.5,425.5 1398.5,428.5 1392.5,436.5 1395.5,437.5 1389.5,441.5 1391.5,443.5 1389.5,449.5 1385.5,450.5 1364.5,438.5 1378.5,452.5 1378.5,457.5 1365.5,463.5 1354.5,468.5 1349.5,477.5 1340.5,486.5 1332.5,488.5 1327.5,487.5 1332.5,482.5 1328.5,482.5 1328.5,450.5 1337.5,442.5 1332.5,438.5 1328.5,439.5 1324.5,435.5 1320.5,439.5 1312.5,430.5 1316.5,426.5 1326.5,425.5 1334.5,417.5 1331.5,413.5 1333.5,410.5 1343.5,412.5 1345.5,408.5 1351.5,408.5 1357.5,404.5 1363.5,410.5 1365.5,408.5 1368.5,410.5 1373.5,410.5 1370.5,406.5 1373.5,404.5 1371.5,402.5 1368.5,402.5 1360.5,396.5 1360.5,391.5 1357.5,386.5 1360.5,383.5 1363.5,383.5 1365.5,379.5 1374.5,379.5 1379.5,380.5 1379.5,374.5 1378.5,370.5 1389.5,370.5 1391.5,366.5 1398.5,365.5 1408.5,355.5 1413.5,357.5 1417.5,352.5 1417.5,344.5 1410.5,335.5 1414.5,328.5 1416.5,317.5 1409.5,307.5 1409.5,302.5 1405.5,299.5 1404.5,289.5 1409.5,283.5 1409.5,277.5 1407.5,274.5 1409.5,271.5 1405.5,267.5 1410.5,264.5 1412.5,258.5 1408.5,254.5 1405.5,252.5 1401.5,252.5 1393.5,244.5 1393.5,241.5 1402.5,235.5 1401.5,232.5 1398.5,233.5 1393.5,231.5 1390.5,230.5 1390.5,228.5 1385.5,227.5 1381.5,223.5 1380.5,219.5 1377.5,225.5 1373.5,222.5 1369.5,217.5 1368.5,208.5 1365.5,207.5 1358.5,199.5 1355.5,199.5 1338.5,187.5 1334.5,182.5 1333.5,178.5 1327.5,172.5 1324.5,173.5 1321.5,171.5 1314.5,165.5 1316.5,158.5 1300.5,154.5 1293.5,150.5 1289.5,149.5 1279.5,143.5 1270.5,141.5 1278.5,133.5 1274.5,128.5 1282.5,125.5 1292.5,128.5 1297.5,125.5 1301.5,120.5 1299.5,118.5 1305.5,113.5 1301.5,107.5 1296.5,108.5 1295.5,104.5 1292.5,102.5 1284.5,101.5 1292.5,93.5 1280.5,87.5 1273.5,86.5 1265.5,91.5 1262.5,97.5 1253.5,93.5 1242.5,92.5 1232.5,80.5 1233.5,71.5 1236.5,68.5 1234.5,64.5 1229.5,64.5 1226.5,66.5 1222.5,58.5 1216.5,52.5 1209.5,48.5 1206.5,43.5 1210.5,41.5" data-index="2">'
},
{
area: '<area shape="poly" coords="1448.5,103.5 1446.5,102.5 1446.5,99.5 1450.5,95.5 1457.5,95.5 1458.5,91.5 1463.5,89.5 1471.5,89.5 1478.5,85.5 1486.5,83.5 1491.5,83.5 1494.5,79.5 1499.5,82.5 1504.5,82.5 1510.5,93.5 1503.5,100.5 1498.5,108.5 1496.5,118.5 1496.5,126.5 1493.5,130.5 1488.5,131.5 1483.5,136.5 1482.5,142.5 1472.5,143.5 1472.5,149.5 1467.5,151.5 1463.5,149.5 1453.5,150.5 1446.5,149.5 1435.5,146.5 1434.5,139.5 1432.5,135.5 1431.5,127.5 1432.5,124.5 1430.5,121.5 1432.5,116.5 1442.5,107.5" data-index="3">'
},
];
if ($map.length) {
$map
.ptMap({
imgSource: '#mapImg',
type: 'mapArea',
items: mapItems
})
.on('change', function(e, i) {
const selector = '#map-slider-' + i;
showPopup(selector, function() {
const $slider = $('.slick-initialized', $(selector));
if ($slider.length) {
$slider.slick('refresh');
}
});
})
.on('mouseover', 'area', function() {
const i = $(this).data('index');
$('.map__region', $map).removeClass('active').eq(i).addClass('active');
$('.map__name', $map).removeClass('active').eq(i).addClass('active');
})
.on('mouseleave', 'area', function() {
$('.map__region', $map).removeClass('active');
$('.map__name', $map).removeClass('active');
});
}
const $hotels = $('[data-role="hotel"]'),
$hotelsBg = $('[data-role="hotel-bg"]'),
hotelsTitleColors = [
......@@ -7,22 +99,22 @@ $(function() {
'#ffffff',
'#521384'
];
let hotelTimer;
$hotels
.on('mouseover', function() {
const index = $(this).data('index');
clearTimeout(hotelTimer);
$('#hotels').css('color', hotelsTitleColors[index]);
$hotelsBg.removeClass('active').eq(index).addClass('active');
})
.on('mouseleave', function() {
hotelTimer = setTimeout(function() {
$('#hotels').css('color', '#521384');
$hotelsBg.removeClass('active');
}, 150);
});
if ($hotels.length) {
let hotelTimer;
$hotels
.on('mouseover', function() {
const index = $(this).data('index');
clearTimeout(hotelTimer);
$('#hotels').css('color', hotelsTitleColors[index]);
$hotelsBg.removeClass('active').eq(index).addClass('active');
})
.on('mouseleave', function() {
hotelTimer = setTimeout(function() {
$('#hotels').css('color', '#521384');
$hotelsBg.removeClass('active');
}, 150);
});
}
console.log('Document ready');
});
\ No newline at end of file
@import "variables";
.btn {
display:inline-flex;
justify-content:center;
align-items:center;
min-width:220px;
background:none;
outline:none;
border:none;
text-decoration:none;
cursor:pointer;
transition:.3s;
&_medium {
min-height:48px;
padding:10px 30px;
font-size:15px;
font-weight:bold;
line-height:23px;
text-align:center;
border-radius:24px;
}
&_cyan {
color:$cyan;
border:$cyan 1px solid;
}
&_orange {
color:$orange;
border:$orange 1px solid;
}
&_white {
color:#fff;
border:#fff 1px solid;
}
&_pink {
color:$pink;
border:$pink 1px solid;
}
&:hover {
opacity:.8;
}
}
\ No newline at end of file
@import "variables";
#map {
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
.map {
width:1920px;
position:relative;
color:$violet;
area {
cursor:pointer;
}
&__region {
pointer-events:none;
position:absolute;
transition:.3s;
&-1 {
left:415px;
top:422px;
&.active {
opacity:.65;
}
}
&-2 {
left:1052px;
top:113px;
&.active {
opacity:.35;
}
}
&-3 {
left:1206px;
top:0;
&.active {
opacity:.5;
}
}
&-4 {
left:1431px;
top:79px;
&.active {
opacity:.5;
}
}
}
&__name {
pointer-events:none;
position:absolute;
transition:.3s;
&-1 {
left:520px;
top:485px;
}
&-2 {
left:1170px;
top:240px;
}
&-3 {
left:1385px;
top:313px;
}
&-4 {
left:1425px;
top:156px;
}
&.active {
opacity:.35;
}
}
&__title {
width:240px;
position:absolute;
left:628px;
top:193px;
}
&__tint {
width:140px;
position:absolute;
left:802px;
top:471px;
font-size:15px;
line-height:23px;
&-line {
pointer-events:none;
position:absolute;
left:39px;
top:-141px;
transform:rotate(-28deg);
}
}
}
}
.map {
&__hotel {
overflow:hidden;
display:flex;
flex-direction:column;
width:100%;
height:100%;
min-height:316px;
text-decoration:none;
background:#fff;
color:$lightViolet;
border-radius:10px;
box-shadow:$shadow;
transition:.3s;
img {
width:100%;
flex:0 0 215px;
object-position:center;
object-fit:cover;
}
&-name {
display:flex;
justify-content:center;
align-items:center;
flex-grow:1;
padding:24px;
font-size:18px;
line-height:27px;
text-align:center;
}
&:hover {
transform:translateY(-10px);
}
}
}
\ No newline at end of file
@import "variables";
#modal {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
background:rgba(33, 0, 59, .33);
z-index:9999;
}
#popup {
max-width:100%;
position:relative;
padding:15px;
}
\ No newline at end of file
@import "variables";
#prize {
padding:46px 0;
background:url(../img/prize_bg.jpg) center no-repeat;
color:#fff;
h2 {
font-weight:normal;
}
p {
font-size:15px;
}
b {
font-size:18px;
}
.prize {
&__right {
padding-left:76px;
}
&__paragraph {
display:flex;
align-items:center;
min-height:111px;
margin:6px 0;
img {
flex:0 0 95px;
align-self:flex-start;
height:95px;
margin:8px 35px 8px 0;
object-position:center;
object-fit:cover;
border-radius:50%;
}
&-text {
flex-grow:1;
}
}
&__score {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
flex:0 0 95px;
align-self:flex-start;
height:95px;
margin:8px 0 8px 35px;
font-size:15px;
font-weight:bold;
line-height:21px;
text-align:center;
border-radius:50%;
&-num {
font-size:24px;
}
&._orange {
background:$orange;
color:#fff;
}
&._white {
background:#fff;
color:$violet;
}
&._pink {
background:$pink;
color:#fff;
}
}
}
.btn_medium {
margin:13px -11px 27px;
}
&-rules {
height:75vh;
min-height:620px;
padding:30px;
background:#fff;
box-shadow:$shadow;
border-radius:10px;
}
}
\ No newline at end of file
@import "variables";
.map__slider {
margin:0 -15px;
&-slide {
padding:0 15px;
}
.slick-list {
overflow:visible;
}
}
.slick {
&-track {
display:flex !important;
}
&-slide {
height:auto !important;
outline:none !important;
}
}
\ No newline at end of file
......@@ -3,4 +3,6 @@ $text:#1a1a1a;
$violet:#521384;
$lightViolet:#937a99;
$pink:#ff1686;
$cyan:#0affff;
$orange:#ffbf1c;
$shadow:0 0 36px -2px rgba(20, 78, 158, .15);
\ No newline at end of file
......@@ -94,6 +94,98 @@
<img class="hotels__background" data-role="hotel-bg" src="/uploads/workshops/projects/selectum19/img/hotels_bg_03.jpg" alt="">
<img class="hotels__background" data-role="hotel-bg" src="/uploads/workshops/projects/selectum19/img/hotels_bg_04.jpg" alt="">
</section>
<section id="map">
<div class="map">
<img id="mapImg" src="/uploads/workshops/projects/selectum19/img/map_bg.jpg" alt="">
<img class="map__region map__region-1" src="/uploads/workshops/projects/selectum19/img/map_region_01.png" alt="">
<img class="map__region map__region-2" src="/uploads/workshops/projects/selectum19/img/map_region_02.png" alt="">
<img class="map__region map__region-3" src="/uploads/workshops/projects/selectum19/img/map_region_03.png" alt="">
<img class="map__region map__region-4" src="/uploads/workshops/projects/selectum19/img/map_region_04.png" alt="">
<p class="map__name map__name-1"><b>Шри-Ланка</b></p>
<p class="map__name map__name-2"><b>Таиланд</b></p>
<p class="map__name map__name-3"><b>Вьетнам</b></p>
<p class="map__name map__name-4"><b>Хайнань</b></p>
<div class="map__title tac">
<h2 class="text_pink">Путешествуй<br> по карте Азии</h2>
<p>и изучай отели All Inclusive</p>
</div>
<div class="map__tint tac">Кликай на страну на карте и получай готовую подборку отелей
<img class="map__tint-line" src="/uploads/workshops/projects/selectum19/img/map_tint_line.png" alt="">
</div>
</div>
</section>
<section id="prize">
<div class="container">
<div class="row">
<div class="offset-1 col-5">
<h2>Призы<br> для исследователей Азии</h2>
<p>&nbsp;</p>
<p><b>Стань лидером</b><br> рейтинга по баллам и выиграй:</p>
<p>&nbsp;</p>
<div class="prize__paragraph">
<img src="/uploads/workshops/projects/selectum19/img/prize_01.jpg" alt="">
<div class="prize__paragraph-text">
<p><b>Тур во Вьетнам в отель<br> Selectum Noa Resort Cam Ranh 5*<br> на 7 ночей на двоих с перелетом</b></p>
</div>
</div>
<div class="prize__paragraph">
<img src="/uploads/workshops/projects/selectum19/img/prize_02.jpg" alt="">
<div class="prize__paragraph-text">
<p><b>Проживание в отеле<br> Selectum Noa Resort Cam Ranh 5*<br> на 5 ночей</b></p>
</div>
</div>
<div class="prize__paragraph">
<img src="/uploads/workshops/projects/selectum19/img/prize_03.jpg" alt="">
<div class="prize__paragraph-text">
<p><b>Проживание в отеле<br> Selectum Noa Resort Cam Ranh 5*<br> на 3 ночи</b></p>
</div>
</div>
<p>
<a href="#" data-role="show-popup" data-target="prize-rules" class="btn btn_medium btn_cyan">Правила участия</a>
</p>
</div>
<div class="col-6 prize__right">
<h2>Что сделать,<br> чтобы получить приз?</h2>
<p>&nbsp;</p>
<div class="prize__paragraph">
<div class="prize__paragraph-text">
<p><b>Пройди тестирование</b><br> Правда или ложь об отелях All Inclusive в Азии</p>
<p>
<a href="{{ workshop_path(workshop.id, 'testing') }}" class="btn btn_medium btn_orange">Пройти тестирование</a>
</p>
</div>
<div class="prize__score _orange">
<div class="prize__score-num">+300</div> баллов
</div>
</div>
<div class="prize__paragraph">
<div class="prize__paragraph-text">
<p><b>23 декабря не пропусти спецзадание от отеля Selectum</b><br> реши задачку и получи баллы в свою копилку</p>
<p>
<a href="#task" class="btn btn_medium btn_white">Пройти Задание</a>
</p>
</div>
<div class="prize__score _white">
<div class="prize__score-num">+500</div> баллов
</div>
</div>
<div class="prize__paragraph">
<div class="prize__paragraph-text">
<p><b>Бронируй туры в Азию</b><br> у ANEX Tour с проживанием в отелях All Inclusive Таиланда, Хайнаня, Шри-Ланки и Вьетнама.</p>
<p>
<a href="/loyalty" target="_blank" class="btn btn_medium btn_pink">Внести бронь</a>
</p>
</div>
<div class="prize__score _pink">
<div class="prize__score-num">+500</div> баллов
</div>
</div>
</div>
</div>
</div>
</section>
<section id="truth-or-lie"></section>
<section id="task"></section>
</main>
<footer>
<div class="container">
......@@ -102,5 +194,164 @@
</a>
</div>
</footer>
<div id="modal" style="display:none">
<div id="popup">
<div class="popup" id="map-slider-0" style="display:none">
<div class="container">
<div class="map__slider">
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'srilanka') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_1_1.jpg" alt="">
<span class="map__hotel-name">Riu Sri Lanka&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'srilanka') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_1_2.jpg" alt="">
<span class="map__hotel-name">Club Palm Bay&nbsp;4*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'srilanka') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_1_3.jpg" alt="">
<span class="map__hotel-name">Club Hotel Dolphin&nbsp;4*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'srilanka') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_1_4.jpg" alt="">
<span class="map__hotel-name">Citrus Waskaduwa&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'srilanka') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_1_5.jpg" alt="">
<span class="map__hotel-name">Royal Palms Beach Hotel&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'srilanka') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_1_6.jpg" alt="">
<span class="map__hotel-name">Tangerine Beach Hotel&nbsp;4*</span>
</a>
</div>
</div>
</div>
</div>
<div class="popup" id="map-slider-1" style="display:none">
<div class="container">
<div class="map__slider">
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'thailand') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_2_1.jpg" alt="">
<span class="map__hotel-name">Thavorn Palm Beach Resort&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'thailand') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_2_2.jpg" alt="">
<span class="map__hotel-name">Sea Sun Sand Resort&nbsp;&&nbsp;Spa&nbsp;4*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'thailand') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_2_3.jpg" alt="">
<span class="map__hotel-name">All Seasons Naiharn Phuket&nbsp;4*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'thailand') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_2_4.jpg" alt="">
<span class="map__hotel-name">Sentido Graceland Khao Lak Resort&nbsp;&&nbsp;Spa&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'thailand') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_2_5.jpg" alt="">
<span class="map__hotel-name">The Haven Khaolak&nbsp;5*</span>
</a>
</div>
</div>
</div>
</div>
<div class="popup" id="map-slider-2" style="display:none">
<div class="container">
<div class="map__slider">
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'vietnam') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_3_1.jpg" alt="">
<span class="map__hotel-name">Selectum Noa Resort Cam Ranh&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'vietnam') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_3_2.jpg" alt="">
<span class="map__hotel-name">Riviera Deluxe Cam Ranh Aqua Park Resort&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'vietnam') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_3_3.jpg" alt="">
<span class="map__hotel-name">Vinpearl Resort Nha Trang&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'vietnam') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_3_4.jpg" alt="">
<span class="map__hotel-name">Vinoasis Phu Quoc Resort&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'vietnam') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_3_5.jpg" alt="">
<span class="map__hotel-name">Sol Beach House Phu Quoc By Melia Hotels International&nbsp;5*</span>
</a>
</div>
</div>
</div>
</div>
<div class="popup" id="map-slider-3" style="display:none">
<div class="container">
<div class="map__slider">
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'hainan') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_4_1.jpg" alt="">
<span class="map__hotel-name">Blue Bay&nbsp;- The Westin Blue Bay Resort&nbsp;&&nbsp;Spa&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'hainan') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_4_2.jpg" alt="">
<span class="map__hotel-name">Huayu Resort&nbsp;&&nbsp;Spa Yalong Bay Sanya&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'hainan') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_4_3.jpg" alt="">
<span class="map__hotel-name">Sanya Marriott Yalong Bay Resort&nbsp;&&nbsp;Spa&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'hainan') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_4_4.jpg" alt="">
<span class="map__hotel-name">Crowne Plaza Resort Sanya Bay&nbsp;5*</span>
</a>
</div>
<div class="map__slider-slide">
<a href="{{ workshop_path(workshop.id, 'hainan') }}#" class="map__hotel">
<img src="/uploads/workshops/projects/selectum19/img/map_hotel_4_5.jpg" alt="">
<span class="map__hotel-name">Narada Resort&nbsp;&&nbsp;Spa Qixian Mount&nbsp;5*</span>
</a>
</div>
</div>
</div>
</div>
<div class="popup" id="prize-rules" style="display:none">
<div class="container">
<h2>Правила получения призов</h2>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
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