<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 ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<html lang="en">
<head>
<meta charset="utf-8">
<title>YONY GUTIERREZ CAMPOS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand navbar-link" href="#"><i class="material-icons">SISTEMAS</i></a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Menu</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li role="#"><a href="#">Principal </a></li>
<li role="#"><a href="#">Contactos </a></li>
<li role="#"><a href="#">Conocenos </a></li>
<li role="#"><a href="#">Portafolios</a></li>
<li role="#"><a href="#">Foros </a></li>
<li role="#"><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Pagina Ejemplo</h1>
<p>Yony Gutierrez </p>
</div>
<div class="col-md-2 col-md-offset-4 col-xs-8 col-xs-offset-2">
<button class="btn btn-primary btn-block" type="button">lima</button>
</div>
<div class="col-lg-offset-0 col-md-2 col-md-offset-0 col-sm-offset-2 col-xs-8 col-xs-offset-2">
<button class="btn btn-danger btn-block" type="button">Peru</button>
</div>
</div>
</div>
</header>
<nav class="social"><br><br>
<ul>
<li><a href="ref"><i class="fab fa-facebook"></i><b>Facebook</b></a></li>
<li><a href="ref"><i class="fab fab fa-twitter"></i><b>Twitter</b></a></li>
<li><a href="ref"><i class="fab fa-google-plus"></i><b>Google +</b></a></li>
<li><a href="callto://51989882021"><i class="fas fa-phone"></i><b>Telefono </b></a></li>
<li><a href="ref"><i class="fab fa-youtube"></i><b>YouTube</b></a></li>
<li><a href="sms:989882021"><i class="fas fa-envelope-square"></i><b>Mensajes</b></a></li>
<li><a href="ref"><i class="fab fa-whatsapp"></i><b>whatsapp</b></a></li>
<li><a href="mailto:jhonigc23@gmail.com"><i class="fas fa-envelope"></i><b>Correo</b></a></li>
</ul>
</nav>
</body>
</html>
.social {
position: fixed;
top: 20px;
right:0px;
}
.social ul {
padding: 0px;
-webkit-transform: translate(270px, 0);
-moz-transform: translate(270px, 0);
-ms-transform: translate(270px, 0);
-o-transform: translate(270px, 0);
transform: translate(270px, 0);
}
.social ul li {
display: block;
margin: 3px;
background: #00abf0;
width: 300px;
text-align: left;
padding: 5px;
-webkit-border-radius: 30px 0 0 30px;
-moz-border-radius: 30px 0 0 30px;
border-radius: 30px 0 0 30px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li:hover {
-webkit-transform: translate(-110px, 0);
-moz-transform: translate(-110px, 0);
-ms-transform: translate(-110px, 0);
-o-transform: translate(-110px, 0);
transform: translate(-110px, 0);
background: #00abf0;
}
.social ul li:hover a {
color: #fff;
}
.social ul li:hover i {
color: #fff;
background: #00abf0;
}
.social ul li i {
margin-right: 10px;
color: #00abf0;
background: #fff;
padding: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
background: #ffffff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
header {
height:100vh;
background-image:url('http://barbaracortes.com/wp-content/uploads/2016/11/8.jpg');
background-size:cover;
background-position:center center;
background-attachment:fixed;
font-family:'Arial';
}
@media (max-width:767px) {
header {
background-attachment:inherit;
}
}
header .row {
margin-top:30vh;
}
header h1 {
text-align:center;
color:#fff;
text-shadow:1px 1px 1px #000;
font-size:91px;
}
@media (max-width:767px) {
header h1 {
text-align:center;
color:#fff;
text-shadow:1px 1px 1px #000;
font-size:61px;
}
}
header p {
text-align:center;
color:#fff;
text-shadow:1px 1px 1px #000;
font-size:41px;
letter-spacing:5px;
margin-bottom:50px;
}
@media (max-width:767px) {
header p {
text-align:center;
color:#fff;
text-shadow:1px 1px 1px #000;
font-size:27px;
letter-spacing:5px;
margin-bottom:50px;
}
}
.navbar-default {
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 0 rgba(224, 28, 28, 0), 0 1px 5px rgba(2, 1, 1, 0.075);
box-shadow: inset 0 1px 0 rgba(230, 14, 14, 0), 0 1px 5px rgb(0, 51, 102);
background: #00abf0;
}
.navbar-brand .material-icons {
color:#fff;
text-shadow:1px 1px 1px #000;
}
.navbar-default .navbar-nav > li > a {
color:#fff;
text-shadow:1px 1px 1px #fff;
}
header .btn {
font-size:21px;
background:#00abf0;
letter-spacing:3px;
}
@media (max-width:767px) {
header .btn {
font-size:21px;
background:rgba(0,0,0,0.247059);
letter-spacing:3px;
margin-bottom:14px;
}
}
