124 lines
6.8 KiB
HTML
124 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Galery</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<link rel="stylesheet" href="myStyle.css">
|
||
<!-- Bootstrap CSS -->
|
||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
|
||
<link rel="stylesheet" href="MBD/css/mdb.min.css" />
|
||
<!-- Bootstrap JS -->
|
||
<script defer src="bootstrap/js/bootstrap.js"></script>
|
||
</head>
|
||
<body class="bg-image overflow-visible pageBackground">
|
||
<!--Шапка-->
|
||
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand btn btn-outline-dark" href="index.html" >
|
||
<img src="img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||
</a>
|
||
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||
<img src="img/togglerIcon.png" alt="Toggler" height="40">
|
||
</button>
|
||
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item ">
|
||
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="index.html">Главная</a>
|
||
</li>
|
||
<li class="nav-item ">
|
||
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="Galery.html" >Галерея</a>
|
||
</li>
|
||
<li class="nav-item " >
|
||
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="Courses.html">Курсы</a>
|
||
</li>
|
||
<li class="nav-item " >
|
||
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="Contacts.html" >Контакты</a>
|
||
</li>
|
||
<li class="nav-item " >
|
||
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="Reviews.html" >Отзывы</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!--Шапка-->
|
||
<!--Галерея-->
|
||
<div class="container mx-auto my-5 p-2 rounded-8 fw-bold" style="width: 70%; min-width: 320px ;height: fit-content; min-height: 80%; background-color: rgba(155,155,155,0.8); border: 7px solid #424242">
|
||
<div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-3 pb-3 text-center response-container" id="response-container">
|
||
<div class="col-xxl-4 col-lg-6 col-12 p-0">
|
||
<button class="btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image 3.jpg">
|
||
<img src="img/image 3.jpg" class="rounded-8 width-100" alt="image">
|
||
</button>
|
||
</div>
|
||
<div class="col-xxl-4 col-lg-6 col-12 p-0">
|
||
<button class="btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image 4.jpg">
|
||
<img src="img/image 4.jpg" class="rounded-8 width-100" alt="image">
|
||
</button>
|
||
</div>
|
||
<div class="col-xxl-4 col-lg-6 col-12 p-0">
|
||
<button class="btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image 5.jpg">
|
||
<img src="img/image 5.jpg" class="rounded-8 width-100" alt="image">
|
||
</button>
|
||
</div>
|
||
<div class="col-xxl-4 col-lg-6 col-12 p-0">
|
||
<button class="btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image 3.jpg">
|
||
<img src="img/image 3.jpg" class="rounded-8 width-100" alt="image">
|
||
</button>
|
||
</div>
|
||
<div class="col-xxl-4 col-lg-6 col-12 p-0">
|
||
<button class="btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image 4.jpg">
|
||
<img src="img/image 4.jpg" class="rounded-8 width-100" alt="image">
|
||
</button>
|
||
</div>
|
||
<div class="col-xxl-4 col-lg-6 col-12 p-0">
|
||
<button class="btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image 5.jpg">
|
||
<img src="img/image 5.jpg" class="rounded-8 width-100" alt="image">
|
||
</button>
|
||
</div>
|
||
<div class="col-xxl-4 col-lg-6 col-12 p-0">
|
||
<button onclick="file.click()" type="button" class="btn btn-dark mx-auto my-4 rounded-8 fw-bold fs-1 PictureButton">
|
||
+
|
||
</button>
|
||
</div>
|
||
<input id="file" type="file" hidden />
|
||
</div>
|
||
</div>
|
||
<!--Галерея-->
|
||
<!-- Модальное окно -->
|
||
<div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
|
||
<div class="modal-dialog modal-dialog-centered modal-fullscreen mx-auto modal-dialog-style">
|
||
<div class="modal-content rounded-8">
|
||
<div class="modal-body text-center rounded-8 modalStyle hfitcon width-100">
|
||
<button type="button" class="btn-close position-absolute top-0 end-0 me-1" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||
<img id="image" class="mx-auto width-100" src="" alt="image">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var exampleModal = document.getElementById('exampleModal')
|
||
exampleModal.addEventListener('show.bs.modal', function (event){
|
||
var button = event.relatedTarget
|
||
var recipient = button.getAttribute('data-img')
|
||
document.getElementById('image').setAttribute("src", recipient.toString())
|
||
});
|
||
</script>
|
||
<!--Подвал-->
|
||
<footer class="position-sticky top-100 footer-style">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||
Техническая поддержка <br>
|
||
8-800-555-3535 <br>
|
||
valitzhoska73@gmail.com
|
||
</div>
|
||
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||
Работаем без выходных с 8:00 до 21:30
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!--Подвал-->
|
||
</body>
|
||
</html> |