adaptive_1
This commit is contained in:
@@ -66,7 +66,16 @@ img {
|
||||
}
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.items_up {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.items_down {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.item {
|
||||
color: #e7b15c;
|
||||
@@ -86,6 +95,132 @@ img {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* BURGER */
|
||||
.burger {
|
||||
display: none;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.burger span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #e7b15c;
|
||||
border-radius: 5px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
/* 3 полоски */
|
||||
.burger span:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
.burger span:nth-child(2) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.burger span:nth-child(3) {
|
||||
bottom: 0;
|
||||
}
|
||||
.burger.active span:nth-child(1) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.burger.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.burger.active span:nth-child(3) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* MOBILE MENU */
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
width: 10%;
|
||||
border-radius: 10px;
|
||||
margin-left: 40px;
|
||||
box-shadow: #444 2px 2px 4px 0px;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0; /* ВАЖНО */
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
background: rgba(102, 60, 36, 0.97);
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transform: translateY(-100%);
|
||||
transition: 0.5s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.nav::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4));
|
||||
}
|
||||
|
||||
.menu {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* красивый hover эффект */
|
||||
.link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -5px;
|
||||
width: 0%;
|
||||
height: 2px;
|
||||
background: #e7b15c;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------Welcome----------------------------- */
|
||||
|
||||
.heading {
|
||||
@@ -181,6 +316,7 @@ h4 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.newlywed {
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
@@ -206,10 +342,11 @@ h4 {
|
||||
width: 60%;
|
||||
}
|
||||
.newlywed_title {
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
text-decoration:underline;
|
||||
line-height: 1.5;
|
||||
font-size: 29px;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.newlywed_info {
|
||||
font-size: 26px;
|
||||
@@ -331,6 +468,7 @@ h4 {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.transfer_map {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -338,17 +476,25 @@ h4 {
|
||||
}
|
||||
.map > div {
|
||||
border: 1px solid #000;
|
||||
width: 760px; /* или 100% */
|
||||
height: 500px;
|
||||
}
|
||||
.map iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
.map_adress {
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
margin-top: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.map_info {
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.map_time {
|
||||
font-size: 50px;
|
||||
@@ -360,7 +506,7 @@ h4 {
|
||||
/* --------------------------------PHOTOS-------------------------------------- */
|
||||
.photos {
|
||||
padding-bottom: 140px;
|
||||
margin: 0 auto;
|
||||
margin: 0 60px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
.photos_title {
|
||||
@@ -371,10 +517,12 @@ h4 {
|
||||
border: 5px dotted #000;
|
||||
}
|
||||
.swiper {
|
||||
width: 95%;
|
||||
height: 550px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 550px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin: 0px auto;
|
||||
overflow: hidden !important; /* возвращаем скрытие слайдов */
|
||||
}
|
||||
.swiper-wrapper {
|
||||
width: 100%;
|
||||
@@ -385,6 +533,13 @@ h4 {
|
||||
.swiper-navigation-icon {
|
||||
color: #000;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: -10px !important;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: -10px !important;
|
||||
}
|
||||
|
||||
/* --------------------------------------------TODOLIST------------------------------------------------------ */
|
||||
|
||||
@@ -573,8 +728,9 @@ textarea {
|
||||
gap: 5px;
|
||||
}
|
||||
.fotter_logo {
|
||||
font-size: 42px;
|
||||
text-decoration: underline;
|
||||
font-size: 42px;
|
||||
text-decoration: underline;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.footer_date {
|
||||
font-size: 36px;
|
||||
@@ -615,7 +771,195 @@ textarea {
|
||||
.footer_hashtag {
|
||||
text-decoration: underline;
|
||||
font-size: 36px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.footer_copyright {
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------------ADAPTIVE------------------------------------------------------ */
|
||||
|
||||
/* обычные экраны */
|
||||
@media (max-width: 1720px) {
|
||||
.item {
|
||||
font-size: 30px;
|
||||
}
|
||||
.map > div {
|
||||
width: 680px;
|
||||
height: 450px;
|
||||
}
|
||||
.heading {
|
||||
margin: 0 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1620px) {
|
||||
.row_up_item {
|
||||
width: 350px;
|
||||
}
|
||||
.time_img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.time_h6 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.time_p {
|
||||
font-size: 26px;
|
||||
}
|
||||
.time_comment {
|
||||
font-size: 22px;
|
||||
}
|
||||
.img_newlywed {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
.heading {
|
||||
margin: 0 300px;
|
||||
height: 580px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1520px) {
|
||||
.menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
.items_up,
|
||||
.items_down {
|
||||
justify-content: center;
|
||||
gap: 100px;
|
||||
}
|
||||
.heading_content {
|
||||
padding: 15px 60px;
|
||||
}
|
||||
.heading {
|
||||
margin: 0 280px;
|
||||
}
|
||||
.time {
|
||||
font-size: 90px;
|
||||
}
|
||||
.transfer_map {
|
||||
gap: 50px;
|
||||
}
|
||||
.map > div {
|
||||
width: 620px;
|
||||
height: 420px;
|
||||
}
|
||||
.form_name {
|
||||
font-size: 30px;
|
||||
width: 430px;
|
||||
}
|
||||
.block_title {
|
||||
font-size: 30px;
|
||||
}
|
||||
.form_name input[type="text"] {
|
||||
width: 300px;
|
||||
}
|
||||
.answer_btn {
|
||||
font-size: 30px;
|
||||
}
|
||||
.to-do-list_items {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1420px) {
|
||||
.heading {
|
||||
margin: 0 250px;
|
||||
}
|
||||
.newlywed {
|
||||
width: 50%;
|
||||
}
|
||||
.row_up_item {
|
||||
width: 300px;
|
||||
}
|
||||
.time_comment {
|
||||
font-size: 20px;
|
||||
}
|
||||
.time_p {
|
||||
font-size: 22px;
|
||||
}
|
||||
.time_img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.map > div {
|
||||
width: 560px;
|
||||
height: 400px;
|
||||
}
|
||||
.map_adress {
|
||||
font-size: 30px;
|
||||
}
|
||||
.map_info {
|
||||
font-size: 35px;
|
||||
}
|
||||
.map_time {
|
||||
font-size: 40px;
|
||||
}
|
||||
.form-info {
|
||||
display: block;
|
||||
grid: none;
|
||||
}
|
||||
.form_name {
|
||||
width: 100%;
|
||||
padding: 0 140px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form_menu,
|
||||
.form_drink {
|
||||
padding: 0 140px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.newlywed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.newlywed_text {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.people {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1320px){
|
||||
.heading {
|
||||
height: 480px;
|
||||
}
|
||||
.time {
|
||||
font-size: 70px;
|
||||
}
|
||||
.newlywed_info {
|
||||
font-size: 24px;
|
||||
}
|
||||
.form_name {
|
||||
padding: 0 80px;
|
||||
}
|
||||
.form_menu, .form_drink {
|
||||
padding: 0 80px;
|
||||
}
|
||||
.newlywed_info {
|
||||
font-size: 22px;
|
||||
}
|
||||
.map > div {
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
}
|
||||
.heading {
|
||||
margin: 0 200px;
|
||||
}
|
||||
.to-do-list_items {
|
||||
width: 80%;
|
||||
}
|
||||
.img_newlywed {
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1220px){
|
||||
.heading {
|
||||
margin: 0 160px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user