Skip to content

Commit 0bed9d3

Browse files
SCodeGitSCodeGit
authored
Update style.css
1 parent cad20f1 commit 0bed9d3

1 file changed

Lines changed: 109 additions & 232 deletions

File tree

‎style.css‎

Lines changed: 109 additions & 232 deletions
Original file line numberDiff line numberDiff line change
@@ -1,281 +1,158 @@
1-
/* -------------------------------
2-
Root Variables — Elegant Tech Theme
3-
-------------------------------- */
4-
:root {
5-
--bg-dark: #0c0f17;
6-
--bg-gradient: linear-gradient(135deg, #0c0f17 0%, #151a25 100%);
7-
--card-bg: rgba(255, 255, 255, 0.05);
8-
--text-main: #f2f2f2;
9-
--accent-cyan: #00fff2;
10-
--accent-pink: #ff00e6;
11-
--accent-purple: #a45eff;
12-
--btn-glow: 0 0 10px var(--accent-cyan), 0 0 30px var(--accent-pink);
13-
--font-main: 'Poppins', sans-serif;
14-
--font-tech: 'JetBrains Mono', monospace;
1+
:root{
2+
--bg:#070b14;
3+
--card:rgba(255,255,255,0.06);
4+
--text:#eaf0ff;
5+
--muted:rgba(234,240,255,0.6);
6+
--accent:#6ea8ff;
7+
--accent2:#9b7bff;
8+
--border:rgba(255,255,255,0.12);
159
}
1610

17-
/* -------------------------------
18-
Global Reset
19-
-------------------------------- */
20-
* {
21-
margin: 0;
22-
padding: 0;
23-
box-sizing: border-box;
11+
*{
12+
margin:0;
13+
padding:0;
14+
box-sizing:border-box;
15+
font-family:Inter,system-ui;
2416
}
2517

26-
body {
27-
font-family: var(--font-main);
28-
color: var(--text-main);
29-
background: var(--bg-gradient);
30-
overflow-x: hidden;
31-
min-height: 100vh;
18+
body{
19+
background: radial-gradient(circle at top, #142044, var(--bg));
20+
color:var(--text);
3221
}
3322

34-
/* -------------------------------
35-
Hero Section
36-
-------------------------------- */
37-
.hero-outer {
38-
position: relative;
39-
text-align: center;
40-
padding: 100px 20px;
41-
background: radial-gradient(circle at top, rgba(0, 255, 255, 0.08), transparent 70%);
23+
/* HERO */
24+
.hero{
25+
padding:90px 0;
4226
}
4327

44-
.hero-logo {
45-
width: 120px;
46-
height: 120px;
47-
border-radius: 50%;
48-
box-shadow: 0 0 25px var(--accent-cyan);
49-
transition: transform 0.3s;
28+
.container{
29+
width:min(1100px,92%);
30+
margin:auto;
5031
}
5132

52-
.hero-logo:hover {
53-
transform: scale(1.05);
33+
.hero-inner{
34+
display:flex;
35+
gap:30px;
36+
align-items:center;
5437
}
5538

56-
.name {
57-
font-size: 3.5rem;
58-
letter-spacing: 2px;
59-
color: var(--accent-cyan);
60-
text-shadow: 0 0 10px var(--accent-cyan), 0 0 30px var(--accent-cyan);
61-
font-family: var(--font-tech);
62-
margin-top: 1rem;
39+
.logo{
40+
width:110px;
41+
border-radius:20px;
42+
box-shadow:0 20px 50px rgba(0,0,0,0.5);
6343
}
6444

65-
.tagline {
66-
color: var(--accent-purple);
67-
font-weight: 400;
68-
margin-top: 0.5rem;
69-
font-size: 1.1rem;
45+
.title{
46+
font-size:60px;
47+
font-weight:800;
7048
}
7149

72-
/* -------------------------------
73-
Buttons
74-
-------------------------------- */
75-
.btn {
76-
display: inline-block;
77-
margin: 10px;
78-
padding: 12px 28px;
79-
border-radius: 8px;
80-
font-weight: 600;
81-
text-decoration: none;
82-
color: #fff;
83-
transition: all 0.3s;
84-
font-family: var(--font-tech);
50+
.subtitle{
51+
color:var(--muted);
52+
margin:10px 0;
8553
}
8654

87-
.btn.primary {
88-
background: var(--accent-cyan);
89-
color: #000;
90-
box-shadow: 0 0 10px var(--accent-cyan), 0 0 25px var(--accent-cyan);
55+
/* BUTTON */
56+
.btn{
57+
display:inline-block;
58+
padding:12px 18px;
59+
border-radius:14px;
60+
background:var(--card);
61+
border:1px solid var(--border);
62+
color:white;
63+
text-decoration:none;
64+
transition:0.3s;
9165
}
9266

93-
.btn.ghost {
94-
border: 1px solid var(--accent-pink);
95-
color: var(--accent-pink);
67+
.btn:hover{
68+
transform:translateY(-3px);
69+
border-color:var(--accent);
9670
}
9771

98-
.btn:hover {
99-
box-shadow: 0 0 25px var(--accent-cyan), 0 0 50px var(--accent-pink);
100-
transform: translateY(-3px);
72+
.primary{
73+
background:linear-gradient(135deg,var(--accent),var(--accent2));
10174
}
10275

103-
/* -------------------------------
104-
Sections
105-
-------------------------------- */
106-
.section {
107-
padding: 80px 20px;
108-
text-align: center;
76+
/* SECTIONS */
77+
.section{
78+
padding:70px 0;
10979
}
11080

111-
.section h2 {
112-
font-size: 2.2rem;
113-
color: var(--accent-cyan);
114-
margin-bottom: 20px;
115-
text-shadow: 0 0 10px var(--accent-cyan);
81+
/* GRID */
82+
.grid{
83+
display:grid;
84+
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
85+
gap:20px;
11686
}
11787

118-
/* -------------------------------
119-
Project Cards
120-
-------------------------------- */
121-
.projects-grid {
122-
display: grid;
123-
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
124-
gap: 1.5rem;
125-
margin-top: 40px;
88+
.card{
89+
background:var(--card);
90+
border:1px solid var(--border);
91+
border-radius:18px;
92+
overflow:hidden;
93+
text-decoration:none;
94+
color:white;
95+
transition:0.4s;
12696
}
12797

128-
.project-card {
129-
background: var(--card-bg);
130-
border: 1px solid rgba(255, 255, 255, 0.1);
131-
border-radius: 12px;
132-
overflow: hidden;
133-
transition: all 0.3s ease;
134-
backdrop-filter: blur(6px);
135-
position: relative;
98+
.card:hover{
99+
transform:translateY(-8px);
100+
border-color:var(--accent);
136101
}
137102

138-
.project-card img {
139-
width: 100%;
140-
height: 180px;
141-
object-fit: cover;
103+
.card img{
104+
width:100%;
105+
height:150px;
106+
object-fit:cover;
142107
}
143108

144-
.project-body {
145-
padding: 20px;
109+
.card h3{
110+
padding:10px 15px 0;
146111
}
147112

148-
.project-body h3 {
149-
color: var(--accent-pink);
150-
font-size: 1.3rem;
151-
margin-bottom: 10px;
113+
.card p{
114+
padding:5px 15px 15px;
115+
color:var(--muted);
116+
font-size:13px;
152117
}
153118

154-
.project-body p {
155-
font-size: 0.95rem;
156-
color: #ccc;
119+
.dim{
120+
opacity:0.6;
157121
}
158122

159-
.project-card:hover {
160-
transform: translateY(-5px);
161-
box-shadow: 0 0 20px var(--accent-cyan);
123+
/* CONTACT */
124+
.grid2{
125+
display:grid;
126+
grid-template-columns:1fr 1fr;
127+
gap:20px;
162128
}
163129

164-
/* -------------------------------
165-
Contact Section
166-
-------------------------------- */
167-
.contact-grid {
168-
display: grid;
169-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
170-
gap: 1.5rem;
171-
margin-top: 40px;
130+
.box{
131+
background:var(--card);
132+
padding:20px;
133+
border-radius:18px;
134+
border:1px solid var(--border);
172135
}
173136

174-
.contact-card {
175-
background: var(--card-bg);
176-
border-radius: 12px;
177-
padding: 25px;
178-
backdrop-filter: blur(10px);
179-
box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
137+
input,textarea{
138+
width:100%;
139+
margin-top:10px;
140+
padding:12px;
141+
border-radius:10px;
142+
border:1px solid var(--border);
143+
background:transparent;
144+
color:white;
180145
}
181146

182-
.contact-card a {
183-
color: var(--accent-cyan);
147+
.footer{
148+
text-align:center;
149+
padding:40px;
150+
color:var(--muted);
184151
}
185152

186-
input, textarea {
187-
width: 100%;
188-
background: rgba(255, 255, 255, 0.05);
189-
border: 1px solid rgba(255, 255, 255, 0.1);
190-
color: #fff;
191-
margin-top: 10px;
192-
border-radius: 6px;
193-
padding: 10px;
194-
}
195-
196-
button[type="submit"] {
197-
margin-top: 10px;
198-
}
199-
200-
/* -------------------------------
201-
Footer
202-
-------------------------------- */
203-
.footer {
204-
background: rgba(255, 255, 255, 0.05);
205-
padding: 30px 0;
206-
text-align: center;
207-
border-top: 1px solid rgba(255, 255, 255, 0.1);
208-
color: #ccc;
209-
}
210-
211-
.footer a {
212-
color: var(--accent-cyan);
213-
text-decoration: none;
214-
}
215-
216-
.footer a:hover {
217-
color: var(--accent-pink);
218-
}
219-
220-
/* -------------------------------
221-
Scroll Button
222-
-------------------------------- */
223-
#topBtn {
224-
position: fixed;
225-
bottom: 25px;
226-
right: 25px;
227-
padding: 12px 15px;
228-
border-radius: 50%;
229-
background: var(--accent-cyan);
230-
color: #000;
231-
border: none;
232-
cursor: pointer;
233-
font-weight: 700;
234-
box-shadow: 0 0 15px var(--accent-cyan);
235-
transition: all 0.3s;
236-
}
237-
238-
#topBtn:hover {
239-
box-shadow: 0 0 30px var(--accent-pink);
240-
}
241-
242-
/* -------------------------------
243-
Animations (optional)
244-
-------------------------------- */
245-
.glitch {
246-
position: relative;
247-
display: inline-block;
248-
}
249-
250-
.glitch::before,
251-
.glitch::after {
252-
content: attr(data-text);
253-
position: absolute;
254-
left: 0;
255-
}
256-
257-
.glitch::before {
258-
animation: glitchTop 2s infinite linear alternate-reverse;
259-
color: var(--accent-cyan);
260-
}
261-
262-
.glitch::after {
263-
animation: glitchBottom 1.5s infinite linear alternate-reverse;
264-
color: var(--accent-pink);
265-
}
266-
267-
@keyframes glitchTop {
268-
0% { transform: translate(0); }
269-
25% { transform: translate(-2px, -1px); }
270-
50% { transform: translate(2px, 1px); }
271-
75% { transform: translate(-1px, 1px); }
272-
100% { transform: translate(0); }
273-
}
274-
275-
@keyframes glitchBottom {
276-
0% { transform: translate(0); }
277-
25% { transform: translate(2px, 1px); }
278-
50% { transform: translate(-2px, -1px); }
279-
75% { transform: translate(1px, -1px); }
280-
100% { transform: translate(0); }
153+
/* MOBILE */
154+
@media(max-width:768px){
155+
.hero-inner{flex-direction:column;text-align:center;}
156+
.title{font-size:40px;}
157+
.grid2{grid-template-columns:1fr;}
281158
}

0 commit comments

Comments
 (0)