"Nav Y Red Social"
Bootstrap 3.3.0 Snippet by ashutosh123

<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; } }

Related: See More


Questions / Comments: