Site

commit aa6b520cebcd1d64d25bef9b5f9ac5e13397aef6 Author: Петухова Ростислава Date: Tue Oct 31 14:48:45 2023 +0300 first commit diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..1347384 --- /dev/null +++ b/site/index.html @@ -0,0 +1,95 @@ + + + + + + + + + Site + + + + +

+ В ВОЛОГДЕ ВКУСНОЕ МОЛОКО ! +

+ ВОЛОГДА СУПЕР ! +

+ ГДЕ ? В ВОЛОГДЕ ! +

+ КРУЖЕВА ПРОСТО КЛАСС ! +

+ МАСЛО ЛУЧШЕЕ ! +

+ В ВОЛОГДЕ КЛАСС ! +

+ В ВОЛОГДЕ ПРЕКРАСНО! +

+ ВОЛОГДА СУПЕР ! +

+ ВОЛОГДА! +

+ +

Вологда путешествия

+ +

Вологда – город, которые многие называют душой Русского Севера. Это родина вологодского масла и вологодского кружева, столица Опричнины и кладезь исторических достопримечательностей. Это город древний – с девятивековой историей, богатый – с более чем двумястами памятниками культуры и архитектуры, самобытный и живописный.

+ +

Достопримечательности вологды

+ +

Места которые стоит посетить

+ + + + +

+ + + +

+ +

Памятники деревенного зодчества

+ + + +

+ +

Каменная архитектруа вологды

+ + + +

+ +

Места для развлеченний

+ + + +

+ +

+ + + \ No newline at end of file diff --git a/site/style/background.css b/site/style/background.css new file mode 100644 index 0000000..e89098e --- /dev/null +++ b/site/style/background.css @@ -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; + } + } \ No newline at end of file diff --git a/site/style/backgroundEffect.css b/site/style/backgroundEffect.css new file mode 100644 index 0000000..d81dbb6 --- /dev/null +++ b/site/style/backgroundEffect.css @@ -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%; + } + } + \ No newline at end of file diff --git a/site/style/buttonStyle.css b/site/style/buttonStyle.css new file mode 100644 index 0000000..f20fd25 --- /dev/null +++ b/site/style/buttonStyle.css @@ -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; + } + } \ No newline at end of file diff --git a/site/style/textFont.css b/site/style/textFont.css new file mode 100644 index 0000000..a6b326f --- /dev/null +++ b/site/style/textFont.css @@ -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; + } + } \ No newline at end of file diff --git a/site/Макет.png b/site/Макет.png new file mode 100644 index 0000000..ca6a67a Binary files /dev/null and b/site/Макет.png differ diff --git a/site/Прототип.png b/site/Прототип.png new file mode 100644 index 0000000..c55d48b Binary files /dev/null and b/site/Прототип.png differ