Skip to content

Commit

Permalink
Nuevas cosas
Browse files Browse the repository at this point in the history
  • Loading branch information
igbopie committed Feb 22, 2014
1 parent d3e4616 commit a58fd98
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 143 deletions.
Binary file modified .DS_Store
Binary file not shown.
161 changes: 29 additions & 132 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,175 +1,72 @@
h1.title{
font-family: 'Poiret One', cursive;
font-size:70px;
margin-top:20px;
margin-bottom:0px;
font-size:60px;
font-weight:normal;
color:#444;
display:inline;

}
.title-container{
float:left;
}

h1,h2{

text-align:center;
}

h2{
margin-top: 4px;
font-size: 25px;
}
.wrapper{
width:900px;
margin-left:auto;
margin-right:auto;
}
.header{
overflow:auto;
background:white;
position:relative;
z-index:200;
margin-top: 24px;
}
.body{
min-height:400px;
padding-bottom:0px;
position:relative;
}

body{
font-family: 'Gochi Hand', sans-serif;
background:#ffffff;
margin:0px;
padding:0px;
min-width:960px;
overflow-y: visible;


}
html{
margin:0px;
padding:0px;
.container{
margin-top: 20px;
}
/* BEGIN SOCIAL */
.social{
ul.social{
text-align: center;
margin:0px;
padding:0px;
list-style:none;
overflow: auto;
margin-left:auto;
margin-right:auto;
display: block;
padding: 0px;
}
.social li {
overflow: auto;
float:left;
}
.social li a{
margin-top: 25px;
display:block;
width:50px;
height:50px;
background:url(../img/socialicons.png);
font-size: 30px;
color:#aaa;

color:transparent;
margin-left:0px;
margin-right:16px;

}
.social li.twitter a{
background-position: -50px 0px;
transition: all .25s ease-in;

}
.social li.twitter a:hover{
background-position: -50px -50px;
}
.social li.linkedin a{
background-position: -150px 0px;


.social li a:hover{
color:#222;
}
.social li.linkedin a:hover{
background-position: -150px -50px;
color:#4875B4;
}
.social li.facebook a{
background-position: 0px 0px;
.social li.twitter a:hover{
color:#33CCFF;
}
.social li.facebook a:hover{
background-position: 0px -50px;
}
.social li.googleplus a{
background-position: -350px 0px;
}
.social li.googleplus a:hover{
background-position: -350px -50px;
}
.social li.skype a{
background-position: -100px 0px;
}
.social li.skype a:hover{
background-position: -100px -50px;
}
.social li.stackoverflow a{
background-position: -250px 0px;
}
.social li.stackoverflow a:hover{
background-position: -250px -50px;
}
.social li.github a:hover{
background-position: -400px -50px;
}
.social li.github a{
background-position: -400px 0px;
}
.social li.pinterest a:hover{
background-position: -200px -50px;
}
.social li.pinterest a{
background-position: -200px 0px;
color:#3B5998;
}
.social li.youtube a:hover{
background-position: -300px -50px;
color:#FF3333;
}
.social li.youtube a{
background-position: -300px 0px;
}
.iframe-screen{
/*border-radius:10px;
border:10px black solid;
background: black;*/
overflow: auto;
background: url("../img/desktop2.png") center top no-repeat;
width:100%;
height:650px;
position: fixed;


.social li.skype a:hover{
color:#12A5F4;
}

iframe{
border:none;
position:absolute;
z-index: -1;
left:50%;
margin-left: -281px;
width:578px;
top: 60px;
height: 324px;
}

.rounded-me{
width: 400px;
width: 100%;
height: auto;
border-radius: 200px;
}

.left{
float:left;
width: 400px;
}
.right{

margin-left: 20px;

float:right;
width: 480px;
.rounded-me:hover{
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}

31 changes: 20 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,38 @@
})();

</script>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"><!-- Latest compiled and minified CSS -->



</head>
<body>


<div onclick="document.getElementById('iframe').focus()">
<div class="header wrapper">
<div class="left">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-offset-3 col-xs-6">
<img src="img/ignaciobona.jpg" class="rounded-me"/>
</div>
<div class="right">
<div class="col-md-6 col-sm-6">
<h1 class="title">Ignacio Bona</h1>

<ul class="social ">
<li class="linkedin"><a target="_blank" href="http://es.linkedin.com/pub/ignacio-bona-piedrabuena/21/562/46">linkedin</a></li>
<li class="twitter"><a target="_blank" href="https://twitter.com/#!/igbopie">twitter</a></li>
<li class="facebook"><a target="_blank" href="https://www.facebook.com/ignaciobona">facebook</a></li>
<li class="skype"><a target="_blank" href="skype:igbopie?userinfo">skype</a></li>
<li class="github" ><a target="_blank" href="https://github.com/igbopie">github</a></li>
<li class="youtube" ><a target="_blank" href="http://www.youtube.com/user/igbopie">youtube</a></li>
<ul class="social row">
<li class="linkedin col-xs-2"><a target="_blank" href="http://es.linkedin.com/pub/ignacio-bona-piedrabuena/21/562/46"><i class="fa fa-linkedin"></i></a></li>
<li class="twitter col-xs-2"><a target="_blank" href="https://twitter.com/#!/igbopie"><i class="fa fa-twitter"></i></a></li>
<li class="facebook col-xs-2"><a target="_blank" href="https://www.facebook.com/ignaciobona"><i class="fa fa-facebook"></i></a></li>
<li class="skype col-xs-2"><a target="_blank" href="skype:igbopie?userinfo"><i class="fa fa-skype"></i></a></li>
<li class="github col-xs-2" ><a target="_blank" href="https://github.com/igbopie"><i class="fa fa-github"></i></a></li>
<li class="youtube col-xs-2" ><a target="_blank" href="http://www.youtube.com/user/igbopie"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>

</div>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


</body>
</html>

0 comments on commit a58fd98

Please sign in to comment.