active-fox-2018 · rachmadza · Feb 11, 2019 · Feb 11, 2019
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,35 @@
+html {
+  position: relative;
+}
+
+body {
+  margin-bottom: 100px;
+}
+
+hr {
+  width: 250px;
+  border-top: 4x solid #999;
+}
+
+.section {
+  min-height: 600px;
+}
+
+.heroes {
+  background-color: #eee;
+  image-resolution: 400dpi
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100px;
+  background-color: #333;
+  padding-top: 30px;
+}
+
+footer p {
+  color: #aaa;
+  font-size: 0.9em
+}
diff --git a/img/github.png b/img/github.png
diff --git a/img/jug.png b/img/jug.png
diff --git a/img/sniper.png b/img/sniper.png
diff --git a/img/steam.png b/img/steam.png
diff --git a/img/wr.png b/img/wr.png
diff --git a/index.html b/index.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css">
+
+    <title>Semantic Web</title>
+  </head>
+  <body>
+    <div class="jumbotron text-center">
+      <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/24/24ca15e725a8f0ddb0697a12b53515a8fef5b8aa_full.jpg" class="rounded-circle" alt="">
+      <h1>Rachmad Zaini Alberto</h1>
+      <p>Fullstack Developer | Dota Player</p>
+    </div>
+
+    <section class="about" id="about">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12">
+            <h3 class="text-center">About Me</h3>
+            <hr>
+          </div>
+        </div>
+
+        <div class="row">
+          <div></div>
+          <div class="col-sm-10 offset-sm-1 text-center">
+            <p>
+              A Dota 2 addict who trying to be Fullstack Developer
+            </p>
+          </div>
+          <!-- <div class="col-sm-5">
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum sapiente numquam natus aperiam illo quidem, similique praesentium esse repellendus. Amet quos dolor ad iusto exercitationem aperiam eligendi, sunt fugiat error.
+            </p>
+          </div> -->
+        </div>
+      </div>
+    </section>
+
+    <section class="heroes text-center" id="heroes">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12">
+            <h3>Heroes</h3>
+            <h5>These are my three signature hero</h5>
+            <hr>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-4">
+            <a href="https://dota2.gamepedia.com/Juggernaut" class="thumbnail">  
+              <img src="img/jug.png" alt="">
+              <br>
+              Juggernaut
+            </a>
+          </div>
+          <div class="col-sm-4">
+            <a href="https://dota2.gamepedia.com/Sniper" class="thumbnail">
+              <img src="img/sniper.png" alt="">
+              <br>
+              Sniper
+            </a>
+          </div>
+          <div class="col-sm-4">
+            <a href="https://dota2.gamepedia.com/Windranger" class="thumbnail">
+              <img src="img/wr.png" alt="">
+              <br>
+              Windranger
+            </a>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <footer>
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12 text-center">
+            <p>
+              &copy; copyright 2019 | <a href="https://steamcommunity.com/id/razato">Rachmad Zaini Alberto</a>
+            </p>
+            <br>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+  </body>
+</html>