Afanasev_Stepan_PIbd-21_IP/ИП 2 лаба/css/style.css

593 lines
10 KiB
CSS
Raw Permalink Normal View History

2024-01-10 16:11:49 +04:00
:root{
--color1: #FFE2B8;
--color2: #99A2F7;
--color3: #000000;
--color4: #FFFFFF;
--color5: #C4C9FD;
--color6: #F7B965;
--color7: #ED6772;
--color8: #CCD9FC;
--color9: #AD37F9;
--color10: rgba(0, 0, 0, 0.50);
--color11: #FFF3E0;
--color12: #EF844C;
--color13: #F1D454;
--color14: #98A2F7;
--color15: #333D8F;
--color16: #4277FD;
}
@font-face {
font-family: "Mulish";
src: url("../font/Mulish-Regular.ttf") format("truetype");
font-style: normal;
color: var(--color3);
font-weight: normal;
}
@font-face {
font-family: "Inter";
src: url("../font/Inter-Regular.ttf") format("truetype");
font-style: normal;
color: var(--color3);
font-weight: normal;
}
body {
background-image: url("../img/Fon-romb.png");
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
body, html {
width: 100%;
height: 100%;
}
/*Header*/
.navbar-nav li {
border: none;
font-weight: 600;
}
.nav-link {
font-family: "Mulish";
white-space: nowrap;
font-size: 13px;
border-radius: 17px;
font-weight: 600;
}
.menu1{
margin-top: 10px;
background-color: var(--color2) !important;
border-radius: 15px;
}
.nav-link:hover {
transition: 1s;
opacity: 0.8;
background: var(--color5);
}
nav.navbar{
background-color: var(--color1) !important;
}
.navv{
display: flex;
justify-content: flex-end;
}
.nav-item i {
font-size: 1.5rem;
}
@media (max-width: 991px) {
.nav-link {
background-color: transparent;
border-radius: 0;
font-style: normal;
}
}
@media (max-width: 991px) {
.navv {
display:block;
justify-content:center;
}
}
/*Footer*/
footer{
background-color: var(--color1) !important;
}
.emaill{
display: flex;
}
.text1_emaill_{
font-family: "Mulish";
font-size: 20px;
font-weight: 600;
line-height: normal;
}
.callme{
display: flex;
padding-top: 28px;
}
.text1_callme_{
font-family: "Mulish";
font-size: 15px;
font-weight: 600;
line-height: normal;
}
.text_1{
color: var(--color3);
font-family: "Mulish";
font-size: 30px;
font-weight: 700;
line-height: normal;
}
@media (max-width: 370px) {
.text1_emaill_{
font-size: 15px;
}
.text1_callme_{
font-size: 15px;
}
}
@media (max-width: 300px) {
.text_1{
font-size: 20px;
}
.text1_emaill_{
font-size: 12px;
}
.text1_callme_{
font-size: 15px;
}
}
@media (max-width: 250px) {
.text1_emaill_{
font-size: 8px;
}
.text1_callme_{
font-size: 13px;
}
}
/*Основной Блок*/
.color1{
color:var(--color3);
}
.text1_on{
display: flex;
justify-content: center;
margin-top: 170px;
}
.text1_on h2{
font-family: "Mulish";
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
background-color: var(--color7);
}
.text2_on{
display: flex;
justify-content: center;
}
.text2_on h2{
font-family: "Mulish";
font-size: 45px;
font-weight: 500;
background-color: var(--color6);
}
.text3_on h2{
font-family: "Inter";
font-size: 25px;
font-weight: 400;
}
.podgotovka3{
display: flex;
justify-content: center;
margin-top: 60px;
}
.but1{
white-space: nowrap;
background-color: var(--color3);
border-radius: 5px;
text-decoration: none;
color: var(--color4);
font-family: "Mulish";
font-size: 25px;
font-weight: 800;
padding: 18px;
}
.but2{
white-space: nowrap;
background-color: var(--color4);
border-radius: 5px;
text-decoration: none;
color: var(--color3);
border:1px solid var(--color3);
font-family: "Mulish";
font-size: 25px;
font-weight: 800;
padding: 20px;
}
.but1:hover{
border:1px solid var(--color3);
background-color: var(--color2);
color: var(--color3);
transition: 1s;
}
.but2:hover{
background-color: var(--color2);
color: var(--color4);
transition: 1s;
}
.teach img{
margin-top: 50px;
}
@media (max-width: 1201px) {
.teach {
display: flex;
justify-content: center;
}
}
@media (max-width: 576px) {
.teach {
display: none;
}
.podgotovka3{
flex-wrap: wrap;
}
.but1{
white-space: wrap;
}
.but2{
margin-top: 10px;
white-space: wrap;
}
.text1_on h2{
font-size: 30px;
}
.text2_on h2{
font-size: 30px;
}
}
@media (max-width: 250px) {
.text1_on h2{
font-size: 20px;
}
}
/*Характеристика*/
.data{
padding-top: 60px;
}
.podgotovka4_1{
display: flex;
justify-content: center;
}
.podgotovka4{
border: 1px solid var(--color3);
border-radius: 20px;
}
.text1_da{
font-family: "Inter";
font-size: 50px;
font-weight: 500;
padding-top: 30px;
}
.text2_da{
font-family: "Inter";
font-size: 20px;
font-weight: 400;
}
/*Направление подготовки*/
.podgotovka5{
padding-top: 135px;
display: flex;
justify-content: center;
}
.text1_nap{
font-family: "Mulish";
font-size: 50px;
font-weight: 700;
line-height: normal;
background-color: var(--color6);
width: 840px;
}
.podgotovka6{
padding-top: 100px;
padding-left: 110px;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 10px;
margin-right: 150px;
}
.text2_nap{
font-family: "Inter";
font-size: 35px;
font-weight: 500;
line-height: normal;
padding-left: 10px;
}
.Num11:hover{
background-color: var(--color2);
border-radius: 20px;
transition: 0.8s;
padding:0px;
}
.Num11 a{
margin-left: 30px;
padding-right: 50px;
}
.num9 a{
padding-right: 50px;
margin-left: 50px;
}
.Num11.num9:hover{
padding: 0px;
}
@media (max-width: 1401px) {
.podgotovka6{
padding-left: 15px;
}
.Num11 a{
margin-left: 30px;
padding-right: 50px;
}
.Num11:hover{
padding:0px;
}
.num9 a{
padding-right: 50px;
margin-left: 50px;
}
.Num11.num9:hover{
padding: 0px;
}
}
@media (max-width: 1201px) {
.podgotovka6{
padding-left: 0px;
}
.Num11 a{
padding-left: 0px;
padding-right: 10px;
}
.Num11:hover{
padding:0px;
}
.num9 a{
padding-right: 30px;
margin-left: 30px;
}
.Num11.num9:hover{
padding: 0px;
}
}
@media (max-width: 991px) {
.podgotovka6{
display: block;
margin-left: 100px;
}
.podgotovka6 img{
margin-left: 60px;
}
.Num11 a{
margin-left: 20px;
}
.Num11:hover{
padding:0px;
}
.num9 a{
margin-left: 80px;
}
.Num11.num9:hover{
padding: 0px;
}
}
@media (max-width: 768px) {
.podgotovka6{
margin-left: 0px;
}
.Num11 a{
margin-left: 20px;
}
.Num11:hover{
padding:0px;
}
.num9 a{
margin-left: 80px;
}
.Num11.num9:hover{
padding: 0px;
}
}
@media (max-width: 495px) {
.podgotovka6{
padding-right: 0;
}
.podgotovka6 img{
display: none
}
.text1_nap{
font-size: 25px;
}
.text2_nap{
font-size: 33px;
padding-bottom:20px;
}
}
/*Отправить заявку*/
.zapisi{
padding-top: 150px;
}
.zapis{
display: flex;
justify-content: center;
background-color: var(--color4);
padding: 30px 40px 47px 40px;
border-radius: 20px;
}
.osnova{
background-color: var(--color8);
border-radius: 20px;
}
.zap{
font-family: "Inter";
}
.obvodka{
display: flex;
}
.text1_zap{
font-size: 55px;
font-weight: 600;
line-height: 60px;
background-color: var(--color9);
}
.text2_zap{
font-size: 55px;
font-weight: 600;
line-height: 60px;
}
.text3_zap{
padding-top: 67px;
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.text4_zap{
padding-top: 124px;
font-size: 25px;
font-weight: 400;
line-height: 30px;
}
/*Поля для ввода*/
.Names{
padding-top: 94px;
}
.text1_name{
margin: 0;
font-family: "Inter";
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.Number{
padding-top: 20px;
}
.text1_number{
margin: 0;
font-family: "Inter";
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.Mail{
padding-top: 20px;
}
.text1_mail{
margin: 0;
font-family: "Inter";
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.Zaivka{
padding-top: 69px;
padding-bottom: 20px;
}
.zaivka_pole{
border-radius: 10px;
background-color: var(--color3);
display: flex;
justify-content: center;
padding: 10px;
text-align: center;
}
.text1_zaivka_{
color: var(--color4);
text-decoration:none;
font-family: "Inter";
font-size: 25px;
font-weight: 500;
line-height: 30px;
}
.zaivka_pole:hover{
border:0px solid var(--color3);
background-color: var(--color7);
color: var(--color4);
transition: 1s;
}
@media (max-width: 1201px) {
.pochta{
margin: 0 auto;
}
.pochta2{
margin: 0 auto;
text-align: center;
}
.pochta2 h2{
margin: 0 auto;
}
.pochta3{
margin: 0 auto;
}
}
@media (max-width: 495px) {
.text1_zap{
font-size: 45px;
}
.text2_zap{
font-size: 40px;
}
}
@media (max-width: 495px) {
.text1_zap{
font-size: 45px;
}
.text2_zap{
font-size: 40px;
}
}
@media (max-width: 400px) {
.text1_zap{
font-size: 25px;
}
.text2_zap{
font-size: 20px;
font-weight: 900;
}
}
@media (max-width: 300px) {
.text1_zap{
font-size: 15px;
}
.text2_zap{
font-size: 15px;
}
.pochta{
padding: 0;
}
.pochta2{
padding: 0;
}
.pochta3{
display: none;
}
.text3_zap{
font-size: 15px;
}
.text4_zap{
font-size: 15px;
}
}