Skip to content

Commit 28e7023

Browse files
zhuk1707zhuk1707
committed
modal layout
1 parent 33957eb commit 28e7023

File tree

5 files changed

+194
-0
lines changed

5 files changed

+194
-0
lines changed

‎blocks/modal.css‎

Lines changed: 67 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blocks/modal.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blocks/modal.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.lock {
2+
overflow: hidden;
3+
}
4+
5+
.main {
6+
margin-top: 60px;
7+
&__modal-btn {
8+
margin: 10px 0;
9+
font-size: inherit;
10+
padding: 8px 16px;
11+
color: orangered;
12+
background-color: transparent;
13+
border-radius: 30px;
14+
border: 1px solid orangered;
15+
16+
transition: all .3s ease;
17+
&:hover {
18+
color: white;
19+
background-color: orangered;
20+
}
21+
}
22+
}
23+
24+
.modal-overlay.active {
25+
visibility: visible;
26+
z-index: 10;
27+
}
28+
29+
.modal-overlay{
30+
position: fixed;
31+
width: 100%;
32+
height: 100%;
33+
left: 0;
34+
top: 0;
35+
background-color: #21212150;
36+
backdrop-filter: blur(5px);
37+
display: grid;
38+
place-items: center;
39+
visibility: hidden;
40+
z-index: -10;
41+
42+
&__modal-container {
43+
border-radius: 30px;
44+
background-color: #fff;
45+
padding: 40px;
46+
width: 80vw;
47+
height: 30vh;
48+
display: grid;
49+
place-items: center;
50+
position: relative;
51+
}
52+
}
53+
54+
55+
56+
.modal-container {
57+
&__text {
58+
}
59+
60+
&__btn {
61+
position: absolute;
62+
right: 10px;
63+
top: 10px;
64+
color: orangered;
65+
font-size: 26px;
66+
background-color: transparent;
67+
height: 50px;
68+
width: 50px;
69+
border-radius: 50%;
70+
71+
&:hover {
72+
background-color: rgba(255, 69, 0, 0.25);
73+
}
74+
}
75+
}
76+

