Skip to content

03 lection1 new accordion #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

03 lection1 new accordion #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6d5f213
add button and accordions
Nasty6163459 Oct 20, 2025
d378c83
add button and accordion
Nasty6163459 Oct 20, 2025
0797981
add button
Nasty6163459 Oct 21, 2025
1f5d0d7
add accordion
Nasty6163459 Oct 21, 2025
f2c3407
add accordion
Nasty6163459 Oct 21, 2025
82da674
corrections added
Nasty6163459 Oct 26, 2025
82ef9ce
changes added
Nasty6163459 Oct 26, 2025
4c147a4
add changes
Nasty6163459 Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions 03-lection1/01-button/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,35 @@
/* Стилизация кнопки */
:root {
--border: solid transparent;
--color: white;
}
.button {
border-radius: 8px;
font-size: 16px;
font-family: Roboto;
padding: 14px 15px;
}
.button__primary {
background-color: var(--primary);
color: var(--color);
border: var(--border);
transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
}
.button__secondary {
background-color: var(--secondary);
color: var(--color);
border: var(--border);
}
.button__alternate {
color: Gray 4;
background-color: var(--alternate);
border-width: 1px;
transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
}
.button:hover {
filter: brightness(80%);
}
.button:disabled {
opacity: 0.5;
pointer-events: none;
}
21 changes: 17 additions & 4 deletions 03-lection1/01-button/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
<!DOCTYPE html>
<!-- Страница с кнопкой -->
<html lang="ru">
<head>
<head>
<link rel="stylesheet" href="../../assets/css/main.css">
<link rel="stylesheet" href="./button.css">
</head>
<body>

</body>
</html>
<div class="button">
<button class="button button__primary"active>Primary</button>
<button class="button button__secondary"active>Secondary</button>
<button class="button button__alternate"active>Alternate </button>

<div class="button__item">
<button class="button button__primary"hover> Primary hover</button>
<button class="button button__secondary"hover>Secondary hover</button>
<button class="button button__alternate"hover>Alternate hover</button>

<div class="button__item">
<button class="button button__primary"disabled> Primary disadled</button>
<button class="button button__secondary"disabled>Secondary disadled</button>
<button class="button button__alternate"disabled>Alternate disadled</button>
</div>
</body>
45 changes: 44 additions & 1 deletion 03-lection1/02-accordion/accordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,44 @@
/* Стилизация аккордеона */
.accordion {
color: Black;
font-family: Inter;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
border-radius: 8px;
border-width: 1px;
border-style: solid;
border-color: #ACB5BD;
}
.accordion__section {
background-color: var (--color);
}
.accordion__content {
color: Gray 4;
font: Inter;
font-size: 16px;
line-height: 50px;
letter-spacing: 0%;
}
.accordion__item {
color: Black;
font: Inter;
font-size: 16px;
margin-bottom: 8px;
}
.accordion__item:last-child {
margin-bottom: 0px;
}
.accordion__summary {
padding: 10px;
background-color: #FFFFFF;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 8px;
}
details[open] > summary {
background-color: #e0e0e0;
border-bottom: none;
}
summary {
list-style: none;
}
35 changes: 26 additions & 9 deletions 03-lection1/02-accordion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,31 @@
<link rel="stylesheet" href="../../assets/css/main.css">
<link rel="stylesheet" href="./accordion.css">
</head>
<body>
<details>
<summary>
Accordion item
<body>
<div class="accordion">
<details class="accordion__section">
<summary class="accordion__summary">
Accordion item 1
</summary>
<p>
Hidden content
</p>
</details>
<div class="accordion__content">
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.
</div>
</details>
<details class="accordion__item">
<summary class="accordion__summary">
Accordion item 2
</summary>
<div class="accordion__content">
... </div>
</details>
<details class="accordion__item">
<summary class="accordion__summary">
Accordion item 3
</summary>
<div class="accordion__content">
...
</div>
</details>
</div>
</body>
</html>
</html>
3 changes: 2 additions & 1 deletion assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@

--primary: var(--blue);
--secondary: var(--purple);
}
--alternate: var(--grey-4);
}

boby {
font-family: 'Roboto', sans-serif;
Expand Down