hackyourfuturecanada · cuilhan · Aug 4, 2019 · Aug 4, 2019
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/images/Seccop_Logo.png b/images/Seccop_Logo.png
diff --git a/images/Seccop_inside_design.png b/images/Seccop_inside_design.png
diff --git a/images/Seccop_outside_design.jpg b/images/Seccop_outside_design.jpg
diff --git a/images/background_image_header.jpg b/images/background_image_header.jpg
diff --git a/images/icon.png b/images/icon.png
diff --git a/images/icon.svg b/images/icon.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="author" content="Umit Ilhan">
+    <meta name="description" content="About Umit Ilhan">
+    <link rel="shortcut icon" href="images/icon.png">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Headland+One|Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+
+    <title>About Me! Umit Ilhan</title>
+</head>
+<body>
+
+    <!-- Header -->
+    <header>
+        <h1>Umit Ilhan</h1>
+        <h3>A Wordpress & Front-end Developer</h3>
+    </header>
+
+    <!-- About Section -->
+
+    <section id="about">
+        <h3>About Me!</h3>
+        <p>I'm Umit Ilhan. I am from Turkey. I completed my graduate and master studies in computer engineering. After that, I started to work as a research assistant at the university where I studied graduate in Azerbaijan. Normally my background is a research & teaching assistant. I was doing research on robotics in university. I wrote my dissertation on robots' decision-making systems.2 years ago, I've changed my career like web developer. </p>
+    </section>
+
+    <!-- Goals And Skills Section -->
+    <section id="goals-and-skills">
+        <div class="goals">
+            <h3>My Goals in Software Developer</h3>
+            <p>As I mentioned above, I made a career change and my goal is to become a full stack web developer. Even though I have finished computer engineering in the past, but I have always worked on articles and teaching. I've been away from the software field for years. I know I'm just at the beginning of the this road. I'm starting all over again. I'm trying to improve it myself. I need to learn more. I'm currently a like WordPress developer, but I need a program like your program to become a full stack web developer. After I want to develop mobile application for Android and IOS devices.</p>
+        </div>
+        <div class="skills">
+            <h3>My important skills</h3>
+            <ol>
+                <li><i class="fas fa-check"></i>Learning ability</li>
+                <li><i class="fas fa-check"></i>Problem-solving skills</li>
+                <li><i class="fas fa-check"></i>Teamwork and collaboration</li>
+                <li><i class="fas fa-check"></i>Communication skills</li>
+                <li><i class="fas fa-check"></i>Analytical thinking</li>
+                <li><i class="fas fa-check"></i>Creativity</li>
+            </ol>
+        </div>
+    </section>
+
+    <!-- Project Section -->
+    <section id="project">
+        <h3>My old project images</h3>
+        <img src="images/Seccop_Logo.png" alt="Seccop-Logo"><br>
+        <img src="images/Seccop_outside_design.jpg" alt="Seccop-outside-design" class="radius">
+        <img src="images/Seccop_inside_design.png" alt="Seccop-inside-design" class="radius">
+    </section>
+
+    <!-- Footer -->
+    <footer>
+        <h3>My accounts</h3>
+        <p>
+            <a href="https://www.linkedin.com/in/umit-ilhan" > <i class="fab fa-linkedin fa-4x"></i></a>
+            <a href="https://github.com/cuilhan" ><i class="fab fa-github-square fa-4x"></i></a>
+        </p>
+
+        <div class="hyf">This web site is created for <a href="http://hackyourfuture.ca">HYF</a> course.</div>
+    </footer>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,101 @@
+/* General */
+body{
+    background: url(images/background_image_header.jpg) fixed;
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+}
+p{
+    font-size: 20px;
+}
+
+h1, h3{
+    font-family: 'Headland One', serif;
+}
+
+h1{
+    font-size: 50px;
+}
+h3{
+    font-size: 30px;
+    color:#ee5253;
+}
+p{
+    font-family: 'Roboto', sans-serif;
+}
+header, section{
+    text-align: center;
+    padding: 150px 150px;
+}
+/* Header */
+header{
+    background-color: rgb(63, 146, 191, 0.4);
+    padding: 250px 150px;
+    color: #ffffff;
+
+}
+/* About */
+#about{
+    background-color: #2e86de;
+    color: #fff;
+}
+
+/* Goals And Skills */
+#goals-and-skills{
+    background-color: rgb(63, 191, 184);
+}
+
+.goals{
+    color: #fff;
+}
+.skills ol{
+    list-style: none;
+    padding: 0 250px;
+}
+.skills ol li{
+    font-size: 20px;
+    color: #ffffff;
+    line-height: 25px;
+    border-bottom: 2px solid #ee5253;
+    padding: 10px;
+}
+.skills ol li:first-child{
+    border-top: 2px solid #ee5253;
+}
+.skills li i{
+    color: #ee5253;
+    float: left;
+}
+/* Project */
+#project{
+    background-color: #2e86de;;
+}
+#project img{
+    height: 150px;
+}
+#project .radius{
+    border-radius: 30%;
+    margin-right: 30px;
+}
+/* Footer */
+footer{
+    background-color: #576574;
+    text-align: center;
+    padding: 50px 150px;
+}
+
+footer i{
+    color: #ffffff;
+}
+
+footer i:hover{
+    color: #ee5253;
+}
+footer .hyf a{
+    color: #ffffff;
+    text-decoration: none;
+}
+
+footer .hyf a:hover{
+    color: #ee5253;
+}