Skip to content

Commit 4830f1d

Browse files
zhuk1707zhuk1707
committed
sidebar layout
1 parent 6cd81aa commit 4830f1d

File tree

6 files changed

+267
-3
lines changed

6 files changed

+267
-3
lines changed

‎blocks/sidebar.css‎

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

‎blocks/sidebar.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/sidebar.scss‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
.main__title {
2+
margin: 40px 0;
3+
font-family: "Roboto Mono", monospace;
4+
text-align: center;
5+
}
6+
7+
h1,h2,p {
8+
margin: 20px 0;
9+
}
10+
11+
p {
12+
text-align: justify;
13+
}
14+
15+
.header {
16+
&__btn {
17+
font-size: 30px;
18+
padding: 10px;
19+
height: 50px;
20+
width: 50px;
21+
border-radius: 50%;
22+
background-color: rgba(255, 69, 0, 0.25);
23+
backdrop-filter: blur(3px);
24+
color: orangered;
25+
26+
position: fixed;
27+
top: 2rem;
28+
right: 3rem;
29+
30+
transition: .3s ease;
31+
&:hover {
32+
background-color: orangered;
33+
color: white;
34+
}
35+
}
36+
}
37+
38+
.main {
39+
&__sidebar {
40+
}
41+
}
42+
43+
.sidebar {
44+
position: fixed;
45+
top: 0;
46+
left: -30%;
47+
width: 30%;
48+
height: 100%;
49+
background-color: white;
50+
padding: 20px 20px 20px 0;
51+
52+
&.active {
53+
left: 0;
54+
}
55+
56+
&__header {
57+
display: flex;
58+
justify-content: space-between;
59+
align-items: center;
60+
}
61+
62+
&__logo {
63+
margin-left: 30px;
64+
font-size: 32px;
65+
font-weight: 600;
66+
color: orangered;
67+
68+
}
69+
70+
&__close-btn {
71+
font-size: 32px;
72+
color: inherit;
73+
padding: 10px;
74+
height: 50px;
75+
width: 50px;
76+
background-color: transparent;
77+
border-radius: 50%;
78+
79+
transition: .3s ease;
80+
&:hover {
81+
background-color: rgba(255, 69, 0, 0.25);
82+
color: orangered;
83+
}
84+
}
85+
86+
&__body {
87+
margin-top: 60px;
88+
}
89+
90+
&__links {
91+
font-size: 26px;
92+
color: inherit;
93+
}
94+
95+
&__link {
96+
display: block;
97+
color: inherit;
98+
padding: 10px 20px;
99+
margin-left: 10px;
100+
border-radius: 30px;
101+
102+
transition: .3s ease;
103+
&:hover {
104+
background-color: rgba(255, 69, 0, 0.25);
105+
color: orangered;
106+
}
107+
}
108+
}
109+

‎index.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,18 @@ <h1 class="main__title">Small JavaScript Projects</h1>
2929
<img src="images/main-page/02.png" alt="Reviews">
3030
</a>
3131
<a href="pages/counter.html" class="cards-block__title">Reviews</a>
32-
<p class="cards-block__subtitle">...</p>
32+
<p class="cards-block__subtitle">Reviews block. User
33+
can scroll horizontally different reviews or get
34+
random content.
35+
</p>
3336
</div>
3437

3538
<div class="cards-block__item">
3639
<a href="pages/counter.html" class="cards-block__image">
3740
<img src="images/main-page/03.png" alt="Reviews">
3841
</a>
39-
<a href="pages/counter.html" class="cards-block__title">Reviews</a>
42+
<a href="pages/counter.html"
43+
class="cards-block__title">Sidebar</a>
4044
<p class="cards-block__subtitle">...</p>
4145
</div>
4246

@@ -62,7 +66,7 @@ <h1 class="main__title">Small JavaScript Projects</h1>
6266
</a>
6367
<a href="pages/counter.html" class="cards-block__title">Reviews</a>
6468
<p class="cards-block__subtitle">...</p>
65-
</div>'
69+
</div>
6670

6771
<div class="cards-block__item">
6872
<a href="pages/counter.html" class="cards-block__image">

