Skip to content

Instantly share code, notes, and snippets.

@Javabob61

Javabob61/index.html

Created February 28, 2018 02:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Javabob61/ea298f4938d4a8633463d4966eda1e18 to your computer and use it in GitHub Desktop.
Save Javabob61/ea298f4938d4a8633463d4966eda1e18 to your computer and use it in GitHub Desktop.
Download ZIP
Roberts Portfolio Page
Raw
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-fluid">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-header ">
<a class="navbar-brand " href="#">Robert Van Housen</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contactrow">Contact</a></li>
</ul>
</nav>
</div>
<body>
<a style="text-decoration: none;">
<!-- Without this style... h1-h3 would underline -->
<div id="firstrow" class="row">
<!-- id, so I can add spacing -->
<h1>Robert Van Housen</h1>
<h3>Web Design</h3>
<h3>Digital Marketing</h3><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="https://www.facebook.com/robert.vanhousen.98" target="_blank">
<div class="col-xs-3">
<button class="btn btn-block btn-primary"><i class="fa fa-facebook-square"></i> Facebook</button>
</div>
</a>
<a href="https://github.com/Javabob61" target="_blank">
<div class="col-xs-3">
<button class="btn btn-block btn-info"><i class="fa fa-github"></i>Github</button>
</div>
</a>
<a href="https://www.linkedin.com/in/robertvanhousen/" target="_blank">
<div class="col-xs-3">
<button class="btn btn-block btn-danger"><i class="fa fa-linkedin-square"></i> LinkedIn</button>
</div>
</a>
<a href="https://www.freecodecamp.org/javabob61" target="_blank">
<div class="col-xs-3">
<button class="btn btn-block btn-info"><i class="fa fa-free-code-camp"></i> FreeCodeCamp</button>
</div>
</a>
</div>
<div id="aboutrow" class="row">
<div id="about" class="col-xs-8">
<div id="aboutme" class="col-xs-8">
<h2>HTML, CSS,
<h2>JavaScript, Bootstrap, CSS,</h2>
<h2>HTML, Java</h2>
<h2>C, C++, Arduino</h2>
<img id="mypicture" alt="my picture" src="https://lh3.googleusercontent.com/nmPv_HzeX1HxqQZpQcg6_ALYOhX-pN6oN5h5-B85XGTxV8kBpkRhsT1z0nx5Ma-GT-lAzoSmYnMj1gKjXhXVlNtiWpmi0C-PTW5U6AylI_lQtUT4a9GbGlqsn_CiU9XqvAnyhookwmmvGiE-TXtpceRl7hnvgw7Bd6xqHs-dHEMJVbf4fQv82crnFhbHnodP3J2kC0nL3b6O34ic7CgTx9Wjxl1u33OtKHRILgg5yjB9UdbINXjS1_Ogspey0udKb8qya4lC6SqHKIDq1QH0WH2hA8wUsEYF64uLll2D3eYTBXgzO5Ac8WCZdwy-73PodwwHF1UFCSYgfctDChEPVAaeZ-vAAQRuBuMRhYF_vXoKA-EVoQpH38kG7lEBfknnYtsRIuzcvfMwS1MNfKQO6p9WGw4BmCDjA5APeb6BJ8kaMSpjgbBfyt5BAE4d16M5dMMFPoh41zbwpNRFP0I4D7ynHoY7LMFI4oCXbIYIdy5epMF9tyJ_AVNPU4x9F66uU9nXQ-swuFLCscDWVHzNySmYFVcQA42d8ITyyXyBuLCusPYu3DNU6pNufSOIKhHAI_UU4mx8picPCCUFf0Db_Czc2c2M1-pDWlZ94KKZCLRpLlBKGTW4QCCjhDFIeKP8lhVZjAGdFxtsSRu3Y0eVbon8x1ApNKw=w147-h218-no">
</div>
</div>
</div>
<div id="portfolio" class="row">
<div id="proj1" class="row">
<div class="col-xs-4">
<img alt="my project" class="img-responsive" src="https://lh3.googleusercontent.com/sLjEEcoxqBDBbi9_LTeH8BsDW9j9BWy9Ap2ZSwGUvoU15i_07rpJE2YevisLPTVXOqfl3a9d_swtuNlTU06jgnWByn-y2vID8qnU1M1pM_qRajmr-8Bz6rHle4eAgDHVKlOfwULpDHkmpH1woZGI-hLswtIq7o-NKEbq34zYHC50I2qJeGjc3brGvWxgWbifWrFJU07O2hbfqjWcSM-xme_2NwhKuC7zyA1dT3sSOOTxtB2-3nHvDpCDdPOWcyMRNQgKQk2KsviGAaZAsH6VP6VU6NkSjHSzVAV_gddgJYNe0AKK11htRlkfsSpzudM79xLFQD6LaQkBw6mHCATFkb2Yl05M6GnHW880HZSajGT78cNJfPiXS5MdOn7F_RreK8AdGaDGNvWK8ce8rtv-TQmYiDgmXBigC4MJfO_mKLVs3pHizqSV3wAa8aOWTnBSo0NspJCngTD_mVQHi0lBHcJWHmwYhSujSeSYIEAsCdOC6TTB6ZXlq33cgrZhNz4AozgDKrIfqRX0EFTd09sLHsLQxQiCQWL-EZ7GajsDkysyZU7q_ndzvd-HSnMjA4Mp8PMyYyqUFdvS7il4MeN4qP6yMZ5b3zrhTtHrGYqrpHsJOdwD680U46sj6vTCFPT7VsuyI9dYuZogFTFJT78mlO98FqCa2YY=w1326-h745-no"></div>
<div class="col-xs-4">
<img alt="my project" class="img-responsive" src="https://lh3.googleusercontent.com/sLjEEcoxqBDBbi9_LTeH8BsDW9j9BWy9Ap2ZSwGUvoU15i_07rpJE2YevisLPTVXOqfl3a9d_swtuNlTU06jgnWByn-y2vID8qnU1M1pM_qRajmr-8Bz6rHle4eAgDHVKlOfwULpDHkmpH1woZGI-hLswtIq7o-NKEbq34zYHC50I2qJeGjc3brGvWxgWbifWrFJU07O2hbfqjWcSM-xme_2NwhKuC7zyA1dT3sSOOTxtB2-3nHvDpCDdPOWcyMRNQgKQk2KsviGAaZAsH6VP6VU6NkSjHSzVAV_gddgJYNe0AKK11htRlkfsSpzudM79xLFQD6LaQkBw6mHCATFkb2Yl05M6GnHW880HZSajGT78cNJfPiXS5MdOn7F_RreK8AdGaDGNvWK8ce8rtv-TQmYiDgmXBigC4MJfO_mKLVs3pHizqSV3wAa8aOWTnBSo0NspJCngTD_mVQHi0lBHcJWHmwYhSujSeSYIEAsCdOC6TTB6ZXlq33cgrZhNz4AozgDKrIfqRX0EFTd09sLHsLQxQiCQWL-EZ7GajsDkysyZU7q_ndzvd-HSnMjA4Mp8PMyYyqUFdvS7il4MeN4qP6yMZ5b3zrhTtHrGYqrpHsJOdwD680U46sj6vTCFPT7VsuyI9dYuZogFTFJT78mlO98FqCa2YY=w1326-h745-no"></div>
<div class="col-xs-4">
<img alt="my project" class="img-responsive" src="https://lh3.googleusercontent.com/sLjEEcoxqBDBbi9_LTeH8BsDW9j9BWy9Ap2ZSwGUvoU15i_07rpJE2YevisLPTVXOqfl3a9d_swtuNlTU06jgnWByn-y2vID8qnU1M1pM_qRajmr-8Bz6rHle4eAgDHVKlOfwULpDHkmpH1woZGI-hLswtIq7o-NKEbq34zYHC50I2qJeGjc3brGvWxgWbifWrFJU07O2hbfqjWcSM-xme_2NwhKuC7zyA1dT3sSOOTxtB2-3nHvDpCDdPOWcyMRNQgKQk2KsviGAaZAsH6VP6VU6NkSjHSzVAV_gddgJYNe0AKK11htRlkfsSpzudM79xLFQD6LaQkBw6mHCATFkb2Yl05M6GnHW880HZSajGT78cNJfPiXS5MdOn7F_RreK8AdGaDGNvWK8ce8rtv-TQmYiDgmXBigC4MJfO_mKLVs3pHizqSV3wAa8aOWTnBSo0NspJCngTD_mVQHi0lBHcJWHmwYhSujSeSYIEAsCdOC6TTB6ZXlq33cgrZhNz4AozgDKrIfqRX0EFTd09sLHsLQxQiCQWL-EZ7GajsDkysyZU7q_ndzvd-HSnMjA4Mp8PMyYyqUFdvS7il4MeN4qP6yMZ5b3zrhTtHrGYqrpHsJOdwD680U46sj6vTCFPT7VsuyI9dYuZogFTFJT78mlO98FqCa2YY=w1326-h745-no"></div>
</div>
<br><br><br><br>
<div id="proj2" class="row">
<div class="col-xs-4">
<img alt="my project" class="img-responsive" src="https://lh3.googleusercontent.com/dPTQGwKw453Pli_kdqCEutrXGg66FobGIosJJGlDKCHqvdpFGTHzYzvhNPBWkD-mnMsudf_CT7JBvRy6jVBV3Cpj4VGOaPF0CV1Lw2q18EZUxTIDuc1q8N39q33BCnVrqTlHXeSj6A7MhF8n4oS-ERoPLPcFlfEzGXtoQm534AUcMJIhhdUU8CjS-PDH2lwQp38RBVJ22gDJRmLRlXTXOGgEPjTyeRBqyUr7pdcH09bOOkkmWdG22QEwlAdtaD5NotcqdSPsd4a7oc59T3uFbIjwV-Qqm563Rhbgn5uVcaBGF1lpdSxwKXWTEGMZIN14i1FpFkE0oAf6AjPgkyg_66gci45JtNgvlDBS3ojrfd1NtrffAIAd4x-Aa9CSP1NHOaBjGoSx5FnUhac0xQOq-cWWur4pGw0HG4gkDkicwfwDvZAjBcZjIv0VrzoR5dPfJkx7ZbJney75wfBgo43UIV9i_NxgIgVjOhDEX6SVWDloEtphAo206nKrvi5lLMhJ4rE1Q8-J-mItfJ2JN7gtNhqsJQR70CgmnacqNATJ1m51lRYVyWEJ2aJxv1_nv7jL6U-ynpzNq4m5ouPRy70POxZncKpMfSsaoqRU3yVdeg_gZ6ai9AXHHhikXCF_kPsiNA0nemVoKcU0WhU79YVyUxF1SrI4Ppc=w566-h318-no"></div>
<div class="col-xs-4">
<img alt="my project" class="img-responsive" src="https://lh3.googleusercontent.com/dPTQGwKw453Pli_kdqCEutrXGg66FobGIosJJGlDKCHqvdpFGTHzYzvhNPBWkD-mnMsudf_CT7JBvRy6jVBV3Cpj4VGOaPF0CV1Lw2q18EZUxTIDuc1q8N39q33BCnVrqTlHXeSj6A7MhF8n4oS-ERoPLPcFlfEzGXtoQm534AUcMJIhhdUU8CjS-PDH2lwQp38RBVJ22gDJRmLRlXTXOGgEPjTyeRBqyUr7pdcH09bOOkkmWdG22QEwlAdtaD5NotcqdSPsd4a7oc59T3uFbIjwV-Qqm563Rhbgn5uVcaBGF1lpdSxwKXWTEGMZIN14i1FpFkE0oAf6AjPgkyg_66gci45JtNgvlDBS3ojrfd1NtrffAIAd4x-Aa9CSP1NHOaBjGoSx5FnUhac0xQOq-cWWur4pGw0HG4gkDkicwfwDvZAjBcZjIv0VrzoR5dPfJkx7ZbJney75wfBgo43UIV9i_NxgIgVjOhDEX6SVWDloEtphAo206nKrvi5lLMhJ4rE1Q8-J-mItfJ2JN7gtNhqsJQR70CgmnacqNATJ1m51lRYVyWEJ2aJxv1_nv7jL6U-ynpzNq4m5ouPRy70POxZncKpMfSsaoqRU3yVdeg_gZ6ai9AXHHhikXCF_kPsiNA0nemVoKcU0WhU79YVyUxF1SrI4Ppc=w566-h318-no"></div>
<div class="col-xs-4">
<img alt="my project" class="img-responsive" src="https://lh3.googleusercontent.com/dPTQGwKw453Pli_kdqCEutrXGg66FobGIosJJGlDKCHqvdpFGTHzYzvhNPBWkD-mnMsudf_CT7JBvRy6jVBV3Cpj4VGOaPF0CV1Lw2q18EZUxTIDuc1q8N39q33BCnVrqTlHXeSj6A7MhF8n4oS-ERoPLPcFlfEzGXtoQm534AUcMJIhhdUU8CjS-PDH2lwQp38RBVJ22gDJRmLRlXTXOGgEPjTyeRBqyUr7pdcH09bOOkkmWdG22QEwlAdtaD5NotcqdSPsd4a7oc59T3uFbIjwV-Qqm563Rhbgn5uVcaBGF1lpdSxwKXWTEGMZIN14i1FpFkE0oAf6AjPgkyg_66gci45JtNgvlDBS3ojrfd1NtrffAIAd4x-Aa9CSP1NHOaBjGoSx5FnUhac0xQOq-cWWur4pGw0HG4gkDkicwfwDvZAjBcZjIv0VrzoR5dPfJkx7ZbJney75wfBgo43UIV9i_NxgIgVjOhDEX6SVWDloEtphAo206nKrvi5lLMhJ4rE1Q8-J-mItfJ2JN7gtNhqsJQR70CgmnacqNATJ1m51lRYVyWEJ2aJxv1_nv7jL6U-ynpzNq4m5ouPRy70POxZncKpMfSsaoqRU3yVdeg_gZ6ai9AXHHhikXCF_kPsiNA0nemVoKcU0WhU79YVyUxF1SrI4Ppc=w566-h318-no"></div>
</div>
</div>
</div>
<div id="contactrow" class="row">
<div class="col-xs-8">
<h2 id="contactme">Please feel free to contact me at my email:</h2>
<h2 id="emailcolor"> marketingman611@gmail.com
</h2>
</div>
<div id="contact" class="col-xs-4">
<a href="https://www.facebook.com/robert.vanhousen.98" target="_blank">
<button class="btn btn-primary btn-block" ><i class="fa fa-facebook-square"></i> Facebook</button>
</a>
<br>
<a href="https://github.com/Javabob61" target="_blank">
<button class="btn btn-info btn-block"><i class="fa fa-github"></i>
Github</button>
</a>
<br>
<a href="https://www.linkedin.com/in/robertvanhousen/" target="_blank">
<button class="btn btn-danger btn-block"><i class="fa fa-linkedin-square"></i> LinkedIn</button>
</a>
<br>
<a href="https://www.freecodecamp.org/javabob61" target="_blank">
<button class="btn btn-info btn-block"><i class="fa fa-free-code-camp"></i> FreeCodeCamp</button>
</a>
</div>
</body>
</div>
Raw
roberts-portfolio-page.markdown
Raw
style.css
body {
background-image: url("https://lh3.googleusercontent.com/lLR9ZahYWfq1wpUHfuB2fp_dtu1d7o317dI5BEiQpac17YFtrmhjYZUe_IRNzejAjZYw5nRSsSRW27o0kNWOtyZGoS7VuJFeEhzkfzKdqvTEJG_NS3vMcjV8S8RcfaJ61dZluOMs3I3R_UggVzYcXevp2nTiZPUtX5HtmKtFQaYZvV167bmxW8QdBdUTwJLGvO7ubKgYgX-JgGzZXZ3DWTg018h2cLhTHn3WEbimAzQ81aNIe7feNe8c1LUlgB31ipSktxD8wlyFkfqwJFvoMQax_vZqUxv75CMeZO5JULN6uE2RSul_euMaPmpE5Pwvjom32aQ8upeDJCcpHCIiZTkvRXUJ5W9bPzCKT2XbQNWseuDKRmHdbjSenwQqT49pmXX5_5LPdXRy17qxJtKE0qv2U7KmX4JZV25fzvKBEBdPKhmn0DvnQ6iI8gtrc5EBoGh8L6_AOHo_-b-Pfh6mAiaLpeqlK9VJKlPqEiX4EA_IcLGe-P6v5b_v-wL9z4wmJgw_oeYKpRkRmESoDf87wM9E40mHG5UNtsnHTLFYhqm07J-gvccEr_5QnXPuomH_YncNzvzVq5vrI3DwDtl3GYF7q3G9p0DCMGJXp_WfZsu8W97F6ODjLOJtMsceYCPzF9hhx95QNsLlYUB6nv6hPbO8YR-7Mig=w276-h183-no");
background-repeat: repeat;
background-color: blue;
background-size: contain;
}
#firstrow {
margin-top: 50px;
margin-bottom: 100px;
text-align: center;
color: blue;
}
h1 {
color: orange;
}
h3 {
color: orange;
}
#mypicture {
width: 40%;
height: auto;
display: block;
margin-left: 1000px;
margin-bottom: 100px;
}
#contactrow {
margin-top: 300px;
margin-bottom: 150px;
}
#contactme {
margin-left: 100px;
color: yellow;
}
#emailcolor {
margin-left: 100px;
color: yellow;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment