From 648dba0a503e57b7a74f00a5777273bb39e31b28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=B5=D1=82=D1=83=D1=85=D0=BE=D0=B2=D0=B0=20=D0=A0?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=D0=B0?= Date: Tue, 31 Oct 2023 17:55:16 +0300 Subject: [PATCH] Version 1 --- site/index.html | 78 ++++++++++++++++++++++---------------- site/style/background.css | 57 ++++++++++++---------------- site/style/buttonStyle.css | 15 +++++--- 3 files changed, 79 insertions(+), 71 deletions(-) diff --git a/site/index.html b/site/index.html index 1347384..431588b 100644 --- a/site/index.html +++ b/site/index.html @@ -41,55 +41,67 @@ +

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

+

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

+
-

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

-
- -
-

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

- - - - -
- - - +

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

-

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

- - - + +

Места которые стоит посетить в первую очередь

+ +
+
+ +

Музей заповедник

+
+ +
+ +

Памятник букве О

+
+ +
+ +

Парк заповедник

+
+ +
+ +

Бульвар Пирогова

+
+ +
+ +

Кремлёвский сад

+
+ +
+ +

Парк заповедник

+
+
-
-

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

- - - -
- -
-

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

- - - -
- -
+ + + \ No newline at end of file diff --git a/site/style/background.css b/site/style/background.css index e89098e..2ba1eb1 100644 --- a/site/style/background.css +++ b/site/style/background.css @@ -23,6 +23,9 @@ width: 100%; z-index: 2; + border-bottom-right-radius: 1vw; + border-bottom-left-radius: 1vw; + background-color: var(--postHeaderBoxColor); overflow: hidden; } @@ -46,13 +49,13 @@ overflow: hidden; } - .vologdaInterestingPlace{ + .vologdaPlace{ position:relative; left: calc(100% - (50% + var(--blockSize)/2)); width: var(--blockSize); margin-top: 6vw; - height: calc(var(--boxHeight) * 9); + height: calc(var(--boxHeight) * 10); text-align: center; @@ -80,43 +83,31 @@ 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); + + margin-top: calc(var(--boxHeight) * 1.5); width: 70%; + } + + + .prevFooter{ + height: calc(var(--boxHeight) * 0.4); + + border-top-right-radius: 1vw; + border-top-left-radius: 1vw; + background-color: var(--postHeaderBoxColor); + } + + .postFooter{ + height: calc(var(--boxHeight) * 1); - border-radius: 1vw; + border-bottom-right-radius: 1vw; + border-bottom-left-radius: 1vw; background-color: var(--headerBoxColor); + + text-align: center; overflow: hidden; } diff --git a/site/style/buttonStyle.css b/site/style/buttonStyle.css index f20fd25..54a9c10 100644 --- a/site/style/buttonStyle.css +++ b/site/style/buttonStyle.css @@ -1,6 +1,16 @@ + + .button-grid { + display: grid; + display: grid; + grid-template-columns: 2fr 0.1fr 2fr; + grid-template-rows: calc(11vw * var(--sizeButton)) calc(11vw * var(--sizeButton)) calc(11vw * var(--sizeButton)); + grid-gap: calc(2vw * var(--sizeButton)); + } + .image-button { width: calc(10vw * var(--sizeButton)); height: calc(10vw * var(--sizeButton)); + border: none; background-size: cover; border-radius: calc(0.3vw * var(--sizeButton)); @@ -14,10 +24,6 @@ transform: scale(0.95); } - .image-button-margin { - margin-top: calc(2vw * var(--sizeButton)); - } - .overlay { position: absolute; top: 0; @@ -25,7 +31,6 @@ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); /* Настройка цвета и прозрачности для блока с заголовком */ - transition: background 0.5s ease; } :root {