<div class="container">
<div class="nav-bar">
<ul>
<li>
<div>
<svg version="1.1" id="svg-noticias" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 455.005 455.005" style="enable-background:new 0 0 455.005 455.005;" xml:space="preserve">
<g>
<path d="M446.158,267.615c-5.622-3.103-12.756-2.421-19.574,1.871l-125.947,79.309c-3.505,2.208-4.557,6.838-2.35,10.343
c2.208,3.505,6.838,4.557,10.343,2.35l125.947-79.309c2.66-1.675,4.116-1.552,4.331-1.432c0.218,0.12,1.096,1.285,1.096,4.428
c0,8.449-6.271,19.809-13.42,24.311l-122.099,76.885c-6.492,4.088-12.427,5.212-16.284,3.084c-3.856-2.129-6.067-7.75-6.067-15.423
c0-19.438,13.896-44.61,30.345-54.967l139.023-87.542c2.181-1.373,3.503-3.77,3.503-6.347s-1.323-4.974-3.503-6.347L184.368,50.615
c-2.442-1.538-5.551-1.538-7.993,0L35.66,139.223C15.664,151.815,0,180.188,0,203.818v4c0,23.63,15.664,52.004,35.66,64.595
l209.292,131.791c3.505,2.207,8.136,1.154,10.343-2.35c2.207-3.505,1.155-8.136-2.35-10.343L43.653,259.72
C28.121,249.941,15,226.172,15,207.818v-4c0-18.354,13.121-42.122,28.653-51.902l136.718-86.091l253.059,159.35l-128.944,81.196
c-20.945,13.189-37.352,42.909-37.352,67.661c0,13.495,4.907,23.636,13.818,28.555c3.579,1.976,7.526,2.956,11.709,2.956
c6.231,0,12.985-2.176,19.817-6.479l122.099-76.885c11.455-7.213,20.427-23.467,20.427-37.004
C455.004,277.119,451.78,270.719,446.158,267.615z"/>
<path d="M353.664,232.676c2.492,0,4.928-1.241,6.354-3.504c2.207-3.505,1.155-8.136-2.35-10.343l-173.3-109.126
c-3.506-2.207-8.136-1.154-10.343,2.35c-2.207,3.505-1.155,8.136,2.35,10.343l173.3,109.126
C350.916,232.303,352.298,232.676,353.664,232.676z"/>
<path d="M323.68,252.58c2.497,0,4.938-1.246,6.361-3.517c2.201-3.509,1.14-8.138-2.37-10.338L254.46,192.82
c-3.511-2.202-8.139-1.139-10.338,2.37c-2.201,3.51-1.14,8.138,2.37,10.338l73.211,45.905
C320.941,252.21,322.318,252.58,323.68,252.58z"/>
<path d="M223.903,212.559c-3.513-2.194-8.14-1.124-10.334,2.39c-2.194,3.514-1.124,8.14,2.39,10.334l73.773,46.062
c1.236,0.771,2.608,1.139,3.965,1.139c2.501,0,4.947-1.251,6.369-3.529c2.194-3.514,1.124-8.14-2.39-10.334L223.903,212.559z"/>
<path d="M145.209,129.33l-62.33,39.254c-2.187,1.377-3.511,3.783-3.503,6.368s1.345,4.983,3.54,6.348l74.335,46.219
c1.213,0.754,2.586,1.131,3.96,1.131c1.417,0,2.833-0.401,4.071-1.201l16.556-10.7c3.479-2.249,4.476-6.891,2.228-10.37
c-2.248-3.479-6.891-4.475-10.37-2.228l-12.562,8.119l-60.119-37.38l48.2-30.355l59.244,37.147l-6.907,4.464
c-3.479,2.249-4.476,6.891-2.228,10.37c2.249,3.479,6.894,4.476,10.37,2.228l16.8-10.859c2.153-1.392,3.446-3.787,3.429-6.351
c-0.018-2.563-1.344-4.94-3.516-6.302l-73.218-45.909C150.749,127.792,147.647,127.795,145.209,129.33z"/>
<path d="M270.089,288.846c2.187-3.518,1.109-8.142-2.409-10.329l-74.337-46.221c-3.518-2.188-8.143-1.109-10.329,2.409
c-2.187,3.518-1.109,8.142,2.409,10.329l74.337,46.221c1.232,0.767,2.601,1.132,3.953,1.132
C266.219,292.387,268.669,291.131,270.089,288.846z"/>
<path d="M53.527,192.864c-2.187,3.518-1.109,8.142,2.409,10.329l183.478,114.081c1.232,0.767,2.601,1.132,3.953,1.132
c2.506,0,4.956-1.256,6.376-3.541c2.187-3.518,1.109-8.142-2.409-10.329L63.856,190.455
C60.338,188.266,55.714,189.346,53.527,192.864z"/>
</g>
</svg>
<span>Noticias</span>
</div>
</li>
<li>
<div>
<svg version="1.1" id="svg-tareas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 465 465" style="enable-background:new 0 0 465 465;" xml:space="preserve">
<g>
<path d="M390.624,50.379H349.63c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h33.494V450H81.876V65.379h33.494
c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5H74.376c-4.143,0-7.5,3.357-7.5,7.5V457.5c0,4.143,3.357,7.5,7.5,7.5h316.248
c4.143,0,7.5-3.357,7.5-7.5V57.879C398.124,53.736,394.767,50.379,390.624,50.379z"/>
<path d="M145.37,88.415h124.879c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5H152.87v-25.39c0-3.127,2.544-5.671,5.671-5.671
h46.604c4.143,0,7.5-3.357,7.5-7.5C212.645,23.906,221.552,15,232.5,15s19.855,8.906,19.855,19.854c0,4.143,3.357,7.5,7.5,7.5
h46.604c3.127,0,5.671,2.544,5.671,5.671v25.39h-11.881c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h19.381
c4.143,0,7.5-3.357,7.5-7.5v-32.89c0-11.398-9.272-20.671-20.671-20.671h-39.916C263.104,11.728,249.146,0,232.5,0
s-30.604,11.728-34.043,27.354h-39.916c-11.398,0-20.671,9.272-20.671,20.671v32.89C137.87,85.058,141.228,88.415,145.37,88.415z"
/>
<path d="M145.37,418.483h36c4.143,0,7.5-3.357,7.5-7.5v-36c0-4.143-3.357-7.5-7.5-7.5h-36c-4.143,0-7.5,3.357-7.5,7.5v36
C137.87,415.126,141.228,418.483,145.37,418.483z M152.87,382.483h21v21h-21V382.483z"/>
<path d="M319.63,385.483H211.37c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h108.26c4.143,0,7.5-3.357,7.5-7.5
S323.772,385.483,319.63,385.483z"/>
<path d="M145.37,335.966h36c4.143,0,7.5-3.357,7.5-7.5v-36c0-4.143-3.357-7.5-7.5-7.5h-36c-4.143,0-7.5,3.357-7.5,7.5v36
C137.87,332.608,141.228,335.966,145.37,335.966z M152.87,299.966h21v21h-21V299.966z"/>
<path d="M319.63,302.966H211.37c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h108.26c4.143,0,7.5-3.357,7.5-7.5
S323.772,302.966,319.63,302.966z"/>
<path d="M145.37,253.449h36c4.143,0,7.5-3.357,7.5-7.5v-36c0-4.143-3.357-7.5-7.5-7.5h-36c-4.143,0-7.5,3.357-7.5,7.5v36
C137.87,250.092,141.228,253.449,145.37,253.449z M152.87,217.449h21v21h-21V217.449z"/>
<path d="M319.63,220.449H211.37c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h108.26c4.143,0,7.5-3.357,7.5-7.5
S323.772,220.449,319.63,220.449z"/>
<path d="M145.37,170.932h36c4.143,0,7.5-3.357,7.5-7.5v-36c0-4.143-3.357-7.5-7.5-7.5h-36c-4.143,0-7.5,3.357-7.5,7.5v36
C137.87,167.574,141.228,170.932,145.37,170.932z M152.87,134.932h21v21h-21V134.932z"/>
<path d="M319.63,137.932H211.37c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h108.26c4.143,0,7.5-3.357,7.5-7.5
S323.772,137.932,319.63,137.932z"/>
</g>
</svg>
<span>Tareas</span>
</div>
</li>
<li class="active">
<div>
<svg version="1.1" id="svg-fotografias" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 464.303 464.303" style="enable-background:new 0 0 464.303 464.303;" xml:space="preserve">
<g>
<path d="M415.641,97.703h-9.372V21.698c0-4.143-3.357-7.5-7.5-7.5H288.103c-4.143,0-7.5,3.357-7.5,7.5v76.005h-43.441
c-25.216,0-32.661,8.31-48.976,26.517c-3.844,4.29-8.139,9.083-13.401,14.646h-11.706V122.08c0-8.822-7.178-15.999-16-15.999
H91.724c-8.822,0-15.999,7.177-15.999,15.999v16.785H63.45c-34.986,0-63.45,28.464-63.45,63.45v194.941
c0,14.13,5.354,27.381,15.074,37.312c9.806,10.019,22.974,15.536,37.077,15.536h359.303c29.141,0,52.849-23.707,52.849-52.848
V146.365C464.303,119.533,442.473,97.703,415.641,97.703z M295.603,29.198h95.666v38h-95.666V29.198z M295.603,82.198h95.666
v15.505h-95.666V82.198z M90.725,122.08c0-0.551,0.448-0.999,0.999-0.999h55.354c0.552,0,1,0.448,1,0.999v16.785H90.725V122.08z
M63.45,153.865c26.716,0,48.451,21.734,48.451,48.45s-21.735,48.451-48.451,48.451S15,229.031,15,202.315
S36.734,153.865,63.45,153.865z M449.303,397.257c0,20.869-16.979,37.848-37.849,37.848H52.151
C31.318,435.104,15,418.479,15,397.257V243.222c11.648,13.775,29.041,22.545,48.45,22.545c19.41,0,36.803-8.77,48.451-22.545
v169.383c0,4.143,3.357,7.5,7.5,7.5s7.5-3.357,7.5-7.5V202.315c0-19.41-8.77-36.802-22.545-48.45h73.642
c2.045,0,4.001-0.835,5.415-2.311c6.46-6.742,11.718-12.609,15.942-17.324c15.967-17.819,19.289-21.527,37.805-21.527h50.941
h110.666h16.872c18.562,0,33.662,15.101,33.662,33.662V397.257z"/>
<path d="M288.103,142.903c-72.233,0-131,58.767-131,131s58.767,131,131,131s131-58.767,131-131S360.336,142.903,288.103,142.903z
M288.103,389.903c-63.963,0-116-52.037-116-116s52.037-116,116-116s116,52.037,116,116S352.065,389.903,288.103,389.903z"/>
<path d="M288.102,172.903c-55.691,0-101,45.309-101,101s45.309,101,101,101s101-45.309,101-101S343.793,172.903,288.102,172.903z
M288.102,359.903c-47.421,0-86-38.579-86-86s38.579-86,86-86s86,38.579,86,86S335.522,359.903,288.102,359.903z"/>
<path d="M313.647,266.403c-4.143,0-7.5,3.357-7.5,7.5c0,9.95-8.095,18.045-18.045,18.045s-18.046-8.095-18.046-18.045
s8.096-18.045,18.046-18.045c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5c-18.222,0-33.046,14.824-33.046,33.045
s14.824,33.045,33.046,33.045c18.221,0,33.045-14.824,33.045-33.045C321.147,269.761,317.79,266.403,313.647,266.403z"/>
<path d="M63.45,235.767c18.444,0,33.45-15.006,33.45-33.451c0-18.444-15.006-33.45-33.45-33.45S30,183.871,30,202.315
C30,220.761,45.006,235.767,63.45,235.767z M63.45,183.865c10.174,0,18.45,8.276,18.45,18.45s-8.276,18.451-18.45,18.451
S45,212.489,45,202.315S53.276,183.865,63.45,183.865z"/>
</g>
</svg>
<span>Fotografías</span>
</div>
</li>
<li>
<div>
<svg version="1.1" id="svg-television" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 455 455" style="enable-background:new 0 0 455 455;" xml:space="preserve">
<g>
<path d="M382.5,160c-17.921,0-32.5,14.58-32.5,32.5s14.579,32.5,32.5,32.5s32.5-14.58,32.5-32.5S400.421,160,382.5,160z M382.5,210
c-9.649,0-17.5-7.851-17.5-17.5s7.851-17.5,17.5-17.5s17.5,7.851,17.5,17.5S392.149,210,382.5,210z"/>
<path d="M382.5,240c-17.921,0-32.5,14.58-32.5,32.5s14.579,32.5,32.5,32.5s32.5-14.58,32.5-32.5S400.421,240,382.5,240z M382.5,290
c-9.649,0-17.5-7.851-17.5-17.5s7.851-17.5,17.5-17.5s17.5,7.851,17.5,17.5S392.149,290,382.5,290z"/>
<path d="M407.5,400h-50c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h50c4.143,0,7.5-3.358,7.5-7.5S411.643,400,407.5,400z"/>
<path d="M407.5,370h-50c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h50c4.143,0,7.5-3.358,7.5-7.5S411.643,370,407.5,370z"/>
<path d="M407.5,340h-50c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h50c4.143,0,7.5-3.358,7.5-7.5S411.643,340,407.5,340z"/>
<path d="M427.5,120H209.159l51.71-95.148c6.029-0.887,10.676-6.08,10.676-12.352c0-6.893-5.607-12.5-12.5-12.5
s-12.5,5.607-12.5,12.5c0,1.853,0.416,3.607,1.143,5.19L192.086,120h-31.079L105.402,17.69c0.727-1.583,1.143-3.337,1.143-5.19
c0-6.893-5.607-12.5-12.5-12.5s-12.5,5.607-12.5,12.5c0,6.272,4.648,11.464,10.677,12.352L143.934,120H27.5
C12.336,120,0,132.336,0,147.5v280C0,442.664,12.336,455,27.5,455h400c15.163,0,27.5-12.336,27.5-27.5v-280
C455,132.336,442.663,120,427.5,120z M440,427.5c0,6.893-5.607,12.5-12.5,12.5h-400c-6.893,0-12.5-5.607-12.5-12.5v-280
c0-6.893,5.607-12.5,12.5-12.5h129.031c0.007,0,0.015,0.001,0.022,0.001c0.008,0,0.016-0.001,0.024-0.001h39.938
c0.008,0,0.016,0.001,0.024,0.001c0.007,0,0.015-0.001,0.022-0.001H427.5c6.893,0,12.5,5.607,12.5,12.5V427.5z"/>
<path d="M295.288,186.301C273.339,169.832,231.175,160,182.5,160s-90.839,9.832-112.789,26.301
c-16.584,12.442-27.284,42.286-29.358,81.878c-2.17,41.436,5.903,95.697,28.756,116.916C92.856,407.144,143.253,415,182.5,415
s89.644-7.856,113.39-29.905c8.923-8.284,16.072-21.94,21.251-40.588c1.108-3.991-1.229-8.125-5.22-9.233
c-3.997-1.109-8.125,1.229-9.233,5.22c-4.362,15.71-10.242,27.332-17.004,33.609C268.741,389.834,228.239,400,182.5,400
s-86.241-10.166-103.185-25.897c-16.032-14.886-26.342-60.085-23.982-105.139c1.813-34.624,10.554-61.041,23.38-70.665
C97.868,183.928,137.637,175,182.5,175s84.632,8.928,103.786,23.299c18.288,13.721,27.929,63.492,21.949,113.307
c-0.494,4.113,2.439,7.847,6.553,8.341c4.104,0.486,7.846-2.44,8.34-6.553C328.762,266.469,322.452,206.681,295.288,186.301z"/>
</g>
</svg>
<span>Televisión</span>
</div>
</li>
</ul>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="old-goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
<filter id="fancy-goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
</div>*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
.container{
max-width: 40rem;
margin: 0 auto;
background: linear-gradient(to top right, #f01d39, #fa2d6e);
height: 34rem;
border-radius: 0 0 50px 50px;
overflow: hidden;
position: relative;
box-shadow: 0 20px 35px 0 rgba(240, 29, 57, 0.5);
}
.nav-bar{
background: #fff;
width: 100%;
height: 7rem;
position: absolute;
left: 0;
bottom: 0;
filter: url("#fancy-goo");
}
.nav-bar svg{
height: 3rem;
margin-bottom: 4px;
position: relative;
z-index: 10;
transition: all .4s;
display: inline-block;
}
.nav-bar ul{
display: flex;
height: 100%;
}
.nav-bar ul li{
height: 100%;
text-align: center;
list-style: none;
align-items: center;
display: flex;
cursor: pointer;
justify-content: center;
flex-wrap: wrap;
position: relative;
flex: 1;
}
.nav-bar ul li span{
font-weight: 600;
width: 100%;
display: block;
text-align: center;
transition: all .22s;
}
.nav-bar ul li:after{
width: 50%;
height: 50%;
border-radius: 100%;
content: '';
left: 0;
right: 0;
margin: 0 auto;
top: 0;
z-index: 0;
position: absolute;
background: #fff;
transition: all .4s;
}
.nav-bar ul li:hover:after{
transform: translate3d(0, -15%, 0);
}
.nav-bar ul li.active:after{
transform: translate3d(0, -40%, 0);
}
.nav-bar ul li.active span,
.nav-bar ul li:hover span{
color: #f01d39;
}
.nav-bar ul li.active svg{
transform: scale(1.12) translate3d(0, -10px, 0);
}
.nav-bar ul li:not(.active):hover svg{
transform: scale(1.049) translate3d(0, -4px, 0);
}
.nav-bar ul li svg path{
transition: all .4s;
}
.nav-bar ul li:hover svg path,
.nav-bar ul li.active svg path{
fill: #f01d39;
}
@media screen and (max-width: 400px){
.nav-bar svg{
height: 1.5rem;
}
.nav-bar ul li span{
font-size: .75rem;
font-weight: 500;
}
.nav-bar ul li.active:after{
transform: translate3d(0, -25%, 0);
}
}let menuItems = document.querySelectorAll('.nav-bar ul li');
const navItemClick = function(el) {
let element = this;
menuItems.forEach(item => {
item.classList.remove('active');
});
element.classList.add('active');
}
menuItems.forEach(item => {
item.addEventListener('click', navItemClick);
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.