¿Alguno sabe cómo ponerle un linear-gradient
al <hr>
?
la clase es skills-hr
y no noto las transparencias, simplemente está blanco como si no se aplicara el estilo.
A parte tengo que revisar Bootstrap y unas cositas, pero el punto principal es que no me aplica el estilo al <hr>
, es un detalle, pero ya lo quiero sacar.
Decidí no agregar más cosas de HTML ya que no vienen al caso y considero que con esto es suficiente para resolver la pregunta, de no ser así pedir el resto.
*{
box-sizing: border-box;
}
h1, h2, h3,p, span{
font-family: 'Montserrat', sans-serif;
}
/*HEADER*/
.header{
display: flex;
margin-top: 80px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 30px;
}
.header-content h1, h3 {
padding: 0 10px;
color: #000000e8;
}
.header-content h3{
width: 50%;
}
/*SERVICIOS*/
.servicios{
text-align: center;
}
.row-serv{
display: grid;
grid-template-columns: 1fr 1fr ;
gap: 20px;
margin: 10px 10px;
}
.row h3{
color: #000;
}
.row p{
text-align: start;
}
.row-left{
padding-top: 10px;
padding-left: 30px;
}
.row-right{
padding-top: 10px;
padding-right: 30px;
}
.dis{
padding-bottom: 5px;
}
.admin{
padding-bottom: 5px;
}
/*SKILLS*/
.skills-container{
height: 100vh;
padding-top: 50px;
background: linear-gradient(#36bed9,#29bad7);
}
.col-xs-12{
text-align: center;
}
.skills-hr{
background: linear-gradient(to right, transparent, #FFFFFF, transparent);
}
img{
width: 10rem;
max-width: 100%;
height: 100%;
}
<div class="skills-container">
<div class="skills">
<div class="row">
<div class="col-xs-12">
<h2>SKILLS</h2>
<hr class="skills-hr"/>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/html.svg" alt="HTML5">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/css.svg" alt="CSS3">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/javascript.png" alt="Javascript">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/bootstrap.svg" alt="Bootstrap">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/jquery.svg" alt="jQuery">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/git.svg" alt="Control de versionado">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/npm.svg" alt="NPM">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/react.svg" alt="React.js">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/firebase.svg" alt="firebase">
</div>
<div class="col-sm-3 col-xs-4 image-container">
<img src="img/bd.png" alt="Bases de datos relacional">
</div>
</div>
</div>
</div>