Магические поселения Великобритании

[hideprofile]

[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Изолированная интерактивная карта</title>

<style>

/* ======================================================
ПОЛНАЯ ИЗОЛЯЦИЯ
====================================================== */

.mw-map,
.mw-map *{
box-sizing:border-box;
}

/* ======================================================
ОСНОВА
====================================================== */

.mw-map{
max-width:1200px;
margin:40px auto;

background:#f5f5f5;
border:10px solid #d8d8d8;

padding:35px;

font-family:Arial, sans-serif;
color:#555;
}

/* ======================================================
ТЕКСТ
====================================================== */

.mw-map .text{
font-size:18px;
line-height:1.8;
margin-bottom:40px;
}

/* ======================================================
КАРТА
====================================================== */

.mw-map .map{
position:relative;
max-width:900px;
margin:0 auto 10px;

border-radius:10px;
overflow:hidden;
}

.mw-map .map img{
width:100%;
display:block;
}

/* ======================================================
ТОЧКИ
====================================================== */

.mw-map .point{
position:absolute;

width:28px;
height:28px;

background:#4f3328;

border-radius:50% 50% 50% 0;

transform:rotate(-45deg);

cursor:pointer;
transition:.2s;
}

.mw-map .point:hover{
background:#9f654e;
transform:rotate(-45deg) scale(1.15);
z-index:10;
}

.mw-map .point::after{
content:"";

position:absolute;

width:10px;
height:10px;

background:white;
border-radius:50%;

left:9px;
top:9px;
}

/* TOOLTIP */

.mw-map .tooltip{
position:absolute;
top:-8px;
left:40px;

background:white;
border:1px solid #ccc;

padding: 5px 10px;

white-space:nowrap;

font-size:12px;
color:#555;

box-shadow:0 4px 10px rgba(0,0,0,.08);

opacity:0;
visibility:hidden;

transition:.2s;
}

.mw-map .point:hover .tooltip{
opacity:1;
visibility:visible;
}

.mw-map .left .tooltip{
left:auto;
right:40px;
}

/* ======================================================
ПОЗИЦИИ ТОЧЕК
====================================================== */

.mw-map .p1{ top: 20%; left:36%; }
.mw-map .p2{ top:25%; left:43%; }
.mw-map .p3{ top:72%; left:49%; }
.mw-map .p4{ top:43%; left:62%; }
.mw-map .p5{ top:74%; left:60%; }
.mw-map .p6{ top:55%; left:70%; }
.mw-map .p7{ top:65%; left:60%; }
.mw-map .p8{ top:68%; left:65%; }
.mw-map .p9{ top:65%; left:56%; }
.mw-map .p10{ top:77%; left:43%; }
.mw-map .p11{ top:50%; left:54%; }
.mw-map .p12{ top:54%; left:49%; }

/* ======================================================
RADIO
====================================================== */

.mw-map input{
display:none;
}

/* ======================================================
КНОПКИ
====================================================== */

.mw-map .top-buttons{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin-bottom:25px;
}

.mw-map .top-buttons label{
padding: 8px 14px;

background:#ececec;
border:1px solid #d4d4d4;

color:#555;
font-size:13px;

cursor:pointer;
transition:.2s;
}

.mw-map .top-buttons label:hover{
background:#ddd;
}

/* АКТИВНАЯ КНОПКА */

.mw-map #s1:checked ~ .top-buttons label[for="s1"],
.mw-map #s2:checked ~ .top-buttons label[for="s2"],
.mw-map #s3:checked ~ .top-buttons label[for="s3"],
.mw-map #s4:checked ~ .top-buttons label[for="s4"],
.mw-map #s5:checked ~ .top-buttons label[for="s5"],
.mw-map #s6:checked ~ .top-buttons label[for="s6"],
.mw-map #s7:checked ~ .top-buttons label[for="s7"],
.mw-map #s8:checked ~ .top-buttons label[for="s8"],
.mw-map #s9:checked ~ .top-buttons label[for="s9"],
.mw-map #s10:checked ~ .top-buttons label[for="s10"],
.mw-map #s11:checked ~ .top-buttons label[for="s11"],
.mw-map #s12:checked ~ .top-buttons label[for="s12"]{
background:#9f654e;
border-color:#9f654e;
color:white;
}

