fikrcamp · muk7tar · Oct 20, 2022 · Oct 20, 2022
diff --git a/1_mtsk3fQ_BRemFidhkel3dA.png b/1_mtsk3fQ_BRemFidhkel3dA.png
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,64 @@
+:root{
+    background-color: rgb(228, 253, 255);
+
+}
+*{
+    margin: 10px;
+    padding: 0;
+}
+header{
+    background-color: blue;
+    margin-bottom: 40px;
+    text-align: right;
+
+
+}
+.header{
+color: rgb(255, 0, 0);
+
+}
+.head H1{
+    padding-top: 20px;
+    padding-left: 20px;
+}
+.menu{
+    margin-left: 5px;
+    text-decoration: none;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 10;
+    overflow: hidden;
+
+  }
+
+  li {
+    float: right;
+  }
+
+  li a {
+    display: block;
+    color: black;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+
+.content h1{
+    font-family: monospace;
+}
+
+.content p{
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.content img{
+    width: 500px;
+    height: 210px;
+}
diff --git a/home.png b/home.png
diff --git a/image1.jpg b/image1.jpg
diff --git a/image2.jpg b/image2.jpg
diff --git a/image3.jpg b/image3.jpg
diff --git a/index.html b/index.html
@@ -2,20 +2,69 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
     <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
+    <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="shortcut icon" type="image/x-icon" href="home.png" />
   </head>
   <body>
     <!-- Add your HTML  here -->
+    <header>
+       <h1 class="header">My First Blog</h1> 
+       <ul>
+          <li> <a href="#">Services</a> </li>
+          <li> <a href="#">About Us</a> </li>
+          <li> <a href="#">Contact Us</a> </li>
+       </ul>
+    </header>
+
+      <div>
+        <P>this blog i have talked about how to become a full stack developer also everythign you need to become it.</P>
+
+      </div>
+
+      <div class="content">
+        <div class="article1">
+          <h1> HTML</h1>
+          <img src="photo-1542831371-29b0f74f9713-2.jpg" alt="html code">
+          <pre> HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.
+                For example, content could be structured within a set of paragraphs,
+                a list of bulleted points, or using images and data tables.</pre>
+        </div>
+
+        <div class="article2">
+          <h1> CSS </h1>
+          <img src="image3.jpg" alt="css code">
+          <pre>CSS (Cascading Style Sheets) is used to style and layout web pages — for example,
+              to alter the font, color, size, and spacing of your content, split it into multiple columns,
+              or add animations and other decorative features.</pre>
+        </div>
+
+        <div class="article3">
+          <h1> GIT and Github </h1>
+          <img src="1_mtsk3fQ_BRemFidhkel3dA.png" alt="GIT and Github">
+          <pre>Git is a version control system that lets you manage and keep track of your source code history.
+              GitHub is a cloud-based hosting service that lets you manage Git repositories.
+              If you have open-source projects that use Git, then GitHub is designed to help you better manage them.</pre>
+        </div>
+
+        <div class="article4">
+          <h1> Javascript </h1>
+          <img src="image1.jpg" alt="javascript">
+          <pre>JavaScript is the world's most popular programming language.
+              JavaScript is the programming language of the Web. JavaScript is easy to learn.</pre>
+        </div>
+    </div>
+
+    <br></br>
+
+
+
+     <footer class="footer">
+      <P>copyright @ mukhtar osman 2022</P>
+
+     </footer>
+
   </body>
 </html>
diff --git a/photo-1542831371-29b0f74f9713-2.jpg b/photo-1542831371-29b0f74f9713-2.jpg