diff --git a/001-StarAdmin-Free-Bootstrap-Admin-Template-master/README.md b/001-StarAdmin-Free-Bootstrap-Admin-Template-master/README.md index c0d92a39..e0e7d30a 100755 --- a/001-StarAdmin-Free-Bootstrap-Admin-Template-master/README.md +++ b/001-StarAdmin-Free-Bootstrap-Admin-Template-master/README.md @@ -8,7 +8,7 @@ Star Admin is packed with all the features that fit your needs but not cramped w Although the template has a design like none other, it is easily customizable to suit your requirements. Star Admin comes with a clean and well-commented code that makes it easy to work with the template. Thus making it an ideal pick for jump starting your project. -

Credits:

+

Credits for styling:

- Bootstrap 4 - Font Awesome diff --git a/101-dashing-Ecommerce/index.html b/101-dashing-Ecommerce/index.html new file mode 100644 index 00000000..09c0fbf9 --- /dev/null +++ b/101-dashing-Ecommerce/index.html @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + Cool E-commerce Website - Shop for the Latest Products + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ Cart (0) +
+
+
+ +
+
+

Welcome to CoolShop

+

Your one-stop shop for all things cool!

+ Shop Now +
+
+ +
+
+

Featured Products

+
+
+ Product 1 +

Product 1

+

$19.99

+
+
+ Product 2 +

Product 2

+

$29.99

+
+
+ Product 3 +

Product 3

+

$39.99

+
+
+
+
+ +
+
+

What Our Customers Say

+
+
+

"This is the best shop ever!"

+

- Happy Customer

+
+
+

"Amazing products and great service."

+

- Satisfied Client

+
+
+
+
+ +

Contact Us!

+
+ +
+
+

Subscribe to our Newsletter

