-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (178 loc) · 5.76 KB
/
index.html
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MeroCss - Personal CSS Assets</title>
<style>
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body and HTML */
html, body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
/* Container */
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Header */
header {
text-align: center;
margin-bottom: 20px;
}
header h1 {
color: #007bff;
font-size: 2.5em;
}
header p {
color: #555;
font-size: 1.1em;
}
/* Features Section */
.features {
margin-bottom: 30px;
}
.features h2 {
color: #007bff;
font-size: 2em;
margin-bottom: 10px;
}
.features ul {
list-style: none;
}
.features li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.features li::before {
content: '✔';
color: #28a745;
margin-right: 10px;
}
/* How to Use Section */
.how-to-use {
margin-bottom: 30px;
}
.how-to-use h2 {
color: #007bff;
font-size: 2em;
margin-bottom: 10px;
}
.how-to-use ol {
margin-left: 20px;
}
/* Contribution Section */
.contribution {
margin-bottom: 30px;
}
.contribution h2 {
color: #007bff;
font-size: 2em;
margin-bottom: 10px;
}
/* License Section */
.license {
margin-bottom: 30px;
}
.license h2 {
color: #007bff;
font-size: 2em;
margin-bottom: 10px;
}
/* Footer */
footer {
text-align: center;
margin-top: 30px;
padding: 10px;
background: #007bff;
color: #fff;
border-radius: 8px;
}
footer p {
margin: 10px 0;
}
footer a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 600px) {
.container {
padding: 15px;
}
header h1 {
font-size: 2em;
}
.features h2,
.how-to-use h2,
.contribution h2,
.license h2 {
font-size: 1.5em;
}
}
</style>
</head>
<body>
<header>
<h1>MeroCss</h1>
<p>Personal CSS Assets Repository</p>
</header>
<div class="container">
<section class="features">
<h2>Features</h2>
<ul>
<li><strong>Responsive Layouts:</strong> A variety of responsive grid systems and layout solutions to ensure your designs look great on any device.</li>
<li><strong>Custom Buttons:</strong> Stylish and interactive buttons for all your UI needs.</li>
<li><strong>Typography:</strong> A set of beautiful and accessible typography styles for headings, paragraphs, and text elements.</li>
<li><strong>Animations:</strong> Smooth and eye-catching CSS animations to bring your websites to life.</li>
<li><strong>Forms:</strong> Clean and user-friendly form styles for better user experience.</li>
<li><strong>Utility Classes:</strong> Handy utility classes for common CSS tasks, making development faster and more efficient.</li>
</ul>
</section>
<section class="how-to-use">
<h2>How to Use</h2>
<ol>
<li><strong>Clone the Repository:</strong>
<pre><code>git clone https://github.com/TheRitikYadav/MeroCss.git</code></pre>
</li>
<li><strong>Include in Your Project:</strong>
<p>Copy the desired CSS files or snippets into your project, or link directly to the CSS files in your HTML.</p>
<pre><code><link rel="stylesheet" href="path/to/your/cloned/repo/styles.css"></code></pre>
</li>
<li><strong>Customize as Needed:</strong>
<p>Modify the CSS properties to fit your specific design requirements.</p>
</li>
</ol>
</section>
<section class="contribution">
<h2>Contribution</h2>
<p>Feel free to contribute to this repository by submitting pull requests or opening issues. Your contributions can include bug fixes, new features, or improvements to existing styles.</p>
</section>
<section class="license">
<h2>License</h2>
<p>This repository is licensed under the MIT License, making it free to use and modify for both personal and commercial projects.</p>
</section>
</div>
<footer>
<p>Thank you for visiting MeroCss! I hope you find these styles useful and inspiring for your projects.</p>
<p>Check it out on <a href="https://github.com/TheRitikYadav/MeroCss" target="_blank">GitHub</a></p>
</footer>
</body>
</html>