hackyourfuturecanada · inanfatih · Aug 5, 2019
diff --git a/images/background.jpg b/images/background.jpg
diff --git a/images/download.png b/images/download.png
diff --git a/images/galaxy.jpg b/images/galaxy.jpg
diff --git a/images/image1.jpg b/images/image1.jpg
diff --git a/images/space1.jpg b/images/space1.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<head>
+   <meta charset="UTF-8">
+   <meta name="author" content="Fatih Inan">
+   <meta name="description" content="Short introduction of Fatih Inan">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css" integrity="sha384-wxqG4glGB3nlqX0bi23nmgwCSjWIW13BdLUEYC4VIMehfbcro/ATkyDsF/AbIOVe" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto&display=swap" rel="stylesheet">
+   <title>Fatih Inan</title>
+</head>
+<body>
+   <img class="profileImage" src="./images/download.png" alt="Fatih Inan">
+   <header> <!-- header --> 
+      <h1>       Fatih Inan    </h1>
+      <h2>Front-end Developer</h2>
+   </header>
+   <section id="about"> <!-- section - about -->
+      <p>
+         I am from Turkey. <br> I currently work as a Quality Assurance Analyst in Toronto. I do various testings of a web-based application at work. <br> I am currently a student at <a href="http://hackyourfuture.ca">  Hack Your Future Program
+
+         </a> with the hope to hack my future.<br> This program will provide me with the most saught for skills in the market such as:
+      </p>
+   </section>
+   <section id="skills" class="skills"> <!-- section - skills -->
+      <ul>
+         <li> React </li>
+         <li> Node.JS </li>
+         <li>HTML5</li>
+         <li>CSS3</li>
+         <li>MySQL</li>
+      </ul>
+
+
+   </section>
+   <br>
+   <section class="images">
+   <div>
+      <img class="card-img-top image" src="./images/galaxy.jpg" alt="Space" style="width: 100%;"  >
+      <img class="card-img-top image" src="./images/image1.jpg" alt="Space" style="width: 100%;" >
+      <img class="card-img-top image" src="./images/space1.jpg" alt="Space" style="width: 100%;" >
+   </div>
+   </section>
+   <footer> <!-- footer -->
+      <a href="https://www.linkedin.com/in/fatihinan/"> <i class="fab fa-linkedin fa-8x"></i></a>
+   </footer>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,82 @@
+.profileImage {
+  border-radius: 10px;
+  float: center;
+  border: 10px solid black;
+}
+
+body {
+  background: url(images/background.jpg) fixed;
+  background-size: cover;
+  text-align: center;
+  list-style-position: inside;
+  width: 100%;
+}
+
+p {
+  font-family: 'Roboto', sans-serif;
+}
+
+h1,
+h2 {
+  font-family: 'Inconsolata', monospace;
+}
+
+header {
+  background-color: rgba(255, 94, 0, 0.1);
+  padding: 5px 0 5px 0;
+}
+
+#about {
+  font-size: 22px;
+  background-color: rgba(0, 255, 221, 0.2);
+  padding: 5px 0 5px 0;
+}
+
+.skills {
+  padding: 5px 0 5px 0;
+  font-size: 25px;
+  font-family: 'Roboto', sans-serif;
+  background-color: rgba(153, 0, 255, 0.1);
+}
+
+h1 {
+  font-size: 48px;
+}
+h2 {
+  font-size: 36px;
+}
+
+/* unvisited link */
+a:link {
+  color: blue;
+}
+
+/* visited link */
+a:visited {
+  color: blueviolet;
+}
+
+/* mouse over link */
+a:hover {
+  color: red;
+  background-color: white;
+}
+
+/* selected link */
+a:active {
+  color: black;
+  background-color: white;
+}
+
+.images {
+  width: 70%;
+  margin: auto;
+}
+
+.image {
+  border: 10px solid black;
+}
+
+footer {
+  padding: 10px;
+}