diff --git a/CSS/introduction/index.html b/CSS/introduction/index.html new file mode 100644 index 0000000..6d482fe --- /dev/null +++ b/CSS/introduction/index.html @@ -0,0 +1,226 @@ + + + + + + Contact Form + + + + + + +
+ +

Please fill the contact form

+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ Gender: + + + + + + +
+ +
+
Which field you want to ask about?
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + + diff --git a/HTML/introduction/index.html b/HTML/introduction/index.html new file mode 100644 index 0000000..cc39e5e --- /dev/null +++ b/HTML/introduction/index.html @@ -0,0 +1,153 @@ + + + + + + Contact Form + + + +

Please fill the contact form

+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ Gender: + + + + + + +
+ +
+
Which field you want to ask about?
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+ +
+ + + + \ No newline at end of file diff --git a/article/ai/index.html b/article/ai/index.html new file mode 100644 index 0000000..11b1e59 --- /dev/null +++ b/article/ai/index.html @@ -0,0 +1,93 @@ + + + + + AI Revolution + + + + + +
+

AI Revolution

+ +
+ +
+ +
+
+

The AI Revolution

+

Artificial Intelligence is reshaping industries and transforming the world around us.

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

What Is AI?

+

AI refers to systems that can learn, reason, and make decisions. It powers everything from search engines to self-driving cars.

+ AI Brain + + +
+ +
+

Real-World Applications

+
    +
  • Healthcare — early diagnosis and medical imaging
    • +
  • Finance — fraud detection and smart trading
    • +
  • Transportation — autonomous vehicles
    • +
  • Education — personalized learning
    • +
+
+ +
+

The Future of AI

+

AI will continue to evolve, raising questions about ethics, privacy, and the future of work.

+
+ +
+ + + +
+
+ + + + + + + diff --git a/article/ai/style.css b/article/ai/style.css new file mode 100644 index 0000000..a0a47fe --- /dev/null +++ b/article/ai/style.css @@ -0,0 +1,152 @@ +/* Base */ +:root { + --bg: #0b0f19; + --card: #111827; + --text: #f3f4f6; + --muted: #9ca3af; + --accent: #6366f1; + --border: #1f2937; + --radius: 10px; +} + +body { + margin: 0; + font-family: Arial, sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.6; +} + +/* Header */ +.site-header { + display: flex; + justify-content: space-between; + padding: 1rem 5vw; + background: #0f172a; + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; +} + +.logo { + margin: 0; + font-size: 1.3rem; + letter-spacing: 1px; +} + +.main-nav a { + color: var(--muted); + margin-left: 1rem; + text-decoration: none; + position: relative; +} + +.main-nav a:hover { + color: var(--text); +} + +/* Hero */ +.hero { + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: 2rem; + padding: 2rem 5vw; +} + +.hero-text h2 { + font-size: 2.4rem; +} + +.cta-btn { + margin-top: 1rem; + padding: 0.7rem 1.4rem; + border: none; + border-radius: 999px; + background: var(--accent); + color: white; + cursor: pointer; + transition: 0.3s; +} + +.cta-btn:hover { + transform: scale(1.05); +} + +.hero-media video { + width: 100%; + border-radius: var(--radius); + border: 1px solid var(--border); +} + +/* Layout */ +.content-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 2rem; + padding: 2rem 5vw; +} + +.article { + background: var(--card); + padding: 1.5rem; + border-radius: var(--radius); + border: 1px solid var(--border); + animation: fadeIn 0.7s ease; +} + +.article-image { + width: 100%; + border-radius: var(--radius); + margin-top: 1rem; +} + +/* Highlight list */ +.highlight-list { + list-style: none; + padding: 0; +} + +.highlight-list li { + padding: 0.6rem; + background: #1e293b; + border-radius: 6px; + margin-bottom: 0.5rem; +} + +.highlight-list li:nth-child(odd) { + background: #334155; + /* background: #6366f1; */ +} + +/* Sidebar */ +.sidebar { + background: var(--card); + padding: 1.5rem; + border-radius: var(--radius); + border: 1px solid var(--border); +} + +/* Footer */ +.site-footer { + text-align: center; + padding: 1.5rem; + color: var(--muted); + border-top: 1px solid var(--border); +} + +/* Animation */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Responsive */ +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + } + + .content-wrapper { + grid-template-columns: 1fr; + } +} diff --git a/carrers/cv/icons/email.png b/carrers/cv/icons/email.png new file mode 100644 index 0000000..ccf5908 Binary files /dev/null and b/carrers/cv/icons/email.png differ diff --git a/carrers/cv/icons/github.png b/carrers/cv/icons/github.png new file mode 100644 index 0000000..9490ffc Binary files /dev/null and b/carrers/cv/icons/github.png differ diff --git a/carrers/cv/icons/linkedin.png b/carrers/cv/icons/linkedin.png new file mode 100644 index 0000000..efd9f03 Binary files /dev/null and b/carrers/cv/icons/linkedin.png differ diff --git a/carrers/cv/icons/pic.jpg b/carrers/cv/icons/pic.jpg new file mode 100644 index 0000000..d5517a1 Binary files /dev/null and b/carrers/cv/icons/pic.jpg differ diff --git a/carrers/cv/index.html b/carrers/cv/index.html new file mode 100644 index 0000000..5c098bb --- /dev/null +++ b/carrers/cv/index.html @@ -0,0 +1,77 @@ + + + + + + My CV - Ali + + + + +
+ Profile Photo +

Ali Alshehri

+

Web Developer

+
+ +
+

About Me

+

+ I am a passionate in web development, improving my skills in HTML and CSS through hands-on projects and continuous practice. +

+
+ +
+

Skills

+ +
+ +
+

Education

+
+

Bachelor of Computer Science

+

King Khalid University – 2025

+
+
+ +
+

Experience

+
+

Personal Projects

+

Building web pages using HTML and CSS in small projects.

+
+
+ + +
+

Contact Information

+ +

+ + Email: alialshehri.0100@email.com +

+ +

+ + GitHub: + github.com/3li-507 + +

+ +

+ + LinkedIn: linkedin.com/in/alialshehri +

+
+ + + + diff --git a/carrers/cv/style.css b/carrers/cv/style.css new file mode 100644 index 0000000..551dfba --- /dev/null +++ b/carrers/cv/style.css @@ -0,0 +1,91 @@ +body { + font-family: "Tahoma", sans-serif; + margin: 0; + padding: 0; + background: #f4f4f4; + color: #333; +} + +.header { + text-align: center; + padding: 30px; + background: #0077b6; + color: white; +} + +.profile-img { + width: 130px; + height: 130px; + border-radius: 50%; + border: 4px solid white; + margin-bottom: 15px; +} + +.job-title { + font-size: 18px; + opacity: 0.9; +} + +.section { + background: white; + margin: 20px auto; + padding: 20px; + width: 85%; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); +} + +.section h2 { + color: #0077b6; + margin-bottom: 10px; +} + + + + +ul { + list-style: none; + padding: 0; +} + +ul li { + background: #e3f2fd; + padding: 10px; + margin: 5px 0; + border-radius: 6px; +} + +.section li:nth-child(odd){ + background: #c4e4f2; +} + +.card { + background: #f1f1f1; + padding: 15px; + border-radius: 8px; + margin-top: 10px; +} + +.icon { + width: 22px; + vertical-align: middle; + margin-left: 8px; +} + +a{ + color: #333; +} +a:hover{ + color: #0077b6; +} + +@media (max-width: 600px) { + .section { + width: 95%; + } + + .profile-img { + width: 100px; + height: 100px; + } +}