styles.css - master - qewr/task1

styles.css
86 строк2 KB
Egor247
refactoring
23 июл 2025, 18:43
23 июл 2025, 18:431ee0fb9
 * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; background: #f4f6f8; color: #222; }
    header { background: #fff; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 5px rgba(0,0,0,0.05); flex-wrap: wrap; }
    .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .logo img { height: 40px; }
    nav { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
    nav a { color: #333; text-decoration: none; font-weight: 500; }
    nav a:hover { color: #ff7a00; }

    .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 80px 40px;
      background: #fff;
      gap: 40px;
    }
    .hero-text h1 {
      font-size: 44px;
      margin-bottom: 20px;
      color: #002e5b;
    }
    .hero-text p {
      font-size: 18px;
      margin-bottom: 30px;
      color: #555;
    }
    .cta-button {
      background-color: #ff7a00;
      color: #fff;
      padding: 14px 28px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    .hero img { max-width: 100%; border-radius: 8px; }

    .features {
      background: #f4f6f8;
      padding: 60px 40px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      text-align: center;
    }
    .feature {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .feature h3 {
      margin-bottom: 15px;
      color: #002e5b;
    }
    footer {
      text-align: center;
      padding: 30px;
      background: #002e5b;
      color: #fff;
    }

    @media (max-width: 768px) {
      header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
      }
      nav {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }
      .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 20px;
      }
      .hero-text h1 {
        font-size: 28px;
      }
      .hero-text p {
        font-size: 16px;
      }
    }