При создании макета мы не думали что нам придется использовать 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;
}
dkuzzm changed their profile photo