+
+ + + +
+
+
+ + + + + + diff --git a/101-dashing-Ecommerce/scripts/main.js b/101-dashing-Ecommerce/scripts/main.js new file mode 100644 index 00000000..e6d9b89e --- /dev/null +++ b/101-dashing-Ecommerce/scripts/main.js @@ -0,0 +1,4 @@ +/* main.js */ +document.addEventListener("DOMContentLoaded", () => { + console.log("Cool E-commerce Website Loaded!"); +}); diff --git a/101-dashing-Ecommerce/scripts/navbar.js b/101-dashing-Ecommerce/scripts/navbar.js new file mode 100644 index 00000000..0ab6011d --- /dev/null +++ b/101-dashing-Ecommerce/scripts/navbar.js @@ -0,0 +1,9 @@ +/* navbar.js */ +document.addEventListener("DOMContentLoaded", () => { + const navbarToggle = document.querySelector(".navbar-toggle"); + + navbarToggle.addEventListener("click", () => { + const navbarMenu = document.querySelector(".navbar ul"); + navbarMenu.classList.toggle("show"); + }); +}); diff --git a/101-dashing-Ecommerce/scripts/slider.js b/101-dashing-Ecommerce/scripts/slider.js new file mode 100644 index 00000000..d38cdd6e --- /dev/null +++ b/101-dashing-Ecommerce/scripts/slider.js @@ -0,0 +1,18 @@ +/* slider.js */ +document.addEventListener("DOMContentLoaded", () => { + const testimonials = document.querySelectorAll(".testimonial"); + let currentIndex = 0; + + function showTestimonial(index) { + testimonials.forEach((testimonial, i) => { + testimonial.style.display = i === index ? "block" : "none"; + }); + } + + showTestimonial(currentIndex); + + setInterval(() => { + currentIndex = (currentIndex + 1) % testimonials.length; + showTestimonial(currentIndex); + }, 3000); +}); diff --git a/101-dashing-Ecommerce/scripts/year.js b/101-dashing-Ecommerce/scripts/year.js new file mode 100644 index 00000000..75b0bcc4 --- /dev/null +++ b/101-dashing-Ecommerce/scripts/year.js @@ -0,0 +1,6 @@ +// Set the current year automatically +document.addEventListener('DOMContentLoaded', function() { + const yearElement = document.getElementById('year'); + const currentYear = new Date().getFullYear(); + yearElement.textContent = currentYear; +}); diff --git a/101-dashing-Ecommerce/styles/animations.css b/101-dashing-Ecommerce/styles/animations.css new file mode 100644 index 00000000..d2f745c4 --- /dev/null +++ b/101-dashing-Ecommerce/styles/animations.css @@ -0,0 +1,15 @@ +/* animations.css */ +.hero h1 { + animation: fadeInDown 1s ease-in-out; +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-50px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/101-dashing-Ecommerce/styles/footer.css b/101-dashing-Ecommerce/styles/footer.css new file mode 100644 index 00000000..df45fa5c --- /dev/null +++ b/101-dashing-Ecommerce/styles/footer.css @@ -0,0 +1,12 @@ +/* footer.css */ +.footer { + background: #333; + color: #fff; + padding: 20px 0; + text-align: center; +} + +.footer p { + margin: 0; + font-size: 14px; +} diff --git a/101-dashing-Ecommerce/styles/grid.css b/101-dashing-Ecommerce/styles/grid.css new file mode 100644 index 00000000..9dd4c2b3 --- /dev/null +++ b/101-dashing-Ecommerce/styles/grid.css @@ -0,0 +1,18 @@ +/* grid.css */ +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; +} + +.product-grid { + display: flex; + gap: 20px; +} + +.product-card { + flex: 1; + background: #f4f4f4; + padding: 20px; + text-align: center; +} diff --git a/101-dashing-Ecommerce/styles/header.css b/101-dashing-Ecommerce/styles/header.css new file mode 100644 index 00000000..b7806925 --- /dev/null +++ b/101-dashing-Ecommerce/styles/header.css @@ -0,0 +1,30 @@ +/* header.css */ +.header { + background: #333; + color: #fff; + padding: 20px 0; +} + +.logo { + font-size: 24px; + font-weight: bold; +} + +.navbar ul { + display: flex; + list-style: none; +} + +.navbar ul li { + margin-left: 20px; +} + +.navbar ul li a { + color: #fff; + text-decoration: none; +} + +.cart { + margin-left: auto; + color: #fff; +} diff --git a/101-dashing-Ecommerce/styles/hero.css b/101-dashing-Ecommerce/styles/hero.css new file mode 100644 index 00000000..598c486a --- /dev/null +++ b/101-dashing-Ecommerce/styles/hero.css @@ -0,0 +1,38 @@ +/* hero.css */ + +:root { + --background-image: url('hero-bg.jpg'); + --text-color: black; + --padding-y: 100px; + --h1-font-size: 48px; + --p-font-size: 24px; + --btn-bg-color: #ff6f61; + --btn-text-color: #fff; + --btn-padding: 10px 20px; + --btn-font-size: 18px; +} + +.hero { + background: var(--background-image) no-repeat center center/cover; + color: var(--text-color); + padding: var(--padding-y) 0; + text-align: center; +} + +.hero h1 { + font-size: var(--h1-font-size); + margin-bottom: 20px; +} + +.hero p { + font-size: var(--p-font-size); + margin-bottom: 40px; +} + +.hero .btn { + padding: var(--btn-padding); + background: var(--btn-bg-color); + color: var(--btn-text-color); + text-decoration: none; + font-size: var(--btn-font-size); +} diff --git a/101-dashing-Ecommerce/styles/newsletter.css b/101-dashing-Ecommerce/styles/newsletter.css new file mode 100644 index 00000000..6d9fbc47 --- /dev/null +++ b/101-dashing-Ecommerce/styles/newsletter.css @@ -0,0 +1,35 @@ +/* newsletter.css */ +.newsletter { + background: #ff6f61; + color: #fff; + padding: 40px 0; + text-align: center; +} + +.newsletter h2 { + font-size: 24px; + margin-bottom: 20px; +} + +.newsletter form { + display: flex; + justify-content: center; + gap: 10px; +} + +.newsletter input[type="email"] { + padding: 10px; + border: none; + border-radius: 5px; + font-size: 16px; +} + +.newsletter button { + padding: 10px 20px; + background: #333; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; +} diff --git a/101-dashing-Ecommerce/styles/products.css b/101-dashing-Ecommerce/styles/products.css new file mode 100644 index 00000000..afd62116 --- /dev/null +++ b/101-dashing-Ecommerce/styles/products.css @@ -0,0 +1,21 @@ +/* products.css */ +.products h2 { + text-align: center; + margin-bottom: 40px; +} + +.product-card img { + max-width: 100%; + height: auto; + margin-bottom: 20px; +} + +.product-card h3 { + font-size: 20px; + margin-bottom: 10px; +} + +.product-card p { + font-size: 18px; + color: #ff6f61; +} diff --git a/101-dashing-Ecommerce/styles/reset.css b/101-dashing-Ecommerce/styles/reset.css new file mode 100644 index 00000000..8c3eeccd --- /dev/null +++ b/101-dashing-Ecommerce/styles/reset.css @@ -0,0 +1,10 @@ +/* reset.css */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; +} diff --git a/101-dashing-Ecommerce/styles/responsive.css b/101-dashing-Ecommerce/styles/responsive.css new file mode 100644 index 00000000..35a336d5 --- /dev/null +++ b/101-dashing-Ecommerce/styles/responsive.css @@ -0,0 +1,14 @@ +/* responsive.css */ +@media (max-width: 768px) { + .navbar ul { + flex-direction: column; + } + + .product-grid { + flex-direction: column; + } + + .testimonial-slider { + flex-direction: column; + } +} diff --git a/101-dashing-Ecommerce/styles/testimonials.css b/101-dashing-Ecommerce/styles/testimonials.css new file mode 100644 index 00000000..5ce1069f --- /dev/null +++ b/101-dashing-Ecommerce/styles/testimonials.css @@ -0,0 +1,30 @@ +/* testimonials.css */ +.testimonials { + background: #f9f9f9; + padding: 60px 0; + text-align: center; +} + +.testimonial-slider { + display: flex; + overflow-x: auto; +} + +.testimonial { + min-width: 300px; + background: #fff; + padding: 20px; + margin: 0 10px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.testimonial p { + font-size: 18px; + margin-bottom: 20px; +} + +.testimonial h3 { + font-size: 16px; + color: #666; +} diff --git a/102-CMW-Star-Cloud-Monitoring/index.html b/102-CMW-Star-Cloud-Monitoring/index.html new file mode 100644 index 00000000..f9cc87cf --- /dev/null +++ b/102-CMW-Star-Cloud-Monitoring/index.html @@ -0,0 +1,78 @@ + + + + + + CMW - Cloud Monitoring Website + + + + +
+

