Skip to content

Commit a360374

Browse files
Tanu-N-PrabhuTanu-N-Prabhu
committed
refator: add css for better styling
1 parent 529735f commit a360374

File tree

2 files changed

+166
-17
lines changed

2 files changed

+166
-17
lines changed

‎Python/assets/style.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/* =========================
2+
Design Tokens
3+
========================= */
4+
:root {
5+
--bg-main: #0b1020;
6+
--bg-surface: #11162a;
7+
--bg-card: #161c35;
8+
--accent: #4fd1c5;
9+
--accent-2: #60a5fa;
10+
--text-main: #e5e7eb;
11+
--text-muted: #9ca3af;
12+
--radius-lg: 18px;
13+
--radius-md: 12px;
14+
--shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.35);
15+
--max-width: 1150px;
16+
}
17+
18+
/* =========================
19+
Reset
20+
========================= */
21+
*,
22+
*::before,
23+
*::after {
24+
box-sizing: border-box;
25+
}
26+
27+
body {
28+
margin: 0;
29+
font-family: Inter, system-ui, sans-serif;
30+
background: radial-gradient(circle at top, #0f172a, #020617);
31+
color: var(--text-main);
32+
line-height: 1.75;
33+
}
34+
35+
/* =========================
36+
Hero
37+
========================= */
38+
.hero {
39+
padding: 96px 24px 80px;
40+
text-align: center;
41+
background:
42+
radial-gradient(circle at 30% 20%, rgba(79, 209, 197, 0.2), transparent 40%),
43+
radial-gradient(circle at 70% 30%, rgba(96, 165, 250, 0.15), transparent 45%);
44+
}
45+
46+
.hero h1 {
47+
font-size: clamp(2.5rem, 6vw, 3.5rem);
48+
margin-bottom: 16px;
49+
letter-spacing: -0.02em;
50+
}
51+
52+
.hero p {
53+
max-width: 720px;
54+
margin: auto;
55+
font-size: 1.15rem;
56+
color: var(--text-muted);
57+
}
58+
59+
/* =========================
60+
Navigation
61+
========================= */
62+
.nav {
63+
position: sticky;
64+
top: 0;
65+
z-index: 10;
66+
display: flex;
67+
justify-content: center;
68+
gap: 28px;
69+
padding: 18px 24px;
70+
background: rgba(2, 6, 23, 0.75);
71+
backdrop-filter: blur(14px);
72+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
73+
}
74+
75+
.nav a {
76+
color: var(--text-main);
77+
text-decoration: none;
78+
font-weight: 500;
79+
opacity: 0.85;
80+
}
81+
82+
.nav a:hover {
83+
opacity: 1;
84+
color: var(--accent);
85+
}
86+
87+
/* =========================
88+
Layout
89+
========================= */
90+
.container {
91+
max-width: var(--max-width);
92+
margin: auto;
93+
padding: 72px 24px;
94+
display: grid;
95+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
96+
gap: 32px;
97+
}
98+
99+
/* =========================
100+
Cards
101+
========================= */
102+
section {
103+
background: linear-gradient(180deg, var(--bg-card), var(--bg-surface));
104+
border-radius: var(--radius-lg);
105+
padding: 36px;
106+
box-shadow: var(--shadow-soft);
107+
transition: transform 0.35s ease, box-shadow 0.35s ease;
108+
}
109+
110+
section:hover {
111+
transform: translateY(-6px);
112+
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
113+
}
114+
115+
section h2 {
116+
margin-top: 0;
117+
margin-bottom: 14px;
118+
font-size: 1.35rem;
119+
}
120+
121+
section p {
122+
color: var(--text-muted);
123+
margin: 0;
124+
}
125+
126+
/* =========================
127+
Footer
128+
========================= */
129+
.footer {
130+
padding: 32px;
131+
text-align: center;
132+
font-size: 0.9rem;
133+
color: var(--text-muted);
134+
background: rgba(2, 6, 23, 0.9);
135+
border-top: 1px solid rgba(255, 255, 255, 0.05);
136+
}
137+
138+
/* =========================
139+
Responsive
140+
========================= */
141+
@media (max-width: 640px) {
142+
.hero {
143+
padding: 72px 20px;
144+
}
145+
146+
.container {
147+
padding: 48px 20px;
148+
}
149+
}

‎index.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Python Learning Repository</title>
77

8-
<!-- IMPORTANT: repo name included -->
98
<link rel="stylesheet" href="/Python/assets/style.css" />
109
</head>
1110
<body>
1211

13-
<header>
12+
<header class="hero">
1413
<h1>Python Learning Repository</h1>
1514
<p>A structured, hands-on guide to mastering Python.</p>
1615
</header>
1716

18-
<nav>
17+
<nav class="nav">
1918
<a href="/Python/">Home</a>
2019
<a href="/Python/basics/">Basics</a>
2120
<a href="/Python/advanced/">Advanced</a>
2221
<a href="/Python/projects/">Projects</a>
2322
<a href="/Python/ml/">Machine Learning</a>
2423
</nav>
2524

26-
<main>
27-
<section>
25+
<main class="container">
26+
<section class="card">
2827
<h2>What this repository offers</h2>
2928
<ul>
3029
<li>Clear Python fundamentals</li>
@@ -35,29 +34,30 @@ <h2>What this repository offers</h2>
3534
</ul>
3635
</section>
3736

38-
<section>
37+
<section class="card">
3938
<h2>Who this is for</h2>
40-
<p>
41-
This repository is designed for students, developers, and professionals
42-
who want a practical and structured approach to learning Python.
43-
</p>
39+
<ul>
40+
<li>Students building strong Python fundamentals</li>
41+
<li>Developers strengthening problem-solving and code structure</li>
42+
<li>Professionals upskilling for real-world Python applications</li>
43+
<li>Learners preparing for technical interviews</li>
44+
<li>Anyone seeking a practical, structured Python learning path</li>
45+
</ul>
4446
</section>
4547

46-
<section>
48+
<section class="card">
4749
<h2>Getting started</h2>
48-
<ol>
50+
<ul>
4951
<li>Start with the Basics section</li>
5052
<li>Practice using the provided examples</li>
5153
<li>Build projects to reinforce learning</li>
5254
<li>Explore machine learning modules</li>
53-
</ol>
55+
</ul>
5456
</section>
5557
</main>
5658

57-
<footer>
58-
<p>
59-
Maintained on GitHub · Updated regularly
60-
</p>
59+
<footer class="footer">
60+
<p>Maintained on GitHub · Updated regularly</p>
6161
</footer>
6262

6363
</body>

0 commit comments

Comments
 (0)