Skip to content

Commit

Permalink
Made modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@JulieSagan
JulieSagan committed Dec 1, 2024
1 parent b8a6235 commit 0f8fa35
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 9 deletions.
48 changes: 39 additions & 9 deletions 05-lection3/02-modal/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,42 @@
<!DOCTYPE html>
<!-- Страница с модалкой -->
<html lang="ru">
<head>
<link rel="stylesheet" href="../../assets/css/main.css">
<link rel="stylesheet" href="./modal.css">
<title>Modal</title>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>

<head>
<link rel="stylesheet" href="../../assets/css/main.css">
<link rel="stylesheet" href="./modal.css">
<link rel="stylesheet" href="../../components/01-button/button.css">
<title>Modal</title>
</head>

<body>
<div class="container">
<button id="modal-open" class="button button_primary">Open modal</button>

<div id="modal" class="modal">
<div class="modal__overlay">
<div class="modal__content">
<svg id="modal-close" class="modal__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.4714 3.52861C12.7318 3.78896 12.7318 4.21107 12.4714 4.47141L4.47141 12.4714C4.21107 12.7318 3.78896 12.7318 3.52861 12.4714C3.26826 12.2111 3.26826 11.789 3.52861 11.5286L11.5286 3.52861C11.789 3.26826 12.2111 3.26826 12.4714 3.52861Z"
fill="#495057" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.52861 3.52861C3.78896 3.26826 4.21107 3.26826 4.47141 3.52861L12.4714 11.5286C12.7318 11.789 12.7318 12.2111 12.4714 12.4714C12.2111 12.7318 11.789 12.7318 11.5286 12.4714L3.52861 4.47141C3.26826 4.21107 3.26826 3.78896 3.52861 3.52861Z"
fill="#495057" />
</svg>
<h2 class="modal__title">Modal title</h2>
<p class="modal__text">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia
consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
</p>
</div>
</div>
</div>
</div>

</body>
<script src="./index.js"></script>

</html>
59 changes: 59 additions & 0 deletions 05-lection3/02-modal/modal.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
.modal {
display: none;
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.modal__overlay {
display: block;
background-color: rgba(196, 196, 196, 0.5);
width: 100%;
height: 100%;
}

.modal__content {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--white);
max-width: 428px;
max-height: 294px;
border-radius: 8px;
padding: 30px 40px 33px;
gap: 14px;
}

.modal__icon {
width: 16px;
height: 16px;
color: var(--grey-4);
position: absolute;
top: 12px;
right: 12px;
cursor: pointer;
}

.modal__title {
color: #334D6E;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 1.2;
}

.modal__text {
color: var(--grey-4, #495057);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
1 change: 1 addition & 0 deletions components/01-button/button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
border-radius: 8px;
padding-inline: 65px;
transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
border-width: 0;
}

.button_primary {
Expand Down

0 comments on commit 0f8fa35

Please sign in to comment.