Home

About This Website

This is a simple website created to demonstrate basic web development principles. It includes multiple pages, a navigation menu, and is designed to be responsive across different screen sizes.

This website serves as a template and can be further expanded upon with more features and functionalities. Feel free to explore the different pages and sections.

We hope you find this website informative and easy to navigate. Thank you for visiting!

Our Services

Service 1

Service 2

Service 3

Service 4

Video Section Title

This is a video section with some descriptive text. You can embed videos to showcase your content or provide more information in a visual format.

About Us

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Contact Us

Contact Us

Contact Information:

Address: 123 Main Street, City, Country

Phone: (123) 456-7890

Email: info@example.com

Services

Our Services

Service 1 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 2 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 3 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 4 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 5 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 6 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 7 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 8 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 9 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 10 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 11 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Service 12 Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-image: url('background.jpg'); background-size: cover; background-attachment: fixed; color: #333; } header { background-color: #f0f0f0; padding: 20px; display: flex; justify-content: space-between; align-items: center; } .logo img { height: 50px; } nav ul { list-style: none; padding: 0; margin: 0; display: flex; } nav ul li { margin-left: 20px; } nav ul li a { text-decoration: none; color: #333; font-weight: bold; transition: color 0.3s ease; /* Smooth transition for hover effect */ } nav ul li a:hover { color: #555; /* Darker color on hover */ } main { padding: 20px; margin-bottom: 50px; } footer { background-color: #f0f0f0; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; position: fixed; bottom: 0; width: 100%; } footer nav ul { display: flex; } footer nav ul li { margin-left: 10px; } footer nav ul li a { text-decoration: none; color: #333; } footer nav ul li a:hover { color: #555; /* Darker color on hover */ } .copyright { font-size: 0.9em; } /* Home Page Styles */ .home .hero-banner { background-color: rgba(255, 255, 255, 0.8); padding: 50px 20px; text-align: center; margin-bottom: 20px; } .home .about-website { background-color: rgba(255, 255, 255, 0.8); padding: 20px; margin-bottom: 20px; } .home .list-section { background-color: rgba(255, 255, 255, 0.8); padding: 20px; margin-bottom: 20px; } .home .list-items { display: flex; justify-content: space-around; flex-wrap: wrap; } .home .list-card { background-color: #fff; border: 1px solid #ddd; padding: 15px; margin: 10px; text-align: center; width: 200px; transition: transform 0.3s ease; /* Smooth transition for card hover effect */ } .home .list-card:hover { transform: scale(1.05); /* Slightly scale up on hover */ } .home .video-section { background-color: rgba(255, 255, 255, 0.8); padding: 20px; display: flex; align-items: center; margin-bottom: 20px; } .home .video-container { flex: 1; margin-right: 20px; } .home .video-container video { width: 100%; max-width: 500px; } .home .video-text { flex: 1; } /* About Page Styles */ .about-page .about-video-section { background-color: rgba(255, 255, 255, 0.8); padding: 20px; text-align: center; margin-bottom: 20px; } .about-page .about-video-section .video-container { display: inline-block; } .about-page .about-video-section .video-container video { width: 100%; max-width: 700px; } .about-page .about-us-text { background-color: rgba(255, 255, 255, 0.8); padding: 20px; margin-bottom: 20px; } /* Contact Page Styles */ .contact-page .contact-section { background-color: rgba(255, 255, 255, 0.8); padding: 20px; margin-bottom: 20px; } .contact-page .contact-container { display: flex; gap: 20px; } .contact-page .contact-form { flex: 1; } .contact-page .contact-form form { display: flex; flex-direction: column; } .contact-page .contact-form input, .contact-page .contact-form textarea { margin-bottom: 10px; padding: 10px; } .contact-page .contact-form button { padding: 10px; background-color: #333; color: #fff; border: none; cursor: pointer; transition: background-color 0.3s ease; /* Smooth transition for button hover effect */ } .contact-page .contact-form button:hover { background-color: #555; /* Darker background on button hover */ } .contact-page .contact-info { flex: 1; } /* List Page Styles */ .list-page .list-page-section { background-color: rgba(255, 255, 255, 0.8); padding: 20px; margin-bottom: 20px; } .list-page .list-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); /* Set 3 rows */ gap: 10px; /* Reduced gap for better spacing */ } .list-page .list-item { background-color: #fff; border: 1px solid #ddd; padding: 0; /* Remove padding to fit image nicely */ text-align: center; overflow: hidden; /* Clip images to the container */ transition: transform 0.3s ease; /* Smooth transition for list item hover effect */ margin: 5px; /* Added margin for spacing between items */ } .list-page .list-item:hover { transform: scale(1.05); /* Slightly scale up on hover */ } .list-page .list-item img { display: block; /* Ensure image is a block element */ width: 100%; /* Image takes full width of list-item */ height: 100%; /* Image takes full height of list-item */ object-fit: cover; /* Cover container, cropping if necessary */ } /* Detail Page Styles */ .detail-page .detail-banner { background-color: rgba(255, 255, 255, 0.8); padding: 20px; text-align: center; margin-bottom: 20px; } .detail-page .detail-banner video { width: 100%; max-width: 700px; } .detail-page .detail-content { background-color: rgba(255, 255, 255, 0.8); padding: 20px; display: flex; gap: 20px; } .detail-page .detail-text { flex: 1; } .detail-page .detail-images { flex: 1; display: flex; flex-direction: column; gap: 10px; } .detail-page .detail-images img { max-width: 100%; height: auto; transition: transform 0.3s ease; /* Smooth transition for detail image hover effect */ } .detail-page .detail-images img:hover { transform: scale(1.05); /* Slightly scale up on hover */ } /* Responsive Design */ @media (max-width: 1024px) { .home .video-section { flex-direction: column; text-align: center; } .home .video-container { margin-right: 0; margin-bottom: 20px; } .contact-page .contact-container { flex-direction: column; } .list-page .list-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; /* Adjust rows to auto in smaller screens */ } .detail-page .detail-content { flex-direction: column; } } @media (max-width: 640px) { header { flex-direction: column; text-align: center; } nav ul { flex-direction: column; text-align: center; } nav ul li { margin: 10px 0; } .home .list-items { justify-content: center; } .list-page .list-grid { grid-template-columns: 1fr; } } @media (max-width: 340px) { .home .list-card { width: 100%; } }