css/style.css - master - novikoff.front/snow

css/style.css
248 строк4 KB
Aleksandr Novikoff
add block
09 апр 2024, 22:25
09 апр 2024, 22:25902d62f
@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

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


body {
    font-family: "Raleway", sans-serif;
}

/* HEADER start*/

header {
    box-shadow: 0 0 20px 0 rgba(148, 148, 148, 0.25);
    background: #fff;
}
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.header-logo p {
    display: inline-block;
    font-size: 12px;
    width: 160px;
    margin-left: 20px;
}

.header-social {
    display: flex;

}

.header-social div:nth-child(1) {
    display: flex;
    column-gap: 17px;
    margin-right: 115px;
    align-items: center;
}

.header-social div:nth-child(2) {
    display: flex;
    column-gap: 8px;
    align-items: center;

}

.header-social span {
    width: 1px;
    height: 16px;
    background: #c4c4c4;;
}
.header-social div:nth-child(2) p {
    font-size: 12px;
    color: #c4c4c4;
}

.header-phone {
    display: flex;
    align-items: center;
}

.header-phone p {
    font-weight: 700;
    font-size: 18px;
}

/* HERO start*/
.hero-row {
    display: flex;
}

h1 {
    margin-top: 180px;
    width: 652px;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 0.02em;
}

.hero-left span {
    color: #0586E8;
}

.line {
    margin: 16px 0;
    border-radius: 6px;
    width: 80px;
    height: 2px;
    background: linear-gradient(45deg, #1d4fcf 0%, #0586e8 100%);
}


.hero-left>p {
    width: 463px;
    font-size: 18px;
    margin-bottom: 56px;
}

.hero-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.hero-item>p {
    font-size: 14px;
    width: 275px;
    margin-left: 15px;
}

.hero-right-img {
    position: absolute;
    right: 0;
}

.hero-right-cta {
    display: flex;
    align-items: center;
    border-radius: 30px 0 0 30px;
    box-shadow: 0 0 30px 0 rgba(141, 149, 165, 0.23);
    background: #fff;
    width: 843px;
    padding: 31px 0;
    position: absolute;
    top: 550px;
    right: 0px;
}


.hero-right-cta div {
    margin: 0 60px;
}


.hero-right-cta p {
    font-weight: 700;
    font-size: 24px;
}

.hero-right-cta>div>p:nth-child(2) {
    font-size: 18px;
    margin-bottom: 7px;
}

.hero-right-cta span {
    color: #0586e8;
}

.agree {
    display: inline-block;
}

.hero-right-cta>div>p:nth-child(4) {
    font-weight: 300;
    font-size: 12px;
    line-height: 120%;
    color: #656565;
    opacity: 0.7;
    display: inline-block;
}
form {
    display: flex;
    flex-direction: column;
}

.hero-right-cta input {
    padding: 17px 0;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    width: 277px;
    box-shadow: 0 6px 20px 0 rgba(56, 149, 235, 0.29);
}

.hero-right-cta input[type="text"] {
    padding-left: 10px;
}
.hero-right-cta input::placeholder {
    padding: 17px 0 17px 0px;
    font-size: 14px;
    color: #000;
    opacity: 0.4;
}

.btn {
    margin-top: 13px;
    padding: 15px 71px;
    border-radius: 8px;
    box-shadow: 0 6px 20px 0 rgba(56, 149, 235, 0.29);
    background: linear-gradient(45deg, #1d4fcf 0%, #0586e8 100%);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    color: #fff;
}

.btn:hover {
    background: #1d4fcf;
}

/*FEATURES*/

.features {
    position: relative;
}
h2 {
    margin: 160px 0 7px 0;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 0.02em;
    color: #0586e8;
}

.snow-left {
    position: absolute;
    left: 0;
    bottom: 25px;
}
.features-row span {
    display: block;
    margin-bottom: 40px;
    border-radius: 6px;
    width: 80px;
    height: 2px;
    background: #c4c4c4;
}

.features-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.features-item {
    display: flex;
    align-items: center;
    column-gap: 16px;
    padding: 15px 20px;
    border-radius: 16px;
    box-shadow: 0 0 30px 0 rgba(141, 149, 165, 0.23);
    background: #fff;
}