Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

dkuzzm

Новичок
  
  • Posts

    1
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

dkuzzm's Achievements

Newbie

Newbie (1/14)

  • Conversation Starter

Recent Badges

0

Reputation

  1. При создании макета мы не думали что нам придется использовать 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:[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; }
×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.