Scribd
Upload
86 views

INFORMACIÓN #12 - Signed

Uploaded by

jvega
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views

INFORMACIÓN #12 - Signed

Uploaded by

jvega
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

INFORMACIÓN Nº 12

Profesor : José Eduardo Vega Estrada Semana: 12

Semestre :V Turno : Diurno/Nocturno


__________________________________________________________________________________

DISEÑANDO PÁGINA CON ANIMACIONES


Celular

1
Desktop

Página : Index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Responsive</title>
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="contenedor">
<div id="datos">
<div id="dir">
<p>Direccion : Av. Bolívar n° 100</p>
<p>Telefono : 2875987</p>
</div>
<div id="redes">
<span class="icon-facebook"></span>
<span class="icon-instagram"></span>
<span class="icon-twitter"></span>
</div>
</div>
<nav id="cabecera">
<a href="#" class="enlace">
<img src="img/logotipo.png" alt="" class="logo">

2
</a>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<span class="icon-menu"></span>
</label>
<ul class="menu">
<li><a class="active" href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<section id="banner">
<div class="slider">
<section class="contenido-slider" id="caja1">
<div>
<h2>DESARROLLO WEB</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Contáctanos</a>
</div>
</section>
<section class="contenido-slider" id="caja2">
<div>
<h2>DISEÑO WEB</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Contáctanos</a>
</div>
</section>
<section class="contenido-slider" id="caja3">
<div>
<h2>APLICATIVOS MÓVILES</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Contáctanos</a>
</div>
</section>
<section class="contenido-slider" id="caja1">
<div>
<h2>DESARROLLO WEB</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Contáctanos</a>
</div>
</section>
</div>

3
</section>
</div>
<script src="js/deslizar.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Archivo : general.css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;800&display=swap');
*{
margin: 0;
padding: 0;
font-family: nunito;
box-sizing: border-box;
}
p{
font-size: 12pt;
color: #ccc;
}
h2{
font-size: 20pt;
margin-top: 20px;
margin-bottom: 20px;
color: deepskyblue;
}

Archivo : estilos.css

#contenedor{
width: 100%;
height: auto;
display: grid;
grid-template:
"redes" 50px
"menu" 100px
"banner" 700px
"bienvenida" auto
"servicios" auto
"accion" auto
"teem" auto
"proyectos" auto
"pie" auto/1fr;

4
}
#datos{
grid-area: redes;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: center;
}
#dir{
width: 60%;
margin-top: 5px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#redes{
width: 30%;
height: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#redes span{
color: white;
cursor: pointer;
}
#redes span:hover{
color: yellow;
filter: drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow);
}
#cabecera{
grid-area: menu;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.logo{
width: 120px;
margin-top: 15px;
margin-left: 20px;
}
.icon-menu{

5
color: deepskyblue;
font-size: 2rem;
font-weight: bold;
cursor: pointer;
}
.icon-menu:hover{
color:black
}
.menu{
width: 100%;
height: auto;
background-color: rgba(0, 0, 0, .9);
position: absolute;
top: 100px;
left: -100%;
display: flex;
flex-wrap: wrap;
transition: 1s ease;
z-index: 20;
}
.menu li{
width: 100%;
border: 1px solid rgba(255, 255, 255, .2);
list-style: none;
}
.menu li a{
color: whitesmoke;
display: block;
text-decoration: none;
line-height: 10.5;
text-align: center;
font-size: 1rem;
font-weight: bold;
letter-spacing: 1px;
}
.menu li a.active,li a:hover{
background-color: deepskyblue;
color: black;
}
#check{
display: none;
}
#check:checked ~.menu{
left: 0;

6
}
#banner{
grid-area: banner;
overflow: hidden;
}
.slider{
width: 100%;
height: 100%;
display: flex;
position: relative;
margin-bottom: 80px;
}
.contenido-slider{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.contenido-slider h2{
text-align: justify;
font-size: 2rem;
color: yellow;
font-weight: 800;
margin-left: 50px;
}
.contenido-slider p{
text-align: justify;
font-size: 16pt;
color: whitesmoke;
font-weight: 300;
margin-left: 50px;
margin-bottom: 30px;
}
.contenido-slider a{
text-decoration: none;
background-color: darkblue;
padding: 15px 25px;
color: whitesmoke;
border: 2px solid white;
border-radius: 10px;
margin-left: 50px;

7
}
#caja1{
background: url(../img/banner.jpg);
background-size: cover;
background-position: center;
}
#caja2{
background: url(../img/banner2.jpg);
background-size: cover;
background-position: center;
}
#caja3{
background: url(../img/banner3.jpg);
background-size: cover;
background-position: center;
}
#caja1{
background: url(../img/banner.jpg);
background-size: cover;
background-position: center;
}
.contenido-slider a:hover{
background-color: steelblue;
}
@media(min-width:900px){
#dir{
flex-wrap: wrap;
}
#dir p{
margin-right: 50px;
}
#redes{
width: 10%;
}
.logo{
margin-left: 150px;
}
.checkbtn{
display: none;
}
.menu{
width: 50%;
flex-wrap: nowrap;
top: 0;

8
left: 50%;
padding-top: 30px;
background-color: white;
padding-right: 50px;
}
.menu li{
border: none;
}
.menu li a{
line-height: 3;
color: black;
}
.contenido-slider h2{
font-size: 3rem;
}
.contenido-slider p{
margin-bottom: 60px;
}
}

You might also like