Skip to content

Instantly share code, notes, and snippets.

@Xavier-J-Ortiz

Xavier-J-Ortiz/index.html

Created October 10, 2016 16:36
Show Gist options
  • Save Xavier-J-Ortiz/41c1e5f7b483001e07c4fa2e8afc2306 to your computer and use it in GitHub Desktop.
Save Xavier-J-Ortiz/41c1e5f7b483001e07c4fa2e8afc2306 to your computer and use it in GitHub Desktop.
Download ZIP
yJNYjR
Raw
index.html
<body class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top bg-faded">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<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="#">Xavier Ortiz</a>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#profile">Profile</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</nav>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="content_island">
<a name="profile"></a>
<h1>Profile</h1>
<div class="row" id="top-info-row">
<div class="col-xs-8">
<h3>Xavier Ortiz: Electrical Engineer, Creative SDN expert, Java & Python coder, entrepreneur to be. Interested in the world of Computer networks and it's intersection with programming. Currently exploring the world of freelance work, but in the last leg of acquiring skills in order to launch myself as a full fledged independently employed professional. Stay tuned for more of my work!</h3>
</div>
<div class="col-xs-4">
<a href="https://www.linkedin.com/in/xavierortiz" target="_blank"><img src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/p/1/000/0f7/084/303e56d.jpg" id="my_face"> </img> </a>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="work_island">
<a name="portfolio"></a>
<h1>Portfolio</h1>
<p></p>
<div class="row">
<div class="col-md-6">
<a href="http://www.vellosystems.com" target="_blank">
<img src="http://dev.vellosystems.com/images/vello-systems-logo.png?v2" id="vello"></img>
</a>
</div>
<div class="col-md-6">
<a href="http://www.sonus.net" target="_blank">
<img src="http://www.asiapacificsecuritymagazine.com/wp-content/uploads/2015/05/Sonus-Logo.png" id="treq"></img>
</a>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-6">
<a href="https://www.abiresearch.com" target="_blank">
<img src="http://network.napco.com/dealerscope/wp-content/uploads/sites/5/2015/12/abi-research-logo.jpg" id="treq"></img>
</a>
</div>
<div class="col-md-6">
<a href="http://www.treqlabs.com" target="_blank">
<img src="http://www.treqlabs.com/images/TreqLabs_Logo.png" id="treq"></img>
</a>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<a href="http://www.lumenetworks.com" target="_blank">
<img src="https://assets.sdxcentral.com/lumen-networks-logo.png" id="treq"></img>
</a>
</div>
<div class="col-md-3"></div>
</div>
<p></p>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="contact_island">
<a name="contact"></a>
<h1>Contact Me</h1>
<div class="row">
<div class="col-md-6 contact-div-right">
<h4>Would you like to get in touch with me? Ask any questions on where I'm at with web development, how I plan to integrate it with SDN technology, what networking projects I've been involved with, how I've supported the sales and marketing team during customer face to face meetings, how I've run SDN demos, or to request a resume. I will get back to you as soon as possible as my time permits. </h4>
</div>
<div class="col-md-6 contact-div-left">
<input type="text" class="form-control" placeholder="Name" required></input>
<p></p>
<input type="email" class="form-control" placeholder="Email" required></input>
<p></p>
<input type="phone-number" class="form-control" placeholder="Phone Number" required></input>
<p></p>
<textarea class="form-control" placeholder="Message" required rows="5"></textarea>
<p></p>
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</body>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
.navbar-header {
padding: 0px 10px 0px 10px
}
h1 {
text-align: center;
padding-top: 60px;
margin-top: -60px;
}
h3 {
text-align: justify;
}
h2 {
text-align: center;
}
h4
{
text-align: justify;
}
body {
background-color: #D3D3D3;
padding: 70px 0 10px 0;
}
nav {
box-shadow: 0px 0px 4px 4px #888888;
}
#my_face {
border: none;
display: block;
margin: 0 auto;
border-radius: 50%;
}
#content_island {
background-color: lightgrey;
box-shadow: 0px 0px 1px 1px #888888;
padding: 0 0 60px 0;
}
#work_island {
background-color: #C0C0C0;
box-shadow: 0px 0px 1px 1px #888888;
padding: 0 0 60px 0;
}
#vello {
height: 80%;
width: 80%;
border: none;
display: block;
margin: 0 auto;
background-color: black;
padding: 5px 5px 5px 5px;
}
#treq {
height: 80%;
width: 80%;
border: none;
display: block;
margin: 0 auto;
background-color: white;
padding: 5px 5px 5px 5px;
}
#top-info-row {
margin: 0px 0px 0px 0px
}
#contact_island {
background-color: lightslategray;
box-shadow: 0px 0px 1px 1px #888888;
padding: 0 0 60px 0;
}
button
{
border: none;
display: block;
margin: 0 auto;
}
.contact-div-right
{
float: right
}
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