Skip to content

Atheer Alshahrani #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
atheer8252 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Atheer Alshahrani #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
041e3ec
ai_revolution
atheer8252 Mar 30, 2026
49c6ae8
Add Advanced AI Revolution Article with Glassmorphism design
atheer8252 Mar 31, 2026
aec0f41
cv Atheer Alshahrani
atheer8252 Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions ai/article/indix.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Revolution | Advanced Article</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap" rel="stylesheet">
</head>
<body>

<header>
<nav class="navbar">
<div class="logo">AI<span>.Future</span></div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#article">Article</a></li>
<li><a href="#tech">Technologies</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main class="container">
<article id="article" class="main-content">
<header class="article-header fade-in">
<h1>The AI Revolution: Beyond Limits</h1>
<p class="meta-data">Published: March 31, 2026 | By: Atheer Al-Shahrani</p>
</header>

<section class="intro">
<h2>The New Era</h2>
<p>Artificial Intelligence is transforming how we live, work, and connect. From healthcare to space exploration, AI is the new electricty of the 21st century.</p>
<img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1000&q=80" alt="AI Neural Network" class="featured-image">
</section>

<section id="tech">
<h2>AI Core Technologies</h2>
<div class="table-container">
<table class="styled-table">
<thead>
<tr>
<th>Category</th>
<th>Technology</th>
<th>Impact Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Language</td>
<td>NLP (Natural Language Processing)</td>
<td>High</td>
</tr>
<tr>
<td>Vision</td>
<td>Computer Vision</td>
<td>Extreme</td>
</tr>
<tr>
<td>Prediction</td>
<td>Machine Learning</td>
<td>Critical</td>
</tr>
<tr>
<td>Robotics</td>
<td>Neural Networks</td>
<td>Revolutionary</td>
</tr>
</tbody>
</table>
</div>
</section>
</article>

<section id="contact" class="contact-section">
<h2>Stay Updated</h2>
<form class="advanced-form">
<div class="form-group">
<label for="user-name">Full Name</label>
<input type="text" id="user-name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="user-email">Email Address</label>
<input type="email" id="user-email" placeholder="email@example.com" required>
</div>
<button type="submit" class="btn-submit">Subscribe Now</button>
</form>
</section>
</main>

<footer class="main-footer">
<p>&copy; 2026 AI Revolution Project | Designed by Atheer</p>
</footer>

</body>
</html>
207 changes: 207 additions & 0 deletions ai/article/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
/* 1. Global Setup & Keyframes */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--primary-color: #00f2ff; /* Cyan مضيء */
--secondary-color: #8a2be2; /* بنفجسي تقني */
--text-color: #f8fafc;
--text-muted: #94a3b8;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
}

/* حركة الخلفية المتحركة */
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

body {
font-family: 'Inter', sans-serif;
/* خلفية متدرجة متحركة ساحرة */
background: linear-gradient(-45deg, #0f172a, #1e1b4b, #2e1065, #0f172a);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: var(--text-color);
line-height: 1.8;
font-size: 15px;
}

/* 2. Navigation (Glassmorphism Effect) */
header {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(15px); /* تأثير ضبابي زجاجي */
-webkit-backdrop-filter: blur(15px);
padding: 12px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--glass-border);
}

.navbar {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 1000px;
margin: auto;
}

.logo { font-size: 1.4rem; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 2px; }
.logo span { color: var(--primary-color); }

.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.9rem;
transition: 0.4s ease;
position: relative;
}
.nav-links a:hover { color: white; }
.nav-links a::after {
content: '';
position: absolute;
width: 0; height: 2px;
bottom: -5px; left: 0;
background: var(--primary-color);
transition: 0.4s;
}
.nav-links a:hover::after { width: 100%; }

/* 3. Container & Main Article */
.container {
width: 90%;
max-width: 750px;
margin: 40px auto;
}

.main-article {
background: var(--glass-bg);
padding: 30px;
border-radius: 20px;
border: 1px solid var(--glass-border);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.article-header {
text-align: center;
margin-bottom: 40px;
position: relative;
}

/* العنوان الرئيسي مع تأثير توهج */
h1 {
font-size: 2.2rem;
color: white;
margin-bottom: 10px;
text-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
}

.meta-data { color: var(--text-muted); font-size: 0.85rem; }

/* الصورة الجديدة: صغيرة، دائرية، وأنيقة كشعار للمقال */
.featured-image {
width: 100px; /* حجم صغير جداً ومتناسق */
height: 100px;
border-radius: 50%; /* دائرية تماماً */
object-fit: cover;
display: block;
margin: 20px auto;
border: 4px solid var(--glass-border);
box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); /* توهج بنفسجي خلف الصورة */
}