/* ======================================================
СЛАЙДЕР (ИСПРАВЛЕНО)
====================================================== */

.mw-map .slider{
overflow:hidden;
background:white;
border:1px solid #ddd;
}

.mw-map .slides{
display:flex;
transition:.5s;
}

.mw-map .slide{
flex:0 0 100%;
padding:40px;
}

.mw-map .slide h2{
margin-bottom:20px;
color:#333;
}

.mw-map .slide p{
margin-bottom:20px;
line-height:1.9;
color:#666;
}

/* ======================================================
ПЕРЕКЛЮЧЕНИЕ
====================================================== */

.mw-map #s1:checked ~ .slider .slides{ transform:translateX(0%); }
.mw-map #s2:checked ~ .slider .slides{ transform:translateX(-100%); }
.mw-map #s3:checked ~ .slider .slides{ transform:translateX(-200%); }
.mw-map #s4:checked ~ .slider .slides{ transform:translateX(-300%); }
.mw-map #s5:checked ~ .slider .slides{ transform:translateX(-400%); }
.mw-map #s6:checked ~ .slider .slides{ transform:translateX(-500%); }
.mw-map #s7:checked ~ .slider .slides{ transform:translateX(-600%); }
.mw-map #s8:checked ~ .slider .slides{ transform:translateX(-700%); }
.mw-map #s9:checked ~ .slider .slides{ transform:translateX(-700%); }
.mw-map #s10:checked ~ .slider .slides{ transform:translateX(-700%); }
.mw-map #s11:checked ~ .slider .slides{ transform:translateX(-700%); }
.mw-map #s12:checked ~ .slider .slides{ transform:translateX(-700%); }

/* ======================================================
АДАПТИВ
====================================================== */

@media(max-width:768px){

.mw-map{
padding:20px;
}

.mw-map .text{
font-size:15px;
}

.mw-map .slide{
padding:25px;
}

.mw-map .top-buttons{
flex-direction:column;
}

.mw-map .top-buttons label{
text-align:center;
}

.mw-map .tooltip{
font-size:13px;
}
}
.mw-map .map-note{
max-width:720px;
margin: 4px auto 6px;

font-size:13px;
line-height:1.6;
color:#999;

text-align:center;
}
.mw-map .quote{
margin-top:25px;
padding:18px 20px;

border-left:4px solid #cc8899;
background:#faf7f8;

border-radius:10px;
}

.mw-map .quote-text{
font-size:15px;
font-style:italic;
color:#555;

line-height:1.7;
margin-bottom:8px;
}

.mw-map .quote-address{
font-size:12px;
color:#999;
letter-spacing:0.3px;
}
</style>
</head>

<body>

<label for="s1" class="point p1"><div class="tooltip">Гебридские острова</div></label>
<label for="s2" class="point p2"><div class="tooltip">Хогсмид</div></label>
<label for="s3" class="point p3"><div class="tooltip">Годрикова впадина</div></label>
<label for="s4" class="point p4"><div class="tooltip">Аппер-Фледжли</div></label>
<label for="s5" class="point p5 left"><div class="tooltip">Оттери-Сент-Кэчпоул</div></label>
<label for="s6" class="point p6 left"><div class="tooltip">Насыпное Нагорье</div></label>
<label for="s7" class="point p7 left"><div class="tooltip">Котсуолдс</div></label>
<label for="s8" class="point p8 left"><div class="tooltip">Литтл Хэнглтон</div></label>
<label for="s9" class="point p9 left"><div class="tooltip">Татсхилл</div></label>
<label for="s10" class="point p10 left"><div class="tooltip">Тинворт</div></label>
<label for="s11" class="point p11 left"><div class="tooltip">Барнтон и Верхний Барнтон</div></label>
<label for="s12" class="point p12 left"><div class="tooltip">Заповедник Валлийских драконов</div></label>
</div>
<div class="map-note">
Карта носит художественный характер. Расположение локаций условное и может отличаться от официальных источников.
</div>

