-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
142 lines (128 loc) · 5.57 KB
/
Copy pathindex.html
File metadata and controls
142 lines (128 loc) · 5.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS Tips | Rajjit Laishram</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="background-overlay"></div>
<header>
<div class="container">
<h1>HTML & CSS <span class="accent">Tips</span></h1>
<p class="subtitle">A curated collection of modern web components and interactive designs.</p>
<div class="header-gradient"></div>
</div>
</header>
<main class="container">
<div class="grid">
<!-- Project Cards -->
<a href="./01-default-HTML-CSS-template/index.html" class="card" target="_blank">
<div class="card-number">01</div>
<div class="card-content">
<h3>Default Template</h3>
<p>Clean responsive base with modern gradients.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./02-popup-newsletter/index.html" class="card" target="_blank">
<div class="card-number">02</div>
<div class="card-content">
<h3>Newsletter Popup</h3>
<p>Engagement-focused subscription modal.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./03-email-collector/index.html" class="card" target="_blank">
<div class="card-number">03</div>
<div class="card-content">
<h3>Email Collector</h3>
<p>Automated lead generation interface.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./04-form-validator/index.html" class="card" target="_blank">
<div class="card-number">04</div>
<div class="card-content">
<h3>Form Validator</h3>
<p>Smart real-time input verification.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./05-web-animation/index.html" class="card" target="_blank">
<div class="card-number">05</div>
<div class="card-content">
<h3>Web Animation</h3>
<p>Dynamic background & UI motion effects.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./06-blur-mask-design/index.html" class="card" target="_blank">
<div class="card-number">06</div>
<div class="card-content">
<h3>Blur Mask Design</h3>
<p>Creative layering with CSS masking.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./07-add-timer/index.html" class="card" target="_blank">
<div class="card-number">07</div>
<div class="card-content">
<h3>Web Time</h3>
<p>Functional & stylish digital clock.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./08-mouse-effect/index.html" class="card" target="_blank">
<div class="card-number">08</div>
<div class="card-content">
<h3>Mouse Effect</h3>
<p>Interactive cursor-based visual feedback.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./09-translucent-profile-card/index.html" class="card" target="_blank">
<div class="card-number">09</div>
<div class="card-content">
<h3>Profile Card</h3>
<p>Glassmorphism-inspired UI component.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./10-fill-blanks-quiz/index.html" class="card" target="_blank">
<div class="card-number">10</div>
<div class="card-content">
<h3>Quiz System</h3>
<p>Interactive learning & assessment tool.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./11-responsive-smoky-navbar/index.html" class="card" target="_blank">
<div class="card-number">11</div>
<div class="card-content">
<h3>Responsive Navbar</h3>
<p>Unique smoking animation navigation.</p>
</div>
<div class="card-arrow">→</div>
</a>
<a href="./12-responsive-web-design/index.html" class="card" target="_blank">
<div class="card-number">12</div>
<div class="card-content">
<h3>Modern Layout</h3>
<p>Full-page responsive design showcase.</p>
</div>
<div class="card-arrow">→</div>
</a>
</div>
</main>
<footer>
<div class="container">
<p>© 2026 <span class="accent">Rajjit Laishram</span>. All rights reserved.</p>
</div>
</footer>
</body>
</html>