-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
180 lines (162 loc) · 8.39 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
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NextGenCSS - A Flexible CSS Framework</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/themes/prism-okaidia.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/prism.min.js"></script>
<style>
/* Custom styles can be added here */
.navbar {
transition: all 0.3s ease;
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.8);
}
.navbar.scrolled {
background-color: rgba(59, 130, 246, 0.9);
}
.code-example {
background-color: rgba(30, 30, 30, 0.8);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
color: #d4d4d4;
}
.code-example pre {
overflow-x: auto;
}
.contributor-card {
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease;
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.8);
}
.contributor-card:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="font-sans bg-gradient-to-r from-red-500 via-yellow-500 to-green-500">
<!-- Navigation -->
<nav id="navbar" class="fixed w-full top-0 z-10 bg-transparent text-white p-4 backdrop-filter backdrop-blur-lg">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-xl font-semibold">NextGenCSS</a>
<div>
<a href="#features" class="ml-4">Features</a>
<a href="#contributors" class="ml-4">Contributors</a>
<a href="#get-started" class="ml-4">Get Started</a>
<a href="https://github.com/rudransh61/NextGenCSS-" target="_blank" class="ml-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300"><i class="fa fa-github" style="font-size:24px"></i></a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white h-screen flex items-center">
<div class="container mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4 backdrop-filter backdrop-blur-lg">NextGenCSS</h1>
<p class="text-lg md:text-xl mb-8 backdrop-filter backdrop-blur-lg">A flexible and fast utility-first CSS framework with Customizable Syntax, made for big teams and consistent naming conventions in CSS with SASS.</p>
<a href="#get-started" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">Get Started</a>
</div>
</header>
<!-- Features Section -->
<section id="features" class="py-16">
<div class="container mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8 backdrop-filter backdrop-blur-lg">Key Features</h2>
<!-- Add features with appropriate icons and descriptions -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="p-4 backdrop-filter backdrop-blur-lg bg-white shadow-lg rounded-lg">
<h3 class="text-xl font-semibold mb-4">Flexible</h3>
<p class="text-gray-600">NextGenCSS offers flexibility in design and layout, adapting to various project requirements.</p>
</div>
<!-- Add more feature cards as needed -->
<div class="p-4 backdrop-filter backdrop-blur-lg bg-white shadow-lg rounded-lg">
<h3 class="text-xl font-semibold mb-4">Consistent</h3>
<p class="text-gray-600">Consistent naming convention of your choice</p>
</div>
<div class="p-4 backdrop-filter backdrop-blur-lg bg-white shadow-lg rounded-lg">
<h3 class="text-xl font-semibold mb-4">Easy to LEARN</h3>
<p class="text-gray-600">Or no need to learn anything...</p>
</div>
</div>
</div>
</section>
<!-- About NextGenCSS Section -->
<section id="about" class="bg-gray-100 py-16 section">
<div class="container mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8 backdrop-filter backdrop-blur-lg">About NextGenCSS</h2>
<p class="text-lg md:text-xl mb-8 backdrop-filter backdrop-blur-lg">
NextGenCSS is a revolutionary CSS framework designed to meet the needs of modern web development teams. With a focus on flexibility, speed, and consistency, NextGenCSS empowers large teams to create stunning and efficient user interfaces.
</p>
<p class="text-lg md:text-xl mb-8 backdrop-filter backdrop-blur-lg">
You can change the utility name as you want in a simple click for team....
</p>
</div>
</section>
<!-- Get Started Section -->
<section id="get-started" class="bg-gray-100 py-16">
<div class="container mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8 backdrop-filter backdrop-blur-lg">Get Started with NextGenCSS</h2>
<p class="text-lg mb-8 text-gray-600 backdrop-filter backdrop-blur-lg">Start building beautiful and consistent UIs with NextGenCSS today!</p>
<a href="https://nextgencss.gitbook.io/" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">Documentation</a>
</div>
</section>
<!-- Code Example Section -->
<section id="code-example" class="bg-gray-100 py-16">
<div class="container mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8 backdrop-filter backdrop-blur-lg">Example Usage</h2>
<div class="code-example text-left">
<pre><code class="language-scss">
$syntax : (
//...other code
padding : "my-padding",
//..other code
); </code></pre>
</div>
</div>
</section>
<!-- Contributors Section -->
<section id="contributors" class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white py-16">
<div class="container mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8 backdrop-filter backdrop-blur-lg">Thanks to Our Contributors</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Contributor Card 1 -->
<!-- <div class="contributor-card">
<img src="contributor1.jpg" alt="Contributor 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">John Doe</h3>
<p class="text-gray-600">Frontend Developer</p>
</div>
</div>
<div class="contributor-card">
<img src="contributor2.jpg" alt="Contributor 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Jane Smith</h3>
<p class="text-gray-600">UI/UX Designer</p>
</div>
</div> -->
<!-- Add more contributor cards as needed -->
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white p-8 text-center backdrop-filter backdrop-blur-lg">
<div class="container mx-auto">
<p>© 2024 NextGenCSS. All rights reserved.</p>
</div>
</footer>
<script>
window.addEventListener('scroll', function () {
var header = document.getElementById('navbar');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
</body>
</html>