diff --git a/readme.md b/readme.md
index e69de29..ccab9e6 100644
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1,185 @@
+📸 Focus.Frame — Single-Page Photography Website
+
+Discover the magic of photography in our school!
+
+
+ Focus.Frame is a single-page, fully responsive photography school website
+ developed as part of the GoIT Full Stack Developer course.
+ The page includes sections for courses, mentors, reviews, contact information,
+ and a professional footer.
+
+
+
+
+🌐 Live Demo
+
+ 👉 GitHub Pages (add link)
+
+
+
+
+📋 Table of Contents
+
+ - About the Project
+ - Core Features & Requirements
+ - Technical Specifications
+ - Project Structure (Sections)
+ - Features
+ - Technologies Used
+ - Team Members
+ - Challenges
+ - Screenshots
+ - License
+
+
+
+
+📖 About the Project
+
+ Focus.Frame simulates a real landing page experience:
+
+
+ - A Hero section introducing the school
+ - Course cards (Basics, Landscape, Portrait)
+ - Mentor profiles
+ - Student Reviews
+ - A Sign Up form
+ - A Footer with social links and contact information
+
+
+
+
+✨ Core Features and Requirements
+
+Layout and Responsiveness 📱💻🖥️
+
+ - Mobile: Responsive from 375px
+ - Tablet: Responsive from 768px
+ - Desktop: Responsive from 1280px (optional optimization for 1440px)
+
+
+
+
+⚙️ Technical Specifications
+
+ - Validation: Must pass HTML/CSS validation:
+
+
+ - Semantics: Must comply with HTML5 semantic standards
+ - Fonts: Must be linked externally
+ - Image Optimization:
+
+ - Optimized dimensions for vector and raster images
+ - Support for Retina displays
+ - Optimized image loading
+
+
+ - SVG Icons: All icons must be linked via a
sprite
+ - Favicon: A favicon image must be added
+
+
+
+
+🏗️ Project Structure (Sections)
+
+
+ - Header: Includes logo, navigation, and a “Sign Up” link (camera icon on mobile). On mobile, the navigation menu is a fixed dropdown sidebar that fills the viewport height. Header and Hero share a dotted grid PNG background applied to a wrapper.
+ - Hero: Heading: “Discover the magic of photography in our school.” Contains descriptive text, student info, and references. The “Our happy students” link redirects to the Reviews section.
+ - Advertisement: Single-line heading: “Master your photography skills with us!”
+ - About Us: Heading: “About us.” Images must be content images.
+ - Our Courses: Heading: “Our courses.” List implemented with
<ol>. Each card includes: number + title + description + ⇗ link (redirects to Sign Up).
+ - Our Mentors: Heading: “Our Mentors.” List implemented with
<ul>. Each card includes: photo (content image) + name + experience.
+ - Sign Up: Heading: “Sign up.” The form includes
<input pattern>, a <textarea>, and a type="submit" “Send” button.
+ - Reviews: Heading: “Reviews.” List implemented with
<ul>. Each review card includes: photo + name + status + feedback + rating.
+ - Footer: Includes logo, contact info, social links, site links, a required
input with pattern, and a “Go” button.
+
+ - Phone number implemented with link protocols (
tel:)
+ - Social links implemented with
<ul> and open in a new tab:
+
+
+ - Dotted grid background applied as a PNG image
+
+
+
+
+
+
+💡 Features
+
+ - Fully responsive (mobile–tablet–desktop)
+ - Flexbox & CSS Grid layout
+ - Semantic HTML structure
+ - Modern typography and UI styled according to Figma design
+ - Footer with company info, quick links, and subscription form
+
+
+
+
+🛠️ Technologies Used
+
+ - HTML5 — Semantic structure
+ - CSS3 — Styling & responsive layout
+ - Flexbox & CSS Grid — Page layout
+ - Git & GitHub — Version control & collaboration
+ - Figma — Design reference
+
+
+
+
+👥 Team Members
+This project was developed collaboratively as part of the GoIT group project.
+
+
+ - Team Leader: Emiralp Saka
+ - Scrum Master: Esra Aras
+
+
+Section Responsibilities:
+
+ - Header: Ayşegül Gök
+ - Hero: Esra Aras
+ - About Us: Emiralp Saka
+ - Our Courses: Ali Kemal Demir
+ - Our Mentors: Rıdvan Kesken
+ - Sign Up: Nur Seda Ağgünlü
+ - Reviews: Gülnihan Yazıcı
+ - Footer: Kutluhan Gül
+
+
+
+ We collaborated using GitHub branches, Pull Requests, and Trello for task management.
+
+
+
+
+🚧 Challenges
+
+ - Maintaining pixel-perfect alignment with Figma mockups
+ - Ensuring responsive design at all breakpoints
+ - Keeping fonts, spacing, and icons consistent
+ - Team coordination and resolving merge conflicts
+
+
+
+
+📸 Screenshots
+
+ 
+
+
+
+
+📜 License
+
+ This project is created for educational purposes under the GoIT Full Stack Developer course.
+
© 2024 Focus.Frame — All rights reserved
+
+
diff --git a/src/images/FocusFrame-1440.png b/src/images/FocusFrame-1440.png
new file mode 100644
index 0000000..4dfb8de
Binary files /dev/null and b/src/images/FocusFrame-1440.png differ