diff --git a/lab 8/index.html b/lab 8/index.html new file mode 100644 index 0000000..f7ccd90 --- /dev/null +++ b/lab 8/index.html @@ -0,0 +1,90 @@ + + + + + + + + Photography Portfolio + + + + +
+
+

Welcome to My Photography Portfolio

+

Capturing moments from today... Creating memories for a lifetime.

+
+
+ + + +
+ Large Image 1 + Large Image 2 + Large Image 3 +
+ +
+ Medium Image 1 + Medium Image 2 + Medium Image 3 +
+ +
+

About Me

+

Hi, I'm Anna, a passionate photographer with a love for capturing the beauty of the world through my lens. With over 10 years of experience, I specialize in portrait, landscape, and event photography.

+
+ +
+

Contact

+

If you'd like to work with me or just say hello, feel free to reach out!

+
+ + + + + + + +
+
+ + + + + + diff --git a/lab 8/script.js b/lab 8/script.js new file mode 100644 index 0000000..96316f6 --- /dev/null +++ b/lab 8/script.js @@ -0,0 +1,55 @@ +document.getElementById('hamburgerBtn').addEventListener('click', function() { + const navbarItems = document.querySelector('.navbar-items'); + if (navbarItems.style.display === 'block') { + navbarItems.style.display = 'none'; + } else { + navbarItems.style.display = 'block'; + } + }); + + const slides = document.querySelectorAll('.slide'); + const prevBtn = document.querySelector('.prev'); + const nextBtn = document.querySelector('.next'); + const indicators = document.querySelectorAll('.indicator'); + + let currentIndex = 0; + let slideInterval = setInterval(nextSlide, 3000); + + prevBtn.addEventListener('click', showPrevSlide); + nextBtn.addEventListener('click', showNextSlide); + indicators.forEach((indicator, index) => { + indicator.addEventListener('click', () => showSlide(index)); + }); + + function showSlide(index) { + slides[currentIndex].classList.remove('active'); + indicators[currentIndex].classList.remove('active'); + currentIndex = (index + slides.length) % slides.length; + slides[currentIndex].classList.add('active'); + indicators[currentIndex].classList.add('active'); + updateCarousel(); + } + + function showPrevSlide() { + showSlide(currentIndex - 1); + } + + function showNextSlide() { + showSlide(currentIndex + 1); + } + + function nextSlide() { + showNextSlide(); + } + + function updateCarousel() { + const slideWidth = slides[currentIndex].clientWidth; + document.querySelector('.slides').style.transform = `translateX(-${currentIndex * slideWidth}px)`; + clearInterval(slideInterval); + slideInterval = setInterval(nextSlide, 3000); + } + + window.addEventListener('resize', updateCarousel); + + updateCarousel(); + \ No newline at end of file diff --git a/lab 8/style.css b/lab 8/style.css new file mode 100644 index 0000000..05ef9fc --- /dev/null +++ b/lab 8/style.css @@ -0,0 +1,285 @@ +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: #f4f4f4; + color: #333; +} + +.navbar { + background-color: #222; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.navbar-items { + display: flex; + justify-content: space-around; + align-items: center; + list-style: none; + margin: 0; + padding: 0; +} + +.navbar-items a { + color: white; + text-decoration: none; + padding: 14px 20px; + display: block; + transition: background 0.3s, color 0.3s; +} + +.navbar-items a:hover { + background: #444; + color: #fff; +} + +.hamburger { + display: none; +} + +.hero-section { + background: url('https://source.unsplash.com/random/1920x1080') no-repeat center center/cover; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + color: white; + text-align: center; + position: relative; +} + +.hero-section::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); +} + +.hero-content { + position: relative; + z-index: 1; +} + +.hero-content h1 { + font-size: 3em; + margin: 0; + text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +.hero-content p { + font-size: 1.2em; + margin: 20px 0; + text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +.carousel { + position: relative; + width: 90%; + max-width: 1000px; + margin: 50px auto; + overflow: hidden; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + background: white; +} + +.slides { + display: flex; + transition: transform 0.5s ease-in-out; +} + +.slide { + min-width: 100%; + box-sizing: border-box; +} + +.slide img { + width: 100%; + display: block; +} + +.prev, .next { + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -22px; + color: white; + font-weight: bold; + font-size: 18px; + cursor: pointer; + background-color: rgba(0, 0, 0, 0.5); + border: none; + transition: background 0.3s; +} + +.prev:hover, .next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +.prev { + left: 10px; +} + +.next { + right: 10px; +} + +.indicators { + text-align: center; + position: absolute; + bottom: 10px; + width: 100%; +} + +.indicators .indicator { + display: inline-block; + width: 10px; + height: 10px; + margin: 10px 5px; + background-color: #bbb; + border-radius: 50%; + cursor: pointer; + transition: background 0.3s; +} + +.indicators .indicator.active { + background-color: #717171; +} + +.large-images, +.medium-images { + display: none; + padding: 50px; + text-align: center; +} + +.large-images img, +.medium-images img { + max-width: 100%; + height: auto; + margin: 10px 0; +} + +.about-section, .contact-section { + padding: 50px 20px; + background: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin: 20px 0; +} + +.about-section h2, .contact-section h2 { + text-align: center; + margin-bottom: 20px; +} + +.about-section p, .contact-section p { + text-align: center; + font-size: 1.1em; +} + +.contact-section form { + display: flex; + flex-direction: column; + align-items: center; +} + +.contact-section label { + margin: 10px 0 5px; +} + +.contact-section input, .contact-section textarea { + width: 80%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.contact-section button { + padding: 10px 20px; + border: none; + background-color: #333; + color: white; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s; +} + +.contact-section button:hover { + background-color: #555; +} + +footer { + background-color: #333; + color: white; + padding: 20px; + text-align: center; +} + +.footer-items { + display: flex; + justify-content: center; + list-style: none; + padding: 0; + margin: 0; +} + +.footer-items a { + color: white; + text-decoration: none; + margin: 0 15px; + transition: color 0.3s; +} + +.footer-items a:hover { + color: #bbb; +} + +@media (min-width: 992px) { + .large-images { + display: block; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .medium-images { + display: block; + } +} + +@media (max-width: 600px) { + .navbar-items { + display: none; + flex-direction: column; + width: 100%; + } + + .navbar-items a { + text-align: center; + padding: 10px; + border-top: 1px solid white; + } + + .hamburger { + display: block; + color: white; + background: none; + border: none; + font-size: 20px; + padding: 14px 20px; + } + + .hero-section { + height: 70vh; + } + + .hero-content h1 { + font-size: 2em; + } +}