Skip to content

Commit fae1776

Browse files
kimsehyun-34kimsehyun-34
authored
Create ac_aboutdev_style.css
1 parent dd37afe commit fae1776

1 file changed

Lines changed: 383 additions & 0 deletions

File tree

‎ac_aboutdev_style.css‎

Lines changed: 383 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,383 @@
1+
body {
2+
margin: 0;
3+
font-family: Arial, sans-serif;
4+
background-color: black;
5+
color: white;
6+
scroll-behavior: smooth;
7+
}
8+
9+
.hero {
10+
position: relative;
11+
height: 5vh;
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: center;
15+
align-items: center;
16+
/* background: black url('img/pattern.png') center top/70%;
17+
background-repeat: no-repeat;
18+
background-position: center; */
19+
}
20+
21+
.navbar {
22+
position: absolute;
23+
top: 20px;
24+
left: 0;
25+
right: 0;
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center; /* 수직 중앙 정렬 */
29+
padding: 0 20px;
30+
}
31+
32+
/* 이미지 요청 태그 디자인 */
33+
.nav-left {
34+
display: flex;
35+
align-items: center;
36+
}
37+
38+
.tag-link {
39+
display: inline-block; /* 추가! */
40+
padding: 8px 15px;
41+
background-color: #c1dbe3;
42+
color: black;
43+
text-decoration: none;
44+
font-weight: bold;
45+
border-radius: 10px;
46+
transition: 0.2s ease;
47+
white-space: nowrap; /* 줄 바꿈 방지 */
48+
}
49+
50+
.tag-link:hover {
51+
background-color: #aacbd5;
52+
}
53+
54+
/* 회원가입, 로그인 버튼 디자인 */
55+
.nav-buttons button {
56+
margin: 0 5px;
57+
padding: 10px 20px;
58+
background-color: #c1dbe3;
59+
border: none;
60+
cursor: pointer;
61+
font-weight: bold;
62+
border-radius: 10px; /* 둥글게 */
63+
transition: 0.2s ease;
64+
}
65+
66+
.nav-buttons button:hover {
67+
background-color: #aacbd5;
68+
}
69+
70+
/* 메인 화면에 있는 FITVERSE 디자인 */
71+
.logo-container h1 {
72+
font-size: 15vw;
73+
color: white; /* 텍스트 색상 변경 */
74+
text-align: center;
75+
font-family: 'Montserrat', sans-serif;
76+
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* 빛나는 효과 추가 */
77+
}
78+
79+
.content {
80+
padding: 200px 20px;
81+
display: flex;
82+
flex-direction: column;
83+
align-items: center;
84+
gap: 40px;
85+
}
86+
.section-text {
87+
max-width: 1500px;
88+
text-align: center;
89+
color: #ff7833;
90+
line-height: 1.8;
91+
font-size: 1.1rem;
92+
transition: all 0.8s ;
93+
font-family: "Noto Sans KR", sans-serif;
94+
}
95+
96+
.section-text h2 {
97+
font-size: 3rem;
98+
color: #ffffff;
99+
margin-bottom: 20px;
100+
}
101+
102+
.ani_text em{
103+
display: block;
104+
margin-top: 20px;
105+
color: #ff7833;
106+
font-style: italic;
107+
opacity: 0;
108+
transition: all 1s ;
109+
font-family: "Noto Sans KR", sans-serif;
110+
}
111+
112+
.ani_text{
113+
font-size: 1vw;
114+
display: block;
115+
margin-top: 20px;
116+
color: #ccc;
117+
font-style: italic;
118+
opacity: 0;
119+
transition: all 1s ;
120+
font-family: "Noto Sans KR", sans-serif;
121+
}
122+
123+
.ani_text_bf {
124+
opacity: 1;
125+
}
126+
127+
.ani_text_bf em {
128+
opacity: 1;
129+
}
130+
131+
.section-img {
132+
width: 300px;
133+
border-radius: 20px;
134+
}
135+
136+
.footer {
137+
text-align: center;
138+
padding: 50px;
139+
background-color: #111;
140+
}
141+
142+
/* fitvers_start */
143+
.fitvers_start_content {
144+
display: flex;
145+
flex-direction: column;
146+
align-items: center;
147+
gap: 20px;
148+
}
149+
150+
.fitvers_start_content{
151+
padding: 200px 20px;
152+
display: flex;
153+
flex-direction: column;
154+
align-items: center;
155+
gap: 40px;
156+
}
157+
158+
.start_btn {
159+
padding: 15vw 10vw;
160+
background-color: #c1dbe30a;
161+
border: 2px solid #ffffff;
162+
cursor: pointer;
163+
font-weight: bold;
164+
font-size: 5vw;
165+
border-radius: 100%; /* 둥글게 */
166+
transition: 0.2s ease;
167+
color: #ffffff;
168+
text-align: center;
169+
box-shadow: 0 0 70px 15px rgba(255, 255, 255, 0.5); /* 빛샘 효과 추가 */
170+
}
171+
172+
.start_btn:hover {
173+
background-color: #ffffff;
174+
color: black;
175+
box-shadow: 0 0 80px 20px rgba(255, 255, 255, 0.8); /* 호버 시 빛샘 효과 강조 */
176+
}
177+
178+
/* Modal styles */
179+
.modal.hidden {
180+
display: none;
181+
}
182+
183+
184+
/* 실제 회원가입 로그인 창 눌렀을 때의 모달 부분 */
185+
.modal {
186+
position: fixed;
187+
top: 0;
188+
left: 0;
189+
width: 100%;
190+
height: 100%;
191+
background-color: rgba(0,0,0,0.7);
192+
display: flex;
193+
justify-content: center;
194+
align-items: center;
195+
z-index: 999;
196+
}
197+
198+
/* 모달 스타일 코드 부분 여기서부터 */
199+
.modal-content {
200+
position: relative;
201+
background: white;
202+
color: black;
203+
padding: 30px 40px;
204+
border-radius: 15px; /* 더 둥글게 */
205+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
206+
width: 300px;
207+
text-align: center;
208+
}
209+
210+
.modal-content input {
211+
display: block;
212+
margin: 10px auto;
213+
padding: 10px;
214+
width: 90%;
215+
border-radius: 8px; /* 입력창 둥글게 */
216+
border: 1px solid #ccc;
217+
}
218+
219+
.modal-content button {
220+
padding: 10px 20px;
221+
background-color: black;
222+
color: white;
223+
border: none;
224+
border-radius: 8px; /* 버튼 둥글게 */
225+
margin-top: 10px;
226+
}
227+
/* 여기까지 */
228+
229+
.head_btn{
230+
display: inline-block;
231+
padding: 8px 12px;
232+
background-color: #0a0a0a;
233+
border: 2px solid #ffffff;
234+
color: rgb(255, 255, 255);
235+
border-radius: 50px;
236+
transition: 0.2s ease;
237+
margin: 0px 15px;
238+
/* box-shadow: 0 0 70px 15px rgba(255, 255, 255, 0.5); */
239+
}
240+
241+
.head_btn:hover {
242+
background-color: #ffffff;
243+
color: black;
244+
box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.8); /* 호버 시 빛샘 효과 강조 */
245+
}
246+
247+
.close {
248+
position: absolute;
249+
top: 20px;
250+
right: 30px;
251+
font-size: 30px;
252+
cursor: pointer;
253+
}
254+
255+
.section-banner-img1{
256+
width: 20%;
257+
height: auto;
258+
max-width: 500px;
259+
border-radius: 5vw;
260+
box-shadow: 0 0 70px 15px rgb(247, 247, 247);
261+
}
262+
263+
.section-banner-img2{
264+
width: 20%;
265+
height: auto;
266+
max-width: 500px;
267+
border-radius: 5vw;
268+
box-shadow: 0 0 70px 15px rgba(16, 127, 255, 0.623);
269+
}
270+
271+
/* 팀원 소개에 쓰이는 클래스 입니다잉 */
272+
.team {
273+
display: flex;
274+
flex-wrap: wrap;
275+
justify-content: center;
276+
gap: 30px;
277+
padding: 40px;
278+
font-family: "Noto Sans KR", sans-serif;
279+
}
280+
281+
/* 각 팀원 카드 스타일 */
282+
.member {
283+
background-color: #ffffff;
284+
border-radius: 10px;
285+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
286+
width: 280px;
287+
text-align: center;
288+
padding: 25px 20px;
289+
transition: transform 0.3s ease;
290+
}
291+
292+
.member:hover {
293+
transform: translateY(-8px);
294+
}
295+
296+
/* 팀원 이미지 스타일 */
297+
.member img {
298+
width: 190px;
299+
height: 250px;
300+
border-radius: 10%;
301+
object-fit: cover;
302+
margin-bottom: 15px;
303+
border: 0px solid #000000;
304+
}
305+
306+
/* 이름 스타일 */
307+
.member h3 {
308+
font-size: 1.2rem;
309+
margin-bottom: 10px;
310+
color: #333333;
311+
}
312+
313+
/* 역할 목록 스타일 */
314+
.member ul {
315+
list-style: none;
316+
padding: 0;
317+
margin: 0;
318+
}
319+
320+
.member ul li {
321+
font-size: 0.95rem;
322+
color: #555555;
323+
margin: 5px 0;
324+
}
325+
326+
main{
327+
height:400vh;
328+
overflow: clip;
329+
}
330+
331+
.logo-container {
332+
width: 100%;
333+
float: left;
334+
overflow: hidden;
335+
position: -webkit-sticky;
336+
position: sticky;
337+
height: 85.2vh;
338+
top: 0;
339+
padding: 70px 0 0 12px;
340+
text-align: center;
341+
font-size: 120px;
342+
transition: all 0.5s ease;
343+
color: #ffffff;
344+
z-index: 10;
345+
}
346+
.logo-container.zoomed {
347+
font-size: 300px; /* 최종 확대 크기 */
348+
color: #fff; /* 텍스트 색상 변경 */
349+
background-color: #000; /* 배경색 변경 */
350+
transition: all 0s ease; /* 부드러운 전환 */
351+
}
352+
353+
.home_btn{
354+
text-align: center;
355+
padding: 15px 5%;
356+
background-color: #000000;
357+
border: 2px solid #ffffff;
358+
color: rgb(255, 255, 255);
359+
border-radius: 50px;
360+
transition: 0.2s ease;
361+
margin: 2% 90vh;
362+
font-size: 18px;
363+
display: flex;
364+
flex-direction: column;
365+
}
366+
367+
.home_btn:hover {
368+
background-color: #ffffff;
369+
color: black;
370+
box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.8); /* 호버 시 빛샘 효과 강조 */
371+
}
372+
373+
/* 반응형 디자인 */
374+
@media (max-width: 768px) {
375+
.team {
376+
flex-direction: column;
377+
align-items: center;
378+
}
379+
380+
.member {
381+
width: 90%;
382+
}
383+
}

0 commit comments

Comments
 (0)