Defectum/Site_Vologda
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Петухова Ростислава
2023-10-31 14:48:45 +03:00
commit aa6b520ceb
7 changed files with 384 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
site/index.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="style/textFont.css">
<link rel="stylesheet" href="style/background.css">
<link rel="stylesheet" href="style/buttonStyle.css">
<link rel="stylesheet" href="style/backgroundEffect.css">
<meta charset="utf-8" />
<title>Site</title>
<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Abac1416c747a6867070208e3a71fefae060843d99a9cd9f4c84fc00cb6aba4f0&amp;id=mymap&amp;lang=ru_RU&amp;apikey=<API-ключ>"></script>
</head>
<body>
<div class="snowflakes">
<div class="snowflake">
В ВОЛОГДЕ ВКУСНОЕ МОЛОКО !
</div>
<div class="snowflake">
ВОЛОГДА СУПЕР !
</div>
<div class="snowflake">
ГДЕ ? В ВОЛОГДЕ !
</div>
<div class="snowflake">
КРУЖЕВА ПРОСТО КЛАСС !
</div>
<div class="snowflake">
МАСЛО ЛУЧШЕЕ !
</div>
<div class="snowflake">
В ВОЛОГДЕ КЛАСС !
</div>
<div class="snowflake">
В ВОЛОГДЕ ПРЕКРАСНО!
</div>
<div class="snowflake">
ВОЛОГДА СУПЕР !
</div>
<div class="snowflake">
ВОЛОГДА!
</div>
</div>
<header>
<p class="titleText">Вологда путешествия</p>
</header>
<div class="postHeader"></div>
<div class="vologdaDescription">
<p class="normalText">Вологда – город, которые многие называют душой Русского Севера. Это родина вологодского масла и вологодского кружева, столица Опричнины и кладезь исторических достопримечательностей. Это город древний – с девятивековой историей, богатый – с более чем двумястами памятниками культуры и архитектуры, самобытный и живописный.</p>
</div>
<div id="mymap" class="vologdaMap">
<p class="titleText">Достопримечательности вологды</p>
</div>
<div class="vologdaInterestingPlace">
<p class="titleText">Места которые стоит посетить</p>
<a href="https://yandex.ru/profile/1013241328?no-distribution=1&source=wizbiz_new_map_single&ysclid=lo71yg4axi242363857"><button class="image-button" style="margin-right: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/1909414/2a0000016ae3289d21e668710123484a2ba4/XXXL');" onclick="document.location='https://yandex.ru/profile/1013241328?no-distribution=1&source=wizbiz_new_map_single&ysclid=lo71yg4axi242363857'" ></button></a>
<a href="https://yandex.ru/maps/org/pamyatnik_bukve_o/53849898478/?ll=39.884983%2C59.224170&z=16"><button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/10703420/2a0000018aa8a9bc716ee91011ad8e39d9d3/XXXL');" onclick="document.location='https://yandex.ru/maps/org/pamyatnik_bukve_o/53849898478/?ll=39.884983%2C59.224170&z=16'"></button></a>
<a href="https://yandex.ru/maps/org/kosmonavtu_p_i_belyayevu/72397562391/?ll=39.876151%2C59.219917&z=17"><button class="image-button" style="margin-left: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/9663145/2a00000189fcf8d098873379888732ea442f/XXXL');" onclick="document.location='https://yandex.ru/maps/org/kosmonavtu_p_i_belyayevu/72397562391/?ll=39.876151%2C59.219917&z=17'"></button></a>
<div class="image-button-margin"> </div>
<a href="https://yandex.ru/profile/223457860077"><button class="image-button" style="margin-right: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/5099617/2a000001827c21670f508af692362e7074a5/XXXL');" onclick="document.location='https://yandex.ru/profile/223457860077'" ></button></a>
<a href="https://yandex.ru/profile/3596464852"><button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/10589039/2a0000018aa9f71543a9c2c4fed3e048ce5a/XXXL');" onclick="document.location='https://yandex.ru/profile/3596464852'"></button></a>
<a href="https://yandex.ru/maps/org/kosmonavtu_p_i_belyayevu/72397562391/?ll=39.876151%2C59.219917&z=17"><button class="image-button" style="margin-left: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/4336337/2a0000017758c929f9c648c203c32557b43a/XXXL');" onclick="document.location='https://yandex.ru/maps/org/kosmonavtu_p_i_belyayevu/72397562391/?ll=39.876151%2C59.219917&z=17'"></button></a>
</div>
<div class="vologdaPlace">
<p class="titleText">Памятники деревенного зодчества</p>
<button class="image-button" style="margin-right: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/10963815/2a0000018b58b556be4a012bba8c619ae8a0/XXXL');" onclick="document.location='https://yandex.ru/profile/1085473739'" ></button>
<button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/6249106/2a000001822771dc3c7eeeedd7d6e193d7f8/XXXL');" onclick="document.location='https://yandex.ru/profile/1070779011'"></button>
<button class="image-button" style="margin-left: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/1363376/2a00000162d371356effdc7cd1b64494a35f/XXXL');" onclick="document.location='https://yandex.ru/profile/143162837878'"></button>
</div>
<div class="vologdaPlace">
<p class="titleText">Каменная архитектруа вологды</p>
<button class="image-button" style="margin-right: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/11072941/2a0000018a36fc0f1d6ce78ffc89862093a0/XXXL');" onclick="document.location='https://yandex.ru/profile/1202536967'" ></button>
<button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/6249106/2a000001822771dc3c7eeeedd7d6e193d7f8/XXXL');" onclick="document.location='https://yandex.ru/profile/1070779011'"></button>
<button class="image-button" style="margin-left: 2vw; background-image: url('https://avatars.mds.yandex.net/get-altay/1363376/2a00000162d371356effdc7cd1b64494a35f/XXXL');" onclick="document.location='https://yandex.ru/profile/143162837878'"></button>
</div>
<div class="vologdaPlace">
<p class="titleText">Места для развлеченний</p>
<button class="image-button" style="margin-right: 2vw; background-image: url('https://live.staticflickr.com/65535/49640220927_7a6115ddf1_b.jpg');" ></button>
<button class="image-button" style="background-image: url('https://live.staticflickr.com/65535/49640220927_7a6115ddf1_b.jpg');"></button>
<button class="image-button" style="margin-left: 2vw; background-image: url('https://live.staticflickr.com/65535/49640220927_7a6115ddf1_b.jpg');"></button>
</div>
<div class="prevFooter"></div>
<footer>
<p class="miniText"> ©Defectum studio</p>
</footer>
</body>
</html>

