Skip to content

Add HTML CSS projects #22

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
Razan2001a wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add HTML CSS projects #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
102 changes: 102 additions & 0 deletions html/introduction/article/ai/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Revolution</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<header class="hero">
<div class="overlay">
<h1>AI Revolution</h1>
<p>How artificial intelligence is transforming our world</p>
</div>
</header>

<nav class="navbar">
<a href="#intro">Introduction</a>
<a href="#applications">Applications</a>
<a href="#impact">Impact</a>
<a href="#future">Future</a>
<a href="#video">Video</a>
</nav>

<main class="container">
<section id="intro" class="box">
<h2>Introduction</h2>
<p>
Artificial Intelligence, or AI, is one of the most important technological
developments in the modern world. It allows machines and computer systems
to perform tasks that usually require human intelligence, such as learning,
decision-making, understanding language, and recognizing patterns.
</p>
<p>
Today, AI is no longer a distant idea from science fiction. It is part of
our daily lives, from search engines and smart assistants to recommendation
systems, chatbots, and image generation tools.
</p>
</section>

<section id="applications" class="box">
<h2>Applications of AI</h2>
<p>AI is used in many important fields, such as:</p>
<ul>
<li>Healthcare: helping doctors analyze scans and improve diagnosis.</li>
<li>Education: supporting personalized learning and smart tutoring systems.</li>
<li>Finance: detecting fraud and improving decision-making.</li>
<li>Transportation: supporting self-driving systems and route optimization.</li>
<li>Customer Service: powering chatbots and virtual assistants.</li>
</ul>
<img src="https://images.unsplash.com/photo-1677442135136-760c813028c0?auto=format&fit=crop&w=1200&q=80" alt="Artificial Intelligence concept">
</section>

<section id="impact" class="box">
<h2>The Impact of AI</h2>
<p>
AI is changing how people work, learn, communicate, and solve problems.
It increases speed, improves accuracy, and makes many tasks more efficient.
In companies, AI can support automation and data analysis. In everyday life,
it can make technology more helpful and responsive.
</p>
<p>
At the same time, AI also raises important questions about privacy,
ethics, fairness, and the future of jobs. This is why the AI revolution
is not only technical, but also social and human.
</p>
</section>

<section id="future" class="box">
<h2>The Future of AI</h2>
<p>
The future of AI is full of opportunity. AI may continue to improve healthcare,
education, research, and accessibility. It can help humans discover new ideas,
save time, and solve difficult problems.
</p>
<p>
However, the future of AI depends on responsible development. People, companies,
and governments must work together to ensure that AI is used in safe, fair,
and meaningful ways.
</p>
</section>

<section id="video" class="box">
<h2>Video</h2>
<p>This short video gives a visual introduction to the idea of artificial intelligence.</p>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/ad79nYk2keg"
title="AI Video"
allowfullscreen>
</iframe>
</div>
</section>
</main>

<footer>
<p>Created by Razan Mohammed</p>
</footer>

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

body {
font-family: Arial, sans-serif;
background: #0f172a;
color: #e5e7eb;
line-height: 1.7;
}

.hero {
background: url("https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat;
height: 50vh;
position: relative;
}

.overlay {
background: rgba(15, 23, 42, 0.7);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
padding: 20px;
}

.overlay h1 {
font-size: 52px;
margin-bottom: 10px;
}

.overlay p {
font-size: 18px;
}

.navbar {
display: flex;
justify-content: center;
gap: 20px;
background: #1e293b;
padding: 16px;
position: sticky;
top: 0;
}

.navbar a {
color: #f8fafc;
text-decoration: none;
transition: 0.3s;
}

.navbar a:hover {
color: #c084fc;
}

.container {
width: 90%;
max-width: 1000px;
margin: 30px auto;
}

.box {
background: #1e293b;
padding: 24px;
border-radius: 16px;
margin-bottom: 22px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.box h2 {
color: #c4b5fd;
margin-bottom: 14px;
}

.box ul {
padding-left: 22px;
margin-top: 10px;
}

.box img {
width: 100%;
border-radius: 14px;
margin-top: 16px;
}

.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-top: 15px;
}

.video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 14px;
}

footer {
text-align: center;
padding: 20px;
background: #020617;
color: #cbd5e1;
margin-top: 30px;
}

@media (max-width: 768px) {
.overlay h1 {
font-size: 34px;
}

.navbar {
flex-wrap: wrap;
}
}
Loading