Skip to content

Commit 9af70af

Browse files
DmitriySkachkovDmitriySkachkov
committed
Добавил репозиторий
0 parents  commit 9af70af

File tree

5 files changed

+232
-0
lines changed

5 files changed

+232
-0
lines changed

‎.github/workflows/greetings.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
name: Close Pull Request
2+
3+
on:
4+
pull_request_target:
5+
types: [opened]
6+
7+
jobs:
8+
run:
9+
if: github.repository == 'GlebkaF/webdev-dom-homework'
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: superbrothers/close-pull-request@v3
13+
with:
14+
# Optional. Post a issue comment just before closing a pull request.
15+
comment: "Привет! Сделай пожалуйста Pull Request в свой репозиторий, сейчас ты сделал PR в репозиторий Глеба. Посмотри в домашке, там на скриншоте нарисовано где выбрать свой репозиторий"

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Проект "Комментарии"
2+
3+
https://glebkaf.github.io/webdev-dom-homework/
4+
5+
Верстка для учебного проекта студентов Skypro
6+
7+
## Как разрабатывать
8+
9+
Открой index.html в браузере

‎favicon.ico‎

14.7 KB
Binary file not shown.

‎index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Проект "Комменты"</title>
5+
<meta charset="utf-8" />
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
9+
<body>
10+
<div class="container">
11+
<ul class="comments">
12+
<li class="comment">
13+
<div class="comment-header">
14+
<div>Глеб Фокин</div>
15+
<div>12.02.22 12:18</div>
16+
</div>
17+
<div class="comment-body">
18+
<div class="comment-text">
19+
Это будет первый комментарий на этой странице
20+
</div>
21+
</div>
22+
<div class="comment-footer">
23+
<div class="likes">
24+
<span class="likes-counter">3</span>
25+
<button class="like-button"></button>
26+
</div>
27+
</div>
28+
</li>
29+
<li class="comment">
30+
<div class="comment-header">
31+
<div>Варвара Н.</div>
32+
<div>13.02.22 19:22</div>
33+
</div>
34+
<div class="comment-body">
35+
<div class="comment-text">
36+
Мне нравится как оформлена эта страница! ❤
37+
</div>
38+
</div>
39+
<div class="comment-footer">
40+
<div class="likes">
41+
<span class="likes-counter">75</span>
42+
<button class="like-button -active-like"></button>
43+
</div>
44+
</div>
45+
</li>
46+
</ul>
47+
<div class="add-form">
48+
<input
49+
type="text"
50+
class="add-form-name"
51+
placeholder="Введите ваше имя"
52+
/>
53+
<textarea
54+
type="textarea"
55+
class="add-form-text"
56+
placeholder="Введите ваш коментарий"
57+
rows="4"
58+
></textarea>
59+
<div class="add-form-row">
60+
<button class="add-form-button">Написать</button>
61+
</div>
62+
</div>
63+
</div>
64+
</body>
65+
66+
<script>
67+
"use strict";
68+
// Код писать здесь
69+
console.log("It works!");
70+
</script>
71+
</html>

‎styles.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
body {
2+
margin: 0;
3+
}
4+
5+
.container {
6+
font-family: Helvetica;
7+
color: #ffffff;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
padding-top: 80px;
12+
padding-bottom: 200px;
13+
background: #202020;
14+
min-height: 100vh;
15+
}
16+
17+
.comments,
18+
.comment {
19+
margin: 0;
20+
padding: 0;
21+
list-style: none;
22+
}
23+
24+
.comment,
25+
.add-form {
26+
width: 596px;
27+
box-sizing: border-box;
28+
background: radial-gradient(
29+
75.42% 75.42% at 50% 42.37%,
30+
rgba(53, 53, 53, 0) 22.92%,
31+
#7334ea 100%
32+
);
33+
filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08));
34+
border-radius: 20px;
35+
}
36+
37+
.comments {
38+
display: flex;
39+
flex-direction: column;
40+
gap: 24px;
41+
}
42+
43+
.comment {
44+
padding: 48px;
45+
}
46+
47+
.comment-header {
48+
font-size: 16px;
49+
display: flex;
50+
justify-content: space-between;
51+
}
52+
53+
.comment-footer {
54+
display: flex;
55+
justify-content: flex-end;
56+
}
57+
58+
.comment-body {
59+
margin-top: 32px;
60+
margin-bottom: 32px;
61+
}
62+
63+
.comment-text {
64+
font-size: 32px;
65+
}
66+
67+
.likes {
68+
display: flex;
69+
align-items: center;
70+
}
71+
72+
.like-button {
73+
all: unset;
74+
cursor: pointer;
75+
}
76+
77+
.likes-counter {
78+
font-size: 26px;
79+
margin-right: 8px;
80+
}
81+
82+
.like-button {
83+
margin-left: 10px;
84+
background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.11 16.9482L11 17.0572L10.879 16.9482C5.654 12.2507 2.2 9.14441 2.2 5.99455C2.2 3.81471 3.85 2.17984 6.05 2.17984C7.744 2.17984 9.394 3.26975 9.977 4.75204H12.023C12.606 3.26975 14.256 2.17984 15.95 2.17984C18.15 2.17984 19.8 3.81471 19.8 5.99455C19.8 9.14441 16.346 12.2507 11.11 16.9482ZM15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30' /%3E%3C/svg%3E");
85+
background-repeat: no-repeat;
86+
width: 22px;
87+
height: 22px;
88+
}
89+
90+
.-active-like {
91+
background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E");
92+
}
93+
94+
.add-form {
95+
padding: 20px;
96+
margin-top: 48px;
97+
display: flex;
98+
flex-direction: column;
99+
}
100+
101+
.add-form-name,
102+
.add-form-text {
103+
font-size: 16px;
104+
font-family: Helvetica;
105+
border-radius: 8px;
106+
border: none;
107+
}
108+
109+
.add-form-name {
110+
width: 300px;
111+
padding: 11px 22px;
112+
}
113+
114+
.add-form-text {
115+
margin-top: 12px;
116+
padding: 22px;
117+
resize: none;
118+
}
119+
120+
.add-form-row {
121+
display: flex;
122+
justify-content: flex-end;
123+
}
124+
125+
.add-form-button {
126+
margin-top: 24px;
127+
font-size: 24px;
128+
padding: 10px 20px;
129+
background-color: #bcec30;
130+
border: none;
131+
border-radius: 18px;
132+
cursor: pointer;
133+
}
134+
135+
.add-form-button:hover {
136+
opacity: 0.9;
137+
}

0 commit comments

Comments
 (0)