html, body {
margin:0;
padding:0;
width: 100%;
height:100%;
display: flex;
color: black;
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
}
h1,h2,h3,h4{
font-family: 'Nunito Sans', sans-serif;
}
.contenedor{
display: flex;
flex-wrap: wrap;
width: 100%;
height:100%;
}
& header{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
height: 200px;
position: fixed;
background: rgb(255, 255, 255);
border-bottom: solid 1px rgb(214,230,195);
& img {
width: 150px;
}
& .imgHeader{
width: 30%;
display: flex;
justify-content: center;
}
& .enlHeader{
width: 30%;
display: flex;
justify-content:space-around;
font-size: 30px;
color: rgb(160,106,65);
& a{
font-size: 30px;
color: rgb(160,106,65);
}
}
& .wsHeader{
width: 30%;
display: flex;
justify-content: center ;
& a{
width: 90px;
height: 40px;
background: rgb(174, 206, 80);
display: flex;
justify-content: center ;
align-items: center;
margin: 5px;
color: white;
border-radius: 5px;
font-size: 10px;
}
& i{
font-size: 20px;
}
}
& .btn_menu {
width: 40%;
display: flex;
justify-content: space-around;
align-items: center;
height: 80px;
flex-wrap: wrap;
& a {
color: rgb(160,106,65);
width: auto;
margin: 5px;
display: flex;
}
}
}
main{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
width: 100%;
padding-top: 230px;
& div{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 40%;
background: rgb(252,254,245);
border-radius: 10px;
& .menu{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
& .titulos{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
width: 90%;
height:60px ;
Color: rgb(205, 207, 183);
border-bottom:solid 1px rgb(205, 207, 183);
border-radius: 0px;
& h2{
font-size: 25px;
}
}
& .listaplatos{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
& .plato {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 40%;
margin: 5px ;
padding: 15px;
background: rgb(233, 255, 225);
border-radius: 10px;
& samp {
width: 100%;
text-align: center;
}
& .titulo{
font-size: 20px;
color: rgb(205,207,183);
padding: 5px;
}
& .descripcion{
padding: 5px;
}
& .precio{
font-size: 15px;
& .divisa{
font-size: 12px;
}
}
}
& .agrandar{
background: rgba(0, 0, 0, 0.5);
top: 0;
display: none;
position: fixed;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
& div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: rgb(214, 230, 195);
height: 50%;
& img {
object-fit: contain;
width: 50%;
}
& .plato {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 40%;
height: 130px;
margin: 5px ;
padding: 15px;
border-radius: 10px;
& samp {
width: 100%;
text-align: center;
}
& .titulo{
font-size: 25px;
padding: 5px;
color: rgb(160,106,65);
}
& .descripcion{
padding: 5px;
font-size: 15px;
}
& .precio{
font-size: 20px;
color: rgb(252,254,245);
& .divisa{
font-size: 12px;
}
}
}
}
}
}
}
}
}
@media (max-width:1379px){
& header{
height: 150px;
font-size: 15px;
& img {
width: 80px;
}
& .imgHeader{
width: 30%;
display: flex;
justify-content: center;
}
& .enlHeader{
font-size: 30px;
color: rgb(160,106,65);
& a{
font-size: 20px;
color: rgb(160,106,65);
}
}
& .wsHeader{
width: 30%;
display: flex;
justify-content: center ;
& a{
font-size: 10px;
}
& i{
font-size: 20px;
}
}
& .btn_menu {
width: 90%;
flex-wrap: wrap;
justify-content: space-around;
}
}
main{
padding-top: 150px;
& div{
width: 95%;
background: rgb(252,254,245);
border-radius: 10px;
& .menu{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
& .listaplatos{
& .plato {
width: 35%;
}
& .agrandar{
& div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items:center;
background: rgb(214, 230, 195);
height: 80%;
& img {
object-fit: contain;
width: 35%;
}
& .plato {
width: 40%;
height: auto;
& samp {
width: 100%;
text-align: center;
}
& .titulo{
font-size: 20px;
}
& .descripcion{
padding: 5px;
font-size: 13px;
}
& .precio{
font-size: 15px;
color: rgb(252,254,245);
& .divisa{
font-size: 12px;
}
}
}
}
}
}
}
}
}
}
@media (max-width:1000px){
& header{
height: 150px;
font-size: 15px;
& img {
width: 80px;
}
& .imgHeader{
width: 30%;
display: flex;
justify-content: center;
}
& .enlHeader{
font-size: 30px;
color: rgb(160,106,65);
& a{
font-size: 20px;
color: rgb(160,106,65);
}
}
& .wsHeader{
width: 30%;
display: flex;
justify-content: center ;
& a{
font-size: 10px;
}
& i{
font-size: 20px;
}
}
& .btn_menu {
width: 90%;
flex-wrap: wrap;
justify-content: space-around;
}
}
main{
padding-top: 150px;
& div{
width: 95%;
background: rgb(252,254,245);
border-radius: 10px;
& .menu{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
& .listaplatos{
& .plato {
width: 35%;
}
& .agrandar{
& div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items:center;
background: rgb(214, 230, 195);
height: 80%;
& img {
object-fit: contain;
width: 35%;
}
& .plato {
width: 40%;
height: auto;
& samp {
width: 100%;
text-align: center;
}
& .titulo{
font-size: 20px;
}
& .descripcion{
padding: 5px;
font-size: 13px;
}
& .precio{
font-size: 15px;
color: rgb(252,254,245);
& .divisa{
font-size: 12px;
}
}
}
}
}
}
}
}
}
}
@media (max-width:800px){
& header{
& img {
}
& .imgHeader{
}
& .enlHeader{
& a{
}
}
& .wsHeader{
& a{
}
& i{
}
}
& .btn_menu {
}
}
main{
& div{
& .menu{
& .listaplatos{
& .plato {
width: 35%;
}
& .agrandar{
& div {
& img {
width: 90%;
height: 50%;
}
& .plato {
width: 90%;
height: 40%;
& samp {
}
& .titulo{
}
& .descripcion{
}
& .precio{
& .divisa{
}
}
}
}
}
}
}
}
}
}