Нужна помощь в создании меню

dkuzzm · 1 березня 2022

При создании макета мы не думали что нам придется использовать JS, и теперь мы не знаем что делать. Нам надо чтоб на 2 блоке при нажатии на вариант* у нас менялись PDF файлы. Но как оказалось без JS это не сделать, а с JS мы не знакомы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;900&display=swap" rel="stylesheet">
    <script src="Untitled-1.js"></script>
    <title>Подготовка к ОГЭ</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header center" id="header">
        <ul class="menu">
            <li><a class="menu__link" href="#items">Предметы</a></li>
            <li><a class="menu__link" href="#maths">Математика</a></li>
            <li><a class="menu__link" href="#informatics">Информатика</a></li>
            <li><a class="menu__link" href="#physics">Физика</a></li>
        </ul>      
    </div>
    <div class="top center">
        <h1 class="heading__top" id="items">Подготовка к экзаменам</h1>
        <div class="items__top">
            <div class="maths__top">
                <div class="maths__photo"><a href="#items__maths"><img src="img/maths.svg" alt="maths__photo"></a></div>
                <div class="heading__maths">
                    <div class="heading__maths__text">
                        <h4 class="heading1__top">Математика</h4>
                    </div>    
                </div>
            </div>
            <div class="informatics__top">
                <div class="informatics__photo"><a href="#items__informatics"><img src="img/informatics.svg" alt="informatics__photo"></a></div>
                <div class="heading__informatics">
                    <div class="heading__informatics__text">
                        <h4 class="heading2__top">Информатика</h4>
                    </div>
                </div>    
            </div>
            <div class="physics__top">
                <div class="physics__photo"><a href="#items__physics"><img src="img/physics.svg" alt="physics__photo"></a></div>
                <div class="heading__physics">
                    <div class="heading__physics__text">
                        <h4 class="heading3__top">Физика</h4>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="maths center">
            <div class="list__maths">
                <ul class="list__maths__text">
                    <h2 class="heading__maths1" id="maths" id="items__maths">Математика</h2>
                    <li class="listt__maths"><a id="var1">>Вариант 1</a></li>
                    <li class="listt__maths">Вариант 2</li>
                    <li class="listt__maths">Вариант 3</li>
                    <li class="listt__maths">Вариант 4</li>
                    <li class="listt__maths">Вариант 5</li>
                    <li class="listt__maths">Вариант 6</li>
                    <li class="listt__maths">Вариант 7</li>
                    <li class="listt__maths">Вариант 8</li>
                    <li class="listt__maths">Демоверсия</li>
                    <li class="listt__maths">Спецификатор</li>
                    <li class="listt__maths">Кодификатор</li>
                    <li class="listt__maths">Справочный материал</li>
                </ul>
            </div>
        <div class="materials__maths">
            <iframe class="options1" src="https://drive.google.com/file/d/12suI88_guQ7dlRkPoGgJfdM7KmNsq0yA/preview" allow="autoplay"></iframe>
            <!-- <iframe class="options2" src="https://vpr-ege.ru/images/oge/100ballov-oge22-ma-var2.pdf" allow="autoplay"></iframe> -->
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    }
   body {
      font-family: 'Montserrat', sans-serif;
    }
   img {
       max-width: 100%;
    }
   .center {
      padding-left: calc(50% - 695px);
      padding-right: calc(50% - 695px);
    }
   a {
      text-decoration: none;
      }
    .header {
      background-color: #53C6CD;;
      height: 53px;  
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
    }
    .menu {
      list-style-type: none;
      display: flex;
      gap: 50px;
    }
    .menu__link {
      font-style: normal;
      font-weight: 500;
      font-size: 18px;
      line-height: 22px;
      display: flex;
      align-items: center;
      color: #FFFFFF;
    }
    .top {
      background-color: #75D4DA;
      min-height: 1080px;
      padding-top: 42px;
      padding-bottom: 107px;
    }
    .heading__top {
      font-style: normal;
      font-weight: 900;
      font-size: 96px;
      line-height: 117px;
      color: #FFFFFF;
    }
   .items__top {
      gap: 127px;
      margin-top: 72px; 
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
   }
   .maths__top {
      width: 364px;
      background-color: #77CFE2;
      height: 706px;      
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      border-radius: 12px;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
      margin-top: 72px;
     
   }
   .maths__photo {
      margin-top: 171px;
      display: flex;
      align-items: center;
   }
   .heading__maths {
      display: flex;
      background: #75CADD;
      height: 155px;
      width: 100%;
      justify-content: center;
      margin-top: 200px;
   }
   .heading__maths__text{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
   }
   .heading1__top {
      font-weight: 600;
      font-size: 36px;
      line-height: 44px;
      display: flex;
      align-items: center;
      text-align: center; 
      color: #FFFFFF;
   }
    
    .informatics__top {
     width: 364px;
     background-color: #77CFE2;
     height: 706px;      
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     border-radius: 12px;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
     margin-top: 72px;
   }
    .informatics__photo {
     margin-top: 171px;
     display: flex;
     align-items: center;
   }
    .heading__informatics {
     display: flex;
     background: #75CADD;
     height: 155px;
     width: 100%;
     justify-content: center;
     margin-top: 200px;
   }
   .heading__informatics__text{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
   }
    .heading2__top {
     font-weight: 600;
     font-size: 36px;
     line-height: 44px;
     display: flex;
     align-items: center;
     text-align: center; 
     color: #FFFFFF;
   }
   .physics__top {
    width: 364px;
    background-color: #77CFE2;
    height: 706px;      
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
    margin-top: 72px;
  }
   .physics__photo {
    margin-top: 171px;
    display: flex;
    align-items: center;
  }
   .heading__physics {
    display: flex;
    background: #75CADD;
    height: 155px;
    width: 100%;
    justify-content: center;
    margin-top: 200px;
  }
  .heading__physics__text{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
   .heading3__top {
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    display: flex;
    align-items: center;
    text-align: center; 
    color: #FFFFFF;
  }
  .maths {
    background-color: #7BDDE3;
    min-height: 1080px;
    padding-top: 36px;
    padding-bottom: 36px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .heading__maths1 {
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 59px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
  }
  .list__maths__text{
    margin-top: 61px;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 29px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 35px;
    color: #FFFFFF;
    
  }
  .options1 {
    height: 1008px;
    width: 857px;
  }
  .options2 {
    height: 1008px;
    width: 857px;
  }

  .materials__maths{
    background-color: #75D4DA;
  }

Venter · 1 березня 2022

01.03.2022 в 19:02, dkuzzm сказал:

а с JS мы не знакомы.

в сети полно примеров на всякие разные темы. неужели лень такая поискать. если не знакомы то учим, не хотим учить - тогда идем и заказываем правки.

А вот если делаем по примерам и не получается что то вот тогда обращаемся сюда. вы же даже не посмотрели примеры и не попытались что то вообще сделать

buslikdrev · 1 березня 2022

01.03.2022 в 16:04, Venter сказал:

тогда идем и заказываем правки.

Он и разместил в разделе услуг.

Venter · 1 березня 2022

01.03.2022 в 22:51, buslikdrev сказал:

Он и разместил в разделе услуг.

тогда извините если что не так сказал, не заметил что в разделе услуг размещено

Вхід

Нужна помощь в создании меню

Recommended Posts

dkuzzm

Надіслати

Поділитися на інших сайтах

Venter

Надіслати

Поділитися на інших сайтах

buslikdrev

Надіслати

Поділитися на інших сайтах

Venter

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

[Поддержка] Текстовый блок HTML PLUS

Текстовий блок HTML PLUS

[Поддержка] Текстовый Блок HTML PRO

Текстовий Блок HTML PRO

[Поддержка] Модуль "Super Custom Html Fields" 1 2 3

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information