Skip to content

Commit 80b062b

Browse files
nikita-savkinnikita-savkin
committed
first commit
0 parents  commit 80b062b

11 files changed

+712
-0
lines changed

‎css/style.css

+280
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
@font-face {
2+
font-family: "Futuralightc";
3+
src: url("../fonts/futuralightc.woff2") format("woff2"), url("../fonts/futuralightc.otf") format("otf");
4+
}
5+
6+
*, *:before, *:after {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
font-family: 'Futuralightc', sans-serif;
12+
width: 100%;
13+
margin: 0 auto;
14+
}
15+
16+
input, button, textarea {
17+
font-family: 'Futuralightc', sans-serif;
18+
outline: none;
19+
}
20+
21+
button {
22+
font-family: 'Futuralightc', sans-serif;
23+
cursor: pointer;
24+
}
25+
26+
button:focus {
27+
outline: none;
28+
}
29+
30+
a, a:visited, a:hover {
31+
text-decoration: none;
32+
}
33+
34+
li {
35+
list-style: none;
36+
}
37+
38+
h1, h2, h3, h4, h5, h6, p, ul {
39+
margin: 0;
40+
padding: 0;
41+
}
42+
43+
img {
44+
width: 100%;
45+
height: auto;
46+
}
47+
48+
h2 {
49+
font-size: 26px;
50+
}
51+
52+
.body__wrapper {
53+
height: 100vh;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
background: linear-gradient(#C9D4EFFF, #C4CFEAFF);
58+
}
59+
60+
.wallet {
61+
display: flex;
62+
width: 1200px;
63+
height: 800px;
64+
background-color: #fff;
65+
border-radius: 30px;
66+
box-shadow: 0 10px 20px #8991B8FF;
67+
}
68+
69+
.wallet__panel {
70+
width: 400px;
71+
height: 100%;
72+
padding: 50px;
73+
background-color: #EDF1FAFF;
74+
border-top-left-radius: 30px;
75+
border-bottom-left-radius: 30px;
76+
}
77+
78+
.wallet__content {
79+
width: 800px;
80+
padding: 50px;
81+
}
82+
83+
.cards {
84+
margin-bottom: 30px;
85+
}
86+
87+
.cards__title {
88+
margin-bottom: 20px;
89+
}
90+
91+
.card {
92+
display: flex;
93+
flex-direction: column;
94+
justify-content: space-between;
95+
width: 300px;
96+
height: 170px;
97+
padding: 5px 20px 20px;
98+
background: linear-gradient(200deg, #6F8BD4FF, #5779CDFF);
99+
border-radius: 10px;
100+
color: #ffffff;
101+
}
102+
103+
.card__header, .card__middle, .card__footer {
104+
display: flex;
105+
align-items: center;
106+
justify-content: space-between;
107+
}
108+
109+
.card__dev-img {
110+
width: 50px;
111+
}
112+
113+
.card__chip-img {
114+
width: 40px;
115+
}
116+
117+
.card__owner {
118+
font-size: 20px;
119+
font-weight: 600;
120+
}
121+
122+
.card__balance {
123+
font-size: 18px;
124+
}
125+
126+
.transaction__title {
127+
margin-bottom: 10px;
128+
}
129+
130+
.transaction__form {
131+
display: flex;
132+
flex-direction: column;
133+
}
134+
135+
.transaction__label {
136+
margin-bottom: 5px;
137+
}
138+
139+
.transaction input, .transaction select {
140+
padding: 15px 20px;
141+
margin-bottom: 15px;
142+
background-color: #DDE4F5FF;
143+
border: none;
144+
border-radius: 5px;
145+
font-size: 20px;
146+
color: #4A6EC9FF;
147+
font-weight: 600;
148+
}
149+
150+
.transaction__confirm-btn {
151+
margin: 15px auto;
152+
width: 240px;
153+
padding: 10px 15px;
154+
color: #ffffff;
155+
background-color: #FF6D02FF;
156+
border: none;
157+
border-radius: 5px;
158+
font-size: 20px;
159+
}
160+
161+
.spendings__title {
162+
margin-bottom: 20px;
163+
}
164+
165+
.spendings__content {
166+
display: flex;
167+
align-items: center;
168+
}
169+
170+
.spendings__single {
171+
margin-right: 50px;
172+
}
173+
174+
.spendings__single-title {
175+
font-size: 16px;
176+
margin-bottom: 5px;
177+
font-weight: 600;
178+
color: #BABABAFF;
179+
}
180+
181+
.spendings__single-amount {
182+
font-size: 30px;
183+
font-weight: 600;
184+
}
185+
186+
.spendings__single:nth-of-type(1) .spendings__single-amount {
187+
color: #4A6EC9FF;
188+
}
189+
190+
.spendings__single:nth-of-type(2) .spendings__single-amount {
191+
color: #21BF73FF;
192+
}
193+
194+
.spendings__single:nth-of-type(3) .spendings__single-amount {
195+
color: #FD5E53FF;
196+
}
197+
198+
.transaction-history {
199+
width: 720px;
200+
}
201+
202+
.transaction-history__title {
203+
margin-bottom: 20px;
204+
}
205+
206+
.transaction-history__header {
207+
display: flex;
208+
align-items: center;
209+
margin-bottom: 5px;
210+
}
211+
212+
.transaction-history__descr:nth-of-type(1) {
213+
width: 200px;
214+
}
215+
216+
.transaction-history__descr:nth-of-type(2) {
217+
width: 150px;
218+
}
219+
220+
.transaction-history__descr:nth-of-type(3) {
221+
width: 110px;
222+
}
223+
224+
.transaction-history__descr:nth-of-type(4) {
225+
width: 110px;
226+
}
227+
228+
.transaction-history__descr:nth-of-type(5) {
229+
text-align: right;
230+
width: 130px;
231+
}
232+
233+
.transaction-history__content {
234+
height: 350px;
235+
overflow-y: scroll;
236+
}
237+
238+
.transaction-history__content::-webkit-scrollbar {
239+
width: 6px;
240+
height: 100%;
241+
}
242+
243+
.transaction-history__content::-webkit-scrollbar-track {
244+
border-radius: 100px;
245+
}
246+
247+
.transaction-history__content::-webkit-scrollbar-thumb {
248+
background: #5779CDFF;
249+
border-radius: 20px;
250+
}
251+
252+
.single-transaction {
253+
display: flex;
254+
align-items: center;
255+
padding: 10px 0px;
256+
font-size: 20px;
257+
font-weight: 600;
258+
border-bottom: 1px solid #ECECECFF;
259+
}
260+
261+
.single-transaction__info:nth-of-type(1) {
262+
width: 200px;
263+
}
264+
265+
.single-transaction__info:nth-of-type(2) {
266+
width: 150px;
267+
}
268+
269+
.single-transaction__info:nth-of-type(3) {
270+
width: 110px;
271+
}
272+
273+
.single-transaction__info:nth-of-type(4) {
274+
width: 110px;
275+
}
276+
277+
.single-transaction__info:nth-of-type(5) {
278+
text-align: right;
279+
width: 130px;
280+
}

‎fonts/futuralightc.otf

18 KB
Binary file not shown.

‎fonts/futuralightc.woff2

8.89 KB
Binary file not shown.

‎img/credit-card.svg

+1
Loading

‎img/visa.svg

+67
Loading

0 commit comments

Comments
 (0)