CodeYourFuture · AliHaider-1 · May 8, 2020 · May 8, 2020 · May 8, 2020 · May 10, 2020
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
diff --git a/week1/3-website/mywebsite/blog/first-entry/index.html b/week1/3-website/mywebsite/blog/first-entry/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../../css/style.css">
+    <title>First Entry - Web Portfolio of Ali Haider</title>
+  </head>
+  <body>
+    <a href="../../index.html">Home</a>
+    <h1 class="title">First Entry</h1>
+    <p>April 24, 2020</p>
+
+    <hr>
+
+    <p>This is my very first blog entry.</p>
+
+  </body>
+</html>
diff --git a/week1/3-website/mywebsite/blog/index.html b/week1/3-website/mywebsite/blog/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../css/style.css">
+    <title>Blog - Web Portfolio of Marco</title>
+  </head>
+  <body>
+    <a href="../index.html">Home</a>
+    <h1>Blog</h1>
+
+    <p>I write about things I encounter while learning web programming.</p>
+
+    <h2>Blog Entries</h2>
+
+    <!-- Here will be a list of all the blog entries. -->
+    <ul>
+        <li>More entries will follow...</li>
+        <li><a href="../blog/second-entry/index.html">Second Entry</a></li>
+        <li><a href="../blog/first-entry/index.html">First Entry</a></li>
+      </ul>
+  </body>
+</html>
diff --git a/week1/3-website/mywebsite/blog/second-entry/index.html b/week1/3-website/mywebsite/blog/second-entry/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../../css/style.css">
+    <title>Second Entry - Web Portfolio of Ali Haider</title>
+  </head>
+  <body>
+    <a href="../../index.html">Home</a>
+    <h1 class="title">Second Entry</h1>
+    <p>April 24, 2020</p>
+
+    <hr>
+
+    <p>This is my Second blog entry.</p>
+
+  </body>
+</html>
diff --git a/week1/3-website/mywebsite/contact/index.html b/week1/3-website/mywebsite/contact/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../css/style.css">
+    <title>Contact - Web Portfolio of Marco</title>
+  </head>
+  <body>
+    <a href="../index.html">Home</a>
+    <h1 class="title">Contact</h1>
+
+    <p>
+      You can contact me by email: <a href="mailto:alihaiderx736@gmail.com">alihaiderx736@gmail.com</a>
+    </p>
+
+    <p>
+      Ali Haider<br>
+      Student Code Your Future
+    </p>
+  </body>
+</html>
diff --git a/week1/3-website/mywebsite/css/style.css b/week1/3-website/mywebsite/css/style.css
@@ -0,0 +1,147 @@
+/**
+ * Add your custom styles below
+ * 
+ * Remember: 
+ * - Be organised, use comments and separate your styles into meaningful chunks
+ *    for example: General styles, Navigation styles, Hero styles, Footer etc.
+ * 
+ */
+
+/* body start  */
+body {
+    margin:0%;
+    background-color:  rgba(171, 201, 253, 0.548);
+    font-family: Arial, Helvetica, sans-serif;
+
+}
+
+/* header start */
+header {
+
+    padding: 1%;
+    background-color: rgba(255, 255, 255, 0.945) ;
+
+}
+
+h2 {
+    margin : 0%;
+    padding: 2% 5% 0% 2%;
+    text-align: center;
+    display: inline;
+
+}
+span {
+    margin : 0%;
+    padding: 2% 0% 0% 2%;
+    display: inline-table;
+}
+
+/*  navigation start  */
+nav {
+    margin : 2% 0% 0% 0%;
+    background-color:  #0D47A1;
+    overflow: hidden;
+
+
+}
+
+nav a {
+
+    color : rgb(255, 255, 255);
+    text-decoration: none;
+    display: block;
+    float: left;
+    padding: 14px 16px;
+}
+nav a:hover {
+    background-color: rgb(39, 199, 49);
+    color: rgb(0, 0, 0);
+
+}
+/* navigation end */
+
+/*  header end */
+
+
+
+
+/* main start */
+
+main {
+    margin: 2% 1% 2% 1%;
+
+}
+
+/* article start */
+
+  img {
+    width: 95%;
+    height: 300px;
+    background-image: url("https://image.freepik.com/free-psd/aerial-view-computer-laptop-wooden-table_53876-11990.jpg");
+    background-size: 100% 100%;
+    border-radius: 50px;
+    border: solid rgb(238, 255, 0);
+
+  }
+
+ main > article:first-child {
+    background-color: rgba(246, 248, 144, 0.74);
+    color: #304FFE ;
+}
+article {
+    padding: 1% 10% 1% 10%;
+    margin :1%;
+    background-color: rgba(255, 255, 255, 0.904);
+    text-align: center;
+
+
+}
+
+h5,h4 {
+    text-align: center;
+}
+
+ol {
+    text-align: left;
+}
+
+p{
+    padding: 1%;
+    color: black;
+    text-align: justify ; 
+}
+
+/* article end  */
+
+/* main end */
+
+/* footer start */
+
+h6 {
+    text-align: center;
+    margin : 2%;
+    padding: 2%;
+    background-color:  #0D47A1;
+    overflow: hidden;
+    color: white;
+}
+
+
+/* footer end */
+
+/* body end */
+
+/* start of portfolio page */
+
+#portfolioHeader {
+    background-color: #607d8b;
+    color: #ffffff;
+ }
+#portfolioImage {
+    width: 300px;
+}
+
+
+
+
+/* end of portfolio page */
diff --git a/week1/3-website/mywebsite/img/Ali Haider.jpg b/week1/3-website/mywebsite/img/Ali Haider.jpg
diff --git a/week1/3-website/mywebsite/index.html b/week1/3-website/mywebsite/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>Ali Haider's Blog</title>
+    <link
+      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="../mywebsite/css/style.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <!-- Add your HTML markup here -->
+    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+
+
+      <!-- header of my blog -->
+      <header>
+         <!-- Name of the blog -->
+         <h2 id="top">Ali Haider's Blog</h2>  
+         <!-- Discription of my blog -->
+        <span>
+          I am creating this blog to improve my I.T skills.
+        </span>
+
+     <!-- nav bar of my blog -->
+        <nav> 
+         <a href="../mywebsite/index.html">Home</a>
+         <a href="../mywebsite/blog/index.html">Blog</a>
+         <a href="../mywebsite/portfolio/index.html">Portifolio</a>
+         <a href="../mywebsite/projects/index.html">Projects</a>
+         <a href="../mywebsite/contact/index.html">Contact</a>
+
+
+     </nav>
+
+      </header>
+
+      <!-- main of my blog -->
+      <main>
+
+        <article>
+          <h4>Post 1</h4>
+          <img src="https://image.freepik.com/free-psd/aerial-view-computer-laptop-wooden-table_53876-11990.jpg" alt="Dream Image">
+          <h5>My Dream</h5>
+          <p>
+            My dream is to become a successful Web Developer. From when I was a young boy, I always enjoyed playing computer games, interacting with computers and was so excited to get my first phone. As a young boy I would spend hours at the local computer games cafe, until my parents would literally drag me home! 
+          <br> <br>From then on, I knew my interest was computers, as I furthered in my education and studies, I found that Web Development and designing Websites was something that particularly interested me.
+
+          </p>
+          <a href="../mywebsite/portfolio/index.html">My Portifolio</a>
+        </article>
+
+        <article>
+          <h4>Post 2</h4>
+
+          <h5>My Hobbies</h5>
+           <img src="https://www.newsinlevels.com/wp-content/uploads/2019/06/GettyImages-487764222-e1495825614959-800x453.jpg" alt="Hobbies Image">
+
+          <ol>
+            <li>Playing Badminton, Cricket </li>
+            <li>Listening Music </li>
+            <li>Watching Comedy Shows</li>
+            <li>Watching Tutorials</li>
+          </ol>
+
+          <a href="#top"> Back to top of page</a>
+        </article>
+
+        <article>
+          <h4>Post 3</h4>
+          <h5>Learning Version Control with Git</h5>
+          <img src="https://miro.medium.com/max/1400/1*y7D5jICmjzvxZP6z-5EtDg.png" alt="Git Image">
+
+          <p>
+            Learn to track and manage changes.
+          </p>
+          <a href="https://www.udacity.com/course/version-control-with-git--ud123">Start Free Course</a>
+        </article>
+
+        <article>
+          <h4>More Posts Comming Soon.</h4>
+
+        </article>
+
+      </main>
+
+      <!-- footer of my blog -->
+      <footer>
+        <h6>&copy;Ali Haider's Blog 2020.</h6>
+      </footer>
+
+    </body>
+</html>