Welcome to CMW - Cloud Monitoring Website

+
+ +
+
+ Cloud Monitoring +
+

Real-time Monitoring

+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. + Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. + Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. +

+
+
+ +
+ Data Analytics +
+

Advanced Data Analytics

+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. + Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. + Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. +

+
+
+ +
+ Alerts and Notifications +
+

Alerts and Notifications

+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. + Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. + Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. +

+
+
+
+ + + diff --git a/102-CMW-Star-Cloud-Monitoring/scripts/main.js b/102-CMW-Star-Cloud-Monitoring/scripts/main.js new file mode 100644 index 00000000..a4e322b2 --- /dev/null +++ b/102-CMW-Star-Cloud-Monitoring/scripts/main.js @@ -0,0 +1,12 @@ + // Basic JavaScript to display alert on section click + document.getElementById('section1').addEventListener('click', function() { + alert(' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. '); + }); + + document.getElementById('section2').addEventListener('click', function() { + alert(' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. '); + }); + + document.getElementById('section3').addEventListener('click', function() { + alert(' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. '); + }); \ No newline at end of file diff --git a/102-CMW-Star-Cloud-Monitoring/styles/CMW.css b/102-CMW-Star-Cloud-Monitoring/styles/CMW.css new file mode 100644 index 00000000..ebf1ef2f --- /dev/null +++ b/102-CMW-Star-Cloud-Monitoring/styles/CMW.css @@ -0,0 +1,67 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + line-height: 1.6; +} + +header { + background-color: #4CAF50; + color: white; + padding: 10px 0; + text-align: center; +} + +.container { + width: 80%; + margin: auto; + overflow: hidden; +} + +.section { + margin: 20px 0; + padding: 20px; + border: 1px solid #ddd; + border-radius: 8px; + background-color: #f4f4f4; +} + +.section img { + width: 100%; + height: auto; + max-width: 500px; + margin: 0 auto; + display: block; + border-radius: 8px; +} + +.section h2 { + margin-bottom: 10px; + text-align: center; + color: #333; +} + +.section p { + margin-bottom: 10px; + text-align: justify; +} + +@media (min-width: 768px) { + .section { + display: flex; + align-items: center; + } + + .section img { + width: 50%; + } + + .section div { + width: 50%; + padding-left: 20px; + } +} \ No newline at end of file diff --git a/103-Own-Hobby-Side-Website/index.html b/103-Own-Hobby-Side-Website/index.html new file mode 100644 index 00000000..b95561d0 --- /dev/null +++ b/103-Own-Hobby-Side-Website/index.html @@ -0,0 +1,71 @@ + + + + + + My Personal Website + + + + + + + + + +
+

