main.css - master - SonyaAlina/Site

main.css
608 строк10 KB
SonyaAlina
upload files
03 фев 2025, 23:22
03 фев 2025, 23:226dd353f
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 5px;
    padding: 0;
}

body {
    font-family: "Montserrat", serif;
    font-weight: 600;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.wrapper {
    background-color: (#FFFFFF);
    width: 100%;
    height: 70%;

}

.container{
    width: 1440px;
    margin: 0 auto;
}

header {
    padding: 50px 0;
}

header span img {
    width: 180px;
    height: 40px;
    padding-left: 50px;

}

header .logo {
    text-transform: uppercase;
}

header nav {
    float: right;
    width: 40%;
    position: relative;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

header nav ul li {
    display: inline-block;
}

header nav ul li a {
    color: #2F2F2F;
    width: 600;
    size: 14px;
}

.lang {
display: block;

}
.lang .active {
     position: absolute;
    padding-left: 40px;
}
.lang .active ::after {
    content: "";
    display:block;
    width: 19px;
    height: 2px;
    background: #2F2F2F;
    border-radius: 10px;
    
}

.catalog {
    padding-bottom: 10px;
    padding-left: 57px;
    position: relative;
}

header2 nav {
    float:left;
    
}

header2 nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

header2 nav ul li {
    display: inline-block;
}

header2 nav ul li a {
    color: #000000;
    font-weight: 500;
    size: 14px;
    padding: 24px 18px;
    border-radius: 1px #AFAFAF;
}

header2 nav ul li:not(active2) a:hover {
    border: 1px solid #4B2EC8;
    padding: Top 18px Right 24px Bottom 18px Left 24px;
    
}

header2 nav ul li a{
    padding: 24px 18px;
    border-radius: 50px;

}

header2 nav ul li a{
    padding: 24px 18px;
    border: 1px solid #AFAFAF;
}

header2 nav ul li.active2::after{
    content: "";
    display: block;
    border-radius: 2px solid #4B2EC8;
}

.hero {
    padding-bottom: 10px;
    position: relative;
    Width: 880px;
    Height:1055px;
    border-radius: 30px;
}

.hero--info {
    width: 621px;
    Height: 240px;
}
.hero--info2 {
    width: 700px;
    Height: 259px;
    position: relative;
    z-index: 2;
    padding-top: 800;
}

.hero--info2 img {
    padding-left: 80px;
    position: absolute;
z-index: -1;
top: -210px

}

.hero--info3 .btn {
width: 56px;
height: 56px;
    z-index: 2;
border: none;
top: 300px;
padding-right: 40px;
}

.hero--info img {
    position: absolute;
    z-index: 1;
    top: -77px;
    left: -5px;
}

.hero--info3{
    top: 100px;
}
.hero--info3 img {
    
    height: 208px;
    padding-top: 79px;
    left: -50px;
}

.hero--info2 .first {
    width: 387px;
    Height: 448px;
    position: absolute;
    justify-content:flex-start;
    padding-left: 950px;
   float: right;

}

.guy {
    position: absolute;
    padding-top: -100px;
}


.firsttext {
    padding-left: 955px;
    justify-content:flex-start;
    padding-top: 240px;
    position: absolute;
    Width: 387px;
Height: 96px;
font-size: 24px;
font-weight: 500;
}

.firstbtn {
    padding-left: 1160px;
    justify-content:flex-start;
    top: 360px;
    position: absolute;
}

.second {
    width: 400px;
    Height: 448px;
    position: absolute;
    justify-content:flex-start;
    left: 860px;
   float: right;
   padding-top: 575px;
}

.secondtext {
    padding-left: 955px;
    justify-content:flex-start;
    top: 825px;
    position: absolute;
    Width: 387px;
Height: 96px;
font-size: 24px;
font-weight: 500;
}

.horizontal {
    Width: 1199px;
Height: 562px;
Top: 1516px;
Left: 121px;
justify-content: space-between;
display: flex;
padding-bottom: 150px;
}

.therd {
    position: absolute;
    Width: 387px;
    Height: 448px;
    border-radius: 32px;
    padding-top: 125px;
    padding-left: 80px;
}

.therdbtn {
   top: 490px;
    padding-left: 289px;
    position: absolute;
}

.therdtext {
    Width: 387px;
    Height: 96px;
    font-size: 24px;
    font-weight: 500;  
    padding-left: 7px;
}

.fourth {
    position: absolute;
    Width: 387px;
    Height: 448px;
    border-radius: 32px;
    padding-top: 125px;
    padding-left: 515px;
    z-index: 1;
}

.fourthbtn {
    position: absolute;
    top: 490px;
     padding-left: 300px;
     width: 56px;
     height: 56px;
     z-index: 10;
 }

 .fiveth {
    position: absolute;
    Width: 387px;
    Height: 448px;
    border-radius: 32px;
    padding-top: 125px;
    padding-left: 950px;
    z-index: 1;

}

 .fivethbtn {
    position: absolute;
    top: 490px;
    width: 56px;
     height: 56px;
     padding-left: 1100px;
z-index: 10;
 }

 .three__content{ 
    width: 75%; 
  top: 75px;

    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
  } 
  .three{ 
    margin-top: 70px; 
    position: relative; 
    z-index: 12; 
  } 
  .three__background{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
   
    width: 100%; 
    height: 506px; 
   
    border-radius: 10px; 
    background-color: rgba(255, 255, 255, 1); 
    box-shadow: 0 0 20px 1px rgba(187, 184, 199, 0.15); 
  } 
  .three__left{ 
    width: 410px; 
  } 
  .three__title{ 
    font-size: 36px; 
    font-weight: 800; 
    line-height: 46.01px; 
    text-align: left; 
   
    color: rgba(47, 47, 47, 1); 
  } 
  .three__subtitle{ 
    font-size: 18px; 
    font-weight: 500; 
    line-height: 28px; 
    letter-spacing: 0.02em; 
    text-align: left; 
   
    color: rgba(107, 114, 128, 1); 
   
    margin: 22px 0 20px 0; 
  } 
  .three__subtitle span a{ 
    font-size: 18px; 
    font-weight: 600; 
    line-height: 24px; 
    letter-spacing: 0.04em; 
    text-align: left; 
   
   
    color: rgba(75, 46, 200, 1); 
  } 
   .four_subtitle {
    font-size: 18px; 
    font-weight: 500; 
    line-height: 28px; 
    letter-spacing: 0.02em; 
    text-align: left; 
   
    color: rgba(107, 114, 128, 1); 
   
    margin: 22px 0 20px 0;
   }
   .four_subtitle span a {
    font-size: 18px; 
    font-weight: 600; 
    line-height: 24px; 
    letter-spacing: 0.04em; 
    text-align: left; 
   
   
    color: rgba(75, 46, 200, 1); 
   }
  .three__right{ 
    width: 600px; 
   
    padding-left: 30px; 
  } 
   
  .input__containers{ 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
   
    height: 400px; 
  } 
  .input__container{ 
    position: relative; 
    width: 100%; 
  } 
  .input-name, .input-email, .input-phone, .input-description{ 
    width: 100%; 
    padding: 0px 6px; 
    font-size: 16px; 
    font-weight: 400; 
   
    height: 38px; 
    border-top: none; 
    border-right: none; 
    border-left: none; 
    border-bottom: 1px solid gray; 
    box-sizing: border-box; 
    color: rgba(107, 114, 128, 1); 
   
  } 
  .input--focus:hover{ 
    border-bottom: 1px solid rgba(75, 46, 200, 1); 
  } 
  .label, .label__description{ 
    position: absolute; 
    left: 6px; 
    bottom: 22px; 
   
    font-size: 14px; 
    font-weight: 500; 
    line-height: 20px; 
    letter-spacing: 0.02em; 
   
    color: rgba(134, 135, 137, 0.4); 
    pointer-events: none; 
    transition: 0.5s; 
  } 
  .label__description{ 
    bottom: 6px; 
  } 
  .input--focus:focus ~ label, 
  .input--focus:not(:placeholder-shown) ~ label { 
    top: -16px;  
    left: 0px; 
    font-size: 14px; 
    font-weight: 600; 
    color: rgba(75, 46, 200, 1); 
  } 
   
  .input--focus:focus{ 
    outline:none; 
   
    font-size: 14px; 
    font-weight: 500; 
    line-height: 20px; 
    letter-spacing: 0.02em; 
   
    color: rgba(107, 114, 128, 1); 
    background-color: rgba(249, 250, 251, 1); 
    border-bottom: 2px solid rgba(75, 46, 200, 1); 
    border-top: none; 
    border-right: none; 
    border-left: none; 
  } 
  .input--focus:not(:placeholder-shown){ 
    font-size: 14px; 
    font-weight: 500; 
    line-height: 20px; 
    letter-spacing: 0.02em; 
   
    background-color: rgba(249, 250, 251, 1); 
  } 
   
  .upload__container{ 
    position: absolute; 
    right: 6px; 
    bottom: 4px; 
    z-index: 15; 
  } 
  input[type="file"]{ 
    display: none; 
  } 
  .upload__icon{ 
    border: none; 
    background: none; 
   
    cursor: pointer; 
  } 
  .hover2{ 
    opacity: 1; 
    transition: opacity .5s; 
  } 
  .hover2:hover{ 
    opacity: 0; 
  } 
   
  .hover{ 
    position: absolute; 
    right: 0px; 
    bottom: 1px; 
    z-index: 1; 
    opacity: 0; 
    transition: opacity .5s; 
  } 
  .hover:hover{ 
    opacity: 1; 
  } 
  .subinput-description__text{ 
    font-size: 10px; 
    font-weight: 500; 
    line-height: 14px; 
    letter-spacing: 0.04em; 
   
    margin-top: 10px; 
    color: rgba(107, 114, 128, 1); 
  } 
  .div__button{ 
    display: flex; 
    justify-content: end; 
  } 
  .button__send{ 
    font-size: 19px; 
    font-weight: 500; 
    line-height: 24px; 
    letter-spacing: 0.04em; 
    color: rgba(255, 255, 255, 1); 
   
    padding: 16px 24px 16px 24px; 
    background-color: rgb(88, 56, 230); 
    border-radius: 8px; 
    border: none; 
   
    cursor: pointer; 
    margin-top: 20px; 
  }

  .footer {
    background-color: #4F30D6;
    width: 100%;
    height: 30%;
  }
  .firstblock nav {
    width: 483px;
    text-align: center;
    float:center;
    padding-left: 483px;
    padding-top: 75px;
    
  }
  .firstblock nav ul {
    justify-content: space-between;
    list-style: none;
    display: flex;
  }

  .firstblock nav ul li {
    display: inline block;
  }

  .firstblock nav ul li a {
color: #F6F5FC;
size: 14px;
font-weight: 400;
  }

  .vk nav {
    width: 135px;
    text-align: center;
    float:center;
    padding-left: 650px;
    padding-top: 15px;
  }

  .vk nav ul {
    justify-content: space-between;
    list-style: none;
    display: flex;
  }

  .vk nav ul li {
    display: inline block;
  }

  .vk nav ul li a {
width: 30px;
height: 30px;
  }

  .politic {
    color: #F6F5FC;
size: 10px;
font-weight: 400;
padding-left: 60px;
padding-top: 15px;
float: center;
text-align: center;
padding-bottom: 50px;
  }