‎pages/modal.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Modal</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../common/general.css">
8+
<link rel="stylesheet" href="../blocks/modal.css">
9+
</head>
10+
<body >
11+
12+
<div class="wrapper">
13+
14+
<main class="main">
15+
<div class="container">
16+
<div class="main__content">
17+
<h1>Lorem ipsum dolor.</h1>
18+
<h3>Lorem ipsum dolor sit amet.</h3>
19+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum doloribus dolorum laborum, nam non numquam odio officia pariatur perspiciatis placeat recusandae sequi sit vero. Dolores fugit ipsa laboriosam minus qui?</p>
20+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores id quas recusandae repellat voluptates voluptatum! Cum dolore eligendi in iusto odit voluptas voluptates. Amet beatae, eveniet illo impedit laborum nam quod soluta totam vero voluptatem? Ab accusamus accusantium at blanditiis excepturi expedita facilis, magnam, minima nisi, suscipit tempora voluptate! Beatae, consequatur ex illo illum in incidunt nam natus, necessitatibus obcaecati pariatur quae, qui quis veniam. Aspernatur beatae deserunt eaque earum neque numquam reiciendis, repudiandae similique sunt. Ad animi atque commodi consectetur dicta doloribus ducimus fugiat fugit illum, laboriosam maiores maxime molestiae nisi praesentium quam quia quisquam quod repellendus saepe similique suscipit totam ut, veritatis? Ad commodi error in magni natus officiis quod, tempora? Asperiores cumque illo in ipsum, non recusandae voluptatum? Assumenda atque deleniti est, facere fuga harum, hic incidunt labore nemo quam sunt temporibus unde voluptatem. Commodi consequuntur cupiditate deleniti ducimus ea eius harum illo inventore ipsam iste itaque laudantium minima nesciunt nisi, quas quisquam quo quos saepe sunt tempora veniam vero voluptate, voluptatibus. A aspernatur at commodi consectetur consequatur corporis, culpa deserunt doloremque esse illum iusto labore molestias natus nemo, pariatur perferendis praesentium reiciendis rerum saepe tempora veritatis voluptate voluptatem? Accusantium alias asperiores at autem corporis dicta dignissimos, distinctio dolorem eaque error est excepturi facilis fugiat harum illo ipsa ipsum itaque laboriosam laudantium libero maxime, modi nemo nisi nulla praesentium quae quidem quis quisquam quos soluta tempora temporibus tenetur ut. Debitis ex harum nostrum omnis possimus quam ratione soluta suscipit ullam veritatis. A adipisci aliquid autem, beatae consequatur corporis cupiditate, dolorem, eaque error esse ex excepturi fugiat incidunt maiores maxime neque nisi nostrum officia perferendis praesentium quam repellendus reprehenderit suscipit unde veritatis voluptates voluptatibus. Alias blanditiis distinctio eos est illum ipsum labore nesciunt non quis quod repellendus, rerum, sint sunt tenetur totam ut vitae. Blanditiis, ipsa, qui.</p>
21+
</div>
22+
23+
<button class="main__modal-btn">
24+
Open
25+
</button>
26+
27+
<div class="main__content">
28+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate debitis, doloremque exercitationem inventore ipsam ipsum iusto obcaecati optio saepe.</p>
29+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, nihil quidem! Amet consectetur, cumque distinctio dolor eum expedita fugiat inventore ipsa iste itaque placeat, quae quasi qui ratione recusandae, reiciendis sint soluta ullam. Est in, veritatis. Autem beatae harum incidunt neque perferendis quasi quisquam quos sapiente voluptas voluptates. Ad consectetur consequatur dicta eos est ex facilis inventore pariatur reiciendis sunt. Culpa deleniti dignissimos ducimus harum, nisi perferendis quaerat reiciendis repellendus unde. Accusantium, beatae consequatur delectus, dolore doloremque eius fuga harum hic inventore labore maiores minus necessitatibus nobis qui sequi similique sint sit temporibus. Aperiam asperiores autem ducimus est illum inventore ipsa ipsam iure modi molestias mollitia nam necessitatibus nihil non nulla pariatur quam quasi qui suscipit tempore tenetur totam ullam velit vitae, voluptatibus. Fuga harum odit provident recusandae unde! Aliquam aliquid animi, aperiam excepturi impedit mollitia perferendis quae recusandae reprehenderit sequi sint unde vel veritatis. Dolore facilis laborum magni possimus provident suscipit vero. Amet dignissimos dolores eos illum laborum magni maiores natus placeat tempore ut. Blanditiis dolorem exercitationem possimus soluta suscipit unde veniam! Blanditiis dolor, dolorem doloremque esse odio quasi reiciendis repellendus sapiente temporibus tenetur veritatis voluptates voluptatum! Architecto enim eos, eum exercitationem facilis fuga illum ipsum nemo quas tempore temporibus voluptate voluptatem? At, cupiditate delectus dignissimos doloremque eaque illum iure iusto molestias natus nisi non perspiciatis quae quas saepe, suscipit, tempora veniam voluptates? Alias deserunt eius excepturi expedita harum id inventore ipsa quam vero voluptates? Ad, blanditiis corporis cumque enim eum ex expedita facilis molestias nam officiis quos voluptates.</p>
30+
</div>
31+
</div>
32+
33+
</main>
34+
35+
<div class="modal-overlay">
36+
<div class="modal-overlay__modal-container modal-container">
37+
<h1 class="modal-container__text">Lorem ipsum dolor sit amet.</h1>
38+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam eligendi ipsum sint? Delectus ea minus natus nesciunt velit! Accusamus commodi earum, nesciunt numquam quibusdam ratione recusandae sapiente tenetur ullam voluptas?</p>
39+
<button class="modal-container__btn">
40+
<i class="fa-solid fa-square-xmark"></i>
41+
</button>
42+
</div>
43+
</div>
44+
45+
</div>
46+
47+
<script src="https://kit.fontawesome.com/b8e2be2715.js" crossorigin="anonymous"></script>
48+
<script src="../scripts/sidebar.js"></script>
49+
</body>
50+
</html>

‎scripts/modal.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)