/* العناوين الفرعية */
h2 {
font-size: 1.4rem;
color: var(--primary-color);
margin: 30px 0 15px 0;
display: flex;
align-items: center;
gap: 10px;
}
h2::before {
content: '';
width: 6px; height: 20px;
background: var(--secondary-color);
border-radius: 3px;
}

p { margin-bottom: 20px; color: #cbd5e1; }

/* 4. Table Styling (Advanced & Compact) */
.styled-table {
width: 100%;
font-size: 0.9rem;
border-collapse: collapse;
background: rgba(0,0,0,0.2);
border-radius: 10px;
overflow: hidden;
margin: 30px 0;
}

.styled-table th, .styled-table td { padding: 15px; text-align: left; }
.styled-table thead { background: rgba(138, 43, 226, 0.2); color: var(--primary-color); }
.styled-table tbody tr { border-bottom: 1px solid var(--glass-border); transition: 0.3s; }
.styled-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.01); }
.styled-table tbody tr:hover { background-color: rgba(0, 242, 255, 0.03); transform: scale(1.01); }

/* 5. Animations & Form */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeInUp 1s ease-out; }

/* فورم اشتراك احترافي */
.contact-section {
background: var(--glass-bg);
padding: 30px;
border-radius: 20px;
max-width: 500px;
margin: 50px auto;
border: 1px solid var(--glass-border);
text-align: center;
}

input {
width: 100%;
padding: 12px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--glass-border);
color: white;
border-radius: 8px;
margin-bottom: 15px;
transition: 0.3s;
}
input:focus { outline: none; border-color: var(--primary-color); }

.btn-submit {
width: 100%;
padding: 14px;
background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
color: white;
font-weight: 700;
border-radius: 8px;
border: none;
cursor: pointer;
transition: 0.4s;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-submit:hover { filter: brightness(1.2); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 242, 255, 0.3); }

@media (max-width: 600px) {
h1 { font-size: 1.8rem; }
.navbar { flex-direction: column; gap: 10px; }
.main-article { padding: 20px; }
}

.main-footer { text-align: center; padding: 30px; color: #64748b; font-size: 0.8rem; }
85 changes: 85 additions & 0 deletions ai_revolution/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Revolution</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>AI Revolution</h1>
<p>Artificial Intelligence <b>AI</b> is a branch of computer science that creates <i>intelligent systems</i> capable of learning and making decisions.</p>

<p>For more information, visit
<a href="https://www.ibm.com/topics/artificial-intelligence" target="_blank">IBM AI</a>.
</p>

<!-- Image -->
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Artificial_intelligence_brain.png"
alt="AI Brain" width="300">

<!-- Lists -->
<h2>AI Applications</h2>
<ul>
<li>Image Recognition</li>
<li>Smart Assistants like Siri and Alexa</li>
<li>Self-driving Cars</li>
<li>Medical Data Analysis</li>
</ul>

<h2>Steps to Learn AI</h2>
<ol>
<li>Learn Programming</li>
<li>Study Math and Statistics</li>
<li>Understand Machine Learning</li>
<li>Apply Practical Projects</li>
</ol>

<!-- Table -->
<h2>AI Techniques Comparison</h2>
<table border="1">
<tr>
<th>Technique</th>
<th>Description</th>
</tr>
<tr>
<td>Machine Learning</td>
<td>Algorithms that allow computers to learn from data</td>
</tr>
<tr>
<td>Neural Networks</td>
<td>Systems that mimic how the human brain works</td>
</tr>
<tr>
<td>Natural Language Processing</td>
<td>Enables computers to understand human language</td>
</tr>
</table>

<!-- YouTube Video -->
<h2>AI Revolution Video</h2>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/xCY3qE0iUfU"
title="AI Revolution" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>

<!-- Contact Form -->
<h2>Contact Us</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br>

<button type="submit">Send</button>
</form>

</body>
</html>
Loading