update README.md, index.html and style.css

README.md

@@ -6,5 +6,40 @@ colorTo: indigo
 sdk: static
 pinned: false
 ---
+## Hi there 👋
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# SopKit
+
+SopKit is a collection of small and handy web developer tools aimed at simplifying various tasks such as code formatting, data conversion, and security validation.
+
+## Features
+
+- **Code Tidy**: Format and prettify your HTML, CSS, JavaScript, and JSON code.
+- **Data Format**: Convert data between various formats like JSON, XML, Base64, and more.
+- **Random Data**: Generate random UUIDs, binary numbers, dates, passwords, and more.
+- **Security Tools**: Calculate hashes, encode/decode URLs, validate credit card numbers, and more.
+- **Utils**: Count characters, extract text from HTML, convert text case, and more.
+
+## Usage
+
+To use SopKit, simply visit [https://sopkit.github.io](https://sopkit.github.io/) and select the tool you need from the list.
+
+## Contributing
+
+Contributions are welcome! If you have any ideas for new tools or improvements to existing ones, feel free to open an issue or submit a pull request.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+<!--
+
+**Here are some ideas to get you started:**
+
+🙋‍♀️ A short introduction - what is your organization all about?
+🌈 Contribution guidelines - how can the community get involved?
+👩‍💻 Useful resources - where can the community find your docs? Is there anything else the community should know?
+🍿 Fun facts - what does your team eat for breakfast?
+🧙 Remember, you can do mighty things with the power of [Markdown](https://docs.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
+-->
+
+<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2FSopKit%2F"><img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2FSopKit%2F&countColor=%23ba68c8" /></a>

index.html

@@ -16,6 +16,7 @@
 			<li><a href="#">Contact</a></li>
 			<li><a href="#">Page</a></li>
 			<li><a href="#">Files</a></li>
+
 		</ul>
 	</nav>
 
@@ -23,10 +24,10 @@
 		<section class="hero-section">
 			<div class="hero-container">
 				<h1>SopKit<span>.</span></h1>
-				<p>A JavaScript Tool Collection by SopKit for no price..... </p>
-			</div>
+			<p>SopKit is a collection of small and handy web developer tools aimed at simplifying various tasks such as code formatting, data conversion, and security validation.
+			</p>			</div>
 			<div class="hero-image">
-				<!-- <img src="pic.avif" alt="" srcset=""> -->
+				<img src="girl.svg" alt="" srcset="">
 			</div>
 		</section>
 	</main>

style.css

@@ -73,6 +73,7 @@ nav ul li a:hover {
 	
 }
 
+
 .container .hero-section h1 {
 	color: aliceblue;
 	font-size: 40px;
@@ -88,9 +89,23 @@ nav ul li a:hover {
 	/* background: red; */
 	width: 100%;
 	padding: 20px;
-	height: fit-content;
-	margin-top: 100px;
+	display: flex;
+}
+
+.container .hero-section .hero-container {
+	margin-top: 200px;
 	margin-left: 50px;
+	max-width: 50%;
+	background: url(repo.gif);
+	background-repeat: no-repeat;
+	background-size: contain;
+}
+
+
 
 
+.container .hero-section .hero-image{
+	width: 50%;
+	margin: auto;
+	flex-grow: 3;
 }