diff --git a/images/.ignore b/images/.ignore new file mode 100644 index 000000000..99f8af0b4 --- /dev/null +++ b/images/.ignore @@ -0,0 +1 @@ +You have successfully downloaded your photos. You will need to unzip these files onto your computer before using them. \ No newline at end of file diff --git a/images/Hero.wedding.jpg b/images/Hero.wedding.jpg new file mode 100644 index 000000000..76172d378 Binary files /dev/null and b/images/Hero.wedding.jpg differ diff --git a/images/couple1.jpg b/images/couple1.jpg new file mode 100644 index 000000000..f13af25af Binary files /dev/null and b/images/couple1.jpg differ diff --git a/images/couple2.jpg b/images/couple2.jpg new file mode 100644 index 000000000..ccdc2839a Binary files /dev/null and b/images/couple2.jpg differ diff --git a/images/family1.jpg b/images/family1.jpg new file mode 100644 index 000000000..76a2b1f12 Binary files /dev/null and b/images/family1.jpg differ diff --git a/images/kid1.jpg b/images/kid1.jpg new file mode 100644 index 000000000..54818b142 Binary files /dev/null and b/images/kid1.jpg differ diff --git a/images/kid2.jpg b/images/kid2.jpg new file mode 100644 index 000000000..a47bfc3dc Binary files /dev/null and b/images/kid2.jpg differ diff --git a/images/kid3.jpg b/images/kid3.jpg new file mode 100644 index 000000000..bbba93634 Binary files /dev/null and b/images/kid3.jpg differ diff --git a/images/photographer.jpg b/images/photographer.jpg new file mode 100644 index 000000000..193f9142e Binary files /dev/null and b/images/photographer.jpg differ diff --git a/images/wed1.jpg b/images/wed1.jpg new file mode 100644 index 000000000..a631044d0 Binary files /dev/null and b/images/wed1.jpg differ diff --git a/images/wed2.jpg b/images/wed2.jpg new file mode 100644 index 000000000..58e43e04c Binary files /dev/null and b/images/wed2.jpg differ diff --git a/images/wed3.jpg b/images/wed3.jpg new file mode 100644 index 000000000..35278a2b7 Binary files /dev/null and b/images/wed3.jpg differ diff --git a/images/wed4.jpg b/images/wed4.jpg new file mode 100644 index 000000000..b8142877e Binary files /dev/null and b/images/wed4.jpg differ diff --git a/images/wedding5 (1).jpg b/images/wedding5 (1).jpg new file mode 100644 index 000000000..57031cc69 Binary files /dev/null and b/images/wedding5 (1).jpg differ diff --git a/images/wedding6.jpg b/images/wedding6.jpg new file mode 100644 index 000000000..d99ca0df3 Binary files /dev/null and b/images/wedding6.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..04efbd335 --- /dev/null +++ b/index.html @@ -0,0 +1,200 @@ + + + + + + Photography by Louise + + + + +
+
+

Photography by Louise

+ + +
+
+
+
+

Catch the moments that means the most

+

Beautiful memories, captured forever

+ + Book a session + +
+
+ +
+
+ photographer portrait +
+

About Me

+

+ Hello! I'm Louise, a passionate photographer who loves capturing + authentic moments. Whether it's a wedding, a couple shoot, or + playful kids – my goal is to create timeless memories that you + will treasure forever. +

+
+
+
+ +
+
+ wedding-beach +

Wedding

+

Romantic pictures from your big day.

+
+ +
+ Couple-photo +

Couples

+

Capture love and your special moments

+
+ +
+ Family/Children-photo +

Family/Children

+

Natural and playful portraits of family/children

+
+
+
+ +
+

Make a request

+
+
+ + +
+ +
+ + +
+
+

Preferred time of day:

+ + + + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+ + +
+ + + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..bf94f0ded --- /dev/null +++ b/portfolio.html @@ -0,0 +1,56 @@ + + + + + + Portfolio - Photography by Louise + + + + +
+
+

Photography by Louise

+ + +
+ +
+

Portfolio