<div class="top-buttons">
<label for="s1">Гебридские острова</label>
<label for="s2">Хогсмид</label>
<label for="s3">Годрикова впадина</label>
<label for="s4">Аппер-Фледжли</label>
<label for="s5">Оттери-Сент-Кэчпоул</label>
<label for="s6">Насыпное Нагорье</label>
<label for="s7">Котсуолдс</label>
<label for="s8">Литтл Хэнглтон</label>
<label for="s9">Татсхилл</label>
<label for="s10">Тинворт</label>
<label for="s11">Барнтон и Верхний Барнтон</label>
<label for="s12">Заповедник Валлийских драконов</label>
</div>

<div class="slide"><h2>Гебридские острова</h2><p>Гебриды — это архипелаг из более чем 500 островов в Атлантическом океане у западного побережья Шотландии. Здесь обитают черные гебридские драконы. Уже много столетий заповедные места находятся во "владении" и под заботой магического клана волшебников - МакФасти.</p>
</div>
<div class="slide"><h2>Хогсмид</h2><p>Маленькая деревушка, расположенная недалеко от Хогвартса, единственный населённый пункт в Великобритании, где совершенно нет маглов. Основана в средние века Энгистом из Вудкрофта.
Хогсмид — название не только деревни, но и ближайшей к Хогвартсу железнодорожной станции. Чтобы добраться до станции Хогсмид, надо сесть на поезд «Хогвартс-экспресс», который отправляется с вокзала Кингс Кросс в Лондоне, с платформы 9¾. На платформу 9¾ можно попасть, пройдя через кирпичную стену, разделяющую платформы 9 и10. На карте станция находится к юго-востоку от школы, а деревня Хогсмид — к северо-западу.
Ещё одна достопримечательность Хогсмида — стоящая на окраине Визжащая хижина, но к ней жители деревни предпочитают не приближаться.
Известно, что в этой деревне находился коттедж, в котором живут Элфинстоун Урхарт и Минерва Макгонагалл.
<br>
<br>Магазины: овощная лавка «Волшебная брюква», магазин волшебных палочек «Волшебные палочки от Олливандера», магазин волшебных принадлежностей «Дэрвиш и Бэнгз» и «Магазин перьев Писарро», магазин зелий «Зелья Джея Пепина», волшебные приколы «Зонко», магазин спортивных принадлежностей «Круголётка», музыкальная лавка «Музыкальный магазин Доминик Маэстро», кондитерская «Сладкое королевство», магазин волшебных растений и грибов «Тимофиллы и поганки», книжный магазин «Фолианты и свитки», магазин одежды «Шапка-невидимка»
<br>Кафе и бары: «Кабанья голова» — очень старый бар с не очень хорошей репутацией. Кафе мадам Паддифут — милое романтическое кафе. «Три метлы» кафе-бар для всех. «Чайный пакетик Розы Ли» — чайная.
<br>Другие заведения: Парикмахерский салон мадам Снеллинг, Хогсмидское отделение совиной почты — место, где можно нанять почтовую сову для отправки письма или посылки. </p></div>
<div class="slide"><h2>Годрикова впадина</h2><p> Небольшое поселение на юго-западе Англии. Издавна здесь бок о бок живут маги и маглы. История деревни насчитывает не одну сотню лет. Именно здесь родился один из четырех основателей Хогвартса — Годрик Гриффиндор (в его честь и назвали поселение), здесь Боуменом Райтом был выкован первый магический снитч, здесь на кладбище находится могила Игнотуса Певерелла, младшего из братьев Певереллов, кровь которых, течёт в каждом маге. Также на знаменитом кладбище Годриковой Впадины похоронены Кендра и Ариана Дамблдор.
Улицы Годриковой впадины довольно однообразны. Все дома похожи друг на друга. На кладбище находится огромное количество надгробий, размещенных и рядами, и в некоторых местах хаотично. Посреди кладбища стоит маленькая церквушка.
Из-за северного расположения Годриковой впадины снег здесь выпадает в очень больших количествах, и обычно температура держится очень низкая.
Известные места - Дом Батильды Бэгшот, Кладбище Годриковой впадины, Паб в Годриковой впадине, Церковь Св. Иеронима</p></div>
<div class="slide"><h2>Аппер-Фледжли</h2><p>Полумагическая деревня в графстве Йоркшир, где бок о бок живут семьи магов и маглов. Упоминается в книге Батильды Бэгшот «История магии». Здесь находится Дом Св. Освальда для старых ведьм и волшебников.</p></div>
<div class="slide"><h2>Оттери-Сент-Кэчпоул</h2><p> Небольшая магловская деревушка на южном побережье Англии, рядом с которой находятся дома волшебных семейств Уизли («Нора»), Лавгудов, Диггори и Фосеттов. Оттери-Сент-Кэчпоул упомянута в «Истории магии» Батильды Бэгшот как полумагическое поселение, где бок о бок издавна живут маги и маглы. </p></div>
<div class="slide"><h2>Насыпное Нагорье</h2><p>Деревня, откуда переехала семья Дамблдоров (Кендра Дамблдор и её дети: Альбус, Аберфорт, Ариана) в Годрикову Впадину, скрываясь от пересудов по поводу ареста Персиваля Дамблдора и по поводу умственного состояния дочери Арианы. В Насыпном Нагорье, так же, как и в других полумагических поселениях — бок о бок издавна живут маги и маглы. </p></div>
<div class="slide"><h2>Котсуолдс</h2><p>Деревушка на западе Англии на территории Оксфордшира и Глостершира. Здесь находится гряда холмов, признанная памятником «выдающейся естественной красоты». В XVIII веке здесь жили тролли, которые убили магозоолога и исследователя троллей Гондолину Олифант. </p></div>
<div class="slide"><h2>Литтл Хэнглтон</h2><p>Деревушка, примостившаяся между двумя холмами. Мало кто из жителей знает об одной достопримечательности, а кто знает, не считает её достопримечательностью: старая полуразвалившаяся хибара. Но именно здесь жила семья Мраксов, последних прямых потомков одного из основателей Хогвартса, Салазара Слизерина. </p></div>
<div class="slide"><h2>Татсхилл</h2><p>Небольшая деревушка в графстве Глостершир, Англия. Расположен неподалёку от Королевского леса Дин и городка Чепстоу. Татсхилл является родиной команды по квиддичу «Татсхилл Торнадос». </p></div>
<div class="slide"><h2>Тинворт</h2><p>Полумагическое поселение в графстве Корнуолл, в котором соседствуют дома магов и маглов. Упоминается в книге Батильды Бэгшот «История магии». Местные маглы проявляли лояльность к волшебникам (добровольно или под действием заклятия Конфундус). В Тинворте жила волшебница Бриджит Венлок.</p></div>
<div class="slide"><h2>Барнтон и Верхний Барнтон</h2><p>Две небольшие деревни расположены рядом в близе Ливерпуля. Верхний Барнтон в XV веке был местом обитания великанов. Одного из них убил охотник за великанами Гиффорд Оллертон. </p></div>
<div class="slide"><h2>Заповедник Валлийских драконов</h2><p>Заповедник драконов, в котором, в основном содержатся Валлийские зелёные драконы, потому что заповедник был создан для охраны конкретно этого вида драконов. Располагается заповедник на территории Великобритании в горах Уэльса, поскольку Валлийские зелёные гнездятся высоко в горах. </p></div>
</div>
</div>

</div>

</body>
</html>
[/html]

Magic War. Prophecy

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Магические поселения Великобритании

Сообщений 1 страница 1 из 1

Поделиться114-07-2026 00:58:10