index.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  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.0, minimal-ui">
  6. <meta name="google-site-verification" content="kp06-RPhHu97jLQv5c7nl_jyj3wDwTBIpC_OogW-TFc" />
  7. <meta name="description" content="David Windham">
  8. <meta name="author" content="David Windham">
  9. <title>David Windham</title>
  10. <meta property="og:title" content="David Windham"/>
  11. <meta property="og:description" content="Something Else"/>
  12. <meta property="og:type" content="website"/><meta property="og:url" content="https://davidwindham.com"/><meta property="og:site_name" content="David Windham"/><meta property="og:image" content="img/og_image.jpg"/><meta property="fb:app_id" content="203136806559589" /><meta name="twitter:site" content="@windhamdavid"><meta name="twitter:creator" content="@windhamdavid"><meta name="twitter:title" content="David Windham"><meta name="twitter:description" content="Something Else"><meta name="twitter:image" content="img/ogt_image.jpg"><meta name="twitter:card" content="summary_large_image"><link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"><link rel="manifest" href="img/site.webmanifest"><link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#3f3f3f"><meta name="msapplication-TileColor" content="#000000"><meta name="theme-color" content="#ffffff">
  13. <!-- build:css css/dw.css -->
  14. <link rel="stylesheet" href="css/mixin.css">
  15. <link rel="stylesheet" href="css/style.css">
  16. <!-- endbuild -->
  17. </head>
  18. <body>
  19. <!-- ============================= ** HEADER ** ============================= -->
  20. <header id="header" class="header" role="banner">
  21. <div class="header-ui">
  22. <div class="brand--nav">
  23. <h1>David Windham</h1>
  24. </div>
  25. </div>
  26. </header>
  27. <header class="header-small showing">
  28. <a href="./index.php" class="brand">
  29. <img class="light" src="./img/dw-sm-white.svg" srcset="./img/dw-sm-white.svg 2x" alt="David Windham logo"/>
  30. <img class="dark" src="./img/dw-sm.svg" srcset="./img/dw-sm.svg 2x" alt="David Windham logo"/>
  31. </a>
  32. <button class="hamburger" type="button">
  33. <span class="hamburger-box">
  34. <span class="hamburger-inner"></span>
  35. </span>
  36. </button>
  37. <div class="header-small-menu">
  38. <a href="#who">Who</a>
  39. <a href="#what">What</a>
  40. <a href="#when">When</a>
  41. <a href="#about">Why</a>
  42. <a href="#when">How</a>
  43. <h6><a class="email" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;" target="_blank">&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;</a></h6>
  44. </div>
  45. </header>
  46. <!-- ============================= ** MAIN ** ============================= -->
  47. <main id="main" class="main">
  48. <!-- ============================= ** HELLO ** ============================= -->
  49. <div id="hello" class="background-color black" data-dark-bg></div>
  50. <section class="page-view hero d-flex align-items-center">
  51. <div class="container main">
  52. <div class="row">
  53. <div class="col-lg-6">
  54. <h1>Hello!</h1>
  55. <p class="lead"></p>
  56. <h2 class="">I like to help folks make good use of the internet by crafting custom applications and websites.</h2>
  57. </div>
  58. <div class="col col-lg-6 align-self-end">
  59. <blockquote>
  60. <h1>If I can get you to laugh with me, you like me better, which makes you more open to my ideas. And if I can persuade you to laugh at the particular point I make, by laughing at it you acknowledge its truth.</h1>
  61. <p class="right">~ John Cleese</p>
  62. </blockquote>
  63. <!--<img width="400" src="./img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>-->
  64. </div>
  65. </div>
  66. </div>
  67. </section>
  68. <!-- ============================= ** WHO ** ============================= -->
  69. <div id="who" class="background-color white"></div>
  70. <section class="page-view hello">
  71. <div class="container">
  72. <div class="row">
  73. <div class="col-lg-10">
  74. <h1>Who?</h1>
  75. <p class="lead">
  76. I've been a web developer for almost 20 years.
  77. I have a BA in Studio Art and a minor in Art History from The College of Charleston.
  78. I've worked in advertising, publishing, education, and an assortment of businesses for clients.
  79. I focus on building custom web applications and
  80. I treat my development work like mechanical art.
  81. </p>
  82. <img width="300" src="./img/dw-sig.png" alt="David Windham signature">
  83. <p class="lead">Have a project in mind?</p>
  84. <button type="button" class="btn btn-outline-dark">
  85. <a href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email Me</a>
  86. </button>
  87. </div>
  88. </div>
  89. </div>
  90. </section>
  91. <!-- ============================= ** MAIN ** ============================= -->
  92. </main>
  93. <!-- ============================= ** FOOTER ** ============================= -->
  94. <footer id="dw-footer" class="dw-footer">
  95. <div class="container">
  96. <div class="row">
  97. <div class="col-lg-6 col-md-4">
  98. <div class="br-widget">
  99. <h5>David Windham</h5>
  100. <address class="mt-5">
  101. <a href="https://www.google.com/maps/place/102+Glenridge+Cir,+Greenwood,+SC+29646">102 Glenridge Circle</a><br/>
  102. <a href="https://www.google.com/maps/place/102+Glenridge+Cir,+Greenwood,+SC+29646">Greenwood, South Carolina USA</a>
  103. <br/>
  104. <a target="_blank" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109">&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109</a><br />
  105. <a href="tel:8037123283">+1-803-712-3283</a>
  106. </address>
  107. </div>
  108. </div>
  109. <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
  110. <div class="br-widget">
  111. <ul class="footer-links">
  112. </ul>
  113. </div>
  114. </div>
  115. <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
  116. <div class="br-widget">
  117. <ul class="footer-links">
  118. <li><a href="https://github.com/windhamdavid" class="github" rel="me"></span><i class="demo-icon icon-github-squared">&#xf300;</i>&nbsp; Github</a></li>
  119. <li><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="demo-icon icon-wikipedia-w">&#xf266;</i>&nbsp; Wikipedia</a></li>
  120. <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="demo-icon icon-facebook-squared">&#xf308;</i>&nbsp; Facebook</a></li>
  121. <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="demo-icon icon-twitter-squared">&#xf304;</i>&nbsp; Twitter</a></li>
  122. </ul>
  123. </div>
  124. </div>
  125. </div>
  126. <div class="footer-end">
  127. <div class="row">
  128. <div class="col-md-6 text-center text-md-left">
  129. &copy; 2020
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </footer>
  135. <!-- build:js js/dw.js -->
  136. <script src="./js/jquery.min.js"></script>
  137. <script src="./js/bootstrap.js"></script>
  138. <script src="./js/waypoints.js"></script>
  139. <script src="./js/waypoints-inview.js"></script>
  140. <script src="./js/_init.js"></script>
  141. <!-- endbuild -->
  142. </body>
  143. </html>