Skip to content

Commit 03acc3c

Browse files
zhuk1707zhuk1707
committed
to do layout
1 parent ca85054 commit 03acc3c

File tree

7 files changed

+288
-0
lines changed

7 files changed

+288
-0
lines changed

‎blocks/to-do-list.css‎

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

‎blocks/to-do-list.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/to-do-list.scss‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@mixin transition {
2+
transition: .3s ease;
3+
}
4+
5+
@mixin icon-button {
6+
background-color: transparent;
7+
font-size: 18px;
8+
color: #626262;
9+
width: 30px;
10+
height: 30px;
11+
border-radius: 30px;
12+
13+
@include transition;
14+
}
15+
16+
@mixin form-settings {
17+
font-size: inherit;
18+
padding: 8px 16px;
19+
border-radius: 30px;
20+
background-color: transparent;
21+
border: 1px solid #212121 ;
22+
}
23+
24+
25+
26+
.main {
27+
&__title {
28+
text-align: center;
29+
margin: 30px 0;
30+
font-family: "Roboto Mono", monospace;
31+
}
32+
33+
&__to-do {
34+
}
35+
}
36+
37+
.to-do {
38+
padding: 30px;
39+
border-radius: 30px;
40+
background-color: white;
41+
&__form {
42+
display: flex;
43+
justify-content: space-between;
44+
gap: 20px;
45+
margin-bottom: 20px;
46+
}
47+
48+
&__input {
49+
@include form-settings;
50+
border-color: rgba(0, 0, 0, 0.2);
51+
width: 100%;
52+
}
53+
54+
&__submit-button {
55+
@include form-settings;
56+
@include transition;
57+
58+
&:hover {
59+
background-color: black;
60+
color: white;
61+
}
62+
}
63+
64+
&__list:not(:last-child) {
65+
margin-bottom: 10px;
66+
}
67+
68+
&__item {
69+
display: flex;
70+
justify-content: space-between;
71+
align-items: flex-start;
72+
background-color: rgba(175, 175, 175, 0.1);
73+
padding: 10px 20px;
74+
border-radius: 15px;
75+
}
76+
77+
&__text {
78+
margin-right: 5px;
79+
}
80+
81+
/**/
82+
&__buttons {
83+
display: flex;
84+
align-items: center;
85+
gap: 15px;
86+
}
87+
88+
/**/
89+
&__button {
90+
&_accept {
91+
@include icon-button;
92+
&:hover {
93+
color: #29ff29;
94+
background-color: rgba(41, 255, 41, 0.2);
95+
}
96+
}
97+
98+
&_edit {
99+
@include icon-button;
100+
&:hover {
101+
color: #80acff;
102+
background-color: rgba(128, 172, 255, 0.2);
103+
}
104+
}
105+
106+
&_delete {
107+
@include icon-button;
108+
&:hover {
109+
color: red;
110+
background-color: rgba(255, 0, 0, 0.2);
111+
}
112+
}
113+
}
114+
}

‎images/main-page/05.png‎

-19.9 KB
Loading

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,18 @@ <h1 class="main__title">Small JavaScript Projects</h1>
106106
</div>
107107
</div>
108108

109+
<div class="cards-block__column">
110+
<div class="cards-block__item">
111+
<a href="pages/to-do-list.html" class="cards-block__image">
112+
<img src="images/main-page/05.png"
113+
alt="To Do List">
114+
</a>
115+
<a href="pages/counter.html"
116+
class="cards-block__title">To do list</a>
117+
<p class="cards-block__subtitle">...</p>
118+
</div>
119+
</div>
120+
109121
</div>
110122
</div>
111123
</div>

‎pages/to-do-list.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>To Do List</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/to-do-list.css">
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<main class="main">
13+
<div class="container">
14+
<h1 class="main__title">To Do List</h1>
15+
<div class="main__to-do to-do">
16+
<form class="to-do__form">
17+
<input type="text" class="to-do__input"
18+
placeholder="Write here...">
19+
<button class="to-do__submit-button" type="submit">Add
20+
</button>
21+
</form>
22+
<div class="to-do__list">
23+
<div class="to-do__item">
24+
<div class="to-do__text">text</div>
25+
<div class="to-do__buttons">
26+
<button type="button" class="to-do__button_accept">
27+
<i class="fa-solid fa-check"></i>
28+
</button>
29+
<button type="button" class="to-do__button_edit">
30+
<i class="fa-regular fa-pen-to-square"></i>
31+
</button>
32+
<button type="button" class="to-do__button_delete">
33+
<i class="fa-regular fa-trash-can"></i>
34+
</button>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="to-do__list">
39+
<div class="to-do__item">
40+
<div class="to-do__text">text</div>
41+
<div class="to-do__buttons">
42+
<button type="button" class="to-do__button_accept">
43+
<i class="fa-solid fa-check"></i>
44+
</button>
45+
<button type="button" class="to-do__button_edit">
46+
<i class="fa-regular fa-pen-to-square"></i>
47+
</button>
48+
<button type="button" class="to-do__button_delete">
49+
<i class="fa-regular fa-trash-can"></i>
50+
</button>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</main>
57+
</div>
58+
59+
<script src="https://kit.fontawesome.com/b8e2be2715.js" crossorigin="anonymous"></script>
60+
<script src="../scripts/to-do-list.js"></script>
61+
</body>
62+
</html>

‎scripts/to-do-list.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)