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

dkuzzm · March 1

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-RU-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:[email protected];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 · March 1

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

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

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

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

buslikdrev · March 1

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

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

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

Venter · March 1

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

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

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

Sign In

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

Recommended Posts

dkuzzm

Link to comment

Share on other sites

Venter

Link to comment

Share on other sites

buslikdrev

Link to comment

Share on other sites

Venter

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Similar Content

Нужна помощь по модулю SimplePars

Нужна помощь с Nginx

Нужна помощь

Создание модуля мега меню

Нужна помощь в устранение ряда ошипотому чток на сайте опенкарт.про

Recently Browsing 0 members

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

Меню покупок/Продаж

ocStore

Templates

OpenCart.Pro

Important Information