You can simply give a margin in the image using margin: 10px
. See:
.img-responsive {
margin: 10px
}
#skill1 {
}
#skill1 img{
width:200px;
background-color:#F60;
float:left;
}
#skill1 p {
text-align:left;
margin-top:5%;
}
.img-responsive {
margin: 10px
}
<div class="row">
<div class="container-fluid">
<div class="col-xs-12 col-sm-12" id="skill1">
<img src="img/html.png" class="img-responsive img-thumbnail">
<p> Até algum tempo atrás, as animações nos sites eram feitas javascript ou flash. Com o surgimento do CSS 3 essa ideia vem mudando.
As animações com CSS dão um show de performance, são mais fluidas e sem travamentos. Como nem tudo são rosas, elas só funcionam em navegadores mais modernos. E aí que se encaixa o Graceful Degradation.
Em navegadores antigos, que não suportam essas animações, apresentamos o mesmo conteúdo, porém de uma maneira diferente sem perder nada em relação à acessibilidade.
</p>
</div>
</div>
</div>
This issue is to answer the question asked in the comments, so that the text stays below the borderless image from the left in cases of smaller screens.
.areaImagem{
float:left;
margin-top:10px;
background: #ccc;
}
.areaImagem img{
display: inline-blcok;
width: 200px;
margin:2%;
vertical-align:top;
}
.areaTexto p{
display: inline-block;
width: 50%;
margin:2%;
vertical-align:top;
}
<div class="row">
<div class="container-fluid">
<div class="col-xs-12 col-sm-12" id="skill1">
<div class="areaImagem">
<img src="img/html.png" class="img-responsive img-thumbnail">
</div>
<div class="areaTexto">
<p class="text"> Até algum tempo atrás, as animações nos sites eram feitas javascript ou flash. Com o surgimento do CSS 3 essa ideia vem mudando.
As animações com CSS dão um show de performance, são mais fluidas e sem travamentos. Como nem tudo são rosas, elas só funcionam em navegadores mais modernos. E aí que se encaixa o Graceful Degradation.
Em navegadores antigos, que não suportam essas animações, apresentamos o mesmo conteúdo, porém de uma maneira diferente sem perder nada em relação à acessibilidade.
</p>
</div>
</div>
</div>
</div>