‎pages/sidebar.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sidebar</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/sidebar.css">
9+
</head>
10+
<body>
11+
12+
<div class="wrapper">
13+
<header class="header">
14+
<div class="container">
15+
<button class="header__btn">
16+
<i class="fa-solid fa-bars"></i>
17+
</button>
18+
</div>
19+
</header>
20+
21+
<main class="main">
22+
<div class="main__sidebar sidebar active">
23+
<div class="sidebar__header">
24+
<a href="" class="sidebar__logo">Logo.</a>
25+
<button class="sidebar__close-btn">
26+
<i class="fa-solid fa-xmark"></i>
27+
</button>
28+
</div>
29+
<div class="sidebar__body">
30+
<ul class="sidebar__links">
31+
<li><a href="" class="sidebar__link">Home</a></li>
32+
</ul>
33+
<ul class="sidebar__links">
34+
<li><a href="" class="sidebar__link">Blog</a></li>
35+
</ul>
36+
<ul class="sidebar__links">
37+
<li><a href="" class="sidebar__link">About us</a></li>
38+
</ul>
39+
<ul class="sidebar__links">
40+
<li><a href="" class="sidebar__link">Help</a></li>
41+
</ul>
42+
</div>
43+
</div>
44+
<div class="container">
45+
<h1 class="main__title">Sidebar</h1>
46+
47+
<div class="main__content">
48+
<h1>Lorem ipsum dolor sit amet.</h1>
49+
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, temporibus!</h3>
50+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at commodi deserunt distinctio dolor eaque eligendi esse excepturi exercitationem fugiat in ipsa iure laborum maiores, molestiae nesciunt non odio perferendis porro possimus quam quas, quia quos sed totam unde vel veniam voluptate, voluptatibus. Accusantium consectetur libero omnis quam reprehenderit. Accusantium adipisci alias aliquam aperiam architecto aspernatur at dicta ducimus eligendi est exercitationem facere incidunt iste magni maiores minima molestias, odio optio pariatur quaerat quam repellendus similique ullam unde ut vero, voluptas voluptatem? Accusamus ad autem delectus doloribus eligendi esse excepturi harum hic impedit in magni molestias non, quas, saepe ut! Accusantium alias animi asperiores cumque debitis deleniti dicta dignissimos dolorem doloremque enim error esse harum ipsam laudantium molestias natus necessitatibus, nostrum obcaecati, praesentium quasi reiciendis tempore tenetur vel voluptates voluptatum. Aliquam aliquid architecto dolores ipsam repellat sed suscipit voluptates. Aspernatur, cumque fugiat laborum mollitia sint tempore temporibus. A accusamus assumenda aut beatae consectetur dolores enim est eum facilis fugiat impedit, in, inventore laborum neque obcaecati, odit optio placeat praesentium reiciendis sint tempore tenetur voluptas voluptate? Ab accusantium asperiores dolorem dolorum ducimus eius enim esse ex facilis fugit id labore necessitatibus nemo nesciunt nisi odit omnis quas quos, repellat rerum sed sequi similique sint sit tempore vero, voluptate voluptatibus. Aliquid cumque deleniti quibusdam? Asperiores distinctio impedit iure modi perferendis. Autem consequuntur dolore ipsa omnis quas quibusdam temporibus. Asperiores culpa delectus eaque exercitationem iusto laborum magnam officiis quas repellendus sint? A architecto asperiores assumenda aut culpa delectus earum enim esse est eveniet excepturi, fugit, itaque iure maxime molestias nobis possimus provident qui quis, ratione sed similique sunt! Adipisci, aperiam autem dolore id ipsa nulla quaerat quam, quos sint tenetur, voluptate voluptates! Atque commodi est labore maiores nam natus necessitatibus nulla officia quidem recusandae reiciendis repudiandae, totam, ut! Eius explicabo libero officia sapiente suscipit tenetur totam unde voluptatibus! At cupiditate dignissimos earum ex excepturi facere natus quibusdam suscipit? Asperiores atque aut consequatur, cum debitis delectus dolor eaque hic laboriosam maiores minus possimus, quae quis similique, sunt. Ab accusantium aliquam aliquid animi at cumque dicta dignissimos eaque eius eum ex excepturi labore, modi natus, nobis odit officiis, omnis perspiciatis provident recusandae reiciendis totam velit? A, facere illum iusto nulla perspiciatis quae. Accusamus ad assumenda aut eos odio rem sapiente sunt totam ullam voluptates? Assumenda autem culpa cupiditate dicta dolorum ducimus ea fuga fugiat harum iste itaque iusto laboriosam, molestias nulla numquam optio placeat quae quos recusandae repellat sed soluta temporibus velit veniam vitae voluptate voluptates voluptatum. A accusamus ad animi, aperiam architecto asperiores consectetur consequatur culpa doloremque eligendi hic inventore iusto magni maiores natus nesciunt officia, pariatur praesentium quas qui quia quo rerum tempora totam voluptate? Amet animi atque itaque optio quidem saepe vero? Adipisci, corporis dolor dolorem ea nemo non quos sunt temporibus! Ab alias atque, commodi consequatur cupiditate est et harum ipsam maxime neque nostrum, numquam quibusdam quis quod ratione recusandae repellendus sit voluptate. Dolor dolorem doloremque possimus rem reprehenderit! Deleniti dolore maxime nobis non numquam officia recusandae velit? Doloribus, repellat?</p>
51+
</div>
52+
</div>
53+
54+
</main>
55+
</div>
56+
57+
<script src="https://kit.fontawesome.com/b8e2be2715.js" crossorigin="anonymous"></script>
58+
</body>
59+
</html>

‎scripts/sidebar.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)