Johnny's Portfolio

My portfolio, which will be updated with other projects I'll finish in the future, and updated as my skill grows with any cool stuff I think I want it to do.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Johnny's Portfolio</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container" id="maincontainer">
<!-- Start navbar Header-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container" id="navbar-header">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Johnny Vineyard</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#flex-about">About</a></li>       
            <li><a href="#flex-portfolio">Portfolio</a></li>       
            <li><a href="#flex-contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
</div>
<!-- End navbar Header-->

<!-- Start FlexBox Content -->
<div class="flex-container" id="flex-about">
  <div class="flex-item">
    <h1 class="text-center">A Rookie Coder</h1>
    <p>I'm passionate about improvement, and coding provides me with      an endless array of things to learn.</p>
    <p>I've worked with coders before to design UI elements and         website layouts, and now I'm thrilled to be the one putting it       all together.</p>
  </div>
  <div class="flex-item"><img                 src="https://s4.postimg.org/dpi8pg9jh/<14701036_10154581979087930_310></14701036_10154581979087930_310>7273318766427424_o.jpg">
  </div> 
  <div class="flex-item">
    <h1 class="text-center">About Me</h1>
    <p>I love languages and tinkering. Woodworking is my favorite       hobby.</p>
    <p>I'm married to a beautiful lady named Vanessa (she's in the       picture). We met in South Korea where we lived for years. We         have two dogs, Lux and Koda.</p>
  </div>
  
  </div>
<div class="flex-container" id="flex-portfolio">
  <div class="flex-item"><a href="https://codepen.io/JesterVae/pen/WoGwKZ" target="_blank">
<img border="0" alt="A Tribute" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Jackchurchill.jpg/220px-Jackchurchill.jpg">  
</a>
</a></div>
  <div class="flex-item">
    <h1 class="text-center">Projects Coming Soon!</h1>
    <p>I'm in the process of improving my coding skills now, so more projects will be on the way. In no time at all, this portfolio will be full of examples. If you're interested, check back often!</p>
  </div>
  <div class="flex-item">
    <h1 class="text-center">Hold My Spot</h1>
  </div> 
</div>
<div class="flex-container" id="flex-contact">
  <div class="flex-item"><h1 class="text-center">Questions? Comments?</h1>
  <p>If you need to get in touch with me, you can fill out the form and send me an email. I'm obsessive about checking my email, so I will get back to you quickly.</p>
  <p>You can also reach me through my social media accounts linked below or just use them to stalk me.</div> 
  <div class="flex-item">
    <h1 class="text-center">Get in Touch</h1>
        <form action="mailto:[email protected]" method="post" enctype="text/plain">
<br>
<input type="text" name="name" placeholder="Name"><br>
<br>
<input type="text" name="mail" placeholder="Email Address"><br>
<br>
<input type="text" name="comment" size="50" placeholder="Message"><br><br>
<input class="formbutton" type="submit" value="Send">
<input class="formbutton" type="reset" value="Reset">
</form>
  </div>
  <div class="flex-item">
    <h1 class="text-center">Hold My Spot</h1> 
  </div>
</div>
<!-- End FlexBox Content -->
</div> <!-- Container -->
  
<!--Start navbar Footer -->
<div class="navbar navbar-default navbar-relative-bottom" role="navigation" id="navbar-footer">
      <div class="container" id="navbar-footer">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <h5>Made by Johnny Vineyard. <br/> Last updated: 11/19/2016</h5>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="https://www.facebook.com/johnny.vineyard.73" target="_blank"><span class="fa fa-facebook"></span></a></li>       
            <li><a href="https://github.com/javineya" target="_blank"><span class="fa fa-github"></a></li>       
            <li><a href='https://www.linkedin.com/in/johnny-vineyard-b90959119?trk=profile-badge' target="_blank"><span class="fa fa-linkedin"></a></li>
              </div>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
</div>
<!--End navbar Footer -->
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  height: auto;
  font-family: Book Antiqua;
  background-color: gray;
}

.container {
  background-color: lightgray;
}

#maincontainer {
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.navbar {
  background-color: lavender;
  font-family: Book Antiqua;
  font-size: 20px;
  height: 60px;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
  font-size: 30px;
  text-shadow: 1px 1px white;
  line-height: 30px;
}

#navbar-header {
  background-color: lavender;
}

#navbar-footer {
  margin-bottom: 0px;
  background-color: lavender;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    height: auto;
    background-color: lightgray;
    justify-content: center;
    margin: 0px; 
}

#flex-about, #flex-portfolio, #flex-contact {
    flex: 2;
    padding-top: 60px;
    margin-top: 0px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

.flex-item {
    flex: 1;
    width: auto;
    height: auto;
    margin: 10px;
    background-color: transparent;
}

input {
  width: 300px;
  padding: 10px;
  margin: 10px;
  margin-right: 40px;
  font-size: 20px;
  border: none;
}

h1 {
  font-size: 30px;
  width: 350px;
  border-bottom: 2px solid black;
}

.formbutton {
  height: 40px;
  width: 80px;
  line-height: 20px;
}

p {
  font-size: 20px;
  margin: 10px;
}

img {
  width: 300px;
  height: 310px;
  border-radius: 50%;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Johnny's Portfolio ) is write by Johnny, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Johnny