Version 1
This commit is contained in:
Петухова Ростислава
@@ -41,55 +41,67 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--HEADER -->
|
||||||
<header>
|
<header>
|
||||||
<p class="titleText">Вологда путешествия</p>
|
<p class="titleText">Вологда путешествия</p>
|
||||||
</header>
|
</header>
|
||||||
<div class="postHeader"></div>
|
<div class="postHeader"></div>
|
||||||
|
|
||||||
|
<!--VOLOGDA DESCRIPTION-->
|
||||||
<div class="vologdaDescription">
|
<div class="vologdaDescription">
|
||||||
<p class="normalText">Вологда – город, которые многие называют душой Русского Севера. Это родина вологодского масла и вологодского кружева, столица Опричнины и кладезь исторических достопримечательностей. Это город древний – с девятивековой историей, богатый – с более чем двумястами памятниками культуры и архитектуры, самобытный и живописный.</p>
|
<p class="normalText">Вологда – город, которые многие называют душой Русского Севера. Это родина вологодского масла и вологодского кружева, столица Опричнины и кладезь исторических достопримечательностей. Это город древний – с девятивековой историей, богатый – с более чем двумястами памятниками культуры и архитектуры, самобытный и живописный.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--ATTRACTIONS-->
|
||||||
<div id="mymap" class="vologdaMap">
|
<div id="mymap" class="vologdaMap">
|
||||||
<p class="titleText">Достопримечательности вологды</p>
|
<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>
|
||||||
|
|
||||||
<div class="vologdaPlace">
|
<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>
|
<p class="titleText">Места которые стоит посетить в первую очередь</p>
|
||||||
<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 class="button-grid">
|
||||||
|
<div>
|
||||||
|
<a href="https://yandex.ru/profile/1013241328?no-distribution=1&source=wizbiz_new_map_single&ysclid=lo71yg4axi242363857"><button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/1909414/2a0000016ae3289d21e668710123484a2ba4/XXXL');"></button></a>
|
||||||
|
<p class="normalText">Музей заповедник</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<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');"></button></a>
|
||||||
|
<p class="normalText">Памятник букве О</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a href="https://yandex.ru/maps/org/kosmonavtu_p_i_belyayevu/72397562391/?ll=39.876151%2C59.219917&z=17"><button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/9663145/2a00000189fcf8d098873379888732ea442f/XXXL');"></button></a>
|
||||||
|
<p class="normalText">Парк заповедник</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a href="https://yandex.ru/profile/223457860077"><button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/5099617/2a000001827c21670f508af692362e7074a5/XXXL');"></button></a>
|
||||||
|
<p class="normalText">Бульвар Пирогова</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<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');"></button></a>
|
||||||
|
<p class="normalText">Кремлёвский сад</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a href="https://yandex.ru/maps/org/kosmonavtu_p_i_belyayevu/72397562391/?ll=39.876151%2C59.219917&z=17"><button class="image-button" style="background-image: url('https://avatars.mds.yandex.net/get-altay/4336337/2a0000017758c929f9c648c203c32557b43a/XXXL');"></button></a>
|
||||||
|
<p class="normalText">Парк заповедник</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vologdaPlace">
|
<!--RESTAURANTS-->
|
||||||
<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>
|
<!--FOOTER-->
|
||||||
<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>
|
<footer>
|
||||||
<p class="miniText"> ©Defectum studio</p>
|
<div class="prevFooter"></div>
|
||||||
|
<div class = "postFooter">
|
||||||
|
<p class="miniText"> ©Defectum studio</p>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -23,6 +23,9 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
|
border-bottom-right-radius: 1vw;
|
||||||
|
border-bottom-left-radius: 1vw;
|
||||||
|
|
||||||
background-color: var(--postHeaderBoxColor);
|
background-color: var(--postHeaderBoxColor);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -46,13 +49,13 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vologdaInterestingPlace{
|
.vologdaPlace{
|
||||||
position:relative;
|
position:relative;
|
||||||
left: calc(100% - (50% + var(--blockSize)/2));
|
left: calc(100% - (50% + var(--blockSize)/2));
|
||||||
|
|
||||||
width: var(--blockSize);
|
width: var(--blockSize);
|
||||||
margin-top: 6vw;
|
margin-top: 6vw;
|
||||||
height: calc(var(--boxHeight) * 9);
|
height: calc(var(--boxHeight) * 10);
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@@ -80,43 +83,31 @@
|
|||||||
border-radius: 1vw 1vw 1vw 1vw; /* CSS3 */
|
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{
|
footer{
|
||||||
position:relative;
|
position:relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: calc(var(--boxHeight) * 1);
|
|
||||||
|
margin-top: calc(var(--boxHeight) * 1.5);
|
||||||
width: 70%;
|
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);
|
background-color: var(--headerBoxColor);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
.image-button {
|
||||||
width: calc(10vw * var(--sizeButton));
|
width: calc(10vw * var(--sizeButton));
|
||||||
height: calc(10vw * var(--sizeButton));
|
height: calc(10vw * var(--sizeButton));
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-radius: calc(0.3vw * var(--sizeButton));
|
border-radius: calc(0.3vw * var(--sizeButton));
|
||||||
@@ -14,10 +24,6 @@
|
|||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-button-margin {
|
|
||||||
margin-top: calc(2vw * var(--sizeButton));
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -25,7 +31,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.5); /* Настройка цвета и прозрачности для блока с заголовком */
|
background: rgba(0, 0, 0, 0.5); /* Настройка цвета и прозрачности для блока с заголовком */
|
||||||
transition: background 0.5s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|||||||
Reference in New Issue
Block a user