project-2

Ahmad-Khallaf05 · May 19, 2024 · 281e9ec · 281e9ec
1 parent aafd9dc
commit 281e9ec
Show file tree

Hide file tree

Showing 19 changed files with 250 additions and 0 deletions.
diff --git a/38827550-309e-4d99-88d2-c3de33015b6e-removebg-preview.png b/38827550-309e-4d99-88d2-c3de33015b6e-removebg-preview.png
diff --git a/ahmad.jpg b/ahmad.jpg
diff --git a/c++.png b/c++.png
diff --git a/c.png b/c.png
diff --git a/css.png b/css.png
diff --git a/discord.png b/discord.png
diff --git a/facepook.png b/facepook.png
diff --git a/figma.png b/figma.png
diff --git a/fone.png b/fone.png
diff --git a/git.png b/git.png
diff --git a/githup.png b/githup.png
diff --git a/gmail.png b/gmail.png
diff --git a/hmad-removebg-preview.png b/hmad-removebg-preview.png
diff --git a/html.png b/html.png
diff --git a/inistagram.png b/inistagram.png
diff --git a/js.png b/js.png
diff --git a/project-1.html b/project-1.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
+
+  <title>Ahmad Majed Khallaf</title>
+
+  <link rel="stylesheet" href="style.css">
+
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
+
+</head>
+
+<body>
+
+
+
+  <main>
+
+    <header>
+      <a class="logo"><b>Ahmad Khallaf</b></a>
+      <nav class="nav">
+          <a href="#About">About</a>
+          <a href="#skills">Skills</a>
+          <a href="#Contact">Contact</a>
+      </nav>
+  </header>
+
+  <div class="home">
+      <div class="a1">
+          <img src="hmad-removebg-preview.png" alt="" class="myimage">
+      </div>
+      <div class="a2">
+          <h1>Hi I am Ahmad Majed Khallaf </h1>
+          <p>
+            I am an artificial intelligence student in Aqaba University of Technology, and a trainee in Orange Coding Academy "website development".
+          </p>
+      </div>
+  </div>
+  <hr>
+  <div class="abc">
+    <h1>My skills</h1>
+      <ul class="ul">
+          <li class="html"><img src="html.png" alt="" class="kk"></li>
+          <li class="css"><img src="css.png" alt="" class="kk"></li>
+          <li class="python"><img src="python.png" alt="" class="kk"></li>
+          <li class="c++"><img src="c++.png" alt="" class="kk"></li>
+          <li class="c#"><img src="c.png" alt="" class="kk"></li>
+          <li class="git"><img src="git.png" alt="" class="kk"></li>
+          <li class="githup"><img src="githup.png" alt="" class="kk"></li>
+          <li class="figma"><img src="figma.png" alt="" class="kk"></li>
+      </ul>
+  </div>
+  <hr>
+  <div class="abc">
+    <h1>Contact</h1>
+    <ul class="ul">
+      <li class="class"><img src="gmail.png" alt="" class="ss"><a href="[email protected]">[email protected]</a></li>
+      <li class="class"><img src="fone.png" alt="" class="ss"><a href="+962790325001"><br>0790325001</a></li>
+      <li class="class"><img src="githup.png" alt="" class="ss"><a href="https://github.com/Ahmad-Khallaf05"><br>Ahmad-Khallaf05</a></li>
+      <li class="class"><img src="inistagram.png" alt="" class="ss"><a href="https://www.instagram.com/ahm.kh_05?igsh=aDIyaWljano2aWdm"><br>ahmad.kh_05</a></li>
+      <li class="class"><img src="facepook.png" alt="" class="ss"><a href="https://www.facebook.com/profile.php?id=100074698261724&mibextid=ZbWKwL"><br>Ahmad Khallaf</a></li>
+      <li class="class"><img src="discord.png" alt="" class="ss"><a href="ahmadkh5081"><br>ahmadkh5081</a></li>
+    </ul>
+  </div>
+
+  <!--<div class="aa">
+
+    <img src="/assets/images/image-omelette.jpeg" alt="omelette">
+    <div>
+      <h1> Simple Omelette Recipe </h1>
+      <p> An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked
+        to perfection, optionally filled with your choice of cheese, vegetables, or meats. </p>
+    </div>
+
+    <div class="pre">
+      <h1 class="purple">Preparation time</h1>
+      <ul>
+        <li>Total: Approximately 10 minutes</li>
+        <li> Preparation: 5 minutes</li>
+        <li> Cooking: 5 minutes</li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <div>
+      <h1 class="brown">Ingredients</h1>
+      <ul>
+        <li>2-3 large eggs</li>
+        <li>Salt, to taste</li>
+        <li>Pepper, to taste</li>
+        <li>1 tablespoon of butter or oil</li>
+        <li> Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <div>
+      <h1 class="brown">Instructions</h1>
+      <ol>
+        <li><b>the eggs:</b>  In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed.
+          You can add a tablespoon of water or milk for a fluffier texture.
+        </li>
+        <li><b>Heat the pan:</b> Place a non-stick frying pan over medium heat and add butter or oil.
+        </li>
+        <li><b>Cook the omelette:</b> Once the butter is melted and bubbling, pour in the eggs. Tilt the pan to ensure
+          the eggs evenly coat the surface.
+        </li>
+        <li><b>Add fillings (optional):</b> When the eggs begin to set at the edges but are still slightly runny in the
+          middle, sprinkle your chosen fillings over one half of the omelette.
+        </li>
+        <li><b>Fold and serve:</b> As the omelette continues to cook, carefully lift one edge and fold it over the
+          fillings. Let it cook for another minute, then slide it onto a plate.
+        </li>
+        <li>
+          <b>Enjoy:</b> Serve hot, with additional salt and pepper if needed.
+        </li>
+      </ol>
+    </div>
+
+    <hr>
+
+    <div>
+      <h1 class="brown">Nutrition</h1>
+      <p> The table below shows nutritional values per serving without the additional fillings. </p>
+      <div class="table1">
+        <p class="a1">Calories</p>
+        <p class="brown" class="a2">277kcal</p>
+      </div>
+
+      <hr>
+
+      <div class="table1">
+        <p class="a1">Carbs</p>
+        <p class="brown" class="a2">0g</p>
+      </div>
+
+      <hr>
+
+      <div class="table1">
+        <p class="a1">Protein</p>
+        <p class="brown" class="a2">20g</p>
+      </div>
+
+      <hr>
+
+      <div class="table1">
+      <p class="a1">Fat</p>
+      <p class="brown" class="a2">22g</p>
+      </div>
+    </div>
+  </div>
+  </div>
+-->
+</body>
+
+</html>
diff --git a/python.png b/python.png
diff --git a/style.css b/style.css
@@ -0,0 +1,82 @@
+
+main {
+    background-color: rgb(255, 255, 255);
+    width: 75%;
+    margin: auto;
+    padding: 20px;
+    border-radius: 25px;
+}
+
+header {
+    background-color: rgb(174, 174, 174);
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 200px;
+    border-radius: 20px;
+}
+
+.logo {
+    color: rgba(57, 57, 57, 1);
+    font-weight: 400;
+    font-size: 28px;
+    text-decoration: none;
+}
+
+.nav a {
+    color: rgba(57, 57, 57, 1);
+    text-decoration: none;
+    font-weight: 300;
+    font-size: 20px;
+    padding-left: 20px;
+}
+
+.myimage {
+    border-radius: 100px;
+    padding: 20px;
+    width: auto;
+    max-width: 400px;
+}
+
+.home {
+    display: grid;
+    grid-template-columns: 50% 50%;
+}
+
+.a2 {
+    justify-content: right;
+    text-align: center;
+    padding: 20px;
+    padding-top: 25%;
+    width: 80%;
+}
+
+.abc {
+    justify-content: center;
+    text-align: center;
+    padding: 50px;
+}
+
+.ul {
+    list-style-type: none;
+    display: grid;
+    grid-template-columns: 30% 30% 30%;
+    grid-template-rows: 30% 30% 30%;
+    justify-content: space-between;
+    padding: 50px;
+}
+
+.kk {
+    height: 100px;
+    padding: 10px;
+}
+.ss {
+    height: 50px;
+    padding: 10px;
+}
+
+.ul>li {
+    padding: 50px;
+
+}