Pág.

1 Taller de Programación Web “Proyecto final”

:root{ margin: 1em auto;

--l: 24px; }
--m: 16px; /* HOME MENU*/
--s: 4px; .menu{
--jmpcolor: hsl(130,40%,50%); background: var(--jmpcolor) ;
--jmptext:hsl(0,40%,50%); padding: 0.5em;
--gris: #848484; }
--texto: #444; .menu ul{
--line: #E6E6E6; display: flex;
} justify-content: center;
/* BASE (SMACSS)*/ flex-wrap: wrap;
a { margin: 0 0 0 auto;
color: var(--jmpcolor); list-style: none;
} padding: 0;
body{ }
line-height: 1.5; .menu a{
color: var(--texto); text-transform: uppercase;
} font-size: 1em;
/*LAYOUT*/ color: #fff;
.main-sidebar{ line-height: 2em;
margin-top: 2em; }
} .menu{
.main-content{ margin-left: auto;
padding: 1em; }
} .menu li{
@media (min-width: 768px) { margin: var(--s);
.main-content{ }
display: flex;
margin-right: 1em; @media (min-width: 640px) {
} .menu li{
.main-sidebar{ margin: 0 1.5em;
width: 30%; }
margin-left: 1em; }
} /* pantalla grande*/
main{ @media (min-width: 1200px) {
width: 70%; .menu{
} background: none;
} }
@media (min-width: 1200px) { .menu li{
.main-content{ margin: 0 1em;
max-width: 1200px; }
margin: auto; .menu a{
} color: var(--jmpcolor);
} display: block;
.logo{ line-height: 2.5em;
width: 140px; padding: 0 1em
display: block; }
 Pág. 2 Taller de Programación Web “Proyecto final”

.menu a:hover, .menu a.active { }

background: var(-- }
jmpcolor); .siguenos{
color: #fff;
text-decoration: none; padding-top: 1em;
} }
.main-header{ .siguenos a{
max-width: 1200px; font-size: .9em;
margin: auto; display: block;
display: flex; }
align-content: center; .siguenos a:before{
padding: 1em; display: inline-block;
} margin-right: .3em;
.logo-container{ }
margin-left: auto; /* Front page*/
} .inicio main{
} width: 100%;
/* fin pantalla grande*/ }
.inicio .main-sidebar{
/* END MENU*/ display: none;
main{ }
text-align: justify;
}
h1{
color: var(--jmpcolor)
}
footer{
background: var(--gris);
color: #ddd;
padding: 1em;
margin-top: 3em;
text-align: center;
}
footer a{
color: #fff;
display: flex;
justify-content: space-around;
}

@media (min-width: 768px) {

.main-footer .siguenos {
display: flex;
justify-content: space-around;
}
.siguenos{
border-top: none;
padding-top: 0;