969470142 javizame1@gmail.com

sitio web responsive parte 5 iniciando estilos index

Si tienes problemas con el código puedes copiar y pegarlo desde aquí:

 

Código css:estilo.css

*{

                box-sizing: border-box;

                margin: 0;

                padding: 0;

}

body{

                font-family: tahoma;

}

.flex{

                display: flex;

                flex-wrap: wrap;

                justify-content: center;

                align-items: center;

}

.modificador{

                width: 100%;

                margin: auto;

}

header{

                background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../images/fondo.jpg);

                height: 100vh;

                background-position: center;

                background-size: cover;

}

.cabecera{

                width: 100%;     

}

.logo{

                width: 100%;

                float: right;        

}

.franja{

                width: 100%;

                margin-top: 40px;

}

.menu{

                width: 100%;

                margin-top: 50px;

                height: 0;

                overflow: hidden;

                transition: height .3s linear;

                z-index: 1000;

}

.mostrar{

                height: 300px;

}

.lista{

                list-style: none;

}

.link{

                text-decoration: none;

                color: white;

                font-weight: bold;

                display: block;

                margin-left: 20px;

                text-align: center;

                padding: 20px;

                background: #fba919;

}

.link:hover{       

                background: #d30203;  

}

.seleccion{

                background: #d30203;

}

.icon-menu{

                cursor: pointer;

                display: block;

                width: 40px;

                height: 40px;

                text-align: center;

                line-height: 40px;

                color: white;

                border: 2px solid white;

                font-size: 1.5em;

                border-radius: 5px;

}

.texto{

                position: absolute;

                width: 50%;

                top: 50%;

                left: 50%;

                transform: translate(-50%,-50%);           

}

.titulo{

                color: white;

                font-size: 40px;

}

.conocenos{

                margin-top: 40px;

}

.boton{

                border:2px solid #d30203;

                padding: 10px;

                text-decoration: none;

                color: white;

                border-radius: 20px;

}

.boton:hover{

                background: #d30203;  

}

 

Si te gusta estar al tanto con este contenido que ofrezco gratuitamente no solo de html, también Photoshop, ccorel draw, ofimática, soporte técnico, etc. Visita mi canal de youtube y suscribe para más contenido valioso que te servirá para tu formación profesional.

 

http://www.youtube.com/subscription_center?add_user=javizame

 

página de Facebook: https://www.facebook.com/Multiservicios-Zavaleta-280123468771702/

 

twitter: https://twitter.com/javizame

Sitio web responsive desde cero

Este curso tiene 2:50 horas de puro codigpo bien explicado

Mas informacion

Accede