Skip to content

Commit 64582b6

Browse files
sukuasoftsukuasoft
committed
Base do projecto
0 parents  commit 64582b6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1317
-0
lines changed

‎assets/css/styles.css‎

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
:root {
2+
--default-size: 17px;
3+
--font-color: #151515;
4+
--verde: #00e140;
5+
}
6+
7+
8+
* {
9+
box-sizing: border-box;
10+
line-height: 1;
11+
scroll-behavior: smooth;
12+
}
13+
14+
.verde {
15+
color: var(--verde);
16+
}
17+
18+
a {
19+
text-decoration: none;
20+
color: unset;
21+
}
22+
23+
input,
24+
textarea,
25+
button {
26+
font-size: var(--default-size);
27+
border: none;
28+
outline: none;
29+
}
30+
31+
html,
32+
body {
33+
width: 100%;
34+
height: 100%;
35+
}
36+
37+
body {
38+
font-size: var(--default-size);
39+
margin: 0px;
40+
padding: 0px;
41+
font-family: Arial, sans-serif;
42+
color: var(--font-color);
43+
}
44+
45+
46+
/* A area onde o contéudo deve realmente ser apresentado */
47+
.layout-area {
48+
width: 1150px;
49+
padding: 0px 10px;
50+
max-width: 100%;
51+
margin: 0px auto;
52+
}
53+
54+
/* Header */
55+
.header {
56+
background-image:
57+
radial-gradient(#e4fee5 0%, #cffdd1 100%);
58+
height: 100%;
59+
width: 100%;
60+
position: relative;
61+
z-index: 2;
62+
padding: 30px 0px;
63+
}
64+
65+
/* Navbar */
66+
67+
.navbar {
68+
display: flex;
69+
align-items: center;
70+
}
71+
72+
.navbar-right {
73+
display: flex;
74+
align-items: center;
75+
margin-left: auto;
76+
gap: 15px;
77+
}
78+
79+
.navbar-icon {
80+
height: 32px;
81+
}
82+
83+
.navbar-link {
84+
85+
cursor: pointer;
86+
padding: 4px 14px;
87+
/* background-color: #b8ffcc;*/
88+
background-color: white;
89+
color: #009f2d;
90+
filter: drop-shadow(2px 2px 3px #a8fcc0);
91+
92+
border-radius: 12px;
93+
}
94+
95+
.navbar-link:hover {
96+
background-color: var(--verde);
97+
filter: drop-shadow(2px 2px 3px #86f8a6);
98+
99+
transition: all 0.2s;
100+
color: white;
101+
}
102+
103+
/* Search Area */
104+
.search-area {
105+
position: relative;
106+
margin-left: 30px;
107+
}
108+
109+
/* Header Content */
110+
111+
.header-content {
112+
display: flex;
113+
align-items: center;
114+
margin: 50px auto 0px auto;
115+
width: 80%;
116+
}
117+
118+
119+
.header-side-player {
120+
margin-right: 50px;
121+
width: 50%;
122+
}
123+
124+
.header-side-content {
125+
line-height: 1.4;
126+
width: 50%;
127+
text-align: justify;
128+
}
129+
130+
/*Player*/
131+
.player {
132+
width: 380px;
133+
position: relative;
134+
animation: player_anim 2.2s ease-in-out infinite;
135+
}
136+
137+
@keyframes player_anim {
138+
0% {
139+
top: 0px;
140+
}
141+
142+
50% {
143+
top: 20px;
144+
}
145+
146+
100% {
147+
top: 0px;
148+
}
149+
}
150+
151+
/* Section Default*/
152+
.section-default {
153+
padding: 50px 0px;
154+
}
155+
156+
.section-title {
157+
font-weight: bold;
158+
font-size: 2em;
159+
width: fit-content;
160+
margin: 0px auto 40px auto;
161+
162+
background: linear-gradient(to bottom, #00e140, #00b533);
163+
-webkit-background-clip: text;
164+
-webkit-text-fill-color: transparent;
165+
}
166+
167+
/* Block Info */
168+
169+
.block-info {
170+
position: relative;
171+
width: 80%;
172+
padding: 15px 30px;
173+
margin: 0px auto 50px auto;
174+
}
175+
176+
.block-info:last-child {
177+
margin-bottom: 0px;
178+
}
179+
180+
.block-info::before,
181+
.block-info::after {
182+
display: block;
183+
content: '';
184+
position: absolute;
185+
height: 100%;
186+
width: 3px;
187+
background: linear-gradient(to bottom, #00e140, #00b533);
188+
border-radius: 4px;
189+
}
190+
191+
.block-info::before {
192+
left: 0px;
193+
top: 0px;
194+
195+
}
196+
197+
.block-info::after {
198+
right: 0px;
199+
top: 0px;
200+
}
201+
202+
.block-info-title {
203+
font-weight: bold;
204+
width: fit-content;
205+
margin: 0px auto 30px auto;
206+
font-size: 1.4em;
207+
}
208+
209+
.block-info-container-items {
210+
display: flex;
211+
flex-wrap: wrap;
212+
gap: 30px 40px;
213+
}
214+
215+
/* Card Person */
216+
.cd-person {
217+
display: flex;
218+
flex-direction: column;
219+
gap: 8px;
220+
width: 150px;
221+
font-size: 14px;
222+
align-items: center;
223+
}
224+
225+
.cd-person-image {
226+
border-radius: 50%;
227+
overflow: hidden;
228+
aspect-ratio: 1/1;
229+
width: 60px;
230+
height: 60px;
231+
}
232+
233+
.cd-person-image img {
234+
aspect-ratio: 1/1;
235+
object-fit: cover;
236+
max-width: 100%;
237+
}
238+
239+
.cd-person-name {
240+
font-weight: bold;
241+
}
242+
243+
.cd-description-name {
244+
color: #303030;
245+
}
246+
247+
/* Doe Section */
248+
.doe-section {
249+
250+
background-image:
251+
radial-gradient(#e4fee5 0%, #cffdd1 100%);
252+
253+
padding: 40px 0px;
254+
}
255+
256+
.doe-section-area {
257+
width: 60%;
258+
margin: 0px auto;
259+
}
260+
261+
.doe-section-title {
262+
font-weight: bold;
263+
font-size: 1.6em;
264+
margin-bottom: 15px;
265+
text-align: center;
266+
}
267+
268+
.doe-section-description {
269+
color: #404040;
270+
margin-bottom: 20px;
271+
}
272+
273+
274+
.doe-section-founders {
275+
display: flex;
276+
align-items: center;
277+
gap: 25px;
278+
justify-content: center;
279+
margin-bottom: 40px;
280+
}
281+
282+
.founder {
283+
border-radius: 50%;
284+
overflow: hidden;
285+
aspect-ratio: 1/1;
286+
width: 80px;
287+
height: 80px;
288+
position: relative;
289+
display: block;
290+
cursor: pointer;
291+
}
292+
293+
.founder:hover .founder-image {
294+
filter: brightness(0.5);
295+
transition: all .3s;
296+
}
297+
298+
.founder:hover .founder-link-icon {
299+
display: block;
300+
}
301+
302+
.founder-image {
303+
aspect-ratio: 1/1;
304+
object-fit: cover;
305+
max-width: 100%;
306+
}
307+
308+
.founder-link-icon {
309+
display: none;
310+
position: absolute;
311+
top: 50%;
312+
left: 50%;
313+
transform: translate(-50%, -50%);
314+
}
315+
316+
.btn-doar {
317+
background-color: var(--verde);
318+
color: white;
319+
padding: 4px 20px;
320+
border-radius: 6px;
321+
cursor: pointer;
322+
display: block;
323+
width: fit-content;
324+
margin: 0px auto;
325+
}
326+
327+
.btn-doar:hover {
328+
background-color: #00cb3a;
329+
}
330+
331+
332+
/* Rodape */
333+
.footer {
334+
background: linear-gradient(to right,#009f2d,#008c28);
335+
color:#ccffcf;
336+
padding: 15px 0px;
337+
}
338+
339+
340+
.footer-area{
341+
display: flex;
342+
align-items: center;
343+
}
344+
345+
.footer-email{
346+
color:white;
347+
}
348+
349+
350+
.footer-right{
351+
margin-left: auto;
352+
display: flex;
353+
align-items: center;
354+
gap: 10px;
355+
}
356+
357+
.footer-link:hover{
358+
text-decoration: underline;
359+
}

‎assets/icons/link.png‎

1.45 KB
Loading

‎assets/icons/logo-white.png‎

3.83 KB
Loading

‎assets/icons/logo.png‎

3.82 KB
Loading

‎assets/images/founders/albano.jpg‎

49.9 KB
Loading

‎assets/images/founders/alessandro.jpeg‎

21.3 KB
Loading

‎assets/images/founders/sebastiao.jpg‎

1.54 MB
Loading

‎assets/images/player.png‎

217 KB
Loading

‎assets/images/players/benzema.png‎

133 KB
Loading

‎assets/images/players/gavi.jpg‎

47.5 KB
Loading

0 commit comments

Comments
 (0)