diff --git a/FlexPage/FlexPage/__init__.py b/FlexPage/FlexPage/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/FlexPage/FlexPage/asgi.py b/FlexPage/FlexPage/asgi.py
new file mode 100644
index 0000000..912bf34
--- /dev/null
+++ b/FlexPage/FlexPage/asgi.py
@@ -0,0 +1,16 @@
+"""
+ASGI config for FlexPage project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'FlexPage.settings')
+
+application = get_asgi_application()
diff --git a/FlexPage/FlexPage/settings.py b/FlexPage/FlexPage/settings.py
new file mode 100644
index 0000000..eb4e2a8
--- /dev/null
+++ b/FlexPage/FlexPage/settings.py
@@ -0,0 +1,124 @@
+"""
+Django settings for FlexPage project.
+
+Generated by 'django-admin startproject' using Django 5.0.6.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.0/ref/settings/
+"""
+
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'django-insecure-!uq4mx0u(nml%)0g(dtmgean)kf7^j7u&m+v9y2vs1a#8fv69-'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'main',
+]
+# is Done added name app  خاللللللللللللللللللد 
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'FlexPage.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'FlexPage.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/5.0/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/5.0/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/5.0/howto/static-files/
+
+STATIC_URL = 'static/'
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
diff --git a/FlexPage/FlexPage/urls.py b/FlexPage/FlexPage/urls.py
new file mode 100644
index 0000000..7a634cb
--- /dev/null
+++ b/FlexPage/FlexPage/urls.py
@@ -0,0 +1,23 @@
+"""
+URL configuration for FlexPage project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/5.0/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+from django.urls import include
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', include("main.urls"))
+]
diff --git a/FlexPage/FlexPage/wsgi.py b/FlexPage/FlexPage/wsgi.py
new file mode 100644
index 0000000..7628f79
--- /dev/null
+++ b/FlexPage/FlexPage/wsgi.py
@@ -0,0 +1,16 @@
+"""
+WSGI config for FlexPage project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'FlexPage.settings')
+
+application = get_wsgi_application()
diff --git a/FlexPage/main/__init__.py b/FlexPage/main/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/FlexPage/main/admin.py b/FlexPage/main/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/FlexPage/main/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/FlexPage/main/apps.py b/FlexPage/main/apps.py
new file mode 100644
index 0000000..167f044
--- /dev/null
+++ b/FlexPage/main/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class MainConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'main'
diff --git a/FlexPage/main/migrations/__init__.py b/FlexPage/main/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/FlexPage/main/models.py b/FlexPage/main/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/FlexPage/main/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/FlexPage/main/static/css/articleAiStyle.css b/FlexPage/main/static/css/articleAiStyle.css
new file mode 100644
index 0000000..96033c9
--- /dev/null
+++ b/FlexPage/main/static/css/articleAiStyle.css
@@ -0,0 +1,111 @@
+
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+    color: #333;
+}
+.article-image {
+    width: 500px;
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 15px auto; 
+    display: block; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+header:hover .article-image {
+    transform: scale(1.02); 
+}
+
+header, main, footer {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 10px;
+    transition: background-color 0.3s ease-in-out; 
+}
+
+header h1 {
+    font-size: 2em;
+    margin-bottom: 0.5em;
+    color: #0073e6;
+}
+
+header:hover {
+    background-color: #e6f7ff;
+}
+
+header p {
+    font-size: 1.1em;
+    color: #555;
+}
+
+
+section {
+    margin-bottom: 20px;
+    opacity: 0;
+    animation: fadeIn 1s forwards;
+}
+
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+section h2 {
+    color: #444;
+    font-size: 1.5em;
+    position: relative;
+    padding-bottom: 0.2em;
+}
+
+section h2::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 50px;
+    height: 2px;
+    background-color: #0073e6;
+    transition: width 0.3s ease;
+}
+
+section:hover h2::after {
+    width: 100%;
+}
+
+footer {
+    text-align: center;
+    font-size: 0.9em;
+    color: #666;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}
+
+footer p {
+    color: #999;
+}
+
+a:focus, button:focus, input:focus {
+    outline: 2px solid #0073e6;
+    outline-offset: 2px;
+}
+
+a:focus-visible, button:focus-visible, input:focus-visible {
+    outline: 2px dashed #005bb5;
+}
+
+header:hover h1 {
+    color: #005bb5;
+}
diff --git a/FlexPage/main/static/css/cvStyle.css b/FlexPage/main/static/css/cvStyle.css
new file mode 100644
index 0000000..1b6233d
--- /dev/null
+++ b/FlexPage/main/static/css/cvStyle.css
@@ -0,0 +1,95 @@
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    background-color: rgb(244, 244, 249);
+    margin: 0;
+    padding: 0;
+    color:rgb(51, 51, 51);
+}
+
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+    padding: 20px;
+}
+
+.header {
+    background:rgb(255, 255, 255);
+    padding: 20px;
+    border-radius: 8px;
+    margin: 20px 0;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.header h1 {
+    font-size: 2.5em;
+    transition: color 0.3s ease;
+}
+
+.header h1:hover {
+    color: rgb(0, 123, 255)
+    ;
+}
+
+.contact-info {
+    font-size: 0.9em;
+    color:rgb(85, 85, 85)
+    ;
+}
+
+.profile-img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-left: 20px;
+}
+
+.section {
+    background:rgb(255, 255, 255)
+    ;
+    margin: 20px 0;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    position: relative;
+    animation: fadeIn 1s ease-in-out;
+}
+
+.section h2 {
+    border-bottom: 2px solid rgb(51, 51, 51);
+    padding-bottom: 5px;
+    margin-bottom: 15px;
+}
+
+.section ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.section ul li {
+    margin: 10px 0;
+}
+
+
+.section#education ul li:first-child {
+    font-weight: bold;
+}
+
+.section ul li:hover {
+    color: rgb(0, 123, 255);
+    cursor: pointer;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.section:focus-within {
+    outline: 2px dashed rgb(0, 123, 255) ;
+}
+
+
diff --git a/FlexPage/main/static/css/homeStyle.css b/FlexPage/main/static/css/homeStyle.css
new file mode 100644
index 0000000..283d353
--- /dev/null
+++ b/FlexPage/main/static/css/homeStyle.css
@@ -0,0 +1,28 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    color: #333;
+    margin: 20px;
+    text-align: center;
+}
+
+h1 {
+    color: #5a5a5a;
+}
+
+ul {
+   
+    padding: 0;
+}
+
+li {
+    margin: 10px 0;
+}
+
+a {
+    color: #007bff;
+}
+
+a:hover {
+    color: #0056b3;
+}
diff --git a/FlexPage/main/static/images/DALLE2024.jpg b/FlexPage/main/static/images/DALLE2024.jpg
new file mode 100644
index 0000000..f9fc836
Binary files /dev/null and b/FlexPage/main/static/images/DALLE2024.jpg differ
diff --git a/FlexPage/main/static/images/WhatsApp Image 2024-10-29.jpg b/FlexPage/main/static/images/WhatsApp Image 2024-10-29.jpg
new file mode 100644
index 0000000..03578e4
Binary files /dev/null and b/FlexPage/main/static/images/WhatsApp Image 2024-10-29.jpg differ
diff --git a/FlexPage/main/static/images/download1.jpg b/FlexPage/main/static/images/download1.jpg
new file mode 100644
index 0000000..96d062b
Binary files /dev/null and b/FlexPage/main/static/images/download1.jpg differ
diff --git a/FlexPage/main/static/images/mincer-mode.jpg b/FlexPage/main/static/images/mincer-mode.jpg
new file mode 100644
index 0000000..515f7be
Binary files /dev/null and b/FlexPage/main/static/images/mincer-mode.jpg differ
diff --git a/FlexPage/main/static/images/python-django-1.jpg b/FlexPage/main/static/images/python-django-1.jpg
new file mode 100644
index 0000000..17438a3
Binary files /dev/null and b/FlexPage/main/static/images/python-django-1.jpg differ
diff --git a/FlexPage/main/static/videos/WhatsApp Video 2024-10-28 .mp4 b/FlexPage/main/static/videos/WhatsApp Video 2024-10-28 .mp4
new file mode 100644
index 0000000..669d3b8
Binary files /dev/null and b/FlexPage/main/static/videos/WhatsApp Video 2024-10-28 .mp4 differ
diff --git a/FlexPage/main/templates/main/articleAi.html b/FlexPage/main/templates/main/articleAi.html
new file mode 100644
index 0000000..d59562f
--- /dev/null
+++ b/FlexPage/main/templates/main/articleAi.html
@@ -0,0 +1,65 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="{% static 'css/articleAiStyle.css' %}">
+</head>
+<body>
+    <header>
+        <img src="{% static 'images/DALLE2024.jpg' %}" alt="AI transforming content creation" class="article-image">
+        <h1>Article AI: How AI is Transforming Content Creation</h1>
+        <p>Understanding how artificial intelligence is shaping the future of article generation and content enhancement.</p>
+    </header>
+
+    <main>
+        <article>
+            <section>
+                <h2>1. Content Generation</h2>
+                <p>AI can create entire articles based on prompts or keywords. By analyzing data and pulling information from vast sources, it can write coherent pieces on topics ranging from news to creative writing. Tools like GPT-based models (such as ChatGPT) are examples that can produce full-length articles.</p>
+            </section>
+
+            <section>
+                <h2>2. Editing and Proofreading</h2>
+                <p>AI tools like Grammarly and Hemingway use natural language processing (NLP) to identify and correct grammatical errors, improve readability, and suggest better phrasing. They also help detect plagiarism and check for tone, consistency, and adherence to style guides.</p>
+            </section>
+
+            <section>
+                <h2>3. Summarization and Extraction</h2>
+                <p>AI can condense long articles into summaries, making it easier for readers to quickly understand the content. This is especially useful for news aggregation and providing concise information from lengthy research articles.</p>
+            </section>
+
+            <section>
+                <h2>4. Content Personalization</h2>
+                <p>By analyzing user behavior and preferences, AI helps tailor content to individual readers. Platforms can present customized articles, recommend related topics, or even adjust writing styles to match audience demographics.</p>
+            </section>
+
+            <section>
+                <h2>5. SEO Optimization</h2>
+                <p>AI assists in optimizing articles for search engines by suggesting keywords, helping with meta tags, and structuring content for better ranking. AI-based SEO tools analyze trends, competitor content, and popular search terms to guide writers toward producing higher-ranking articles.</p>
+            </section>
+
+            <section>
+                <h2>6. Visual and Multimedia Enhancements</h2>
+                <p>AI can suggest images, infographics, and videos to pair with written content or even generate these assets automatically. For instance, DALL-E and other image generation models can create visuals based on the article’s content.</p>
+            </section>
+
+            <section>
+                <h2>7. Translation and Multilingual Content</h2>
+                <p>AI translation tools, like Google Translate and DeepL, allow articles to be translated into multiple languages, expanding their reach and accessibility worldwide.</p>
+            </section>
+
+            <section>
+                <h2>Conclusion</h2>
+                <p>While AI-driven article tools can significantly boost efficiency, creativity, and accessibility, they also raise ethical considerations regarding authorship, authenticity, and potential misinformation. Balancing AI-assisted writing with human oversight remains crucial to ensure high-quality, reliable, and ethically sound content.</p>
+            </section>
+        </article>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Article AI. All Rights Reserved.</p>
+    </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/FlexPage/main/templates/main/csstest.html b/FlexPage/main/templates/main/csstest.html
new file mode 100644
index 0000000..f39189f
--- /dev/null
+++ b/FlexPage/main/templates/main/csstest.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random HTML Page with Form</title>
+    <style>
+            body{
+                background-color: gray; 
+            }
+            h1{
+                text-align: center; 
+                background-color: slategrey;
+                color: #000;
+                font-size: 10px;
+                font-weight: initial;
+                direction: rtl;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+            #edit1{
+                color: darkslateblue;
+                width: 150px;
+                border: solid thin white;
+                padding: 30px;
+                margin: 25px;
+            }
+            .edit2{
+                border: solid thin blue;
+                margin: 10px 20px 15px 25px ;
+
+            }
+            .edit3{
+                border :solid thin black;
+                padding: auto;
+
+            }
+            .box1{
+                background-color: aquamarine;
+                color: chocolate;
+                height: 150px ;
+                width: 150px;
+                position: fixed;
+                text-align: center;
+                display: flex;
+                
+            }
+            #editForm input[type="text"],
+            #editForm input[type="email"],
+            #editForm input[type="password"],
+            #editForm input[type="number"],
+            #editForm button {
+                display: block;
+                width: 100%;
+                margin: 10px 0;
+                padding: 8px;
+                border: 1px solid #333;
+                border-radius: 5px;
+            }
+            #editForm button {
+                background-color: darkslateblue;
+                color: white;
+                cursor: pointer;
+                font-weight: bold;
+            }
+            #editForm button:hover {
+                background-color: slateblue;
+            }
+        
+    </style>
+
+</head>
+<body>
+
+    <header>
+        <h1>Random Form Page</h1>
+        <p>Fill out the form below with some random information</p>
+    </header>
+    <hr>
+    <p id="edit1">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br>
+        Commodi suscipit repellat sapiente voluptates quae! Excepturi.<br>
+        veniam commodi harum laborum cumque, sapiente ad. Vel ipsa beatae<br>
+        quis voluptatum voluptates, repellendus modi!
+    </p>
+    <div class="edit2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ut?</div>
+    <hr>
+    <p class="edit3">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br> 
+        Eaque, earum a. Deserunt quibusdam doloribus temporibus?
+    </p>
+    <div class="box1">1</div>
+    <main>
+        <section>
+            <h2>Random Information Form</h2>
+            <form id="editForm" action="/submit_form">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="password">Password:</label>
+                <input type="password" id="password" name="password" required>
+
+                <label for="age">Age:</label>
+                <input type="number" id="age" name="age">
+
+                <label>User Type:</label><br>
+                <input type="radio" id="student" name="user_type" value="student" required>
+                <label for="student">Student</label><br>
+                <input type="radio" id="professional" name="user_type" value="professional">
+                <label for="professional">Professional</label><br><br>
+
+                <label>
+                    <input type="checkbox" name="terms" required>
+                    I agree to the terms and conditions
+                </label>
+
+                <button type="submit">Submit</button>
+            </form>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Khaled. All rights reserved.</p>
+        <p>Contact: 054923456 | Email: <a href="mailto:edc@3edc.com">edc@3edc.com</a></p>
+        <p>
+    </footer>
+</body>
+</html>
diff --git a/FlexPage/main/templates/main/cvpage.html b/FlexPage/main/templates/main/cvpage.html
new file mode 100644
index 0000000..e6fa999
--- /dev/null
+++ b/FlexPage/main/templates/main/cvpage.html
@@ -0,0 +1,74 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="{% static 'css/cvStyle.css' %}">
+        <title></title>
+    </head>
+        <body>
+            
+            <div class="container">
+                <div class="header">
+                    <h1>Khalid Al-Maghyadi</h1>
+                    <p class="contact-info">Riyadh, Saudi Arabia | Phone: +966 549234591 | Email: Khalidalmaghyadi@gmail.com</p>
+                    <img src="{% static 'images/WhatsApp Image 2024-10-29.jpg' %}" alt="Khaled's Profile Picture" class="profile-img">
+                </div>
+        
+                <div class="section">
+                    <h2>Objective</h2>
+                    <p>An ambitious and hardworking individual, seeking a responsible career where my abilities can be highly utilized in a growth-oriented and professional manner to achieve goals and foster effective teamwork.</p>
+                </div>
+        
+                <div class="section">
+                    <h2>Education</h2>
+                    <ul>
+                        <li><strong>Bachelor's Degree in Software Engineering</strong> - Communications and Information College (2021 - 2024)</li>
+                        <li><strong>Diploma in Information Systems</strong> - King Khalid University (2013 - 2017)</li>
+                    </ul>
+                </div>
+        
+                <div class="section" >
+                    <h2>Certifications</h2>
+                    <ul>
+                        <li>Python Bootcamp - Tuwaiq Academy (09/2024 – Ongoing)</li>
+                    </ul>
+                </div>
+        
+                <div class="section">
+                    <h2>Skills</h2>
+                    <ul>
+                        <li><strong>Programming Languages:</strong> C++, Java, Python, Kotlin, Dart</li>
+                        <li><strong>Web Development:</strong> Django, Backend, Frontend</li>
+                        <li><strong>Tools and Technologies:</strong> MS Office, SQL, Flutter</li>
+                    </ul>
+                </div>
+                       
+                <div class="section" >
+                    <h2>Courses</h2>
+                    <ul>
+                        <li>Python - Satr Codes, April 2023</li>
+                        <li>HTML - Satr Codes, December 2022</li>
+                        <li>CSS - Satr Codes, December 2022</li>
+                        <li>JavaScript - Satr Codes, December 2022</li>
+                    </ul>
+
+                </div>
+                    <div class="section">
+                    <h2>Projects</h2>
+                    <p><strong>Graduation Project: Let’s Padel</strong></p>
+                    <p>Players and court owners face difficulties in finding suitable courts or players and lack a platform for marketing and managing bookings.</p>
+                    <p><strong>Tools Used:</strong> Flutter, Firebase, Google Cloud Services</p>
+                </div>
+
+                <div class="section" >
+                    <h2>Languages</h2>
+                    <ul>
+                        <li>Arabic</li>
+                        <li>English</li>
+                    </ul>
+                </div>
+            </div>
+        </body>
+</html>
\ No newline at end of file
diff --git a/FlexPage/main/templates/main/home.html b/FlexPage/main/templates/main/home.html
new file mode 100644
index 0000000..c4fb8d5
--- /dev/null
+++ b/FlexPage/main/templates/main/home.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% load static %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+    <link rel="stylesheet" href="{% static 'css/homeStyle.css' %}">
+</head>
+<body>
+    <h1>Home Page</h1>
+    <p>Hi, this is a test</p>
+    <p><em>Select any page</em></p>
+    <ul>
+        <li><a href="{% url 'main:introduction_view' %}">Go to Introduction</a></li>
+        <li><a href="{% url 'main:css_view' %}">Go to styling</a></li>
+        <li><a href="{% url 'main:article_ai_view' %}">Go to article AI</a></li>
+        <li><a href="{% url 'main:cv_view' %}">Go to my CV</a></li>
+    </ul>
+</body>
+</html>
diff --git a/FlexPage/main/templates/main/introduction.html b/FlexPage/main/templates/main/introduction.html
new file mode 100644
index 0000000..2a2728c
--- /dev/null
+++ b/FlexPage/main/templates/main/introduction.html
@@ -0,0 +1,99 @@
+{%load static%}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>introduction</title>
+    </head>
+        <body>
+                <h1> <i>Learn the about HTML </i></h1>
+                <h2> <strong><em>is not order</em></strong>  </h2>
+                <h3> test only  </h3>
+                <h4> Hi </h4>
+                <h5> are you good  </h5>
+                <h6> qwertwqreteds </h6>
+                <hr>
+                <p>
+                    <b> use key word  for by default paragraph make it :(<em><mark>Lorem</mark></em>)</b> ipsum dolor sit amet consectetur<br>
+                     adipisicing elit.<sub>2323</sub>Ex nostrum deleniti,<br>
+                    doloribus quod quisquam alias similique id<sup>123456789</sup> natus nam enim?
+                </p>
+                <hr>    
+                <h6> Cities:</h6>              
+                <ul type="circle">
+                    <li>Riyadh</li>
+                    <li>Dammam</li>
+                    <li>Abha</li>
+                </ul>   
+                <hr>
+                <ol type="i">
+                    <P>Full name:</P>
+                    <li>First Name : Khalid</li>
+                    <li>Middle Name: Ayidh</li>
+                    <li>Lsat Name : ALMgahyadi</li>
+                </ol>
+                <hr>
+                <p><i>view image by use static</i></p> 
+                <img src="{% static 'images/download1.jpg' %}" height="200" width="300" alt="Python logo" />   
+                <hr>
+                <p><b>Khalid ALFaisal</b></p>
+                <video height="200" width=" 300" controls>
+                    <source src="{% static 'videos/WhatsApp Video 2024-10-28 .mp4' %}">
+                </video>
+                <hr> 
+                <table>
+                        <tr>
+                            <th>
+                                 Name  
+                            </th>
+                            <th>
+                                Position
+                            </th>
+                        </tr>
+                        <tr>
+                            <td>
+                                Khalid 
+                            </td>
+                            <td> 
+                                IT Developer 
+                            </td>
+                        </tr>
+                </table>
+                <hr>
+                <form>
+                    <label for="name">Name:</label>
+                    <input type="text" id="name" name="name" required>
+                    <br><br>
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required>
+                    <br><br>
+                    <label for="password">Password:</label>
+                    <input type="password" id="password" name="password" required>
+                    <br><br>
+
+                    <label for="gender">Gender:</label>
+                    <select id="gender" name="gender" required>
+                        <option value="">Select</option>
+                        <option value="male">Male</option>
+                        <option value="female">Female</option>
+                    </select>
+                    <br><br>
+
+                    <label>
+                        <input type="checkbox" name="terms" required>
+                        I agree to the terms and conditions
+                    </label>
+                    <br><br>
+                    
+                    <label>User Type:</label><br>
+                    <input type="radio" id="student" name="user_type" value="student" required>
+                    <label for="student">Student</label><br>
+                    <input type="radio" id="professional" name="user_type" value="professional">
+                    <label for="professional">Professional</label><br><br>
+                    
+                    <button type="submit">Submit</button>
+            </form>
+            
+        </body>
+</html>
\ No newline at end of file
diff --git a/FlexPage/main/tests.py b/FlexPage/main/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/FlexPage/main/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/FlexPage/main/urls.py b/FlexPage/main/urls.py
new file mode 100644
index 0000000..7436374
--- /dev/null
+++ b/FlexPage/main/urls.py
@@ -0,0 +1,12 @@
+from django.urls import path
+from . import views
+
+app_name = "main"
+
+urlpatterns = [
+    path('', views.home_view, name='home_view'),
+    path('html/introduction/', views.introduction_view, name='introduction_view'),
+    path('css/introduction/' , views.css_view , name='css_view'),
+    path('article/ai', views.article_ai_view , name='article_ai_view' ),
+    path('careers/cv/' , views.cv_view , name='cv_view')
+]
diff --git a/FlexPage/main/views.py b/FlexPage/main/views.py
new file mode 100644
index 0000000..ed5bd41
--- /dev/null
+++ b/FlexPage/main/views.py
@@ -0,0 +1,25 @@
+from django.shortcuts import render
+
+# Create your views here.
+from django.http import HttpRequest , HttpResponse 
+
+
+def home_view(request:HttpRequest):
+    
+    return render(request , "main/home.html")
+
+def introduction_view(request:HttpRequest):
+
+    return render(request , "main/introduction.html")
+
+def css_view(request:HttpRequest):
+
+    return render(request , "main/csstest.html")
+
+def article_ai_view(request:HttpRequest):
+   
+    return render(request,'main/articleAi.html')
+
+def cv_view(request:HttpRequest):
+
+    return render(request,'main/cvpage.html')
\ No newline at end of file
diff --git a/FlexPage/manage.py b/FlexPage/manage.py
new file mode 100644
index 0000000..03bba91
--- /dev/null
+++ b/FlexPage/manage.py
@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'FlexPage.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()