Skip to content

Commit 2e8f10a

Browse files
ruuuffruuuff
committed
Flash UI - Day 1
0 parents  commit 2e8f10a

File tree

9 files changed

+512
-0
lines changed

9 files changed

+512
-0
lines changed

‎assets/css/animations.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.image-container .images img.flash {
2+
animation: pump 1.5s linear infinite;
3+
}
4+
5+
@keyframes pump {
6+
0% {
7+
filter: drop-shadow(0px 0px 70px rgba(202, 183, 17, 0.4));
8+
}
9+
10+
14% {
11+
filter: drop-shadow(0px 0px 60px rgba(202, 183, 17, 0.6));
12+
}
13+
14+
28% {
15+
filter: drop-shadow(0px 0px 50px rgba(202, 183, 17, 0.5));
16+
}
17+
18+
42% {
19+
filter: drop-shadow(0px 0px 40px rgba(202, 183, 17, 0.4));
20+
}
21+
22+
56% {
23+
filter: drop-shadow(0px 0px 50px rgba(202, 183, 17, 0.3));
24+
}
25+
26+
70% {
27+
filter: drop-shadow(0px 0px 60px rgba(202, 183, 17, 0.4));
28+
}
29+
30+
84% {
31+
filter: drop-shadow(0px 0px 70px rgba(202, 183, 17, 0.6));
32+
}
33+
34+
100% {
35+
filter: drop-shadow(0px 0px 80px rgba(202, 183, 17, 0.5));
36+
}
37+
}
38+
39+
.image-container .images svg circle {
40+
animation: rotate 1.5s linear infinite;
41+
transform-origin: center center;
42+
transform-box: fill-box;
43+
}
44+
45+
@keyframes rotate {
46+
0% {
47+
transform: rotate(0);
48+
}
49+
50+
100% {
51+
transform: rotate(360deg);
52+
}
53+
}

