diff --git a/TemplatesCSSHTML/TemplatesCSSHTML/__init__.py b/TemplatesCSSHTML/TemplatesCSSHTML/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/TemplatesCSSHTML/TemplatesCSSHTML/asgi.py b/TemplatesCSSHTML/TemplatesCSSHTML/asgi.py
new file mode 100644
index 0000000..909059c
--- /dev/null
+++ b/TemplatesCSSHTML/TemplatesCSSHTML/asgi.py
@@ -0,0 +1,16 @@
+"""
+ASGI config for TemplatesCSSHTML 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.1/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'TemplatesCSSHTML.settings')
+
+application = get_asgi_application()
diff --git a/TemplatesCSSHTML/TemplatesCSSHTML/settings.py b/TemplatesCSSHTML/TemplatesCSSHTML/settings.py
new file mode 100644
index 0000000..b539714
--- /dev/null
+++ b/TemplatesCSSHTML/TemplatesCSSHTML/settings.py
@@ -0,0 +1,124 @@
+"""
+Django settings for TemplatesCSSHTML project.
+
+Generated by 'django-admin startproject' using Django 5.1.2.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.1/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.1/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.1/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'django-insecure-3-mk%iy-lx=8jy4$alil3amlwo(&vy_mbf13bv26zj!jg9@1m%'
+
+# 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',
+]
+
+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 = 'TemplatesCSSHTML.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 = 'TemplatesCSSHTML.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/5.1/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/5.1/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.1/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.1/howto/static-files/
+
+STATIC_URL = 'static/'
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
diff --git a/TemplatesCSSHTML/TemplatesCSSHTML/urls.py b/TemplatesCSSHTML/TemplatesCSSHTML/urls.py
new file mode 100644
index 0000000..5164bc7
--- /dev/null
+++ b/TemplatesCSSHTML/TemplatesCSSHTML/urls.py
@@ -0,0 +1,23 @@
+"""
+URL configuration for TemplatesCSSHTML project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/5.1/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 , include
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', include('main.urls')),
+]
diff --git a/TemplatesCSSHTML/TemplatesCSSHTML/wsgi.py b/TemplatesCSSHTML/TemplatesCSSHTML/wsgi.py
new file mode 100644
index 0000000..6cb2fa1
--- /dev/null
+++ b/TemplatesCSSHTML/TemplatesCSSHTML/wsgi.py
@@ -0,0 +1,16 @@
+"""
+WSGI config for TemplatesCSSHTML 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.1/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'TemplatesCSSHTML.settings')
+
+application = get_wsgi_application()
diff --git a/TemplatesCSSHTML/main/__init__.py b/TemplatesCSSHTML/main/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/TemplatesCSSHTML/main/admin.py b/TemplatesCSSHTML/main/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/TemplatesCSSHTML/main/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/TemplatesCSSHTML/main/apps.py b/TemplatesCSSHTML/main/apps.py
new file mode 100644
index 0000000..167f044
--- /dev/null
+++ b/TemplatesCSSHTML/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/TemplatesCSSHTML/main/migrations/__init__.py b/TemplatesCSSHTML/main/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/TemplatesCSSHTML/main/models.py b/TemplatesCSSHTML/main/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/TemplatesCSSHTML/main/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/TemplatesCSSHTML/main/static/CSS/AI.css b/TemplatesCSSHTML/main/static/CSS/AI.css
new file mode 100644
index 0000000..689c4eb
--- /dev/null
+++ b/TemplatesCSSHTML/main/static/CSS/AI.css
@@ -0,0 +1,211 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+header {
+    background: linear-gradient(to right, #6aa8b0, #c6c9ca);
+    color: #fff;
+    padding: 20px 0;
+    text-align: center;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin: 0 15px;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+nav ul li a:hover {
+    color: #ffd700;
+}
+
+.hero {
+    background: url('https://via.placeholder.com/1200x600') center/cover no-repeat;
+    color: #fff;
+    padding: 60px 20px;
+    text-align: center;
+    position: relative;
+}
+
+.hero-content {
+    background:  #9bbdc3;
+    padding: 40px;
+    border-radius: 10px;
+    display: inline-block;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+button {
+    background-color: #FFD700;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #FFC107;
+}
+
+section {
+    padding: 40px 20px;
+    margin: 20px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+    color: #323131;
+    text-align: center;
+    margin-bottom: 20px;
+}
+p{
+    text-align: center;
+}
+
+.about-content {
+    text-align: center;
+}
+
+.ai-animation {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.circle {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background:  #6aa8b0;
+    margin: 0 10px;
+    animation: bounce 1s infinite;
+}
+
+.circle:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.circle:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20px);
+    }
+    60% {
+        transform: translateY(-10px);
+    }
+}
+
+.application-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.application-item {
+    background:  #6aa8b0;
+    color: white;
+    padding: 20px;
+    margin: 10px;
+    border-radius: 10px;
+    width: calc(30% - 20px);
+    text-align: center;
+    transition: transform 0.3s, background 0.3s;
+}
+
+.application-item:hover {
+    transform: translateY(-5px);
+    background: #c4cbd2;
+}
+.video-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+iframe {
+    width: 560px;  
+    height: 315px; 
+    border: none;
+}
+
+.cta {
+    background:  #6aa8b0;
+    color: #fff;
+    padding: 40px 0;
+    text-align: center;
+}
+
+.cta form {
+    margin-top: 20px;
+}
+
+.cta input {
+    padding: 10px;
+    width: 300px;
+    border-radius: 5px;
+    border: none;
+}
+
+.cta button {
+    background-color: #FFD700;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.cta button:hover {
+    background-color: #FFC107;
+}
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    background:  #6aa8b0;
+    color: #fff;
+}
+
+footer a {
+    color: #ffd700;
+    text-decoration: none;
+}
+
+@media (max-width: 768px) {
+    .application-item {
+        width: 100%;
+    }
+
+    .hero {
+        padding: 30px 10px;
+    }
+}
diff --git a/TemplatesCSSHTML/main/static/CSS/CV.css b/TemplatesCSSHTML/main/static/CSS/CV.css
new file mode 100644
index 0000000..c345ab8
--- /dev/null
+++ b/TemplatesCSSHTML/main/static/CSS/CV.css
@@ -0,0 +1,191 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins',sans-serif;
+}
+body{
+    background-color: rgb(231, 235, 236);
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    min-height: 100vh;
+}
+.container{
+    position: relative;
+    width: 100%;
+    max-width: 1000px;
+    min-height: 1000px;
+    background-color: white;
+    margin: 50px;
+    display:grid;
+    grid-template-columns: 1fr 2fr;
+    box-shadow: 0 35px 55px rgb(0, 0, 0 ,0.1);
+}
+.container .left_Side{
+    position: relative;
+    background-color: #003147;
+    padding: 40px;
+}
+.ProfileText{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgb(255, 255, 255,0.2);
+}
+.ProfileText h2{
+    color: #fff;
+    font-size: 1.5em;
+    margin-top: 20px;
+    text-transform: uppercase;
+    text-align: center;
+    font-weight: 600;
+    line-height: 1.4em;
+}
+.ProfileText h2 span{
+font-size: 0.8em;
+font-weight: 300;
+
+}
+.contactInfo{
+    padding-top:40px;
+}
+.title{
+    color: #fff;
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 1px;
+    margin-bottom: 20px;
+}
+.contactInfo ul{
+    position: relative;  
+}
+.contactInfo ul li{
+    position: relative;
+    list-style: none;
+    margin: 10px 0 ;
+    cursor: pointer;
+
+}
+.contactInfo ul li .icon{
+    display: inline-block;
+    width: 30px;
+    font-size: 18px;
+    color: #03a9f4;
+}
+.contactInfo ul li span{
+    color: #fff;
+    font-weight: 300;
+}
+.contactInfo.education{
+margin-bottom: 15px;
+}
+.contactInfo.education h5{
+color: #03a9f4;
+font-weight:500;
+}
+.contactInfo.education h4:nth-child(2){
+    color: #fff;
+    font-weight:500;
+    }
+.contactInfo.education h4{
+    color: #fff;
+    font-weight:300;
+    }
+.container .right_Side{
+    position: relative;
+    background-color: #fff;
+    padding: 40px;
+}
+.contactInfo.language .percent{
+    position: relative;
+    width: 100%;
+    height: 6px;
+    background: rgb(0, 0, 0);
+    display: block;
+    margin-top: 5px;
+}
+.contactInfo.language .percent div{
+position: absolute;
+top: 0;
+left: 0;
+height: 100%;
+background: #03a9f4;
+}
+.about{
+margin-bottom: 50px;
+}
+.about:last-child{
+margin-bottom: 0;  
+}
+.title2{
+    color: #003147;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 10px;
+
+}
+p{
+    color: #333;
+}
+.about .box{
+display: flex;
+flex-direction: row;
+margin: 20px 0;
+margin-right: 20px 0;
+}
+.about .box .year_com{
+min-width: 150px;
+}
+.about .box .year_com h5{
+    text-transform: uppercase;
+    color: #848c90;
+    font-weight:600 ;
+    }
+.about .box .text h4{
+text-transform: uppercase;
+color: #2a7da2;
+font-size: 16px;
+}
+.skills .box{
+    position: relative;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 150px 1fr ;
+    justify-content: center;
+    align-items: center;   
+}
+.skills .box h4{
+    text-transform: uppercase;
+    color: #848c99;
+    font-weight: 500;
+    font-size: 15px;
+    
+}
+.skills .box .percent{
+    position: relative;
+    width: 100%;
+    height: 6px;
+    background: #f0f0f0;
+}
+.skills .box .percent div{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: #03a9f4;
+}
+.about.Course ul li span{
+    text-transform: uppercase;
+    color: #848c99;
+    font-weight: 500;
+    
+}
+.about.Course ul li{
+    text-transform: uppercase;
+    color: #0000001f;
+    font-weight: 500;
+    margin-left: 20px;
+}
\ No newline at end of file
diff --git a/TemplatesCSSHTML/main/static/CSS/Introduction2.css b/TemplatesCSSHTML/main/static/CSS/Introduction2.css
new file mode 100644
index 0000000..ef52e87
--- /dev/null
+++ b/TemplatesCSSHTML/main/static/CSS/Introduction2.css
@@ -0,0 +1,235 @@
+body {
+    background-color: white;
+  }
+    
+  h1 {
+    color: rgb(0, 0, 0);
+    text-align: center;
+    font-style: italic;
+    font-weight: bold;
+  }
+  
+  p {
+    font-family: verdana;
+    font-size: 20px;
+    font-style: italic;
+    font-weight: bold;
+    margin-top: 2px;
+    margin-left: 80px;
+  }
+  .header {
+    background: hsla(180, 1%, 65%, 0.56);
+    font-size: 15px;
+    list-style-type: none;
+      margin: 0;
+      top:0;
+      left: 0;
+      width: 100%;
+      padding: 10px 100px;
+      position: fixed;
+      text-align: center;
+      
+      margin-left: -1px;
+  }
+  img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    float: left;
+    height: 190px;
+    width: 500px;
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+  
+  th, td {
+    text-align: left;
+    padding: 8px;
+  }
+  
+  tr:nth-child(even)
+  {background-color: #f2f2f2}
+  
+  th {
+    background-color: #6c6c6c;
+    color: white;
+  }
+  .div2{
+    width: 320px;
+    height: 60px;
+    padding: 10px;
+    border-bottom: 5px solid gray;
+    margin: 0;
+    margin-left: 600px;
+  }
+  .div3{
+    width: 340px;
+    height: 200px;
+    padding: 10px;
+    border-left: 5px solid gray ;
+    margin: 0;
+    margin-left: 600px;
+    display: inline-block;
+    
+  }
+  
+  .div4{
+    width: 340px;
+    height: 150px;
+    padding: 10px;
+    border-top: 5px solid gray;
+    margin: 0;
+    margin-left: -25px;
+  }
+  .button {
+    background-color: #575757;
+    border: none;
+    border-radius: 50%;
+    color: white;
+    padding: 15px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+  }
+  
+  .button1:hover {
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+  }
+  * {
+    box-sizing: border-box;
+  }
+  
+  input[type=text], select, textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+  }
+  
+  label {
+    padding: 12px 12px 12px 0;
+    display: inline-block;
+  }
+  
+  input[type=submit] {
+    background-color: #505050;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    float: right;
+  }
+  
+  input[type=submit]:hover {
+    background-color: #7a7a7a;
+  }
+  
+  .container {
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+  }
+  
+  .col-25 {
+    float: left;
+    width: 25%;
+    margin-top: 6px;
+  }
+  
+  .col-75 {
+    float: left;
+    width: 75%;
+    margin-top: 6px;
+  }
+  
+  
+  .row::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  
+  
+  @media screen and (max-width: 600px) {
+    .col-25, .col-75, input[type=submit] {
+      width: 100%;
+      margin-top: 0;
+    }
+  }
+  div.gallery {
+    border: 1px solid #ccc;
+  }
+  
+  div.gallery:hover {
+    border: 1px solid #777;
+  }
+  
+  div.gallery img {
+    width: 100%;
+    height: 150px;
+  }
+  
+  div.desc {
+    padding: 20px;
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+  }
+  
+  * {
+    box-sizing: border-box;
+  }
+  
+  .responsive {
+    padding: 0 6px;
+    float: left;
+    width: 24.99999%;
+  }
+  
+  @media only screen and (max-width: 700px) {
+    .responsive {
+      width: 49.99999%;
+      margin: 6px 0;
+    }
+  }
+  
+  @media only screen and (max-width: 500px) {
+    .responsive {
+      width: 100%;
+    }
+  }
+  
+  .clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  .border-box {
+    width: 100px; 
+    height: 100px; 
+    display: inline-block; 
+}
+
+.left {
+    margin-right: 300px; 
+    margin-left: 150px;
+    width: 340px;
+    height: 200px;
+    padding: 10px;
+    border-left: 5px solid gray ;
+}
+
+.right {
+    width: 340px;
+    height: 200px;
+    padding: 10px;
+    border-left: 5px solid gray ;
+}
diff --git a/TemplatesCSSHTML/main/static/Images/AI1.png b/TemplatesCSSHTML/main/static/Images/AI1.png
new file mode 100644
index 0000000..3ddc1ef
Binary files /dev/null and b/TemplatesCSSHTML/main/static/Images/AI1.png differ
diff --git a/TemplatesCSSHTML/main/static/Images/AI2.png b/TemplatesCSSHTML/main/static/Images/AI2.png
new file mode 100644
index 0000000..1750666
Binary files /dev/null and b/TemplatesCSSHTML/main/static/Images/AI2.png differ
diff --git a/TemplatesCSSHTML/main/static/Images/NewYork.png b/TemplatesCSSHTML/main/static/Images/NewYork.png
new file mode 100644
index 0000000..23bb559
Binary files /dev/null and b/TemplatesCSSHTML/main/static/Images/NewYork.png differ
diff --git a/TemplatesCSSHTML/main/static/Images/NewYork2.png b/TemplatesCSSHTML/main/static/Images/NewYork2.png
new file mode 100644
index 0000000..ae57980
Binary files /dev/null and b/TemplatesCSSHTML/main/static/Images/NewYork2.png differ
diff --git a/TemplatesCSSHTML/main/static/Images/NewYrok3.png b/TemplatesCSSHTML/main/static/Images/NewYrok3.png
new file mode 100644
index 0000000..df866bf
Binary files /dev/null and b/TemplatesCSSHTML/main/static/Images/NewYrok3.png differ
diff --git a/TemplatesCSSHTML/main/static/Images/TimesSquare.png b/TemplatesCSSHTML/main/static/Images/TimesSquare.png
new file mode 100644
index 0000000..bf20862
Binary files /dev/null and b/TemplatesCSSHTML/main/static/Images/TimesSquare.png differ
diff --git a/TemplatesCSSHTML/main/templates/main/AIRevolution.html b/TemplatesCSSHTML/main/templates/main/AIRevolution.html
new file mode 100644
index 0000000..a11ae0c
--- /dev/null
+++ b/TemplatesCSSHTML/main/templates/main/AIRevolution.html
@@ -0,0 +1,83 @@
+{% 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/AI.css' %}">
+    <title>AI Innovations</title>
+</head>
+<body>
+    <header>
+        <h1>AI Innovations</h1>
+        <nav>
+            <ul>
+                <li><a href="#about">About AI</a></li>
+                <li><a href="#applications">Applications</a></li>
+                <li><a href="#future">Future of AI</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <section class="hero">
+        <div class="hero-content">
+            <img src= "{% static 'images/AI1.png' %}" alt="Descriptive text" />
+            <p>Explore how AI is transforming the world around us.</p>
+            <button onclick="alert('How AI is Transforming Our World 1- Healthcare AI is revolutionizing healthcare through predictive analytics, enabling early disease detection and personalized treatment plans. Tools like AI-driven imaging software assist doctors in diagnosing conditions with greater accuracy. 2- Education AI-powered platforms offer personalized learning experiences, adapting content to suit individual student needs. Virtual tutors provide additional support, making education more accessible and effective. 3- Finance In finance, AI algorithms analyze market trends and manage investments with speed and precision. Fraud detection systems utilize machine learning to identify suspicious transactions, enhancing security.')">Explore Now</button>
+        </div>
+    </section>
+
+    <section id="about" class="about">
+        <h2>What is AI?</h2>
+        <div class="about-content">
+            <p>Artificial Intelligence (AI) is the simulation of human intelligence in machines, enabling them to think and act like humans.</p>
+            <br>
+            <div class="ai-animation">
+                <div class="circle"></div>
+                <div class="circle"></div>
+                <div class="circle"></div>
+            </div>
+            <br>
+            <div class="ai-infographic">
+                <img src="{% static 'images/AI2.png' %}" alt="AI Infographic">
+            </div>
+        </div>
+    </section>
+
+    <section id="applications">
+        <h2>Applications of AI</h2>
+        <div class="application-list">
+            <div class="application-item">Healthcare</div>
+            <div class="application-item">Finance</div>
+            <div class="application-item">Automotive</div>
+            <div class="application-item">Entertainment</div>
+            <div class="application-item">Education</div>
+            <div class="application-item">Manufacturing</div>
+        </div>
+    </section>
+
+    <section id="future" class="future">
+        <h2>The Future of AI</h2>
+        <p>AI continues to evolve, transforming our daily lives and shaping the future of technology.</p>
+        <div class="video-container">
+        <iframe src="https://www.youtube.com/watch?v=qVhTHWwAPXw" width="420" height="345">
+            Your browser does not support the video tag.
+            </iframe>
+        </div>
+    </section>
+
+    <section id="cta" class="cta">
+        <p >Sign up for our newsletter to stay updated!</p>
+        <form>
+            <input type="email" placeholder="Enter your email" required>
+            <button type="submit">Subscribe</button>
+        </form>
+    </section>
+
+    <footer id="contact">
+        <p>Contact us at: <a href="mailto:someone@example.com">info@example.com</a></p>
+        <p>&copy; 2024 AI Innovations</p>
+    </footer>
+</body>
+</html>
diff --git a/TemplatesCSSHTML/main/templates/main/CV.html b/TemplatesCSSHTML/main/templates/main/CV.html
new file mode 100644
index 0000000..fd02ec0
--- /dev/null
+++ b/TemplatesCSSHTML/main/templates/main/CV.html
@@ -0,0 +1,132 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" type="text/css" href="{% static 'CSS/CV.css' %}">
+    </head>
+        <body>
+            <div class="container">
+                <div class="left_Side">
+                    <div class="ProfileText">
+                        <div class="imgBx">
+                        </div>
+                        <h2>Shouq Alsubaie<br><span>Web Developer</span></h2>
+                    </div>
+                    <div class="contactInfo">
+                        <h3 class="title">Contact Info</h3>
+                        <ul>
+                            <li>
+                                <span class="icon"><i class="fa fa-phone" aria-hidden="true"></i>                                </span>
+                                <span class="text">0512345432</span>
+                            </li>
+                            <li>
+                                <span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i>                                </span>
+                                <span class="text">shouq@gmail.com</span>
+                            </li>
+                            <li>
+                                <span class="icon"><i class="fa fa-globe" aria-hidden="true"></i>
+                                </span>
+                                <span class="text">Saudi Arabia , Riyadh</span>
+                            </li>
+                        </ul>
+                    </div>
+                            <div class="contactInfo education">
+                                <h3 class="title">Education</h3>
+                                <ul>
+                                    <li>
+                                        <h5>Jun-2023</h5>
+                                        <h4>Diploma Degree <br>Porgramming and Web Development</h4>
+                                        <h4>The Technical Digital College</h4>
+
+
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="contactInfo language">
+                                <h3 class="title">Language</h3>
+                                <ul>
+                                    <li>
+                                        <span class="text">English</span>
+                                        <span class="percent">
+                                            <div style="width: 90%;"></div>
+                                        </span>
+                                    </li>
+                                    <li>
+                                        <span class="text">Arabic</span>
+                                        <span class="percent">
+                                            <div style="width: 100%;"></div>
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                </div>
+                <div class="right_Side">
+                    <div class="about">
+                        <h2 class="title2">Profile</h2>
+                        <p>I'm a computer programmer. There are many language programs, in fact I am interested in the Web developer and smart device programming. I find true pleasure in solving problem overcoming challenges achieving results. I'm always excited to learn more and more.</p>
+                    </div>
+                    <div class="about">
+                        <h2 class="title2">Experience</h2>
+                        <div class="box">
+                            <div class="year_com">
+                                <h5>Feb-2022</h5>
+                                <h5>The Royal <br>Commission</h5>
+                            </div>
+                            <div class="text">
+                                <h4>Internship Trainee - IT</h4>
+                                <p>Appain</p>
+                                <p>Web Design</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="about skills">
+                        <h2 class="title2">Skills</h2>
+                        <div class="box">
+                            <h4>HTML,CSS</h4>
+                            <div class="percent">
+                                <div style="width: 100%;"></div>
+                            </div>
+                        </div>
+                        <div class="box">
+                            <h4>Programming language:<br>Java , Python ,<br> SQL query , PL/SQL</h4>
+                            <div class="percent">
+                                <div style="width: 100%;"></div>
+                            </div>
+                        </div>
+                        <div class="box">
+                            <h4>Problem-Solving</h4>
+                            <div class="percent">
+                                <div style="width: 90%;"></div>
+                            </div>
+                        </div>
+                        <div class="box">
+                            <h4>HTML</h4>
+                            <div class="percent">
+                                <div style="width: 95%;"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="about Course">
+                        <h2 class="title2">Course Certifications</h2>
+                        <ul>
+                            <li>
+                                <span class="text">Java Fundations | Oracle Academy</span>
+                            </li>
+                            <li>
+                                <span class="text">IT Essentials | Academy Networking Cisco</span>
+                            </li>
+                            <li>
+                                <span class="text">Saudi Arabia , Riyadh</span>
+                            </li>
+                        </ul>
+                    </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </body>
+</html>
\ No newline at end of file
diff --git a/TemplatesCSSHTML/main/templates/main/Introduction.html b/TemplatesCSSHTML/main/templates/main/Introduction.html
new file mode 100644
index 0000000..96cf428
--- /dev/null
+++ b/TemplatesCSSHTML/main/templates/main/Introduction.html
@@ -0,0 +1,146 @@
+{% load static %}
+<!DOCTYPE html> 
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Introduction HTML</title>
+        <link rel="stylesheet" type="text/css" href="{% static 'CSS/Introduction2.css' %}">
+    </head>
+        <body>
+          <div class="header"><h1>My Favorite City</h1></div>
+          <br><br><br><br><br>
+            <div class="div2"><p><i>New York</i></p></div>
+            <br><br>
+            <div class="responsive">
+              <div class="gallery">
+                <a target="_blank" href="test.png">
+                  <img src="{% static 'images/NewYork.png' %}" alt="Cinque Terre" width="600" height="400">
+                </a>
+                <div class="desc">...</div>
+              </div>
+            </div>
+            <div class="responsive">
+              <div class="gallery">
+                <a target="_blank" href="NewYork.png">
+                  <img src="{% static 'images/NewYork.png' %}" alt="Forest" width="600" height="400">
+                </a>
+                <div class="desc">Statue of liberty</div>
+              </div>
+            </div>
+            
+            <div class="responsive">
+              <div class="gallery">
+                <a target="_blank" href="NewYork2.png">
+                  <img src="{% static 'images/NewYork2.png' %}" alt="Northern Lights" width="600" height="400">
+                </a>
+                <div class="desc">Wall Street</div>
+              </div>
+            </div>
+            
+            <div class="responsive">
+              <div class="gallery">
+                <a target="_blank" href="TimesSquare.png">
+                  <img src="{% static 'images/TimesSquare.png' %}" alt="Mountains" width="600" height="400">
+                </a>
+                <div class="desc">Times Square</div>
+              </div>
+            </div>
+            <br><br><br><br><br><br><br><br><br><br>
+            <div class="border-box left">
+              <h2><i>Places to visit in New York</i></h2>
+            <ul>
+                <li>Times Square</li>
+                <li>Statue of liberty</li>
+                <li>Wall Street</li>
+              </ul>  
+            </div>
+            </div>
+            <div class="border-box right">
+              <h2><i>The balanced season in NYC</i></h2>
+              <ol>
+                <li >April</li>
+                <li>May</li>
+                <li>June</li>
+              </ol> 
+            </div> 
+            </div><br><br>
+              <p style="text-align: center; margin-left: 2px;"><i>The best Hotel in NYC </i></p>
+              <table>
+                <tr>
+                  <th>Hotel Name</th>
+                  <th>Hotel Stars</th>
+                </tr>
+                <tr>
+                  <td>Four Seasons | New York</td>
+                  <td>5-star hotel</td>
+                  
+                </tr>
+                <tr>
+                  <td>Aman Resorts | New York</td>
+                  <td>5-star hotel</td>
+                 
+                </tr>
+              </table><br>
+              <a href="https://youtu.be/WLSnrXEtrT4?si=S6jw_sPqQNgjp4Eg" target="_blank" style="margin-left: 670px;"><button type="button" class="button button1">Top 10 Things to do in NYC</button></a> <br> <br>
+            <div class="container">
+              <div class="div2">
+              <h3 style="font-size: 15px;"><b>Contact us for any further information</b></h3>
+            </div>
+            <br><br>
+              <form >
+              <div class="row">
+                <div class="col-25">
+                  <label for="fname">First Name</label>
+                </div>
+                <div class="col-75">
+                  <input type="text" name="firstname" placeholder="Your name..">
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-25">
+                  <label for="lname">Last Name</label>
+                </div>
+                <div class="col-75">
+                  <input type="text" name="lastname" placeholder="Your last name..">
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-25">
+                  <label>Do you like the site content ?</label>
+                </div>
+                <div class="col-75">
+                  <select>
+                    <option value="australia">Yes</option>
+                    <option value="canada">No</option>
+                  </select>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-25">
+                  <label for="subject">Review of Website:</label>
+                </div>
+                <div class="col-75">
+                  <textarea placeholder="Write something.." style="height:200px"></textarea>
+                  
+                </div>
+              </div>
+              <h3>What do you want to ask about ?</h3>
+              <input type="checkbox" value="hotel">
+              <label>Ask for hotel</label><br>
+              <input type="checkbox"  value="City">
+              <label > Ask for city </label><br>
+              <input type="checkbox" value="Website">
+              <label for="vehicle3"> Ask for Website</label><br> 
+              <br>
+              <div class="row">
+                <input type="submit" value="Submit"><br>
+                <div class="div4">
+                <h4 style="text-align: center;  margin-left: -20px;">Or you can send Email</h4>
+                <a href="mailto:someone@example.com" style="margin-left: 90px;"><button type="button" class="button button1">Send Email</button></a> 
+          </div>
+          </div>
+              </form>
+            </div>
+
+        </body>
+</html>
diff --git a/TemplatesCSSHTML/main/tests.py b/TemplatesCSSHTML/main/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/TemplatesCSSHTML/main/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/TemplatesCSSHTML/main/urls.py b/TemplatesCSSHTML/main/urls.py
new file mode 100644
index 0000000..134195f
--- /dev/null
+++ b/TemplatesCSSHTML/main/urls.py
@@ -0,0 +1,10 @@
+from django.urls import path
+from . import views
+
+app_name = 'main'
+urlpatterns = [
+    path('html/introduction/', views.home, name='home'),
+    path('css/introduction/', views.style, name='csspage'),
+    path('careers/cv/', views.CV, name='CV'),
+    path('article/ai/', views.AIrevolution, name='AI'),
+]
diff --git a/TemplatesCSSHTML/main/views.py b/TemplatesCSSHTML/main/views.py
new file mode 100644
index 0000000..7fd4db4
--- /dev/null
+++ b/TemplatesCSSHTML/main/views.py
@@ -0,0 +1,12 @@
+from django.shortcuts import render
+from django.http import HttpResponse , HttpRequest
+
+# Create your views here.
+def home(request : HttpRequest):
+    return render(request , 'main/Introduction.html')
+def style(request:HttpRequest):
+    return render(request,'main/static/CSS/Introduction.css')
+def CV(request : HttpRequest):
+    return render(request , 'main/CV.html')
+def AIrevolution(request : HttpRequest):
+    return render(request , 'main/AIRevolution.html')
\ No newline at end of file
diff --git a/TemplatesCSSHTML/manage.py b/TemplatesCSSHTML/manage.py
new file mode 100644
index 0000000..8898c45
--- /dev/null
+++ b/TemplatesCSSHTML/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', 'TemplatesCSSHTML.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()