Skip to content

Commit

Permalink
Update estilos.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@BURDOTATTOO
BURDOTATTOO authored Apr 27, 2024
1 parent cbced9c commit 6249232
Showing 1 changed file with 232 additions and 65 deletions.
297 changes: 232 additions & 65 deletions css/estilos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,95 +211,262 @@ body{





/* Estilos comunes */
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgb(1, 1, 53);
padding: 1rem;
opacity: 70%;
body {
font-family: 'Sintony';
color: #0a0000;
font-size: 12px;
background: #fafafa;
line-height: 1;
}
*, *:before, *:after {
box-sizing: border-box;
}
/** * Eric Meyer's Reset CSS v2.0 (https://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header h2 {
margin: 25px 10px;
font-size: 28px;
text-align: center;
color: cornsilk;
}
.container {
margin: 10px auto;
display: table;
max-width: 1140px;
width: 100%;
}
.container:after, .container:before {
content: "" clear both;
}
nav.menu {
background: #0a0155;
position: relative;
min-height: 45px;
height: 100%;
}

/* Estilos móvil/celular */
@media all and (max-width: 700px) {
.menu > ul > li {
list-style: none;
display: inline-block;
color: #fff;
line-height: 45px;

}
.menu > ul li a, .xs-menu li a {
text-decoration: none;
color: #fff;
display:block;
padding: 0px 24px;
}
.menu > ul li a:hover {
background: #01c0c0;
color: #fff;
transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
}
.active{
background:rgb(1, 169, 175)202 !important;

}
.displaynone{
display: none;
}
.xs-menu-cont{
display:none;
}
.xs-menu-cont > a {
background: none repeat scroll 0 0 #0a0155;
border-radius: 3px;
padding: 3px 6px;
display: block;
border-bottom:1px solid #000000;
box-shadow: 0 1px 2px #000000;
-webkit-box-shadow: 0 1px 2px #000000;
-moz-box-shadow: 0 1px 2px #000000;
}
.xs-menu-cont > a:hover{
cursor: pointer;
}

.xs-menu li {
color:#0a0155;
padding: 14px 30px;
border-bottom: 1px solid #ccc;
background: #0a0155;

/* Oculta el nav en la parte izquiera */
.nav {
position: fixed;
top: 0;
}
.xs-menu a{
text-decoration:none;
}

.mega-menu {
background: none repeat scroll 0 0 rgba(10, 0, 65, 0.94);
left: 0;
right: 0;
bottom: 0;
background: rgb(1, 1, 53);
transform: translateX(-100vw);
transition: 0.5s;
}
margin-top: 3px;
position: absolute;
width: 100%;
padding:15px;
display:none;
transition-duration: 0.9s;

}
#menutoggle i {
color: #fff;
font-size: 33px;
margin: 0;
padding: 0;
}

/* Muestra el nav */
.nav--show {
transform: translateX(0);
}

.nav__button {
text-align: right;
margin: 1rem;
}
/*--column--*/
.mm-6column:after, .mm-6column:before, .mm-3column:after, .mm-3column:before{
content:"";
display:table;
clear:both;

.nav__ul {
list-style: none;
padding: 0;
margin: 0;
}

.nav__link {
}
.mm-6column, .mm-3column {
float: left;
position: relative;
}
.mm-6column {
width: 50%;
}
.mm-3column {
width: 25%;
}
.responsive-img {
display: block;
max-width: 100%;

}
.left-images{
margin-right:25px;
}
.left-images, .left-categories-list {
float: left;
}
.categories-list li {
display: block;
padding: 1rem;
font-size: 1.5rem;
text-align: center;
text-decoration: none;
color: rgb(255, 255, 255);
}
line-height: normal;
margin: 0;
padding: 5px 0;
}
.categories-list li :hover{
background:inherit !important;
}
.left-images > p {
background: none repeat scroll 0 0 #015652;
display: block;
font-size: 18px;
line-height: normal;
margin: 0;
padding: 5px 14px;
}
.categories-list span {
font-size: 18px;
padding-bottom: 5px;
text-transform: uppercase;
}
.mm-view-more{
background: none repeat scroll 0 0 #004749;
color: #fff;
display: inline !important;
line-height: normal;
padding: 5px 8px !important;
margin-top:10px;
}
.display-on{
display:block;
transition-duration: 0.9s;
}
.drop-down > a:after{
content:"\f103";
color:#fff;
font-family: FontAwesome;
font-style: normal;
margin-left: 5px;


/* Estilos Escritorio */
@media all and (min-width: 701px) {
}
/*MediaQuerys*/
@media (max-width: 600px) {
.menu {
display:none;
}
.xs-menu li a {

padding:0px;
}
.xs-menu-cont{
display:block ;
}
}

/* Oculta botón de abrir o cerrar */
.nav__button,
.header__button-nav--open {
display: none;

/*Animation--*/

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}

/* Adapta el nav en horizontal */
.nav__ul {
display: flex;
list-style: none;
padding: 0;
100% {
opacity: 1;
}
}

.nav__link {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
color: rgb(255, 255, 255);
transition: 0.5s;
@keyframes fadeIn {
0% {
opacity: 0;
}

.nav__link:hover {
opacity: 0.5;
100% {
opacity: 1;
}
}










.centrado {

display: flex;
Expand Down

0 comments on commit 6249232

Please sign in to comment.