search

🏠Index.php

The index.php file is the main file that serves as the entry point for your Morena Photography template. It organizes and integrates all the different sections and components of the website into a cohesive layout. Here’s a breakdown of its structure:

hashtag
🚀HTML Doctype and Head:

<!DOCTYPE html>
<html>
<head>
	<title>Morena - Home</title>
        <!-- Meta Desctiption -->
	<meta name="description" content="A brief description of your website">
	<!-- Meta charset -->
	<meta charset="utf-8">
	<!-- Viewport -->
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- Favicon -->
	<link rel="icon" href="./img/favicon/favicon.svg" type="image/svg+xml">
	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="./styles/index.css">
	<!-- Responsive CSS -->
	<link rel="stylesheet" href="./styles/responsive.css">
	<!-- Tailwind -->
	<link href="./src/output.css" rel="stylesheet">
	<!-- Icons -->
	<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
	<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>

  • Doctype and HTML: Declares the document type and starts the HTML document.

  • Meta Tags: Defines the character encoding and viewport settings for responsive design and description and title website.

  • Favicon: Links to the favicon image.

  • CSS Links: Includes the main stylesheet (index.css), responsive styles (responsive.css), and Tailwind CSS.

  • Icons and Fonts: Includes icons from Ioniconsarrow-up-right and fonts from Google Fonts.

hashtag
🪼Body:

  • Header: Includes the header section by requiring header.php.

  • Main Content:

    • Slider: Displays the main slider component.

    • Introduction: Contains the introduction section.

    • Parallax: Features the parallax scrolling effect.

    • About Section: Provides information about the services or photographer.

    • Scroll Triggered Counter: Shows counters triggered by scrolling.

    • Gallery: Displays the image gallery.

    • Additional Section: Includes extra images or content.

    • Best of the Year (Video): Features a video section highlighting top moments.

    • Reviews: Lists testimonials or reviews.

    • Form: Contains the contact form.

  • Footer: Includes the footer section by requiring footer.php.

  • Scripts: Includes JavaScript files for functionality such as lazy loading, menu interactions, gallery management, slider operations, and scroll-triggered counters.

This structure ensures that the index.php file acts as the main connector, integrating various components and sections into a unified webpage. Each component is modularized for easier management and customization.

PreviousProject StructureNextCSS and JavaScript files

Last updated