+
+ Wedding moment + Couple session + Family shoot + Children portrait +
+
+ + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 000000000..9884c7a38 --- /dev/null +++ b/script.js @@ -0,0 +1,16 @@ +const hamburger = document.querySelector('.hamburger') +const navbar = document.querySelector('.navbar') +const navLinks = document.querySelectorAll('.navbar a') + +hamburger.addEventListener('click', () => { + navbar.classList.toggle('show') + hamburger.classList.toggle('open') + hamburger.textContent = navbar.classList.contains('show') ? '✕' : '☰' +}); + +navLinks.forEach(link => { + link.addEventListener('click', () => { + navbar.classList.remove('show') + hamburger.textContent = '☰' + }) +}) diff --git a/style.css b/style.css new file mode 100644 index 000000000..7e80cb815 --- /dev/null +++ b/style.css @@ -0,0 +1,428 @@ +:root { + --bg: #f6f2ea; + --text: #1a1a1a; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Montserrat', sans-serif; + line-height: 1.6; + color: var(--text); + background-color: var(--bg); + margin: 0; + padding: 0; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + padding: 1rem; +} + +.header { + display: flex; + justify-content: space-between; + position: relative; + align-items: center; + padding: 1rem 0; + background-color: var(--bg); + color: var(--text); + z-index: 1; +} + +h1 { + line-height: 1.2; + position: relative; + font-family: 'Great Vibes', cursive; + font-size: 2.5rem; + font-weight: 400; + letter-spacing: 1px; + margin: 0; +} + +.navbar { + display: block; + } + +.navbar ul { + list-style: none; + display: flex; + flex-direction: row; + gap: 1.5rem; + margin: 0; + padding: 0; +} + +.navbar a { + text-decoration: none; + color: #333; + font-weight: bold; + letter-spacing: 1px; + font-size: 1.2rem; + display: block; + padding: o.5rem 0; + transition: color 0.3s ease; +} + +.navbar a:hover { + color: #000; + transform: scale(1.05); + transition: all 200ms ease-in-out; +} + +.hamburger { + align-self: start; + padding: 0; + display: none; + font-size: 2rem; + background: none; + border: none; + cursor: pointer; + color: #333; + z-index: 30; +} + +.hamburger.open { + position: fixed; + right: 16px; +} + + .hamburger:active { + transform: scale(0.9); + color: #555; +} + + @media (max-width: 768px) { + .hamburger { + display: block; + } + + .navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: var(--bg); + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); + padding: 1rem 0; + transform: scaleY(0); + transform-origin: top; + transition: transform 0.3s ease-in-out; + z-index: 20; + } + + .navbar.show { + transform: scaleY(1); + + } + + .navbar ul { + flex-direction: column; + gap: 0.8rem; + width: 100%; + align-items: center; +} + + .navbar ul li { + opacity:0; + transform: translateY(-10px); + transition: opacity 0.3 ease, transform 0.3s ease; + } + + .navbar.show ul li { + opacity: 1; + transform: translateY(0) + } + + .navbar.show ul li:nth-child(1) { transition-delay: 0.1s; } + .navbar.show ul li:nth-child(2) { transition-delay: 0.2s; } + .navbar.show ul li:nth-child(3) { transition-delay: 0.3s; } + .navbar.show ul li:nth-child(4) { transition-delay: 0.4s; } + +} + + +.hero { + position: relative; + height: 100vh; + background: url("images/Hero.wedding.jpg") center/cover no-repeat; + padding: 2rem; + color: white; +} + +.hero-content { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 1rem; +} + +.hero h2 { + font-size: 2rem; + margin-bottom: 1rem; + text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); + opacity: 0; + transform: translateY(20px); + animation: fadeInUp 1s ease forwards; +} + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero p { + font-size: 1.2rem; + max-width: 600px; + margin: 0 auto; + text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); +} + +@media (max-width: 768px) { + .hero { + height: 70vh; + padding: 1.5rem; + background-attachment: scroll; + } +} + +.hero-button, form button { + margin-top: auto; + display: inline-block; + padding: 12px 24px; + background: #333; + color: white; + font-weight: bold; + border-radius: 50px; + text-decoration: none; + opacity: 0; + animation: fadeInUp 1s ease forwards; + animation-delay: 0.6s; + transition: background-color 0.3s ease, transform 0.2 ease; + transform: translateX(-50%, 10px) +} + +.hero-button:hover,form button:hover { + background: #1a1a1a; + transform: scale(1.05); +} + +form button { + width: fit-content; + align-self: center; +} + +.about-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + max-width: 800px; + margin: 4rem auto; + text-align: center; + padding: 0 1rem; +} + +.about-img { + width: 200px; + height: 200px; + border-radius: 50%; + object-fit: cover; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); +} + +.about-text h2 { + margin-bottom: 1rem; + font-size: 2rem; +} + +.about-text p { + font-size: 1.1rem; + line-height: 1.6; +} + +@media (min-width: 768px) { + .about-wrapper { + flex-direction: row; + text-align: left; + align-items: center; + } +} + +.grid { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + margin: 2rem auto; +} + +@media (min-width: 600px) { + .grid { + grid-template-columns: repeat(3, 1fr); + } +} + + +.card { + background: white; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + text-align: center; + padding: 1rem; +} + +.card img { + width: 100%; + height: auto; + border-radius: 8px; +} + +.card h3 { + margin: 1rem 0 0.5rem; + color: #666; +} + +.contact { + max-width: 600px; + margin: 4rem auto; + padding: 2rem; + background: white; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + color: #333; +} + +.contact h2 { + text-align: center; + margin-bottom: 2rem; +} + +form { + display: flex; + flex-direction: column; + gap: 20px; +} + +.form-input { + display: flex; + flex-direction: column; + gap: 10px; + margin: 10px 0; +} + + +input, +select, +textarea { + width: 100%; + box-sizing: border-box; + background: #f6f2ea; + color: #1a1a1a; + padding: 12px 10px; + border: 1px solid #ccc; + border-radius: 6px; + font-family: inherit; + font-size: 16px; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +input:focus, +select:focus, +textarea:focus { + outline: none; + border-color: #999; + box-shadow: 0 0 4px rgba(0,0,0,0.1); +} + +input::placeholder, +textarea::placeholder { + color: #656363; +} + +.form-input label { + display: flex; + align-items: center; + gap: 8px; + font-weight: normal; +} + +.form-input input[type="radio"], +.form-input input[type="checkbox"] { + width: auto; + margin: 0; +} + +.form-input p { + font-weight: bold; + margin-bottom: 0.5rem; +} + + +label { + margin-bottom: 10px; + font-weight: bold; +} + +textarea { + background: #f6f2ea; + resize: vertical; +} + +button { + width: fit-content; + align-self: center; + padding: 15px; + border-radius: 50px; + border: none; + font-size: 16px; + background: #333; + color: white; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.portfolio { + margin: 4rem auto; + text-align: center; +} + +.portfolio-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1rem; + max-width: 1000px; + margin: 2rem auto; + padding: 0 1rem; +} + +.portfolio-grid img { + width: 100%; + height: auto; + object-fit: contain; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.portfolio-grid img:hover { + transform: scale(1.03); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); +} + +footer { + text-align: center; + padding: 1rem; + margin-top: 2rem; + border-top: 1px solid #ddd; + font-size: 0.9rem; +}