Welcome to My Personal Website

+
+ + +
+

About Me

+

This is a brief introduction about myself. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ About Image +
+ + +
+

My Services

+

Here are some services I offer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ Services Image +
+ + +
+

My Portfolio

+

Take a look at some of my recent work. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ Portfolio Image +
+ + +
+

Contact Me

+

Feel free to reach out to me. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ Contact Image +
+ + +
+

My YouTube Channel

+

Check out my YouTube channel. https://www.youtube.com/my-youtube-channel

+ YouTube Image +
+ + + + + + + diff --git a/103-Own-Hobby-Side-Website/styles/style.css b/103-Own-Hobby-Side-Website/styles/style.css new file mode 100644 index 00000000..ad0fd3b6 --- /dev/null +++ b/103-Own-Hobby-Side-Website/styles/style.css @@ -0,0 +1,93 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + line-height: 1.6; + color: #333; +} + +/* Navbar styling */ +nav { + background-color: #333; + color: #fff; + padding: 10px 0; + text-align: center; + position: sticky; + top: 0; + width: 100%; + z-index: 1000; +} + +nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; +} + +nav ul li { + margin: 0 15px; +} + +nav ul li a { + color: #fff; + text-decoration: none; + font-weight: bold; +} + +nav ul li a:hover { + text-decoration: underline; +} + +/* Hero section */ +.hero { + background: url('https://via.placeholder.com/1200x400') no-repeat center center/cover; + height: 400px; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.hero h1 { + font-size: 3em; + margin: 0; +} + +/* Sections styling */ +.section { + padding: 60px 20px; + text-align: center; +} + +.section img { + max-width: 100%; + height: auto; + border-radius: 10px; + margin-top: 20px; +} + +.light-bg { + background-color: #f4f4f4; +} + +/* Footer styling */ +footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 20px 0; + margin-top: 40px; +} + +/* Responsive design */ +@media (max-width: 768px) { + nav ul { + flex-direction: column; + } + + .hero h1 { + font-size: 2em; + } +} diff --git a/readme.md b/readme.md index 2249092b..5e400e75 100755 --- a/readme.md +++ b/readme.md @@ -1,8 +1,7 @@ -# HTML5 Template Collection 2019 +# HTML5 Template Collection 2019-2024 -## Demo 👉http://georgebrata.ro/alege-un-website -## One Hundred Pre-build websites free for commercial use! +## 200 Pre-build websites free for commercial use! (In Progress) All templates beautifully handcrafted and built with attention to details. Their professional and modern design with their great typography makes them ideal for agencies, startup businesses, portfolios, and other creative and innovative professionals. All of them are fully responsive and retina ready, they will look great and sharp no matter what device it is being viewed on. @@ -11,7 +10,7 @@ All templates beautifully handcrafted and built with attention to details. Their ```bash # clone the project -git clone https://github.com/kyokidG/html-templates.git +git clone git@github.com:annuaicoder/html-templates.git # navigate to project folder @@ -19,6 +18,9 @@ cd html-templates # open index.html in Chrome +# Work And Design By Anas! +# Enjoy The App! + ``` ## CONTRIBUTION