<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Jorge Miguel</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-link" aria-hidden="true"></span> Links<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.google.ch" target="_blank">My Webmail</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://www.google.ch" target="_blank">Timelogger</a></li>
<li><a href="http://www.cubetech.ch" target="_blank">cubetech.ch</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Jack Bass<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.fgruber.ch/" target="_blank"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> User Settings</a></li>
<li><a href="/logout"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container principal">
<div id="mascara"></div>
<div style="" class="row">
<div class="container">
<div class="col-md-12">
<h1>Olá! Meu nome é jorge Miguel e sou<br class="visible-lg "/> desenvolvedor de Websites</h1>
<hr style="width:25%;text-align:left;margin:30px 0; border:2.5px solid #fff;"/>
</div>
</div>
</div>
</div>
<div class="container" id="main-wrapper">
<div class="col-md-7 main-content">
<h3>Now you have access to the data you will actually use</h3>
<p>
Bacon ipsum dolor amet ball tip boudin shoulder beef shank andouille strip steak sirloin meatloaf ground round filet mignon beef ribs chicken. Venison turducken tail, t-bone biltong beef ribs flank pork belly shankle filet mignon cow pork loin capicola cupim. </p>
<div class="white-box">
<ul>
<li><p class="">Short ribs filet mignon sausage andouille. Fatback ground round kevin, cupim turkey cow doner shank bresaola pastrami tenderloin frankfurter biltong.</p></li>
<li><p class="">Cow tail turkey ball tip hamburger leberkas brisket. Leberkas salami beef, landjaeger capicola venison ribeye shank porchetta pastrami biltong spare ribs. </p></li>
<li><p class="">T-bone bacon ham hock, ball tip swine cow picanha prosciutto beef sirloin short loin chicken.</p></li>
</ul>
</div><!-- /. End White Box 0-->
<p class="final-cta">Download these digital industry insights and start driving stronger results for your brand today.</p>
</div>
<div class="col-md-4 col-md-offset-1">
<div class="form-container">
<h4>Faça um orçamento</h4>
<form method="post" name="frmContentDownload">
<div><label for="FirstName1">First Name</label><input class="form-control" name="FirstName1" type="text" value="" /></div>
<div><label for="LastName1">Last Name</label><input class="form-control" name="LastName1" type="text" value="" /></div>
<div><label for="emailAddress">Email</label><input class="form-control" name="emailAddress" type="text" value="" /></div>
<div><label for="Company1">Company</label><input class="form-control" name="Company1" type="text" value="" /></div>
<div><label for="Title1">Title</label><input class="form-control" name="Title1" type="text" value="" /></div>
<div><label for="StateProvince1">State or Province</label><select class="form-control" name="StateProvince1">
<option class="placeholder" value="" disabled selected>STATE OR PROVINCE ↡</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="CA-N">California - Northern</option>
<option value="CA-S">California - Southern</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">D.C.</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="FM">Micronesia</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MH">Marshall Islands</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MP">Marianas</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="PW">Palau</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VI">Virgin Islands</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
<option value="AA">Military Americas</option>
<option value="AE">Military Europe/ME/Canada</option>
<option value="AP">Military Pacific</option>
<option value="AB">Alberta</option>
<option value="MB">Manitoba</option>
<option value="BC">British Columbia</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon Territory</option>
</select></div>
<div><label for="comments">Comments</label><input class="form-control" name="comments" type="text" value="" /></div>
<div><input class="btn btn-primary btn-lg btn-block" type="submit" value="Download Now" /></div>
</form>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
html, body {
font-family: 'Roboto Condensed', sans-serif;
}
.navbar-default {
font-size: 1.15em;
font-weight: 400;
background-color: #006b96;
padding: 10px;
border: 0px;
border-radius: 0px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #cbf0ff;
}
.navbar-default .navbar-brand {
color: #002433;
}
.navbar-default .navbar-brand:hover {
color: #ffffff;
text-shadow: 1px -1px 8px #b3e9ff;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
background-color: #004059;
color: white;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #002433;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.dropdown-menu {
background-color: #004059;
color: white;
border: 0px;
border-radius: 2px;
padding-top: 10px;
padding-bottom: 10px;
}
.dropdown-menu>li>a {
background-color: #004059;
color: white;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: #004059;
color:white;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #003246;
}
.navbar{
margin-bottom: 0px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #ffffff;
}
@media (max-width: 767px) {
.dropdown-menu>li>a {
background-color: #006b96;
color: #ffffff;
}
.dropdown-menu>li>a:hover {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
color: #ffffff;
background-color: transparent;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #005577;
}
} /* END Media Query */
.principal {
width: 100%;
min-height: 450px;
background: url('http://www.mindinventory.com/img/android/php-development-bann.png') center center;
background-size: cover;
opacity: 1;
display: table;
width: 100%;
position: relative;
border-radius: 0px;
color: white;
text-transform: uppercase;
margin: 0;
-webkit-clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 85%);
clip-path: url(#poly);
overflow: hidden;
}
.principal h1 {
font-size: 50px;
}
.principal h2 {
font-size: 18px;
margin: 0;
}
#mascara {
position: absolute;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
background: rgba(26,29,37,0.8);
}
.form-container {
background: #fff;
padding: 25px;
border-radius: 3px;
margin-top: -100px;
}
.form-container div {
margin: 20px 0;
}