143
site/style/background.css Normal file
View File

@@ -0,0 +1,143 @@
header{
position: fixed;
margin: 0 auto;
left: 0;
top: 0;
height: calc(var(--boxHeight) * 1.5);
width: 100%;
z-index: 2;
background-color: var(--headerBoxColor);
overflow: hidden;
}
.postHeader{
position: fixed;
margin: 0 auto;
left: 0;
top: 0;
margin-top: calc(var(--boxHeight) * 1.5);
height: calc(var(--boxHeight) * 0.2);
width: 100%;
z-index: 2;
background-color: var(--postHeaderBoxColor);
overflow: hidden;
}
body{
background-color: var(--bodyBoxColor);
}
.vologdaDescription{
position:relative;
left: calc(100% - (50% + var(--blockSize)/2));
margin-top: calc(var(--boxHeight) * 2.2);
width: var(--blockSize);
height: calc(var(--boxHeight) * 2.8);
text-align: center;
background-color: var(--vologdaBoxColor);
border-radius: 1vw;
overflow: hidden;
}
.vologdaInterestingPlace{
position:relative;
left: calc(100% - (50% + var(--blockSize)/2));
width: var(--blockSize);
margin-top: 6vw;
height: calc(var(--boxHeight) * 9);
text-align: center;
background-color: var(--vologdaBoxColor);
border-radius: 1vw;
overflow: hidden;
}
.vologdaMap{
position:relative;
left: calc(100% - (50% + var(--blockSize)/2));
margin-top: var(--vologdaBoxMargin);
width: var(--blockSize);
height: calc(var(--boxHeight) * 8);
text-align: center;
background-color: var(--vologdaBoxColor);
overflow: hidden;
-moz-border-radius: 1vw 1vw 1vw 1vw; /* Firefox */
-webkit-border-radius: 1vw 1vw 1vw 1vw; /* Safari, Chrome */
-khtml-border-radius: 1vw 1vw 1vw 1vw; /* KHTML */
border-radius: 1vw 1vw 1vw 1vw; /* CSS3 */
}
.vologdaPlace{
position:relative;
left: calc(100% - (50% + var(--blockSize)/2));
margin-top: var(--vologdaBoxMargin);
width: var(--blockSize);
height: calc(var(--boxHeight) * 5);
text-align: center;
background-color: var(--vologdaBoxColor);
border-radius: 1vw;
overflow: hidden;
}
.prevFooter{
position:relative;
margin: auto;
margin-top: calc(var(--boxHeight) * 1.5);
border-bottom-right-radius: 1vw;
border-bottom-left-radius: 1vw;
height: calc(var(--boxHeight) * 0.4);
width: 70%;
background-color: var(--postHeaderBoxColor);
overflow: hidden;
}
footer{
position:relative;
margin: auto;
height: calc(var(--boxHeight) * 1);
width: 70%;
border-radius: 1vw;
background-color: var(--headerBoxColor);
overflow: hidden;
}
:root {
--headerBoxColor:rgb(177, 250, 250);
--postHeaderBoxColor:rgb(175, 238, 238);
--bodyBoxColor:rgb(255, 255, 255);
--vologdaBoxMargin: 6vw;
--blockSize: 40vw;
--vologdaBoxColor: rgb(177, 250, 250);
--boxHeight: 3.1vw;
}
@media screen and (max-width: 980px) {
:root {
--vologdaBoxMargin: 12vw;
--blockSize: 80vw;
--boxHeight: 6.2vw;
}
}

