From 315664c126369db267441722d75a2e78b1e7c9d0 Mon Sep 17 00:00:00 2001 From: adminmetricvisio Date: Sun, 1 Sep 2024 16:08:44 -0700 Subject: [PATCH 01/10] Add 101 HTML Template --- 101-dashing-Ecommerce/index.html | 105 ++++++++++++++++++ 101-dashing-Ecommerce/scripts/main.js | 4 + 101-dashing-Ecommerce/scripts/navbar.js | 9 ++ 101-dashing-Ecommerce/scripts/slider.js | 18 +++ 101-dashing-Ecommerce/styles/animations.css | 15 +++ 101-dashing-Ecommerce/styles/footer.css | 12 ++ 101-dashing-Ecommerce/styles/grid.css | 18 +++ 101-dashing-Ecommerce/styles/header.css | 30 +++++ 101-dashing-Ecommerce/styles/hero.css | 25 +++++ 101-dashing-Ecommerce/styles/newsletter.css | 35 ++++++ 101-dashing-Ecommerce/styles/products.css | 21 ++++ 101-dashing-Ecommerce/styles/reset.css | 10 ++ 101-dashing-Ecommerce/styles/responsive.css | 14 +++ 101-dashing-Ecommerce/styles/testimonials.css | 30 +++++ readme.md | 5 +- 15 files changed, 348 insertions(+), 3 deletions(-) create mode 100644 101-dashing-Ecommerce/index.html create mode 100644 101-dashing-Ecommerce/scripts/main.js create mode 100644 101-dashing-Ecommerce/scripts/navbar.js create mode 100644 101-dashing-Ecommerce/scripts/slider.js create mode 100644 101-dashing-Ecommerce/styles/animations.css create mode 100644 101-dashing-Ecommerce/styles/footer.css create mode 100644 101-dashing-Ecommerce/styles/grid.css create mode 100644 101-dashing-Ecommerce/styles/header.css create mode 100644 101-dashing-Ecommerce/styles/hero.css create mode 100644 101-dashing-Ecommerce/styles/newsletter.css create mode 100644 101-dashing-Ecommerce/styles/products.css create mode 100644 101-dashing-Ecommerce/styles/reset.css create mode 100644 101-dashing-Ecommerce/styles/responsive.css create mode 100644 101-dashing-Ecommerce/styles/testimonials.css diff --git a/101-dashing-Ecommerce/index.html b/101-dashing-Ecommerce/index.html new file mode 100644 index 00000000..6ef3fb94 --- /dev/null +++ b/101-dashing-Ecommerce/index.html @@ -0,0 +1,105 @@ + + + + + + + + Cool E-commerce Website + + + + + + + + + + + + +
+
+ + +
+ 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

+
+
+
+
+ +
+
+

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/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..ed98ec51 --- /dev/null +++ b/101-dashing-Ecommerce/styles/hero.css @@ -0,0 +1,25 @@ +/* hero.css */ +.hero { + background: url('hero-bg.jpg') no-repeat center center/cover; + color: black; + padding: 100px 0; + text-align: center; +} + +.hero h1 { + font-size: 48px; + margin-bottom: 20px; +} + +.hero p { + font-size: 24px; + margin-bottom: 40px; +} + +.hero .btn { + padding: 10px 20px; + background: #ff6f61; + color: #fff; + text-decoration: none; + font-size: 18px; +} 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/readme.md b/readme.md index 2249092b..2ad1e2ac 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! +## 101 Pre-build websites free for commercial use! 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. From eb83f3e6e65fd5cddc22a00e979b45c7caabbeab Mon Sep 17 00:00:00 2001 From: adminmetricvisio Date: Sun, 1 Sep 2024 18:01:30 -0700 Subject: [PATCH 02/10] Add 102 HTML Template --- 101-dashing-Ecommerce/index.html | 4 +- 102-CMW-Star-Cloud-Monitoring/index.html | 135 +++++++++++++++++++++++ 2 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 102-CMW-Star-Cloud-Monitoring/index.html diff --git a/101-dashing-Ecommerce/index.html b/101-dashing-Ecommerce/index.html index 6ef3fb94..a07c698e 100644 --- a/101-dashing-Ecommerce/index.html +++ b/101-dashing-Ecommerce/index.html @@ -82,6 +82,8 @@

- Satisfied Client

+

Contact Us!

+ -

Contact Us!

+

Contact Us!

+
+
-

© 2024 CoolShop. All rights reserved. Work And Design By Anas.

+

© CoolShop. All rights reserved. Work And Design By Your Name.

- - - - + 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/hero.css b/101-dashing-Ecommerce/styles/hero.css index ed98ec51..598c486a 100644 --- a/101-dashing-Ecommerce/styles/hero.css +++ b/101-dashing-Ecommerce/styles/hero.css @@ -1,25 +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: url('hero-bg.jpg') no-repeat center center/cover; - color: black; - padding: 100px 0; + 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: 48px; + font-size: var(--h1-font-size); margin-bottom: 20px; } .hero p { - font-size: 24px; + font-size: var(--p-font-size); margin-bottom: 40px; } .hero .btn { - padding: 10px 20px; - background: #ff6f61; - color: #fff; + padding: var(--btn-padding); + background: var(--btn-bg-color); + color: var(--btn-text-color); text-decoration: none; - font-size: 18px; + font-size: var(--btn-font-size); } diff --git a/102-CMW-Star-Cloud-Monitoring/index.html b/102-CMW-Star-Cloud-Monitoring/index.html index 131ea53b..f9cc87cf 100644 --- a/102-CMW-Star-Cloud-Monitoring/index.html +++ b/102-CMW-Star-Cloud-Monitoring/index.html @@ -4,75 +4,8 @@ CMW - Cloud Monitoring Website - + +
@@ -81,7 +14,14 @@

Welcome to CMW - Cloud Monitoring Website

- Cloud Monitoring + Cloud Monitoring

Real-time Monitoring

@@ -94,7 +34,14 @@

Real-time Monitoring

- Data Analytics + Data Analytics

Advanced Data Analytics

@@ -107,7 +54,14 @@

Advanced Data Analytics

- Alerts and Notifications + Alerts and Notifications

Alerts and Notifications

@@ -120,19 +74,5 @@

Alerts and Notifications

- 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 index 89d79af6..b95561d0 100644 --- a/103-Own-Hobby-Side-Website/index.html +++ b/103-Own-Hobby-Side-Website/index.html @@ -1,96 +1,12 @@ - - - - My Personal Website - + + @@ -117,7 +33,7 @@

About Me

-
+

My Services

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

Services Image @@ -131,42 +47,17 @@

My Portfolio

-
+

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

- Contact Image -
- - - -
-

My Facebook Account

-

Check Out My Facebook Account where i always make posts to keep fans updated!. https://www.facebook.com/my-facebook-posts

- Contact Image -
- - - -
-

My Instgram Account

-

Check Out My Instagram Account where i always make posts to keep fans updated!. https://www.instagram.com/my-instagram-posts

- Contact Image -
- - - -
-

Other Ways We Can Connect!

-

We Can Also Connect Through Gitlab, Github, Snapchat, Whatsapp And Messeges! https://www.external.com/my-external-links

- Contact Image + +
+

My YouTube Channel

+

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

+ YouTube Image
@@ -174,5 +65,7 @@

Other Ways We Can Connect!

© 2024 My Personal Website | All Rights Reserved

+ 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; + } +}