PIbd-21_Shanygin_A.V/laba3/css/style.css
2023-12-11 16:49:10 +03:00

171 lines
2.7 KiB
CSS

body{
font-family: 'Inter', sans-serif;
background-color: #BFE3FF;
}
.main{
background-image:url('../img/Intro_img.jpg');
background-repeat: no-repeat;
background-size:cover;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
margin-top: 124px;
}
.intro_wrapper{
display: flex;
justify-content: right;
min-height: 240px;
}
.intro_block{
width: 553px;
}
.intro_title{
font-size: 60px;
font-weight: 700;
margin: 0 0 29px 0;
}
.intro_text{
font-size: 20px;
margin: 0;
}
.footer{
background-color: #D7DDE1;
height: 57px;
display:flex;
align-items: center;
}
.footer_wrapper{
display: flex;
align-items: center;
justify-content: space-between;
}
.nav_foot{
margin-right: 8px;
text-decoration: none;
}
.mail_line_phone{
font-size: 20px;
font-weight: 400;
color: #000000;
text-decoration: none;
margin-left: 31px;
margin-bottom: -5px;
transition: color .2s ease;
}
.mail_line_phone:first-child{
margin-left: 0;
}
.mail_line_phone:hover{
color:gray;
}
@media (max-width:768px){
.intro_wrapper{
justify-content: center;
}
.intro_block{
width: 400px;
color: #D3C9AE;
}
.intro_title{
font-size: 45px;
}
.intro_text{
font-size: 16px;
}
.footer{
height: 80px;
}
.footer_wrapper{
display: block;
}
.nav_mail_line_phone{
margin-top: 10px;
}
}
@media (max-width:473px){
.nav_mail_line_phone{
margin-top: 10px;
}
.mail_line_phone{
font-size: 16px;
}
}
@media (max-width:450px){
.intro_title{
font-size: 30px;
}
.intro_text{
font-size: 10px;
}
}
@media (max-width:397px){
.intro_block{
width: 300px;
color: #D3C9AE;
}
.intro_title{
font-size: 35px;
}
.intro_text{
font-size: 13px;
}
.mail_line_phone{
margin-left: 0;
}
}
@media (max-width:334px){
.mail_line_phone{
display: flex;
flex-direction: column;
}
#line{
display: none;
}
}
@media (max-width:300px){
.intro_block{
width: 200px;
color: #D3C9AE;
}
.intro_title{
font-size: 35px;
}
.intro_text{
font-size: 13px;
}
}
@media (max-width:240px){
.intro_block{
width: 200px;
color: #D3C9AE;
}
.intro_title{
font-size: 35px;
}
.intro_text{
font-size: 13px;
}
}
@media (max-height:450px){
.intro_block{
margin-top: 50px;
}
.intro_title{
font-size: 30px;
}
.intro_text{
font-size: 10px;
}
}