76
site/style/backgroundEffect.css Normal file
View File

@@ -0,0 +1,76 @@
.snowflake {
color: #757575;
font-size: 1em;
font-family: 'Sometype Mono', monospace;
position: fixed;
top: -10%;
user-select: none;
cursor: default;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
z-index: -1;
}
.snowflake:nth-of-type(0) {
left: 1%;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
animation-delay: 6s, .5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
}
@keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}

39
site/style/buttonStyle.css Normal file
View File

@@ -0,0 +1,39 @@
.image-button {
width: calc(10vw * var(--sizeButton));
height: calc(10vw * var(--sizeButton));
border: none;
background-size: cover;
border-radius: calc(0.3vw * var(--sizeButton));
}
.image-button:hover {
opacity: 0.8;
}
.image-button:active .overlay {
transform: scale(0.95);
}
.image-button-margin {
margin-top: calc(2vw * var(--sizeButton));
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Настройка цвета и прозрачности для блока с заголовком */
transition: background 0.5s ease;
}
:root {
--sizeButton: 1;
}
@media screen and (max-width: 980px) {
:root {
--sizeButton: 2;
}
}

31
site/style/textFont.css Normal file
View File

@@ -0,0 +1,31 @@
.normalText {
font-size: var(--textSize);
font-family: 'Sometype Mono', monospace;
color: rgb(0, 0, 0);
}
.titleText {
font-size: calc(var(--textSize) + (var(--textSize) * 0.3));
font-family: 'Sometype Mono', monospace;
text-align: left;
margin-left: 3vw;
color: rgb(0, 0, 0);
}
.miniText {
font-size: calc(var(--textSize) * 0.9);
font-family: 'Sometype Mono', monospace;
color: rgb(0, 0, 0);
}
:root {
--textSize: 1vw;
}
@media screen and (max-width: 980px) {
:root {
--textSize: 2vw;
}
}

BIN
site/Макет.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 552 KiB

BIN
site/Прототип.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB