No logro hacer que el color que tiene mi menu a los lados sea #f2f2f2
, sigue siendo blanco y no se que valor modificar. Intente hacer un div
a todo el menu y modificarlo pero no funciona es igual, solo quiero modificar el color de el borde derecho e izquierdo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sitio Web</title>
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<img src="imagenes/Logotipo.png" class="img-logo">
<input type="checkbox" id="check">
<label for="check" class="icon-menu"></label>
<nav class="menu">
<ul>
<li><a href="#" style="background: #df6666; color: white;">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">trabajos</a></li>
</ul>
</nav>
</header>
<main>
<div class="content-one">
<div class="content-portada">
<div class="content-text">
<h4>It Doesn´t Take a Rocket <h3>Scientist</h3> </h4>
<h2>IT TAKES A DESIGNER</h2>
</div>
</div>
</div>
<div class="content-two">
<div class="content-details">
<div class="content-item2">
<label class="icon-heart"></label>
<h4>Desing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
</div>
<div class="content-item2">
<label class="icon-laptop"></label>
<h4>Bootstrap</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
</div>
<div class="content-item2">
<label class="icon-support"></label>
<h4>Support</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
</div>
</div>
</div>
<div class="content-three">
<div class="content-module">
<h3>LATEST WORKS</h3>
<img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
<img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
<img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
</div>
</div>
</main>
</body>
</html>
El código css del menú es este:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial;
}
.c{
background: #f2f2f2;
}
header{
width: 98%;
height: 60px;
background: #1e1e1e;
position: fixed;
z-index: 1;
margin-left: 1%;
margin-right: 1%;
}
.img-logo{
width: 60px;
margin-left: 10%;
padding: 10px;
}
.img-logo:hover{
cursor: pointer;
}
#check{
display:none;
}
.icon-menu{
display:none;
}
.menu{
width: auto;
float: right;
margin-top: 19px;
margin-right: 7%;
}
.menu ul{
display: flex;
}
.menu ul li{
list-style: none;
}
.menu ul li a{
padding: 10px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
color: #b7b7b7;
}
.menu li a:hover{
color: white;
}
@media screen and (max-width:900px){
.icon-menu{
display: block;
color:white;
float: right;
padding: 5px;
font-size: 24px;
border: 1px solid #7a7a7a;
border-radius: 5px;
margin-top: 10px;
margin-right: 16px;
}
.menu{
float: left;
margin-top: -4px;
width: 100%;
background: #1e1e1e;
height: 0px;
overflow: hidden;/*con este solo se mostrara lo que tenga en altura*/
transition: all 300ms;
}
.icon-menu:hover{
background: #3f3f3f;
cursor: pointer;
}
.menu ul{
flex-direction: column;
}
.menu li a{
display: block;
}
#check:checked ~ .menu{
height: 174px;
}
Este es el código css de todo mi contenido
main{
position: relative;
top: 60px;
}
.content-one{
width: 98%;
margin: auto;
}
.content-portada{
width: 100%;
height: 319px;
background-image: url(../imagenes/notebook.jpg);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}
@media screen and (max-width:480px){
.content-portada{
background-size: 480px;
}
}
.content-text{
width: 400px;
margin: auto;
text-align: center;
position: relative;
top: 60px;
}
.content-text h4{
color:white;
font-size: 40px;
font-weight: 100;
}
.content-text h2{
color: white;
font-size: 36px;
font-weight: 100;
}
.content-text h3{
color:white;
font-size: 40px;
font-weight: bold;
}
@media screen and (max-width:480px){
.content-text{
width: 90%;
}
}
/*CONTENT TWO*/
.content-two{
width: 100%;
padding: 40px 0px;
background: #f2f2f2;
}
.content-details{
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.content-item2{
width: 220px;
text-align: center;
margin: 10px 20px;
}
.icon-heart, .icon-laptop, .icon-support{
color:#e47171;
font-size: 30px;
}
/*CONTENT THREE*/
.content.three{
width: 100%;
background: #f7f7f7;
}
.content-module{
width: 80%;
margin: auto;
text-align: center;
padding: 0px 40px;
}
.content-module h3{
}
.content-module img{
margin-top: 40px;
margin: 20px;
transition: all 300ms;
}
.content-module img:hover{
transform: rotate(-10deg);
transition: all 300ms;
cursor: pointer;
}