Website for visualizing a persons github network.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

103 lines
4.6 KiB

5 years ago
5 years ago
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <title>Home - GitHub Graphs</title>
  7. <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  8. <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  10. <link rel="stylesheet" href="./style.css" />
  11. <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  12. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  13. crossorigin="anonymous">
  14. </script>
  15. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  16. integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  17. crossorigin="anonymous">
  18. </script>
  19. </head>
  20. <body>
  21. <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
  22. <div id="header-title">
  23. <a href="./index.html">
  24. <img id="logo" src="./logo.svg" />
  25. </a>
  26. </div>
  27. <div id="navigation">
  28. <ul class="nav">
  29. <li class="nav-item">
  30. <a href="./GraphGenerator.html">
  31. Generate graphs
  32. </a>
  33. </li>
  34. <div class="nav-sep"></div>
  35. <li class="nav-item">
  36. <a href="https://github.com/jrtechs/github-graphs">
  37. View on GitHub
  38. </a>
  39. </li>
  40. <div class="nav-sep"></div>
  41. <li class="nav-item">
  42. <a href="./about.html">
  43. About
  44. </a>
  45. </li>
  46. </ul>
  47. </div>
  48. </div>
  49. <div id="mainCarousel" class="carousel slide" data-ride="carousel">
  50. <div class="carousel-inner">
  51. <div class="carousel-item active">
  52. <div class="image-vert text-center">
  53. <img class="img-fluid carousel-img" src="./img/friends.png" />
  54. </div>
  55. </div>
  56. <div class="carousel-item">
  57. <div class="image-vert text-center">
  58. <img class="img-fluid carousel-img" src="./img/repos.png" />
  59. </div>
  60. </div>
  61. <div class="carousel-item">
  62. <div class="image-vert text-center">
  63. <img class="img-fluid carousel-img" src="./img/orgs.png" />
  64. </div>
  65. </div>
  66. </div>
  67. <a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev" m="1">
  68. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  69. <span class="sr-only">Previous</span>
  70. </a>
  71. <a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next" m="1">
  72. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  73. <span class="sr-only">Next</span>
  74. </a>
  75. </div>
  76. <div class="main container-fluid" style="top: -50px;">
  77. <div class="home-content row align-items-center">
  78. <div class="side-txt col">
  79. <div class="text-title text-center" style="padding: 10px;">
  80. <h1 class="m-title" style="padding-top: 5px;">What can I do here?</h1>
  81. </div>
  82. <div class="text-content">
  83. <p style="position: relative; padding: 10px;">
  84. Head over to the 'Generate graphs' page and enter
  85. the username of a GitHub user. You can then select
  86. what kind of graph to generate based on that user.
  87. </p>
  88. <p style="position: relative; padding: 10px;">
  89. If you'd like to see how everything works, follow
  90. the link to GitHub, where you can view everything
  91. that went into making this functional.
  92. </p>
  93. <p style="position: relative; padding: 10px;">
  94. If you're interested in knowing more about this
  95. project, additional information can be found on
  96. the About page.
  97. </p>
  98. </div>
  99. </div>
  100. <img class="side-img img-fluid col" style="top: 50px;" src="./img/recording.gif" />
  101. </div>
  102. </div>
  103. </body>
  104. </html>