diff --git a/dist/index.html b/dist/index.html index ef2b8e3..da1ec60 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1 +1,119 @@ -\n\n\n \n \n My Basic Website\n \n\n\n
\n

Welcome to My Basic Website!

\n
\n
\n

This is a simple website created by Agent Zero.

\n

Feel free to explore!

\n
\n \n\n + + + + + + Paws, Putts & Parasols - A Modern Web Experience + + + + +
+
+

Paws, Putts & Parasols

+

Your ultimate destination for all things dogs, golf, and stylish umbrellas!

+ Discover More +
+
+ + + +
+
+
+

What We Offer

+
+
+ Happy Dog +

Delightful Dog Companions

+

Explore heartwarming stories and tips for your furry friends.

+
+
+ Golf Course +

Perfect Your Putt

+

Guides and gear for golf enthusiasts of all levels.

+
+
+ Stylish Umbrella +

Chic Umbrella Collections

+

Stay dry and stylish with our curated selection of umbrellas.

+
+
+
+
+ +
+
+

Our Canine Corner

+
+ Dog Playing +
+

From playful puppies to loyal companions, dogs bring so much joy to our lives. Discover articles on dog training, health, and heartwarming rescue stories.

+

We believe every dog deserves a loving home and a happy life. Join our community of dog lovers!

+
+
+
+
+ +
+
+

The Green Fairway

+
+ Golf Swing +
+

Step onto the green and elevate your game. Our golf section offers tips from pros, reviews of the latest equipment, and insights into the world's most beautiful courses.

+

Whether you're a seasoned pro or just starting, find everything you need to improve your swing and enjoy the game.

+
+
+
+
+ +
+
+

Under the Umbrella

+
+ Colorful Umbrella +
+

Don't let a little rain dampen your style! Our umbrella collection features designs for every occasion, from compact travel umbrellas to large, sturdy golf umbrellas.

+

Discover innovative features, durable materials, and vibrant patterns that make a statement.

+
+
+
+
+ +
+
+

Get in Touch

+

Have questions or want to share your stories? We'd love to hear from you!

+
+ + + + +
+
+
+
+ + + + diff --git a/dist/style.css b/dist/style.css index 675fc61..be57f2d 100644 --- a/dist/style.css +++ b/dist/style.css @@ -1 +1,349 @@ -body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; }\nheader { background-color: #333; color: #fff; padding: 1em 0; text-align: center; }\nmain { padding: 20px; text-align: center; }\nfooter { background-color: #333; color: #fff; text-align: center; padding: 1em 0; position: fixed; bottom: 0; width: 100%; } +/* General Body & Typography */ +body { + font-family: 'Poppins', sans-serif; + margin: 0; + padding: 0; + background-color: #f8f8f8; /* Light background */ + color: #333; + line-height: 1.6; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +h1, h2, h3 { + font-weight: 700; + color: #222; +} + +p { + font-weight: 300; +} + +/* Buttons */ +.btn { + display: inline-block; + background-color: #FF6347; /* Tomato Red - vibrant */ + color: #fff; + padding: 12px 25px; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; + font-weight: 600; +} + +.btn:hover { + background-color: #E5533D; +} + +/* Navbar */ +.navbar { + background-color: #333; /* Dark background for contrast */ + color: #fff; + padding: 15px 0; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 5px rgba(0,0,0,0.2); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar .logo { + font-size: 1.8em; + font-weight: 700; + color: #fff; + text-decoration: none; +} + +.navbar ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +.navbar ul li { + margin-left: 25px; +} + +.navbar ul li a { + color: #fff; + text-decoration: none; + font-weight: 400; + transition: color 0.3s ease; +} + +.navbar ul li a:hover { + color: #FFD700; /* Gold - accent color */ +} + +/* Hero Section */ +.hero { + background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://via.placeholder.com/1920x700/4682B4/FFFFFF?text=Dogs+Golf+Umbrellas') no-repeat center center/cover; + color: #fff; + text-align: center; + padding: 100px 20px; + height: 60vh; + display: flex; + align-items: center; + justify-content: center; +} + +.hero h1 { + font-size: 3.5em; + margin-bottom: 15px; + color: #fff; + text-shadow: 2px 2px 4px rgba(0,0,0,0.7); +} + +.hero p { + font-size: 1.3em; + margin-bottom: 30px; + color: #eee; +} + +/* Features Section */ +.features-section { + padding: 60px 0; + text-align: center; + background-color: #fff; +} + +.features-section h2 { + font-size: 2.5em; + margin-bottom: 40px; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; +} + +.feature-item { + background-color: #fefefe; + padding: 30px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.feature-item:hover { + transform: translateY(-10px); + box-shadow: 0 8px 20px rgba(0,0,0,0.15); +} + +.feature-item img { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 20px; + border: 3px solid #FFD700; +} + +.feature-item h3 { + font-size: 1.5em; + margin-bottom: 10px; + color: #FF6347; +} + +.feature-item p { + font-size: 0.95em; + color: #555; +} + +/* Content Sections */ +.content-section { + padding: 80px 0; + text-align: center; +} + +.content-section.bg-light { + background-color: #f0f4f8; /* Light blue-grey for contrast */ +} + +.content-section h2 { + font-size: 2.5em; + margin-bottom: 40px; +} + +.content-flex { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + flex-wrap: wrap; +} + +.content-flex.reverse { + flex-direction: row-reverse; +} + +.content-image { + width: 100%; + max-width: 400px; + height: auto; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); +} + +.content-flex div { + flex: 1; + min-width: 300px; + text-align: left; +} + +.content-flex p { + margin-bottom: 15px; + font-size: 1.1em; + color: #444; +} + +/* Contact Section */ +.contact-section { + padding: 80px 0; + background-color: #333; /* Dark background */ + color: #fff; + text-align: center; +} + +.contact-section h2 { + color: #fff; + font-size: 2.5em; + margin-bottom: 30px; +} + +.contact-section p { + font-size: 1.1em; + margin-bottom: 40px; + color: #eee; +} + +.contact-form { + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 20px; +} + +.contact-form input, .contact-form textarea { + padding: 15px; + border: none; + border-radius: 5px; + font-family: 'Poppins', sans-serif; + font-size: 1em; + background-color: rgba(255,255,255,0.1); + color: #fff; +} + +.contact-form input::placeholder, .contact-form textarea::placeholder { + color: #ccc; +} + +.contact-form textarea { + min-height: 120px; + resize: vertical; +} + +.contact-form .btn { + background-color: #FFD700; /* Gold */ + color: #333; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.contact-form .btn:hover { + background-color: #E5C100; +} + +/* Footer */ +footer { + background-color: #222; + color: #fff; + padding: 30px 0; + text-align: center; + font-size: 0.9em; +} + +footer .container { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; +} + +.social-links a { + margin: 0 10px; + display: inline-block; +} + +.social-links img { + width: 30px; + height: 30px; + border-radius: 50%; + transition: transform 0.3s ease; +} + +.social-links img:hover { + transform: scale(1.1); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .navbar .container { + flex-direction: column; + } + + .navbar ul { + margin-top: 15px; + flex-wrap: wrap; + justify-content: center; + } + + .navbar ul li { + margin: 0 10px 10px 10px; + } + + .hero h1 { + font-size: 2.5em; + } + + .hero p { + font-size: 1em; + } + + .feature-grid { + grid-template-columns: 1fr; + } + + .content-flex { + flex-direction: column; + } + + .content-flex.reverse { + flex-direction: column; + } + + .content-flex div { + text-align: center; + } + + .content-image { + margin-bottom: 20px; + } + + .contact-form { + padding: 0 15px; + } +}