‎assets/css/style.css

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
font-size: 62.5%;
11+
12+
--white: #D5D8BC;
13+
--white-dark: #A8A8A8;
14+
--white-light: #CDCDCD;
15+
16+
--yellow: #D7C206;
17+
--yellow-2: #E1BD00;
18+
--yellow-3: #887A00;
19+
20+
--black: #000;
21+
}
22+
23+
body {
24+
font-family: 'Roboto', sans-serif;
25+
height: 100vh;
26+
padding-top: 8.0rem;
27+
background: linear-gradient(287.47deg, rgba(221, 30, 30, 0.3) 11.63%, rgba(0, 0, 0, 0) 56.42%), linear-gradient(97.47deg, #010101 7.75%, rgba(1, 1, 1) 72.14%) no-repeat;
28+
}
29+
30+
h1 {
31+
font-size: 7.2rem;
32+
line-height: 117%;
33+
color: var(--white);
34+
letter-spacing: 0.05em;
35+
}
36+
37+
.subtitle {
38+
font-size: 1.2rem;
39+
line-height: 117%;
40+
font-weight: 500;
41+
color: var(--white-dark);
42+
letter-spacing: 0.05em;
43+
}
44+
45+
p {
46+
font-size: 1.4rem;
47+
line-height: 140%;
48+
color: var(--white-light);
49+
letter-spacing: 0.05em;
50+
}
51+
52+
a {
53+
text-decoration: none;
54+
font-size: 1.8rem;
55+
line-height: 117%;
56+
}
57+
58+
.links a,
59+
.buttons li:first-child a {
60+
color: var(--yellow);
61+
}
62+
63+
ul {
64+
list-style: none;
65+
}
66+
67+
.container {
68+
width: 90%;
69+
max-width: 1150px;
70+
margin: 0 auto;
71+
}
72+
73+
#header {
74+
position: fixed;
75+
top: 0;
76+
left: 0;
77+
width: 100%;
78+
height: 8.0rem;
79+
}
80+
81+
#header .container {
82+
display: flex;
83+
align-items: center;
84+
height: inherit;
85+
}
86+
87+
#header .container nav {
88+
margin-left: 5.2rem;
89+
}
90+
91+
#header .container nav ul {
92+
display: flex;
93+
align-items: center;
94+
}
95+
96+
#header .container nav ul li:not(:first-child) {
97+
margin-left: 2.7rem;
98+
}
99+
100+
#header .container nav ul li a {
101+
padding: 8px 0;
102+
position: relative;
103+
transition: color 0.2s ease;
104+
}
105+
106+
#header .container nav ul li a:hover {
107+
color: yellow;
108+
}
109+
110+
#header .container nav ul li a::before {
111+
content: '';
112+
position: absolute;
113+
left: 0%;
114+
bottom: 2px;
115+
width: 0%;
116+
height: 1px;
117+
background: linear-gradient(to right, #000 0%, yellow 30%, yellow 100%);
118+
transition: width 0.2s ease-in-out;
119+
}
120+
121+
#header .container nav ul li a:hover::before {
122+
width: 100%;
123+
}
124+
125+
main {
126+
height: 100%;
127+
}
128+
129+
main .container {
130+
display: flex;
131+
height: inherit;
132+
}
133+
134+
main .container > * {
135+
width: 50%;
136+
height: inherit;
137+
}
138+
139+
main section:first-child {
140+
display: flex;
141+
justify-content: center;
142+
flex-direction: column;
143+
}
144+
145+
h1.title {
146+
position: relative;
147+
display: inline-block;
148+
}
149+
150+
h1.title::before {
151+
content: "";
152+
position: absolute;
153+
right: 0;
154+
bottom: 0;
155+
width: 100%;
156+
height: 1px;
157+
background: linear-gradient(to right, #000 0%, var(--yellow) 30%, var(--yellow) 100%);
158+
}
159+
160+
.subtitle {
161+
display: block;
162+
margin: 2.0rem 0 3.5rem 0;
163+
}
164+
165+
.text {
166+
max-width: 514px;
167+
margin-bottom: 5rem;
168+
}
169+
170+
.buttons {
171+
display: flex;
172+
}
173+
174+
.buttons li:first-child {
175+
margin-right: 2.9rem;
176+
}
177+
178+
.buttons a {
179+
display: inline-block;
180+
border-radius: 2px;
181+
}
182+
183+
.buttons li:first-child a {
184+
border: 1px solid var(--yellow-3);
185+
padding: 0.95rem 3.55rem;
186+
transition: border 0.2s ease, color 0.2s ease;
187+
}
188+
189+
.buttons li:first-child a:hover {
190+
border: 1px solid var(--yellow);
191+
color: yellow;
192+
}
193+
194+
.buttons li:last-child a {
195+
filter: drop-shadow(0px 0px 15px rgba(202, 183, 17, 0.25));
196+
color: var(--black);
197+
background: linear-gradient(90.13deg, #E7D323 -4.65%, #E7B400 116.61%);
198+
padding: 0.95rem 2.4rem;
199+
position: relative;
200+
transition: color 0.6s ease;
201+
}
202+
203+
.buttons li:last-child a:hover {
204+
filter: drop-shadow(0px 0px 15px rgba(88, 172, 228, 0.25));
205+
color: var(--white);
206+
}
207+
208+
.buttons li:last-child a::before,
209+
.buttons li:last-child a::after {
210+
content: '';
211+
position: absolute;
212+
left: 0;
213+
width: 100%;
214+
height: 0;
215+
background-color: rgb(78, 78, 250);
216+
z-index: -1;
217+
transition: height 0.4s linear;
218+
}
219+
220+
.buttons li:last-child a::before {
221+
top: 0;
222+
}
223+
224+
.buttons li:last-child a::after {
225+
bottom: 0;
226+
}
227+
228+
.buttons li:last-child a:hover::before {
229+
height: 100%;
230+
}
231+
232+
.buttons li:last-child a:hover::after {
233+
height: 100%;
234+
}
235+
236+
main section:first-child div:last-child {
237+
margin-top: 8rem;
238+
}
239+
240+
.socials {
241+
display: flex;
242+
}
243+
244+
.socials li:not(:first-child) {
245+
margin-left: 1.9rem;
246+
}
247+
248+
.socials li a {
249+
background-color: var(--yellow-2);
250+
display: flex;
251+
align-items: center;
252+
justify-content: center;
253+
width: 3.5rem;
254+
height: 3.5rem;
255+
border-radius: 4px;
256+
filter: drop-shadow(0px 0px 15px rgba(243, 211, 41, 0.25));
257+
transition: background-color 0.2s ease;
258+
}
259+
260+
.socials li a:hover {
261+
background-color: yellow;
262+
}
263+
264+
.image-container {
265+
width: 100%;
266+
height: 100%;
267+
}
268+
269+
.image-container .images {
270+
position: relative;
271+
width: 100%;
272+
height: 100%;
273+
}
274+
275+
.image-container .images img,
276+
.image-container .images svg {
277+
position: absolute;
278+
left: 55%;
279+
transform: translate(-50%, -50%);
280+
}
281+
282+
.image-container .images svg {
283+
width: calc(464px - 10%);
284+
height: calc(628px - 10%);
285+
top: 43%;
286+
z-index: -1;
287+
}
288+
289+
290+
.image-container .images img {
291+
max-width: 361px;
292+
max-height: 471px;
293+
top: 50%;
294+
z-index: 1;
295+
filter: drop-shadow(0px 0px 80px rgba(202, 183, 17, 0.5));
296+
}

‎assets/icons/facebook-f.svg

Lines changed: 5 additions & 0 deletions
Loading

‎assets/icons/flash-icon.svg

Lines changed: 5 additions & 0 deletions
Loading

‎assets/icons/twitter.svg

Lines changed: 5 additions & 0 deletions
Loading

‎assets/icons/youtube.svg

Lines changed: 7 additions & 0 deletions
Loading

‎assets/images/flash.png

292 KB
Loading

‎assets/images/logo-bg.svg

Lines changed: 10 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)